Reactから移植する

既存のReactインターフェースをNoWayOSへ移します。Screen Compilerのカバレッジレポートで測り、書いたまま変換できるもの、変えるもの、アプリケーションへ移すものを確かめ、出しうるすべてのエラーの読み方を知ります。

一からやり直す必要はありません。Reactの画面の大部分は、書いたまま変換できます。レイアウト、テキスト、ボタンとフィールド、条件とリスト、画面独自の小さなコンポーネントです。残りは短い書き直しか、アプリケーションへ移す作業です。仕事が1つだけのコンピューターでは、そこが本来の置き場所です。

まず測る

1行も変える前に、コードがすでにどこまで届いているかをScreen Compilerに尋ねてください。Reactから画面を作るの2つのリポジトリの隣にアプリケーションをクローンし、開発コンテナから見えるようにして、そのソースにカバレッジレポートを実行します。

cd nowayos-work # holds nowayos and screen-compiler
git clone https://example.com/your-app.git my-app
cd screen-compiler
make run ARGS="audit ../my-app/src"

レポートはそのフォルダー以下のすべての.tsxファイルを読み、見つけた構文要素を数えます。要素、props、スタイルプロパティ、hooks、リスト、条件、演算子、importです。それぞれに判定が付きます。

サブセット内：サブセットが認める形で使われていれば変換されます。
ロードマップ上：まだ変換されません。レポートは、それを変換する予定のステップを示します。
設計上の対象外：今後も変換されません。レポートはその理由を示します。
不明：Screen Compilerが認識できないものです。不明なものが変換済みとして数えられることはありません。

続いてロードマップのステップとそれぞれが必要な回数、そして各ファイルの結果が並びます。ファイルが「変換できる」のはcheckが通したときだけなので、冒頭の数字がそのまま本当の数字です。レポートは構文要素の名前を挙げるだけで、コードを引用しないため、安心して共有できます。コンパイラーと同じく、信頼できるコードにだけ実行してください。

何が何に対応するか

React DOMでは	サブセットでは
flexboxでレイアウトした`<div>`	`<Column>`または`<Row>`。`gap`、`padding`、宣言済みの`style`を使います
`<h1>`、`<p>`、`<span>`、`<label>`	役割を持つ`<Text>`：`title`、`heading`、`body`、`label`、`caption`、`display`
`<button onClick={…}>`	`<Button onClick={props.onSave}>`：コールバックpropがアクションになります
`<input>`、チェックボックス、ラジオボタン、`<select>`	`<TextInput>`、`<Checkbox>`、`<RadioGroup>`、`<Select>`。それぞれ`id`を持ち、アプリケーションはそれで値を読み書きします
`{ready && <X/>}`、`? :`、`!ready`、`step === "review"`	アプリケーションが設定するグループとスイッチ
`items.map(…)`	行：ファイル内のリスト、または上限まで切り詰めたpropのリスト（`props.items.slice(0, 5)`）
`Hello, {name}!`	アプリケーションが埋めるスロットの前後に、固定の語句をコンパイルして入れます
独自コンポーネントとフラグメント（画面のファイル内、またはその隣のファイル）	ビルド時に展開され、画面を平らに書いたのと同じになります
`style={{ padding: "16px" }}`, `color: "var(--text-muted)"`	宣言済みのスタイルプロパティ。長さはレイアウト単位、色はテーマの色です

各コンポーネントが受け付けるものは、Reactから画面を作るの表に正確に載っています。表はScreen Compiler自身の表から作られるため、受け付ける内容とずれることはありません。

アプリケーションへ移すもの

デバイス上ではJavaScriptは動きません。画面は固定のツリーで、アプリケーションが番号付きのアクション、フィールド、スロット、グループ、スイッチを通して動かします。そのため、いくつかのものは設計上の対象外です。それぞれに理由があります。

状態とhooks（useState、useEffect、コンテキスト）。状態はアプリケーションが持ち、画面に何を表示するかを決めます。
フィールドのvalue、checked、onChange。 アプリケーションはフィールドをidで読み書きします。
スプレッドしたprops。 中身はコードを実行するまでわかりません。
計算したスタイル、色の値、グローバルなスタイルシート。 スタイルは静的です。色はテーマの色を使うので、大きな文字のテーマがすべての画面の色を変えられ、コントラストも検査されます。カスケードはありません。
アニメーション。
上限のないリスト。 .slice(0, 5)で切り詰めて、画面が表示できる行数を知らせてください。
propと文字列の===以外の比較、画面の関数内のifやswitch。 答えはアプリケーションで求め、propとして渡してください。
パッケージのコンポーネントと、画面のフォルダーの外にあるファイル。 画面が読むのは自分のフォルダーとその中だけです。コンポーネントは画面の隣に置いてください（./parts/header）。
propを呼ぶ以上のことをするハンドラー。 onClick={() => props.onSave()}は変換できます。それ以上はアプリケーションの仕事です。

ロードマップの次の段階

コードに必要なとき、カバレッジレポートは次の予定されたステップを示します。

CSSレイアウトの拡充：flexの伸長、alignSelf、最小・最大の高さ、辺ごとのpadding、margin
一般的なHTML要素（それぞれ1つの固定ルールで対応）
CSSモジュール（1要素に1クラス）
重ね合わせ：要素を重ねて配置すること
画像と入力のマスク

ステップが実装されるまで、その構文要素は推測せずに拒否します。どのステップも同じルールを守ります。正確に、さもなければ変換しない、です。

エラーの読み方

エラーはファイル、行、列、コード、何が問題か、そして1行のヘルプを示します。

web-search.tsx:16:28: error[unknown-name]: `query` is not a prop of the component
 help: text from the application must be a prop: take it as one, function Screen({ query }) { … }

エラーが1つでもあれば、何も書き出しません。コードは次のとおりです。

コード	意味	対処
`syntax`	ファイルが正しいTSXでないか、すべてのモジュールが守る規則に反しています。	示された位置のコードを直してください。
`unsupported`	サブセット外の構文要素です。	ヘルプに従い、サブセットで書き直すか、その処理をアプリケーションへ移してください。
`unknown-element`	キットの要素でないか、importされていない要素です。	`"nowayos:kit"`からimportするか、キットの要素を使ってください。
`unknown-prop`	要素が受け付けないpropまたはスタイルプロパティです。	表がその要素に挙げているものを使ってください。
`invalid-value`	要素が受け付けるpropに、受け付けない値が渡されています。	表に挙げた種類の値を渡してください。
`missing-prop`	要素に必要なpropが渡されていません。	渡してください。表では太字で示しています。
`invalid-children`	要素が持てないものを持っています。たとえば`<Screen>`に子が2つ、`<Column>`にテキストがある場合です。	まとめるか、テキストを`<Text>`に入れてください。
`unknown-name`	prop、デザイントークン、importのどれでもない名前です。	propとして受け取るか、宣言してください。
`duplicate-name`	生成コードで2つのものが同じ名前になります。たとえば`isReady`と`is_ready`です。	どちらかの名前を変えてください。
`reserved-name`	Rustや生成コードが予約している名前です。たとえば`type`です。	名前を変えてください。
`limit`	サイズ、深さ、数の上限を超えています。	短くするか、コンポーネントに分けてください。
`no-screen`	ファイルに画面コンポーネント（`<Screen>`を返す関数）がありません。	1つエクスポートしてください。
`internal`	Screen Compiler自体の不具合です。	原因となった入力を添えて報告してください。

必要な構文要素がロードマップ上にあって、まだ実装されていない場合は、レポートを添えてお知らせください。どのステップが最も重要かがわかります。