frontj

v0.4.1

Published

4 years ago

Static HTML generator.

0High
0Medium
0Low

siromath

frontj javascript typescript

frontJ

Install

npm install -D frontj

Example

import { writeFileSync } from 'fs'
import { createElement } from 'frontj'
import { build } from '@frontj/builder'

const html = createElement('html')
const head = createElement('head')
const title = createElement('title')
const body = createElement('body')
const h1 = createElement('h1')
const p = createElement('p')
const br = createElement('br', { children: false })
const input = createElement('input', { children: false })
const div = createElement('div')

const text = (...contents) => p`.text`(
  ...contents
)

const contents = html(
  head(
    title('frontJ example.'),
  ),
  body(
    h1`.heading`('Hello!'),
    text('foo', br(), 'bar'),
    input`[type="checkbox"][checked]`(),
    div`#id.class1.class2`()
  )
)

build({
  routes: {
    '/': contents
  }
})

HTML(整形後):

<!DOCTYPE html>
<html>
  <head>
    <title>frontJ example.</title>
  </head>
  <body>
    <h1 class="heading">Hello!</h1>
    <p class="text">foo<br>bar</p>
    <input type="checkbox" checked>
    <div id="id" class="class1 class2"></div>
  </body>
</html>

createElementメソッドで各要素を生成する代わりに、@frontj/elementsパッケージからimportすることを推奨します。 HTMLファイルの出力には@frontj/builderを使用することを推奨します。

Documentation

Methods

`$if`

condition引数の値によってvalueまたはelseValueの値を返します。 FrontJElement関数内で値を出し分ける際に有用です。

$if(condition: boolean, value: string | number, elseValue: string | number = ''): string | number

| 引数 | 説明 | | --- | --- | | condition | この値がtrueの場合はvalueの値、falseの場合はelseValueの値が返されます。 | | value | conditionがtrueの場合に返される値。 | | elseValue | conditionがfalseの場合に返される値。初期値は空文字です。 |

const hasPosts = false

div(
  h2('関連記事'),
  $if(hasPosts,
    article(/* ... */),
    p('記事が見つかりませんでした。')
  )
)

/*
<div>
  <h2>関連記事</h2>
  <p>記事が見つかりませんでした。</p>
</div>
*/

`createElement`

FrontJElement型の関数を返します。

createElement(name: string, options: FrontJCreateElementOptions): FrontJElement

| 引数 | 説明 | | --- | --- | | name | HTML要素名。'html'が渡された場合、このcreateElementが返したFrontJElementを実行時すると自動的に'<!DOCTYPE html>'が付与されます。 | | options | 各種オプション設定用オブジェクト。設定項目はFrontJCreateElementOptions型の項目に記載しています。 |

Functions

`FrontJElement`

createElementメソッドの返り値として存在し、HTML要素の文字列を返します。

// `FrontJElement`の部分は実際にはタグ名などになります。

FrontJElement(...contents: (string | number)[]): string

// 要素の属性を設定する場合はテンプレート文字列を使用します。

FrontJElement`TemplateStrings`: (...contents: (string | number)[]) => string

| 引数 | 説明 | | --- | --- | | contents | 省略可能で、カンマ区切りで文字列または数値を渡せます。渡された値は結合されHTML要素内に出力されます。 | | TemplateStrings | CSSセレクタのような文字列を渡して、要素の属性を設定することができます。${}には文字列または数値を入力できます。 |

const div = createElement('div')

div('Hello', 1) // => <div>Hello1</div>

div`#id.class`('Hello', 1) // => <div id="id" class="class">Hello1</div>

div`#id${'1'}.class${1}`('Hello', 1) // => <div id="id1" class="class1">Hello1</div>

Types

`FrontJCreateElementOptions`

createElementメソッドのoptions引数の型として使用されます。

FrontJCreateElementOptions {
  children?: boolean;
}

| 引数 | 説明 | | --- | --- | | children | この要素が子要素(テキストノードも含む)を持てるかを真偽値で指定します。falseの場合、FrontJElement関数に渡した引数は無視され、閉じタグが無いHTML要素として出力されます。デフォルトはtrueです。 |

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme