ReactScript

🇧🇷 Português | 🇺🇸 English

Uma sintaxe alternativa ao JSX que reduz o boilerplate de hooks do React, transpilada para React/JavaScript via ANTLR4 + Babel, com playground web ao vivo.

Visão geral

ReactScript é um transpiler que converte uma sintaxe simplificada em código React/JavaScript válido. A ideia é eliminar o boilerplate dos hooks mais comuns (useState, useEffect, useRef) com palavras-chave dedicadas, mantendo o JSX intacto. Roda em um playground web com editor (Monaco) e preview ao vivo (transpila → Babel → renderiza em iframe com Tailwind CSS).

A sintaxe

ReactScript adiciona 4 construções sobre o JavaScript/React:

ReactScript	Transpila para
component App() { ... }	function App() { ... }
state contador = 0;	const [contador, setContador] = React.useState(0);
effect [contador] { ... }	React.useEffect(() => { ... }, [contador]);
ref inputRef = null;	const inputRef = React.useRef(null);

O setter é gerado automaticamente capitalizando o nome (contador → setContador). O JSX permanece igual ao React — só as declarações de estado/efeito/ref são transformadas.

Exemplo

component Contador() {
  state contador = 0;

  effect [contador] {
    console.log("Contador atualizado:", contador);
  }

  return (
    <button onClick={() => setContador(contador + 1)}>
      Contador: {contador}
    </button>
  );
}

component App() {
  return <Contador />;
}

Como funciona

Código ReactScript
   ↓  ANTLR4 Lexer + Parser (gramática customizada → AST)
   ↓  ReactScriptTranspiler (Visitor pattern → JavaScript/React)
   ↓  Babel (presets es2015 + react; JSX → React.createElement)
   ↓  Render em iframe (React + Tailwind via CDN)

A classe ReactScriptTranspiler estende JavaScriptParserVisitor e implementa os visitors para componentDeclaration, stateDeclaration, effectStatement e refDeclaration, preservando o JSX original.

Como executar

npm install
npm start          # abre o playground em http://localhost:3000

No playground: escolha um exemplo (Contador, Todo List, Cronômetro, Notas), edite à esquerda e veja o preview ao vivo à direita. O botão "📘 Exibir Guia" mostra a documentação.

Todo componente raiz deve se chamar App — ele é o ponto de entrada renderizado.

Estado e limitações

Protótipo funcional / educacional. O parser ANTLR4 e o transpiler funcionam, e os exemplos rodam com hot-reload. Limitações conhecidas:

• Apenas useState, useEffect, useRef — sem useContext, useReducer, useMemo, etc.
• Sem module system (import/export) — tudo em arquivo único.
• Toda lógica deve estar dentro de um component.
• A transformação de ++/-- em estado é simples e pode falhar em expressões complexas.
• Executa apenas no contexto do playground (iframe + Babel), não como CLI/build.

Licença

Este projeto ainda não declara uma licença; até que uma seja adicionada, todos os direitos são reservados ao autor.