PlayTS

PlayTS es un entorno de desarrollo y ejecución de TypeScript diseñado íntegramente para operar del lado del cliente (client-side). Mi objetivo con esta herramienta es resolver la fricción inherente en la validación rápida de lógica de programación, el prototipado de estructuras de datos y la visualización de arquitectura de software, sin requerir la configuración de un entorno local o despliegues en servidores remotos.

El flujo de trabajo principal de esta herramienta permite al usuario escribir código TypeScript en un editor integrado, y mediante la evaluación en tiempo real, observar tanto la salida estándar de ejecución (logs y errores) como la generación automática de diagramas de clases. Esto se logra interpretando el Árbol de Sintaxis Abstracta (AST) del código proporcionado, lo que otorga una visibilidad estructural inmediata de las relaciones entre clases, interfaces y tipos de datos. Adicionalmente, el estado del proyecto puede persistirse localmente o serializarse a través de la compresión del código en la URL, facilitando la distribución de fragmentos de lógica de manera apátrida (stateless).

Arquitectura General

La aplicación sigue un modelo arquitectónico de cliente pesado (Thick Client) sin dependencia de un backend tradicional. Esta decisión técnica elimina la latencia de red en la compilación y evaluación del código, transfiriendo el peso computacional al navegador del usuario final.

graph TD
    A[Usuario / Interfaz UI] --> B(Hilo Principal - Main Thread)
    B -->|PostMessage: TypeScript Code| C(Web Worker Aisaldo)
    C -->|AST Parsing & Transpilación| D{TypeScript Compiler API}
    D --> E[Ejecución en Sandbox JS]
    D --> F[Generador Mermaid.js]
    E -->|Salida Interceptada console.*| G[Gestor de Logs]
    F -->|Clases, Interfaces, Relaciones| H[Diagrama UML Generado]
    G -->|PostMessage: Resultados| B
    H -->|PostMessage: Resultados| B

La separación entre la interfaz gráfica y la ejecución del código se implementa mediante el aislamiento en un Web Worker. Esto previene el bloqueo del hilo principal (Main Thread) durante procesos intensivos, tales como la transpilación de TypeScript o los bucles infinitos accidentales introducidos en el código, garantizando que el editor Monaco y la interfaz construida en React mantengan una alta frecuencia de refresco.

Modelado de Datos y Gestión del Estado

La gestión del estado recae exclusivamente en la capa de almacenamiento del navegador (Local Storage) y en la representación en memoria durante la sesión activa. He estructurado el almacenamiento para retener configuraciones del editor, preferencias de diseño (tamaños de paneles divisibles) y un sistema de archivos virtual en un diccionario estructurado.

erDiagram
    LOCAL_STORAGE {
        String playts-files-v2 "Diccionario [nombre_archivo: contenido_codigo]"
        String playts-active-file "Identificador del archivo en foco"
        Object playts-settings "Configuraciones del editor Monaco"
        String playts-theme "Estado de interfaz oscuro/claro"
    }

    ESTADO_MEMORIA {
        Array logs "Pila de eventos de consola interceptados"
        String diagram "Cadena de texto con sintaxis Mermaid.js"
        String shareUrl "URL generada con hash LZ-String"
    }

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

Serialización de Estado y Compartición

Para el mecanismo de compartición de código, he optado por una aproximación sin estado a nivel de servidor. El conjunto completo de archivos se codifica en formato JSON, se comprime utilizando el algoritmo LZ-String para reducir su huella de caracteres, y se incrusta en la URI dentro del fragmento hash (#). Al cargar la aplicación, el estado se hidrata desencriptando e inyectando este payload directamente de vuelta en el entorno de ejecución del cliente.

Stack Tecnológico

A continuación, detallo las tecnologías que componen la base del proyecto y el propósito específico de cada una en la arquitectura.

Tecnología	Rol Arquitectónico	Justificación Técnica
Astro	Framework Core / PWA	Estructura base orientada al rendimiento, enrutamiento estático y punto de entrada para componentes hidratados.
React 19	Capa de Interfaz (UI)	Manejo del estado reactivo de componentes complejos como el editor virtualizado y paneles redimensionables.
Monaco Editor	Editor de Código	Proveedor de resaltado sintáctico, autocompletado y validación tipográfica nativa de TypeScript.
TypeScript API	Transpilador y AST	Integrado localmente (typescript.min.js) en el Web Worker para transpilación en tiempo de ejecución y extracción de metadatos estructurales (AST) para diagramas.
Mermaid.js	Motor de Visualización	Renderizado declarativo de las relaciones de herencia y asociación extraídas previamente del AST.
LZ-String	Algoritmo de Compresión	Serialización eficiente del estado del código para la generación de enlaces de compartición sin requerir dependencia de una base de datos externa.
Tailwind CSS v4	Motor de Estilos	Estandarización de componentes visuales mediante utilidades funcionales, minimizando la especificidad y el CSS residual.

El encapsulamiento en Progressive Web App (PWA) utilizando Workbox y @vite-pwa/astro asegura que la aplicación entera (incluyendo los binarios de TypeScript y el editor Monaco) esté disponible para su uso offline continuo, consolidando la naturaleza autosuficiente de la arquitectura cliente.

Conclusión

La implementación de este entorno demuestra la viabilidad técnica de trasladar flujos de trabajo computacionales tradicionalmente ligados al servidor directamente a la capa de cliente. Al orquestar Web Workers para procesamiento asíncrono, análisis de árboles de sintaxis abstracta para derivación visual de arquitectura, y persistencia a través de URL sin estado de servidor, se elimina la dependencia de infraestructura de backend. Este diseño arquitectónico neutraliza los costos operativos y la latencia de red, garantizando un entorno de ejecución ininterrumpido y completamente autónomo en el navegador.