WebComponents + TypeScriptでオレオレフロントエンドフレームワーク作った

木瓜丸です。つまらんものを作ったので、zennに供養しようと思います。

実は数日前までTypeScriptというものに触れたことがなかったのですが、急遽必要になったので覚えたところ、これとWebComponentsでリアクティブなんたら的なことができるんじゃないか？と思って試作してみました。

https://github.com/boke0/onigiri

最近仮想DOMをしようしないフロントエンドフレームワーク？のSvelteとかいうものの存在を知ったので、その技術を真似して仮想DOMを使わずに作ってみました。

使い方

リポジトリにあるindex.tsを読み込み、Componentクラスとhtmlタグ関数を読み込み、Componentを継承したクラスを作り込んでいく形で作ります。
作ったコンポーネントはcustomElements.defineでタグにしましょう。

import {Component, html} from '../index.ts';

class TestComponent extends Component{
    init() {
        return {
            attr: 'heheh',
            greet: 'hello'
        }
    }
    update(state, mes) {
        return {
            attr: state.attr,
            greet: state.greet + 'o'
        }
    }
    render(state) {
        return html`
            <div
                id=${state.attr}
                @click=${e => this.dispatch('update', state.greet + 'hhhh')}
            >
                ${
                    state.greet.length < 20
                    ? html`<h1>success!</h1>`
                    : html`<div>${state.greet}</div>`
                }
            </div>
        `;
    }
}

customElements.define('test-component', TestComponent);

init, update, renderというのはElmの真似をしました。最近The Elm Architectureがマイブームです。

結果

作ってみて

たったの300行程度でサマになったのが自分でも驚きました。そこまで作り込んでないのでパッケージ化もしていないですが、使えそうだったらパッケージ化とかパフォーマンスの検証とかしてみたいです。よかったら意見ください(^^)

---

追記

おそまつながらパッケージ化しました。
『おにぎり.js』といいます。仲良くしてください。