PlayTS

PlayTS 是一个完全设计为在客户端 (client-side) 运行的 TypeScript 开发与执行环境。我开发此工具的目的是消除快速验证编程逻辑、数据结构原型设计以及软件架构可视化过程中固有的阻力，而无需配置本地环境或部署到远程服务器。

该工具的主要工作流允许用户在集成编辑器中编写 TypeScript 代码，并通过实时评估，同时查看标准执行输出（日志和错误）以及类图的自动生成。这是通过解释所提供代码的抽象语法树 (AST) 来实现的，从而可以立即对类、接口和数据类型之间的关系进行结构化展示。此外，项目状态可以在本地持久化保存，或者通过 URL 中的代码压缩进行序列化，方便无状态 (stateless) 分发逻辑片段。

整体架构

该应用采用了无传统后端依赖的重客户端 (Thick Client) 架构模型。这一技术决策消除了代码编译和评估过程中的网络延迟，将计算负担转移到了最终用户的浏览器上。

graph TD
    A[用户 / UI 界面] --> B(主线程 - Main Thread)
    B -->|PostMessage: TypeScript Code| C(隔离的 Web Worker)
    C -->|AST Parsing & 转译| D{TypeScript Compiler API}
    D --> E[JS 沙箱中执行]
    D --> F[Mermaid.js 生成器]
    E -->|拦截 console.* 输出| G[日志管理器]
    F -->|类、接口、关系| H[生成的 UML 图表]
    G -->|PostMessage: 结果| B
    H -->|PostMessage: 结果| B

图形界面与代码执行之间的分离是通过在 Web Worker 中进行隔离来实现的。这防止了在密集型处理过程中阻塞主线程 (Main Thread)，例如 TypeScript 的转译或代码中意外引入的无限循环，从而确保 Monaco 编辑器和使用 React 构建的界面保持高刷新率。

数据建模与状态管理

状态管理完全落在浏览器的存储层 (Local Storage) 以及活动会话期间的内存表示上。我组织了存储结构，以在一个结构化的字典中保留编辑器设置、布局偏好（可调整大小面板的尺寸）和虚拟文件系统。

erDiagram
    LOCAL_STORAGE {
        String playts-files-v2 "[文件名: 代码内容] 字典"
        String playts-active-file "当前焦点文件的标识符"
        Object playts-settings "Monaco 编辑器设置"
        String playts-theme "暗/亮界面状态"
    }

    ESTADO_MEMORIA {
        Array logs "拦截的控制台事件栈"
        String diagram "包含 Mermaid.js 语法的文本串"
        String shareUrl "使用 LZ-String 哈希生成的 URL"
    }

    LOCAL_STORAGE ||--o{ ESTADO_MEMORIA : "初始化 / 再水化"

状态序列化与共享

对于代码共享机制，我选择了服务端无状态的方法。整套文件被编码为 JSON 格式，使用 LZ-String 算法进行压缩以减少字符占用，并嵌入到 URI 的哈希片段 (#) 中。在加载应用时，通过解压并将此载荷直接注入回客户端的执行环境中来水化状态。

技术栈

下面我详细列出组成项目基础的技术以及每种技术在架构中的具体作用。

技术	架构角色	技术考量
Astro	核心框架 / PWA	面向性能的基础结构、静态路由以及水化组件的入口点。
React 19	界面层 (UI)	管理复杂组件的响应式状态，如虚拟化编辑器和可调整大小的面板。
Monaco Editor	代码编辑器	提供语法高亮、自动补全和 TypeScript 原生类型检查。
TypeScript API	转译器与 AST	在 Web Worker 中本地集成 (typescript.min.js)，用于运行时转译和提取用于图表的结构元数据 (AST)。
Mermaid.js	可视化引擎	声明式渲染先前从 AST 中提取的继承和关联关系。
LZ-String	压缩算法	高效序列化代码状态以生成共享链接，无需依赖外部数据库。
Tailwind CSS v4	样式引擎	通过功能性实用程序标准化视觉组件，最大程度减少样式特异性和残留 CSS。

使用 Workbox 和 @vite-pwa/astro 打包为渐进式 Web 应用 (PWA)，可确保整个应用（包括 TypeScript 二进制文件和 Monaco 编辑器）可用于持续的离线使用，巩固了客户端架构的自给自足特性。

总结

该环境的实现证明了将传统上与服务端绑定的计算工作流直接转移到客户端层的技术可行性。通过编排用于异步处理的 Web Worker、用于衍生架构视觉呈现的抽象语法树分析，以及通过服务端无状态 URL 进行持久化，消除了对后端基础设施的依赖。这种架构设计将运营成本和网络延迟降至最低，确保了浏览器中不中断且完全自主的执行环境。