PlayTS

O PlayTS é um ambiente de desenvolvimento e execução de TypeScript projetado inteiramente para operar no lado do cliente. Meu objetivo com esta ferramenta é resolver o atrito inerente à validação rápida de lógica de programação, à prototipagem de estruturas de dados e à visualização da arquitetura de software, sem exigir a configuração de um ambiente local nem implantações em servidores remotos.

O fluxo de trabalho principal desta ferramenta permite aos usuários escrever código TypeScript em um editor integrado e, por meio da avaliação em tempo real, observar tanto a saída padrão da execução (logs e erros) quanto a geração automática de diagramas de classes. Isso é obtido analisando a Árvore de Sintaxe Abstrata (AST) do código fornecido, o que oferece visibilidade estrutural imediata das relações entre classes, interfaces e tipos de dados. Além disso, o estado do projeto pode ser persistido localmente ou serializado por meio da compressão do código na URL, facilitando a distribuição sem estado de trechos de lógica.

Arquitetura Geral

A aplicação segue um modelo arquitetural de cliente pesado (thick client), sem dependência de um backend tradicional. Essa decisão técnica elimina a latência de rede na compilação e avaliação do código, transferindo a carga computacional para o navegador do usuário final.

graph TD
    A[Usuário / Interface UI] --> B(Thread Principal)
    B -->|PostMessage: Código TypeScript| C(Web Worker Isolado)
    C -->|Análise AST e Transpilação| D{TypeScript Compiler API}
    D --> E[Execução em Sandbox JS]
    D --> F[Gerador Mermaid.js]
    E -->|Saída console.* Interceptada| G[Gerenciador de Logs]
    F -->|Classes, Interfaces, Relações| H[Diagrama UML Gerado]
    G -->|PostMessage: Resultados| B
    H -->|PostMessage: Resultados| B

A separação entre a interface gráfica e a execução do código é implementada por meio do isolamento em um Web Worker. Isso evita o bloqueio da thread principal durante processos intensivos, como a transpilação de TypeScript ou loops infinitos introduzidos acidentalmente no código, garantindo que o editor Monaco e a UI em React mantenham uma alta taxa de atualização.

Modelagem de Dados e Gerenciamento de Estado

O gerenciamento de estado depende exclusivamente da camada de armazenamento do navegador (Local Storage) e da representação em memória durante a sessão ativa. Estruturei o armazenamento para reter as configurações do editor, as preferências de layout (tamanhos dos painéis divididos redimensionáveis) e um sistema de arquivos virtual em um dicionário estruturado.

erDiagram
    LOCAL_STORAGE {
        String playts-files-v2 "Dicionário [nome_arquivo: conteúdo_código]"
        String playts-active-file "Identificador do arquivo em foco"
        Object playts-settings "Configurações do editor Monaco"
        String playts-theme "Estado da UI escuro/claro"
    }

    IN_MEMORY_STATE {
        Array logs "Pilha de eventos de console interceptados"
        String diagram "String de texto com sintaxe Mermaid.js"
        String shareUrl "URL gerada com hash LZ-String"
    }

    LOCAL_STORAGE ||--o{ IN_MEMORY_STATE : "Inicializa / Hidrata"

Serialização e Compartilhamento de Estado

Para o mecanismo de compartilhamento de código, optei por uma abordagem sem estado e sem servidor. O conjunto completo de arquivos é codificado em formato JSON, comprimido com o algoritmo LZ-String para reduzir sua quantidade de caracteres e incorporado à URI no fragmento hash (#). Ao carregar a aplicação, o estado é hidratado decodificando esse payload e injetando-o diretamente de volta no ambiente de execução do cliente.

Stack Tecnológico

A seguir, uma análise detalhada das tecnologias que formam a base do projeto e do papel específico de cada uma na arquitetura.

Tecnologia	Papel Arquitetural	Justificativa Técnica
Astro	Framework Principal / PWA	Estrutura base orientada a desempenho, roteamento estático e ponto de entrada para componentes hidratados.
React 19	Camada de Interface (UI)	Gerenciamento do estado reativo de componentes complexos, como o editor virtualizado e os painéis redimensionáveis.
Monaco Editor	Editor de Código	Fornece realce de sintaxe, autocompletar e validação nativa de tipos TypeScript.
TypeScript API	Transpilador e AST	Integrado localmente (typescript.min.js) no Web Worker para transpilação em tempo de execução e extração de metadados estruturais (AST) para os diagramas.
Mermaid.js	Motor de Visualização	Renderização declarativa das relações de herança e associação previamente extraídas da AST.
LZ-String	Algoritmo de Compressão	Serialização eficiente do estado do código para a geração de links de compartilhamento, sem depender de um banco de dados externo.
Tailwind CSS v4	Motor de Estilos	Padronização dos componentes visuais com classes utilitárias funcionais, minimizando a especificidade e o CSS residual.

O encapsulamento como Progressive Web App (PWA) usando Workbox e @vite-pwa/astro garante que toda a aplicação (incluindo os binários do TypeScript e o editor Monaco) esteja disponível para uso offline contínuo, consolidando a natureza autossuficiente da arquitetura do cliente.

Conclusão

A implementação deste ambiente demonstra a viabilidade técnica de transferir fluxos computacionais tradicionalmente vinculados ao servidor diretamente para a camada do cliente. Ao orquestrar Web Workers para o processamento assíncrono, analisar árvores de sintaxe abstrata para a visualização arquitetural e persistir dados por meio de URLs sem estado no servidor, elimina-se qualquer dependência de infraestrutura de backend. Esse design arquitetural minimiza os custos operacionais e a latência de rede, garantindo um ambiente de execução ininterrupto e totalmente autônomo no navegador.