NoWayOS
ES
GitHub
MenúCerrar

Construir

Portar desde React

Llevar una interfaz React existente a NoWayOS: medirla con el informe de cobertura del Screen Compiler, ver qué se convierte tal como está escrito, qué cambiar y qué pasa a su aplicación, y leer cada error que puede dar.

No empieza de cero. La mayor parte de una pantalla React se convierte tal como está escrita: su disposición, sus textos, sus botones y campos, sus condiciones y listas, sus propios componentes pequeños. El resto es una reescritura breve o un trabajo que pasa a su aplicación, que en un ordenador con una sola tarea es donde debe estar.

Mida primero

Antes de cambiar una línea, pregunte al Screen Compiler hasta dónde llega ya su código. Clone su aplicación junto a los dos repositorios de Pantallas desde React, para que el contenedor de desarrollo la vea, y ejecute el informe de cobertura sobre su código fuente:

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"

El informe lee cada archivo .tsx bajo esa carpeta y cuenta cada construcción que encuentra: elementos, props, propiedades de estilo, hooks, listas, condiciones, operadores e importaciones. Cada una recibe un veredicto:

  • en el subconjunto: se convierte, allí donde se usa como el subconjunto permite;
  • en el camino: todavía no se convierte, y el informe nombra el paso que la convertirá;
  • excluida por diseño: nunca se convertirá, y el informe dice por qué;
  • desconocida: el Screen Compiler no la reconoce. Lo desconocido nunca cuenta como convertido.

Después vienen los pasos del camino, con cuántas veces se necesita cada uno, y cada archivo con su resultado. Un archivo «se convierte» solo si check lo acepta, así que la cifra de arriba es la verdadera. El informe nombra construcciones y nunca cita su código, de modo que puede compartirlo sin riesgo. Como el propio compilador, ejecútelo solo sobre código en el que confíe.

Qué corresponde a qué

En React DOM En el subconjunto
Un <div> dispuesto con flexbox <Column> o <Row>, con gap, padding y un style declarado
<h1>, <p>, <span>, <label> <Text> en un rol: title, heading, body, label, caption o display
<button onClick={…}> <Button onClick={props.onSave}>: una prop de callback se convierte en una acción
<input>, una casilla, botones de opción, <select> <TextInput>, <Checkbox>, <RadioGroup>, <Select>, cada uno con un id por el que la aplicación lee y fija su valor
{ready && <X/>}, ? :, !ready, step === "review" grupos e interruptores que fija la aplicación
items.map(…) filas: una lista que contiene el archivo, o la lista de una prop limitada a un máximo, props.items.slice(0, 5)
Hello, {name}! palabras literales compiladas alrededor de una ranura que rellena la aplicación
Sus propios componentes y fragmentos, en el archivo de la pantalla o en uno a su lado expandidos en tiempo de compilación, como si la pantalla estuviera escrita de forma plana
style={{ padding: "16px" }}, color: "var(--text-muted)" las propiedades de estilo declaradas, longitudes en unidades de diseño, colores del tema

Las tablas de Pantallas desde React indican exactamente qué acepta cada componente. Salen de las propias tablas del Screen Compiler, así que no pueden apartarse de lo que acepta.

Qué pasa a su aplicación

En el dispositivo no hay JavaScript. Una pantalla es un árbol fijo que su aplicación controla mediante acciones, campos, ranuras, grupos e interruptores numerados. Por eso algunas cosas quedan fuera por diseño, cada una por un motivo:

  • El estado y los hooks (useState, useEffect, el contexto). La aplicación guarda el estado y fija lo que muestra una pantalla.
  • value, checked y onChange de un campo. La aplicación lee y fija un campo por su id.
  • Las props propagadas (spread). Lo que contienen solo se sabe cuando el código se ejecuta.
  • Los estilos calculados, los valores de color y las hojas de estilo globales. Un estilo es estático, los colores son los del tema, para que el tema de letra grande pueda cambiar los colores de cada pantalla y se compruebe el contraste, y no hay cascada.
  • La animación.
  • Una lista sin máximo. Limítela, .slice(0, 5), para que la pantalla sepa cuántas filas puede mostrar.
  • Las comparaciones distintas de una prop === una cadena, y if o switch en la función de una pantalla. Calcule la respuesta en la aplicación y pásela como prop.
  • Los componentes de paquetes y los archivos fuera de la carpeta de la pantalla. Una pantalla solo lee su propia carpeta y lo que contiene: ponga sus componentes a su lado, ./parts/header.
  • Un manejador que hace algo más que llamar a una prop. onClick={() => props.onSave()} se convierte; todo lo demás es trabajo de la aplicación.

Qué trae después el camino

El informe de cobertura nombra estos pasos previstos cuando su código los necesita:

  • más diseño CSS: crecimiento flex, alignSelf, alturas mínima y máxima, relleno en cada lado y márgenes;
  • los elementos HTML comunes, cada uno por una regla fija;
  • los módulos CSS, una clase por elemento;
  • las capas: elementos superpuestos;
  • las imágenes y la entrada enmascarada.

Hasta que un paso llega, sus construcciones se rechazan en lugar de adivinarse. Cada paso mantiene la misma regla: exacto, o nada.

Leer un error

Un error da el archivo, la línea y la columna, un código, qué está mal y una línea de ayuda:

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 cualquier error, no se escribe nada. Los códigos:

Código Qué significa Qué hacer
syntax El archivo no es TSX válido, o rompe una regla que cumple todo módulo. Corrija el código en la posición indicada.
unsupported Una construcción fuera del subconjunto. Siga la ayuda: reescríbala dentro del subconjunto, o pase ese trabajo a la aplicación.
unknown-element Un elemento que no es del kit, o que no está importado. Impórtelo desde "nowayos:kit", o use el elemento del kit.
unknown-prop Una prop o propiedad de estilo que el elemento no acepta. Use una de las que las tablas indican para él.
invalid-value Una prop que el elemento acepta, con un valor que no acepta. Dé un valor del tipo que indican las tablas.
missing-prop Falta una prop que el elemento necesita. Désela: las tablas las muestran en negrita.
invalid-children Un elemento contiene lo que no puede, como dos hijos en <Screen> o texto en una <Column>. Agrúpelos, o ponga el texto en un <Text>.
unknown-name Un nombre que no es una prop, un design token ni una importación. Recíbalo como prop, o declárelo.
duplicate-name Dos cosas tendrían el mismo nombre en el código generado, como isReady e is_ready. Cambie el nombre de una.
reserved-name Un nombre que Rust o el código generado reservan, como type. Cámbielo.
limit Se supera un límite de tamaño, profundidad o cantidad. Acórtelo, o divídalo en componentes.
no-screen El archivo no tiene componente de pantalla: una función que devuelve <Screen>. Exporte uno.
internal Un fallo del propio Screen Compiler. Infórmelo, con la entrada que lo causó.

Si una construcción que necesita está en el camino y aún no está construida, dígalo, con el informe: muestra qué pasos importan más.