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

    0.4.1 • Public • Published

    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(conditionboolean, valuestring | number, elseValuestring | number = '')string | number
    引数 説明
    condition この値がtrueの場合はvalueの値、falseの場合はelseValueの値が返されます。
    value conditiontrueの場合に返される値。
    elseValue conditionfalseの場合に返される値。初期値は空文字です。
    const hasPosts = false
     
    div(
      h2('関連記事'),
      $if(hasPosts,
        article(/* ... */),
        p('記事が見つかりませんでした。')
      )
    )
     
    /*
    <div>
      <h2>関連記事</h2>
      <p>記事が見つかりませんでした。</p>
    </div>
    */

    createElement

    FrontJElement型の関数を返します。

    createElement(namestring, optionsFrontJCreateElementOptions)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

    Install

    npm i frontj

    DownloadsWeekly Downloads

    0

    Version

    0.4.1

    License

    MIT

    Unpacked Size

    277 kB

    Total Files

    265

    Last publish

    Collaborators

    • siromath