Screens aus React

NoWayOS hat keinen Browser und wird nie einen haben: Genau darum geht es. Aber Designer und Frontend-Entwickler können ihre Werkzeuge behalten. Der Screen Compiler wandelt React-Screens, geschrieben in TSX in einer deklarierten Teilmenge, in Rust für die UI-Laufzeit von NoWayOS um. Er läuft beim Build, auf Ihrem Rechner oder in der CI, und wird nie auf das Gerät ausgeliefert.

Aus diesem TSX

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>
 );
}

Wird dieses Rust

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 })
}

Jeder Knoten verweist zurück auf Zeile und Spalte des TSX, aus dem er stammt. Der umgewandelte Screen wird dann vom Renderer von NoWayOS gezeichnet und muss seinem abgenommenen Bild entsprechen, Pixel für Pixel. (Gekürzt aus fixtures/welcome.tsx im Repository und dem daraus erzeugten Rust.)

Was er umwandelt

Screens, gebaut aus dem Baukasten des Screen Compilers: Screen, Column, Row, Text, Button, TextInput, Checkbox, RadioGroup, Spacer, Card, Notice, HeaderBar, ProgressBar und Icon. Außerdem Design-Tokens als Konstanten, Callback-Props, die zu Aktionen werden, Text, den die Anwendung zur Laufzeit setzt, und Teile, die die Anwendung ein- oder ausblendet ({cond && <X/>}).

Exakt oder gar nicht. Alles außerhalb der Teilmenge wird abgelehnt, mit Datei, Zeile und Spalte, und nie näherungsweise umgesetzt. Derselbe Screen ergibt auf jedem Rechner byte-identisches Rust. Der erzeugte Code enthält kein unsafe, kein unwrap und kein panic.

Ausprobieren

Der Dev-Container und der Contract-Check des Screen Compilers kommen aus NoWayOS, also klonen Sie beide nebeneinander:

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

Abgenommene Bilder

Jeder umgewandelte Screen hat ein abgenommenes Bild. Wenn eine Änderung an einem Screen oder am Layout oder Zeichnen von NoWayOS sein Aussehen verändert, zeichnen Sie die Bilder mit make bless-images in screen-compiler neu. Ein Mensch sieht sich jedes davon an und nimmt es ab, bevor es committet wird. Auf der Seite von nowayos zeigt make screen-compiler-check, welche abgenommenen Bilder eine Änderung verändern würde.

Nur für Ihre eigenen Screens

Der Screen Compiler ist ein Build-Werkzeug, keine Sandbox. Wandeln Sie TSX um, dem Sie vertrauen, so wie Sie Code kompilieren würden, dem Sie vertrauen.

Lizenz

Der Screen Compiler steht unter MIT. Das Rust, das er aus Ihren Screens erzeugt, gehört Ihnen, und Sie lizenzieren es, wie Sie möchten.