vanilla-lynx

Element PAPI を使用して Vanilla Lynx をオーサリングする

このスキルは、ReactLynx や JSX を使用せずに、Element PAPI と Lynx Runtime API を直接用いて Vanilla Lynx をオーサリングするために使用します。ビルド不要の .lynxml と Rspeedy を同等の出力フォーマットとして扱います。

出力フォーマットを選択する

• ユーザーが単一ファイル、ビルド不要または直接読み込み可能な出力を求めている場合、またはビルドステップを追加しないよう明示している場合は、.lynxml を選択します。
• ユーザーが Rspeedy、プロジェクトのスキャフォールドまたはビルド設定、あるいはビルドによって生成されるアプリバンドルを求めている場合は、Rspeedy を選択します。
• app、page、card、project などの一般的な言葉だけでは、フォーマットは選択されません。完全なオーサリング要求に、フォーマットを区別する納品要件やビルド要件がない場合、または競合するフォーマットのシグナルがある場合は、成果物を生成する前に簡潔な確認を 1 回行います。ユーザーが両方を要求しない限り、両方の完全なフォーマットを生成しないでください。
• ソースレベルに焦点を当てた質問やスニペットの要求については、出力フォーマットの決定を強制せずに、要求された範囲に回答します。

基本ルール

• ReactLynx、JSX、仮想 DOM、ブラウザ DOM API を使用しないでください。
• 完全なオーサリング要求に対しては、選択したフォーマットで完全な成果物を納品します。サンプルのアセットや参照パスだけを返さないでください。
• Element PAPI のツリー作成、変更、ライフサイクルレンダリング、UI 更新は、メインスレッドのソース内に保ちます。.lynxml の場合は <script thread="main">、Rspeedy の場合は main-thread.ts です。バックグラウンドスレッドのソースから Element PAPI API や __FlushElementTree() を呼び出さないでください。バックグラウンドスレッドは、メインスレッドが適用およびフラッシュするためのシリアライズ可能なパッチを送信するだけです。
• 初回レンダリングは SDK のフラッシュに任せます。以降の UI 変更の後に __FlushElementTree() を呼び出します。
• バックグラウンドスレッドのソースは、より重いビジネスロジック、非同期処理、タイマー、ネイティブ呼び出し、データ処理の場合にのみ追加します。スレッド間のペイロードはシリアライズ可能に保ちます。
• lynx.getEngine() は、__RenderPage、__UpdatePage、__DestroyLifetime などエンジン定義のライフサイクルイベントにのみ使用します。アプリ定義のスレッドローカルイベントやスレッド間イベントには決して使用しないでください。ライフサイクルハンドラーは、実装でイベントペイロードが不要な場合、それを無視してもかまいません。長期間存続するリスナーやスレッド間リスナーには安定したハンドラー参照を保持し、破棄時には同じコンテキストとイベント名で削除します。インラインのコールバックを登録しないでください。
• 外部バンドルのビルドと読み込みは分離し、バックグラウンド専用に保ちます。外部モジュールはプレーンな TypeScript または JavaScript でなければなりません。それらの中で ReactLynx、JSX、ReactLynx トランスフォームを決して使用しないでください。rslib のエントリーキーは、最初の loadScript 引数と一致させてください。

参照のルーティング

現在のタスクに必要な参照ファイルのみを読んでください。それらに明記された制約を、一般的なガイダンスに置き換えるのではなく、そのまま守ってください。

タスク	参照先
完全な .lynxml ドキュメントをオーサリング、組み立て、またはレビューする	references/lynxml.md
完全な Rspeedy プロジェクトまたはビルドワークフローをオーサリングまたはレビューする	references/rspeedy-project.md
メインスレッドの Element PAPI ツリーを構築する、または UI を更新する	references/main-thread.md
ランタイムイベント API を選択する、またはライフサイクルイベントを配線する	references/event.md
バックグラウンドスクリプトでより重いロジックを実装する	references/background.md
Lynx のスタイリングとレイアウトルールを使用して CSS をオーサリングまたはレビューする	references/style.md
rslib を使用してバックグラウンドスレッドのコードを外部バンドルにビルドする	references/external-build.md
実行時にバックグラウンドスレッドの外部バンドルを読み込む、または呼び出す	references/external-runtime.md

ランタイム検証

生成された .lynxml に対しては、変更されていない成果物を含むディレクトリで npx http-server . を実行し、そのサーバーが出力するアドレスのうち対象デバイスから到達可能なものを使用してください。Rspeedy プロジェクトの場合は、汎用の静的サーバーではなく、そのプロジェクトに設定されたビルドおよび開発サーバーのワークフローを使用してください。その後、lynx-devtool スキルを使用して、クライアントの検出、到達可能な URL を開く操作、ランタイムの検査、コンソールログ、スクリーンショット、およびインタラクションを行います。ここでデバイスデバッグのワークフローを重複して説明したり、agent-lynx を成果物ビルダーやサーバーとして提示したりしないでください。