tml v1.0が配信されました!!

はじめに

こんにちは。tmlというシンプルなJSフレームワークを開発しているくつしたです。

今回このフレームワークのバージョン1.0を公開したのでこれについて紹介したいと思います。

tmlについて

tmlは軽量でCDNで簡潔するReactのようなフレームワークで、(P)Reactに対するアドバンテージは

• 内部で利用しているhtmと含めても3kbと超軽量
• Web Componentとして使える
  などです。

実際に書いてみよう

カウンターとHelloworldを作ってみましょう。

<counter-app text="Hello, world!" />
<script type="module">
    import { $, compact } from 'https://cdn.jsdelivr.net/gh/kstdx/tml@1.0/dist/tml.min.js'

    const HelloWorld = (props) => compact($`<h1>${props.text}</h1>`)

    const Counter = function(props){
        this.init({ count: 0 })

        return $`
        <${HelloWorld} text=${props.text} />
        <button @click=${() => this.$count++}>increment</button>
        <p>${this.$count}</p>
        `
    }

    customElements.define('counter-app', compact(Counter))
</script>

こんな感じで簡単に書くことができます。
(JSFiddleはこちら)

パフォーマンスはどうなのか

例えば<${HelloWorld} />のようにコンポーネントを追加するときはこの要素を独自にWeb Componentに定義しているのでdocumentツリーと分けてShadow DOMで管理しており、更新も分けてすることができるのでパフォーマンスは良いと思います。

さいごに

現在ドキュメントも執筆予定なのでぜひ使ってみて下さい！