Portar a partir de React

Você não começa do zero. A maior parte de uma tela React é convertida como está escrita: o layout, os textos, os botões e campos, as condições e listas, os seus próprios componentes pequenos. O resto é uma reescrita curta ou um trabalho que passa para a sua aplicação, e é lá que ele deve ficar num computador com uma só tarefa.

Meça primeiro

Antes de mudar uma linha, pergunte ao Screen Compiler até onde o seu código já chega. Clone a sua aplicação ao lado dos dois repositórios de Telas a partir de React, para que o contêiner de desenvolvimento a veja, e rode o relatório de cobertura sobre o código-fonte:

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"

O relatório lê cada arquivo .tsx dessa pasta e conta cada construção que encontra: elementos, props, propriedades de estilo, hooks, listas, condições, operadores e imports. Cada uma recebe um veredito:

• no subconjunto: é convertida, onde é usada como o subconjunto permite;
• no caminho: ainda não é convertida, e o relatório nomeia o passo que vai convertê-la;
• fora por projeto: nunca será convertida, e o relatório diz por quê;
• desconhecida: o Screen Compiler não a reconhece. O desconhecido nunca conta como convertido.

Depois vêm os passos do caminho, com quantas vezes cada um é necessário, e cada arquivo com o seu resultado. Um arquivo "é convertido" só se o check o aceitar, então o número no topo é o verdadeiro. O relatório nomeia construções e nunca cita o seu código, então você pode compartilhá-lo com segurança. Como o próprio compilador, rode-o só em código em que você confia.

O que corresponde a quê

As tabelas de Telas a partir de React mostram exatamente o que cada componente aceita. Elas vêm das próprias tabelas do Screen Compiler, então não podem se afastar do que ele aceita.

O que passa para a sua aplicação

Não há JavaScript no dispositivo. Uma tela é uma árvore fixa que a sua aplicação controla por ações, campos, slots, grupos e chaves numerados. Por isso algumas coisas ficam de fora por projeto, cada uma por um motivo:

• Estado e hooks (useState, useEffect, contexto). A aplicação guarda o estado e define o que uma tela mostra.
• value, checked e onChange de um campo. A aplicação lê e define um campo pelo seu id.
• Props espalhadas (spread). O que contêm só se sabe quando o código roda.
• Estilos calculados, valores de cor e folhas de estilo globais. Um estilo é estático, as cores são as do tema, para que o tema de letra grande possa trocar as cores de cada tela e o contraste seja verificado, e não há cascata.
• Animação.
• Uma lista sem máximo. Limite-a, .slice(0, 5), para que a tela saiba quantas linhas pode mostrar.
• Comparações além de uma prop === uma string, e if ou switch na função de uma tela. Calcule a resposta na aplicação e passe-a como prop.
• Componentes de pacotes e arquivos fora da pasta da tela. Uma tela lê apenas a própria pasta e o que há dentro dela: coloque os seus componentes ao lado dela, ./parts/header.
• Um handler que faz mais do que chamar uma prop. onClick={() => props.onSave()} é convertido; o resto é trabalho da aplicação.

O que o caminho traz a seguir

O relatório de cobertura nomeia estes passos previstos quando o seu código precisa deles:

• mais layout CSS: crescimento flex, alignSelf, alturas mínima e máxima, padding em cada lado e margens;
• elementos HTML comuns, cada um por uma regra fixa;
• módulos CSS, uma classe por elemento;
• camadas: elementos sobrepostos;
• imagens e entrada mascarada.

Até um passo chegar, as suas construções são recusadas em vez de adivinhadas. Cada passo mantém a mesma regra: exato, ou nada.

Ler um erro

Um erro dá o arquivo, a linha e a coluna, um código, o que está errado e uma linha de ajuda:

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

Com qualquer erro, nada é escrito. Os códigos:

Se uma construção de que você precisa está no caminho e ainda não foi construída, avise, com o relatório: ele mostra quais passos importam mais.