Zenn
Closed9

FicusJSを触ってみる

Web Components
yamanokuyamanoku

これはなに

https://github.com/ficusjs/ficusjs

Web Components を使ったアプリケーション開発をするためのライブラリセット。

  • 高速で軽量な Web コンポーネントを作成するための関数 (2.01 KB gzipped)
  • アプリケーションの状態を保存する高速かつ軽量なストレージを作成する関数（1.22 KB gzipped)
  • 高速で軽量なパブリッシュ/サブスクライブイベントバスを作成する関数（274 B gzipped)

ドキュメント

https://docs.ficusjs.org/

yamanokuyamanoku

まず書いてみる

https://docs.ficusjs.org/docs/getting-started/

どうやら index.html だけで開発できちゃうっぽい。
以下を<body>内に書いてあげる

<hello-world></hello-world>

<script type="module">
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers/lit-html'
import { createComponent } from 'https://cdn.skypack.dev/ficusjs/component'

createComponent('hello-world', {
  renderer,
  handleClick (e) {
    window.alert('Hello to you!')
  },
  render () {
    return html`<div>
<p>Test component</p>
<button type="button" @click="${this.handleClick}">Click me!</button>
</div>`
  }
})
</script>

生成結果：https://codepen.io/ducksoupdev/pen/GRZPqJO

生成結果のGifアニメーション。ボタンをクリックしてアラートが表示されている

yamanokuyamanoku

機能

  • 関数型プログラミングパターン
  • 宣言的コンポーネントを作成
  • リアクティブコンポーネント
  • 独自のレンダラーを選択している
  • 関数によるコンポーネント拡張
    • ストア
    • イベントバスとの連携
    • ステートトランザクション
    • CSSスタイル
  • ストアによるアプリケーションの状態管理が可能
  • アプリケーション・イベントバス
  • スモール・フットプリント
    • 全機能 (4.12 KB gzipped)
    • コンポーネント (2.01 KB gzipped)
    • ストア (1.22 KB gzipped)
    • イベントバス (274 B gzipped)
  • 各機能を個別にロードすることも、全機能バンドルで使用することも可能
  • 依存関係なし
  • 全てのサーバーサイド/クライアントサイドフレームワークに対応
yamanokuyamanoku

スタイルを付与する

withStyles を使う。

import { createComponent, withStyles } from 'https://cdn.skypack.dev/ficusjs'
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers/lit-html'

createComponent(
  'my-component',
  withStyles({
    renderer,
    styles () {
      return `
        my-component button {
          background-color: yellow;
          color: black;
        }
      `
    },
    render () {
      return html`<button type="button">Click me!</button>`
    }
  })
)

my-component button がスタイルあたっている様子

外部のCSSを読み込む

URL を読み込む

{
  styles () {
    return 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css'
  }
}

通常のスタイルと外部CSSを複合的に使う

配列で return しておく

{
  styles () {
    return [
      'https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css',
      `
        my-component button {
          background-color: yellow;
          color: black;
        }
      `
    ]
  }
}
このスクラップは2021/04/11にクローズされました