Qwikが面白そうなのでStarterでお試しメモ。

npm init qwik

starter+expressの構成をお試し。Windowsで試したところエラーが出たのでWSLを使う。qwikのバージョンは0.0.18-1

Client側

先にClient側のコードを見ていく。

npm run dev

htmlには2つのscript要素がある。

• qwik/src/qwikloader.ts
• Serializeされたprivate state(<script type="qwik/json">)

qwikloader.ts

イベントリスナーを設定する。イベントが発火したときに遅延読み込みするURLを探し、インポートする。

1. window.BuildEventsがtrueのときはwindow.qEventsにあるイベント
2. script要素のevent属性の値にあるイベント
3. documentのプロパティのうちonから始まるもの

の上からどれかのイベントにリスナーをdocumentへセットする。

イベントが発火した際はon:eventname属性のQRLからイベントハンドラーをインポートして実行する。また、document.__q_context__に要素・イベント・URLをセットする。documentのみで発火するイベントはon:eventname属性でquerySelectorAllしてそれぞれイベントハンドラーを呼ぶ。

今回インタラクティブなのは以下のinput要素のみ

<input q:obj="1" value="World" on:keyup="/src/h_main_main_onrender_input_onkeyup.js#Main_onRender_input_onkeyup[0]">

h_main_app_onrender_input_onkeyup.js

import * as qwik from "/node_modules/.vite/@builder_io_qwik.js?v=c1adecb2";
import { useEvent } from "/node_modules/.vite/@builder_io_qwik.js?v=c1adecb2";
export const App_onRender_input_onkeyup = ()=>{
    const [state] = qwik.useLexicalScope(); //--(1)
    const event = useEvent(); //--(2)
    const input = event.target;
    state.name = input.value; //--(3)
};

元のコードから(1)が追加されている。

useLexicalScope

1. getInvokeContextを呼び出し先ほどの__q_context__からInvokeContextを作る
2. URLからQRLを作る
3. イベントターゲットのon:q-render属性を持った祖先要素を引数にgetPropsを呼び出す
   1. stateをdeserializeし、readWriteProxyでラップしてhydrateする
   2. q:obj属性を持つ要素それぞれにnewQPropsを呼びQPropsを作成、対応するキーのstateを__qRefs__にセット
4. イベントターゲットのon:q-render属性を持った祖先要素のQPropsから値を取り出す