ttsc 维护者 Wiki

    @ttsc/playground

    @ttsc/playground（packages/playground）是可复用的 Web Worker + React 脚手架，给浏览器内 ttsc playground 用，建在 @ttsc/wasm 之上。ttsc 网站（ttsc.dev）与 typia 网站（typia.io）是两个参考消费者。

    它处理什么

    每个浏览器 playground 都需要的部分（README，packages/playground/README.md）：worker boot、MemFS 布局、race-guarded 的 compile/lint/bundle 调用、按需 npm 依赖安装器、typia source-pack 挂载、捕获 console 的执行沙箱，以及一个 Tailwind 风格的 React 壳把它们接起来。站点只需提供 wasm URL、默认脚本、可选的 examples/品牌槽/执行回调。

    导出分层

    层导出
    Worker corecreateWorkerCompiler、buildTsconfigJSON、installDependenciesIntoMemFS、mapDiagnostic、pickEmittedJS、DEFAULT_* 常量
    Typia 集成createTypiaSourcePackMount、installTypiaSourcePack、loadTypiaSourcePack
    Npm 安装器installPlaygroundDependencies、collectExternalPackageNames、packageNameFromSpecifier、BUILT_IN_PLAYGROUND_PACKAGES
    执行沙箱createSandboxRequire、loadTypiaRuntimePack
    React UIPlaygroundShell、SourceEditor、ResultViewer、ConsoleViewer、OptionsPanel、DiagnosticsPanel、DependencyProgressModal、ExamplePicker、LintPane、createCompilerClient、DEFAULT_OPTION_TOGGLES
    类型./src/structures/ 全部

    核心抽象

    • createWorkerCompiler：worker 侧的 ICompilerService 工厂，在 Web Worker 里跑 wasm 宿主，对主线程暴露 race-guarded 的 compile/lint/bundle。
    • PlaygroundShell：Tailwind 4 React 组件，接好 Monaco 编辑器、结果/console/lint 面板、选项、依赖进度。
    • tgrid RPC：主线程与 worker 经 tgrid 做类型安全 RPC（peer dependency）。
    • npm 安装器：运行时把 npm 依赖装进 MemFS，让 playground 能 import 外部包。
    • typia source/runtime pack：把 typia 的源与运行时挂进 MemFS，让 typia transform 在浏览器里能跑。

    peer dependencies

    @monaco-editor/react、monaco-editor、react、react-dom、tgrid、@ttsc/wasm 是 peer dependencies；lz-string 内置。React 组件用 Tailwind 4 utility class。

    与 website 的关系

    website（Nextra）依赖 @ttsc/playground 与 @ttsc/wasm（workspace），用它们驱动 ttsc.dev 上的交互 playground。注意 website 用 React 18 + Nextra，与本 Wiki 的 Rspress 站点完全独立。

    API 稳定性

    README 顶部标注：实验性，v1.0 前 createWorkerCompiler 选项、ICompilerService 契约、React 组件 props 可能在 minor 版本间变。生产 playground 要 pin 精确版本。

    不变量

    • compile/lint/bundle 调用 race-guarded（worker 一次只跑一个有效请求）。
    • worker 与主线程经 tgrid 类型安全 RPC 通信。
    • 外部依赖运行时装进 MemFS，不打进 bundle。

    维护者提示

    • 改 worker 契约（ICompilerService）要同步主线程客户端（createCompilerClient）。
    • 加 React UI 组件遵循现有 Tailwind 风格；website 与 typia website 是消费者，破坏性改动影响两站。

    接下来