用 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 代码归您所有，您可以按自己的意愿授权。