Des écrans issus de React

NoWayOS n’a pas de navigateur, et n’en aura jamais : c’est tout l’intérêt. Mais les designers et les développeurs front-end peuvent garder leurs outils. Le Screen Compiler convertit des écrans React, écrits en TSX dans un sous-ensemble déclaré, en Rust pour l’environnement d’interface de NoWayOS. Il s’exécute à la compilation, sur votre machine ou en CI, et n’est jamais livré sur l’appareil.

De ceci

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

À cela

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

Chaque nœud renvoie à la ligne et à la colonne du TSX dont il provient. L’écran converti est ensuite dessiné par le moteur de rendu de NoWayOS et doit correspondre à son image approuvée, pixel pour pixel. (Extrait abrégé du fichier fixtures/welcome.tsx du dépôt et du Rust généré à partir de lui.)

Ce qu’il convertit

Les écrans construits avec le kit du Screen Compiler : Screen, Column, Row, Text, Button, TextInput, Checkbox, RadioGroup, Spacer, Card, Notice, HeaderBar, ProgressBar et Icon. Mais aussi les design tokens sous forme de constantes, les props de rappel qui deviennent des actions, le texte que l’application définit à l’exécution, et les éléments que l’application affiche ou masque ({cond && <X/>}).

Exact ou rien. Tout ce qui sort du sous-ensemble est refusé, avec le fichier, la ligne et la colonne, jamais approximé. Le même écran donne un Rust identique à l’octet près sur n’importe quelle machine. Le code généré ne contient ni unsafe, ni unwrap, ni panic.

Essayer

Le conteneur de développement du Screen Compiler et sa vérification de contrat viennent de NoWayOS : clonez donc les deux dépôts côte à côte.

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

Images approuvées

Chaque écran converti a une image approuvée. Quand une modification d’un écran, ou de la mise en page ou du dessin de NoWayOS, change son apparence, redessinez les images avec make bless-images dans screen-compiler. Une personne examine chacune d’elles et l’approuve avant qu’elle soit commitée. Côté nowayos, make screen-compiler-check montre quelles images approuvées une modification altérerait.

À n’utiliser que sur vos propres écrans

Le Screen Compiler est un outil de compilation, pas un bac à sable. Convertissez du TSX auquel vous faites confiance, comme vous compileriez du code auquel vous faites confiance.

Licence

Le Screen Compiler est sous MIT. Le Rust qu’il génère à partir de vos écrans vous appartient, sous la licence de votre choix.