Portare da React

Portare un'interfaccia React esistente su NoWayOS: misurarla con il rapporto di copertura dello Screen Compiler, vedere cosa si converte così com'è scritto, cosa cambiare e cosa passa nella Sua applicazione, e leggere ogni errore che può dare.

Non si riparte da zero. Quasi tutta una schermata React si converte così com'è scritta: il layout, i testi, i pulsanti e i campi, le condizioni e le liste, i suoi piccoli componenti. Il resto è una breve riscrittura oppure lavoro che passa nella Sua applicazione, che su un computer con un solo compito è il posto giusto.

Prima misuri

Prima di cambiare una riga, chieda allo Screen Compiler fin dove arriva già il Suo codice. Cloni la Sua applicazione accanto ai due repository di Schermate da React, perché il container di sviluppo la veda, ed esegua il rapporto di copertura sui sorgenti:

cd nowayos-work # holds nowayos and screen-compiler
git clone https://example.com/your-app.git my-app
cd screen-compiler
make run ARGS="audit ../my-app/src"

Il rapporto legge ogni file .tsx sotto quella cartella e conta ogni costrutto che trova: elementi, props, proprietà di stile, hook, liste, condizioni, operatori e import. Ciascuno riceve un verdetto:

nel sottoinsieme: si converte, dove è usato come il sottoinsieme consente;
sulla strada: non si converte ancora, e il rapporto nomina il passo che lo convertirà;
escluso per progetto: non si convertirà mai, e il rapporto dice perché;
sconosciuto: lo Screen Compiler non lo riconosce. Ciò che è sconosciuto non conta mai come convertito.

Seguono i passi della strada, con quante volte serve ciascuno, e ogni file con il suo esito. Un file "si converte" solo se check lo accetta, quindi la cifra in alto è quella vera. Il rapporto nomina costrutti e non cita mai il Suo codice, quindi può condividerlo senza rischi. Come il compilatore stesso, lo esegua solo su codice di cui si fida.

Cosa corrisponde a cosa

In React DOM	Nel sottoinsieme
Un `<div>` impaginato con flexbox	`<Column>` o `<Row>`, con `gap`, `padding` e uno `style` dichiarato
`<h1>`, `<p>`, `<span>`, `<label>`	`<Text>` in un ruolo: `title`, `heading`, `body`, `label`, `caption` o `display`
`<button onClick={…}>`	`<Button onClick={props.onSave}>`: una prop di callback diventa un'azione
`<input>`, una casella di spunta, pulsanti di opzione, `<select>`	`<TextInput>`, `<Checkbox>`, `<RadioGroup>`, `<Select>`, ciascuno con un `id` con cui l'applicazione legge e imposta il valore
`{ready && <X/>}`, `? :`, `!ready`, `step === "review"`	gruppi e selettori che l'applicazione imposta
`items.map(…)`	righe: una lista contenuta nel file, o la lista di una prop limitata a un massimo, `props.items.slice(0, 5)`
`Hello, {name}!`	parole letterali compilate attorno a uno slot che l'applicazione riempie
I Suoi componenti e frammenti, nel file della schermata o in uno accanto	espansi al momento della build, come se la schermata fosse scritta in piano
`style={{ padding: "16px" }}`, `color: "var(--text-muted)"`	le proprietà di stile dichiarate, lunghezze in unità di layout, colori del tema

Le tabelle di Schermate da React elencano esattamente cosa accetta ogni componente. Vengono dalle tabelle dello Screen Compiler stesso, quindi non possono discostarsi da ciò che accetta.

Cosa passa nella Sua applicazione

Sul dispositivo non c'è JavaScript. Una schermata è un albero fisso che la Sua applicazione guida con azioni, campi, slot, gruppi e selettori numerati. Alcune cose restano quindi escluse per progetto, ciascuna per un motivo:

