Schermate da React

NoWayOS non ha un browser, e non lo avrà mai: è proprio questo il punto. Ma designer e sviluppatori front-end possono tenersi i loro strumenti. Lo Screen Compiler converte le schermate React, scritte in TSX secondo un sottoinsieme dichiarato, in Rust per il runtime di interfaccia utente di NoWayOS. Gira al momento della build, sulla propria macchina o in CI, e non arriva mai sul dispositivo.

Da così

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

A così

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

Ogni nodo rimanda alla riga e alla colonna del TSX da cui proviene. La schermata convertita viene poi disegnata dal renderer di NoWayOS e deve corrispondere pixel per pixel alla sua immagine approvata. (Versione abbreviata di fixtures/welcome.tsx del repository e del Rust generato da esso.)

Cosa converte

Schermate costruite con il kit dello Screen Compiler: Screen, Column, Row, Text, Button, TextInput, Checkbox, RadioGroup, Spacer, Card, Notice, HeaderBar, ProgressBar e Icon. Inoltre design token come costanti, props di callback che diventano azioni, testo impostato dall'applicazione in fase di esecuzione e parti che l'applicazione mostra o nasconde ({cond && <X/>}).

Esatto o niente. Tutto ciò che esce dal sottoinsieme viene rifiutato, con file, riga e colonna, e mai approssimato. La stessa schermata produce Rust identico byte per byte su qualsiasi macchina. Il codice generato non contiene unsafe, unwrap né panic.

Provarlo

Il container di sviluppo dello Screen Compiler e il suo controllo di contratto vengono da NoWayOS, quindi i due vanno clonati uno accanto all'altro:

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

Immagini approvate

Ogni schermata convertita ha un'immagine approvata. Quando una modifica a una schermata, o al layout o al disegno di NoWayOS, ne cambia l'aspetto, le immagini si ridisegnano con make bless-images in screen-compiler. Una persona esamina ciascuna immagine e la approva prima del commit. Dal lato di nowayos, make screen-compiler-check mostra quali immagini approvate verrebbero alterate da una modifica.

Solo sulle proprie schermate

Lo Screen Compiler è uno strumento di build, non una sandbox. Va usato su TSX di cui ci si fida, come si compila codice di cui ci si fida.

Licenza

Lo Screen Compiler è MIT. Il Rust che genera dalle schermate appartiene a chi le ha scritte, che può concederlo in licenza come preferisce.