メインコンテンツまでスキップ
バージョン: 開発中

DicksでWebフロントを作る

@dicks/browser@0.2.0 をDicks Language 0.3.1と組み合わせます。ソースは browser、言語の配布バージョンは 0.3.1 です。状態・イベント処理・画面構築をDicksで書き、JavaScriptはDOMとブラウザ通信を受け持ちます。

実行する​

対応する言語チェックアウトで実行します。

npm ci --ignore-scripts
DICKS_INSTALL_CHECKED=1 npm run check
node bin/dicks lock --project examples/browser-counter
node bin/dicks build --project examples/browser-counter
node bin/dicks run --project examples/browser-counter

期待結果は http://127.0.0.1:8787 の画面で初期値0をボタンで1・2と増やせることです。DOM試験でもコンパイルした実コードとクリックで確認しています。開発サーバーはloopback限定で、生成した公開ファイルだけを配信します。

新しいプロジェクトは target: "browser" と @dicks/browser 依存を指定し、lock、buildの順に実行します。同梱バージョンは {"builtin":"browser"} で固定できます。生成したbrowser.mjsのmountを既存Viteアプリへ組み込めます。browser.portとbrowser.stylesはローカル配信ポートとCSSです。モジュール分割は既存のmodules/exports/importsを使います。

画面とイベント​

エントリーはJSONイベントを一つ受け取り、JSON Viewを一つ返します。ノードはtag/attrs/children/key/on、文字は#textです。elementとtextが組み立てを補助します。raw HTML、script、インラインイベント属性、危険なURLは拒否します。

state/saveはmountごとの状態、requestは同一origin HTTPです。HTTP成功時の戻り値にはstatus/headersと、JSONならdata、その他ならbodyがあります。通信成功とHTTP成功は別に確認します。encodeとqueryは境界を守って本文・クエリを生成します。

click、submit、change、input、Enter/Escapeを扱い、フォームの値をイベントへ渡します。キー付き要素と入力フォーカスを保持し、inputは最大2000ms debounceできます。後続クリック・送信前に未反映の入力を処理し、イベントは直列に実行します。disposeは通信とハンドラーを停止します。

互換性・移行・制約​

既存module/cloudflare/discordターゲットと既定実行上限は変えません。browserアダプターがホスト側でbrowserプロファイルを選びます。ソースから上限やeffectを追加できません。既存アプリの移行は不要です。新機能を使う際はcompiler、runtime、ライブラリ、lockfileをまとめて更新してください。

JSON/通信256KiB、View5000ノード・深さ48、状態128キー、待機イベント32件、通信30秒までです。runtimeのJSON要素数・深さ制限も適用されるため一覧をページ分割します。SSR/hydration、React互換、ファイルアップロード、ネイティブUIは未実装です。ブラウザにserver secretを渡してはいけません。詳しい契約は 固定したライブラリの説明 を参照してください。