@frontj/elements
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

@frontj/elements

frontJcreateElement関数を様々な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.includeTitleElementtrueのとき)tiltleの内容を文字列で設定します。
description descriptionog: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">
*/

License

MIT

Package Sidebar

Install

npm i @frontj/elements

Weekly Downloads

8

Version

0.2.1

License

MIT

Unpacked Size

418 kB

Total Files

210

Last publish

Collaborators

  • siromath