Lo stato e gli hook (useState, useEffect, il contesto). L'applicazione tiene lo stato e imposta ciò che una schermata mostra.
value, checked e onChange di un campo. L'applicazione legge e imposta un campo tramite il suo id.
Le props distribuite (spread). Ciò che contengono si conosce solo quando il codice viene eseguito.
Gli stili calcolati, i valori di colore e i fogli di stile globali. Uno stile è statico, i colori sono quelli del tema, perché il tema a caratteri grandi possa ricolorare ogni schermata e il contrasto sia verificato, e non c'è cascata.
L'animazione.
Una lista senza massimo. La limiti, .slice(0, 5), perché la schermata sappia quante righe può mostrare.
I confronti diversi da una prop === una stringa, e if o switch nella funzione di una schermata. Calcoli la risposta nell'applicazione e la passi come prop.
I componenti dei pacchetti e i file fuori dalla cartella della schermata. Una schermata legge solo la propria cartella e ciò che contiene: metta i Suoi componenti accanto a essa, ./parts/header.
Un handler che fa più che chiamare una prop. onClick={() => props.onSave()} si converte; tutto il resto è lavoro dell'applicazione.

Cosa porta poi la strada

Il rapporto di copertura nomina questi passi previsti quando il Suo codice ne ha bisogno:

più layout CSS: crescita flex, alignSelf, altezze minima e massima, padding su ogni lato e margini;
gli elementi HTML comuni, ciascuno secondo una regola fissa;
i moduli CSS, una classe per elemento;
i livelli: elementi sovrapposti;
le immagini e l'inserimento mascherato.

Finché un passo non arriva, i suoi costrutti vengono rifiutati invece che indovinati. Ogni passo mantiene la stessa regola: esatto, o niente.

Leggere un errore

Un errore dà il file, la riga e la colonna, un codice, cosa non va e una riga di aiuto:

web-search.tsx:16:28: error[unknown-name]: `query` is not a prop of the component
 help: text from the application must be a prop: take it as one, function Screen({ query }) { … }

Con qualsiasi errore, non viene scritto nulla. I codici:

Codice	Cosa significa	Cosa fare
`syntax`	Il file non è TSX valido, o viola una regola che ogni modulo rispetta.	Corregga il codice nella posizione indicata.
`unsupported`	Un costrutto fuori dal sottoinsieme.	Segua l'aiuto: lo riscriva nel sottoinsieme, o sposti il lavoro nell'applicazione.
`unknown-element`	Un elemento che non è del kit, o non è importato.	Lo importi da `"nowayos:kit"`, o usi l'elemento del kit.
`unknown-prop`	Una prop o proprietà di stile che l'elemento non accetta.	Ne usi una che le tabelle elencano per esso.
`invalid-value`	Una prop che l'elemento accetta, con un valore che non accetta.	Dia un valore del tipo che le tabelle elencano.
`missing-prop`	Manca una prop di cui l'elemento ha bisogno.	La fornisca: le tabelle le mostrano in grassetto.
`invalid-children`	Un elemento contiene ciò che non può, come due figli in `<Screen>` o del testo in una `<Column>`.	Li raggruppi, o metta il testo in un `<Text>`.
`unknown-name`	Un nome che non è una prop, un design token né un import.	Lo riceva come prop, o lo dichiari.
`duplicate-name`	Due cose avrebbero lo stesso nome nel codice generato, come `isReady` e `is_ready`.	Ne rinomini una.
`reserved-name`	Un nome che Rust o il codice generato riservano, come `type`.	Lo rinomini.
`limit`	È superato un limite di dimensione, profondità o numero.	Accorci, o divida in componenti.
`no-screen`	Il file non ha un componente di schermata: una funzione che restituisce `<Screen>`.	Ne esporti uno.
`internal`	Un difetto dello Screen Compiler stesso.	Lo segnali, con l'input che lo ha causato.

Se un costrutto che Le serve è sulla strada e non è ancora costruito, lo dica, con il rapporto: mostra quali passi contano di più.