@frontj/elements
frontJのcreateElement
関数を様々なHTML要素に適用したものをエクスポートしたパッケージです。
いくつかの組み込みコンポーネントも含まれています。
Install
npm install -D @frontj/elements
Example
import {
html,
head,
title,
body,
h1,
p,
br,
input,
Meta,
Favicon,
LoadCss
} from '@frontj/elements'
import { build } from '@frontj/builder'
const text = (...contents) => p`.text`(
...contents
)
const contents = html(
head(
title('frontJ example.'),
Meta({ description: 'Description' }),
Favicon({ href: '/favicon.ico' }),
LoadCss('style.css')
),
body(
h1`.heading`('Hello!'),
text('foo', br(), 'bar'),
input`[type="checkbox"][checked]`()
)
)
build({
routes: {
'/': contents
}
})
HTML(整形後):
<!DOCTYPE html>
<html>
<head>
<title>frontJ example.</title>
<meta name="description" content="Description">
<meta property="og:description" content="Description">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="heading">Hello!</h1>
<p class="text">foo<br>bar</p>
<input type="checkbox" checked>
</body>
</html>
Documentation
Components
AppleTouchIcon
apple-touch-iconの設定がされたlink
タグを返します。
AppleTouchIcon(params: Params): string
引数 | 説明 |
---|---|
params | 返すlink タグの内容となるオブジェクト。設定項目は下記に記載しています。 |
params
の設定項目:
項目 | 説明 |
---|---|
sizes | 省略可能で、sizes 属性の値を文字列で設定します。 |
href |
href 属性の値を文字列で設定します。 |
AppleTouchIcon({ sizes: '180x180', href: '/apple-touch-icon.png' })
/*
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
*/
AppleTouchIcon({ href: '/apple-touch-icon.png' })
/*
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
*/
Favicon
faviconの設定がされたlink
タグを返します。
Favicon(params: Params): string
引数 | 説明 |
---|---|
params | 返すlink タグの内容となるオブジェクト。設定項目は下記に記載しています。 |
params
の設定項目:
項目 | 説明 |
---|---|
type | 省略可能で、type 属性の値を文字列で設定します。 |
href |
href 属性の値を文字列で設定します。 |
Favicon({ type: 'image/png', href: '/favicon.png' })
/*
<link rel="icon" type="image/png" href="/favicon.png">
*/
Favicon({ href: '/favicon.ico' })
/*
<link rel="icon" href="/favicon.ico">
*/
LoadCss
`<link rel="stylesheet" href="${path}">`
の結果を返します。
LoadCss(path: string): string
引数 | 説明 |
---|---|
path | CSSファイルへのパス。 |
LoadJs
`<script src="${path}"></script>`
の結果を返します。
LoadJs(path: string): string
引数 | 説明 |
---|---|
path | JavaScriptファイルへのパス。 |
Meta
様々なmeta
タグを返します。
Meta(params: Params, options?: Options): string
引数 | 説明 |
---|---|
params | 返すmeta タグの内容となるオブジェクト。設定項目は下記に記載しています。 |
options | 各種オプション設定用オブジェクト。設定項目は下記に記載しています。 |
params
の設定項目:
項目 | 説明 |
---|---|
charset |
charset の内容を文字列で設定します。 |
title |
og:title や(options.includeTitleElement がtrue のとき)tiltle の内容を文字列で設定します。 |
description |
description やog:description の内容を文字列で設定します。 |
viewport |
viewport の内容を文字列で設定します。 |
refresh |
refresh の内容を文字列で設定します。 |
ogTitle |
og:title の内容を文字列で設定します。title プロパティの値よりも優先され、options.autoOg の値に関わらずmeta タグを返します。 |
ogDescription |
og:description の内容を文字列で設定します。description プロパティの値よりも優先され、options.autoOg の値に関わらずmeta タグを返します。 |
ogUrl |
og:url の内容を文字列で設定します。 |
ogImage |
og:image の内容を文字列で設定します。 |
ogSiteName |
og:site_name の内容を文字列で設定します。 |
ogType |
og:type の内容を'website' , 'article' のいずれかで設定します。 |
twitterCard |
twitter:card の内容を'summary' , 'summary_large_image' , 'app' , 'player' のいずれかで設定します。 |
twitterSite |
twitter:site の内容を文字列で設定します。 |
twitterCreator |
twitter:creator の内容を文字列で設定します。 |
fbAppId |
fb:app_id の内容を文字列で設定します。 |
options
の設定項目:
項目 | 説明 |
---|---|
autoOg | 真偽値で、OGPタグを自動で返すか設定します。初期値はtrue です。 |
includeTitleElement | 真偽値で、params.title の値が入力されたtitle タグを返すか設定します。初期値はfalse です。 |
Meta({ charset: 'UTF-8' })
/*
<meta charset="UTF-8">
*/
Meta({ title: 'Title' }, { includeTitleElement: true })
/*
<meta property="og:title" content="Title">
<title>Title</title>
*/
Meta({ description: 'Description' })
/*
<meta name="description" content="Description">
<meta property="og:description" content="Description">
*/
Meta({ description: 'Description' }, { autoOg: false })
/*
<meta name="description" content="Description">
*/
Meta({ description: 'Description', ogDescription: 'OgDescription' })
/*
<meta name="description" content="Description">
<meta property="og:description" content="OgDescription">
*/
Meta({ viewport: 'width=device-width, initial-scale=1.0' })
/*
<meta name="viewport" content="width=device-width, initial-scale=1.0">
*/