Reactから画面を作る

NoWayOSにはブラウザがなく、これからも持つことはありません。それこそが狙いです。それでも、デザイナーやフロントエンド開発者は、使い慣れた道具を手放す必要はありません。Screen Compilerは、宣言されたサブセットに沿ってTSXで書かれたReactの画面を、NoWayOSのUIランタイム用のRustに変換します。ビルド時に手元のマシンかCIで動き、デバイスに載ることは決してありません。

変換前

export function WelcomeScreen({ onStart, onHelp }: WelcomeProps) {
 return (
 <Screen>
 <Column gap={SPACE_SM} padding={SPACE_LG}>
 <Text id="title">Welcome</Text>
 <Text>Touch Start to begin.</Text>
 <Spacer />
 <Button id="start" onPress={onStart}>Start</Button>
 <Button onPress={onHelp}>Help &amp; accessibility</Button>
 </Column>
 </Screen>
 );
}

変換後

pub fn build<B: ui::UiBuilder>(b: &mut B) -> Result<Nodes<B::Node>, B::Error> {
 let n1 = b.text("Welcome")?; // welcome.tsx:17:9 <Text>
 let n2 = b.text("Touch Start to begin.")?; // welcome.tsx:18:9 <Text>
 let n4 = b.spacer(None)?; // welcome.tsx:20:9 <Spacer>
 let n5 = b.button("Start", actions::START)?; // welcome.tsx:21:9 <Button>
 let n6 = b.button("Help & accessibility", actions::HELP)?; // welcome.tsx:24:9 <Button>
 let n0 = b.column(ui::Layout::new().gap(super::tokens::SPACE_SM).padding(super::tokens::SPACE_LG), &[n1, n2, n4, n5, n6])?; // welcome.tsx:16:7 <Column>
 Ok(Nodes { root: n0, title: n1, start: n5 })
}

各ノードは、自分の元になったTSXの行と列を指し示しています。変換された画面は、その後NoWayOSのレンダラーで描画され、承認済みの画像とピクセル単位で一致しなければなりません。（リポジトリのfixtures/welcome.tsxと、そこから生成されたRustを短くしたものです。）

変換できるもの

Screen Compilerのキットで組み立てた画面です。Screen、Column、Row、Text、Button、TextInput、Checkbox、RadioGroup、Spacer、Card、Notice、HeaderBar、ProgressBar、Icon。加えて、定数としてのデザイントークン、アクションになるコールバックprops、アプリケーションが実行時に設定するテキスト、アプリケーションが表示・非表示を切り替える部分（{cond && <X/>}）も変換できます。

正確か、何もしないか。 サブセットの外にあるものは、ファイル・行・列を示して拒否し、決して近似しません。同じ画面からは、どのマシンでもバイト単位で同一のRustが生成されます。生成されたコードには、unsafeも、unwrapも、panicもありません。

試してみる

Screen Compilerの開発コンテナとコントラクトチェックはNoWayOSから来ているので、二つを並べてクローンします。

mkdir nowayos-work && cd nowayos-work
git clone https://github.com/NoWayOS/nowayos.git
git clone https://github.com/NoWayOS/screen-compiler.git screen-compiler
make -C nowayos container # the dev image, once
cd screen-compiler
make test # unit, property, snapshot and command-line tests
make run ARGS="check fixtures/welcome.tsx" # check one screen against the subset
make contract-check # build every screen against NoWayOS's UI, and draw it

承認済みの画像

変換されたすべての画面には、承認済みの画像があります。画面への変更や、NoWayOSのレイアウト・描画への変更で見た目が変わる場合は、screen-compilerでmake bless-imagesを実行して画像を描き直します。コミットする前に、人が一枚ずつ見て承認します。nowayosの側からは、make screen-compiler-checkで、変更がどの承認済み画像を変えるかを確認できます。

自分の画面にだけ使う

Screen Compilerはビルドツールであって、サンドボックスではありません。信頼できるコードだけをコンパイルするのと同じように、変換するのは信頼できるTSXだけにしてください。

ライセンス

Screen CompilerはMITです。あなたの画面から生成されるRustは、あなたのものであり、好きなライセンスで公開できます。