Pantallas desde React

NoWayOS no tiene navegador, ni lo tendrá nunca: de eso se trata. Pero los diseñadores y los desarrolladores front-end pueden conservar sus herramientas. El Screen Compiler convierte pantallas de React, escritas en TSX dentro de un subconjunto declarado, en Rust para el entorno de interfaz de usuario de NoWayOS. Se ejecuta en tiempo de compilación, en su máquina o en la CI, y nunca llega al dispositivo.

De esto

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 esto

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

Cada nodo apunta a la línea y la columna del TSX del que procede. Después, el renderizador de NoWayOS dibuja la pantalla convertida, que debe coincidir con su imagen aprobada, píxel a píxel. (Versión abreviada del fixtures/welcome.tsx del repositorio y del Rust que genera).

Qué convierte

Pantallas construidas con el kit del Screen Compiler: Screen, Column, Row, Text, Button, TextInput, Checkbox, RadioGroup, Spacer, Card, Notice, HeaderBar, ProgressBar e Icon. También tokens de diseño como constantes, props de callback que se convierten en acciones, texto que la aplicación establece en tiempo de ejecución y partes que la aplicación muestra u oculta ({cond && <X/>}).

Exacto o nada. Todo lo que queda fuera del subconjunto se rechaza, con el archivo, la línea y la columna, y nunca se aproxima. La misma pantalla genera un Rust idéntico byte a byte en cualquier máquina. El código generado no contiene unsafe, ni unwrap, ni panic.

Pruébelo

El contenedor de desarrollo del Screen Compiler y su comprobación de contrato proceden de NoWayOS, así que clone ambos uno al lado del otro:

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

Imágenes aprobadas

Cada pantalla convertida tiene una imagen aprobada. Cuando un cambio en una pantalla, o en la disposición o el dibujo de NoWayOS, cambia su aspecto, vuelva a generar las imágenes con make bless-images en screen-compiler. Una persona revisa cada una y la aprueba antes de que se haga commit. Desde el lado de nowayos, make screen-compiler-check muestra qué imágenes aprobadas alteraría un cambio.

Úselo solo con sus propias pantallas

El Screen Compiler es una herramienta de compilación, no un sandbox. Convierta TSX de confianza, igual que compilaría código de confianza.

Licencia

El Screen Compiler es MIT. El Rust que genera a partir de sus pantallas es suyo, para licenciarlo como quiera.