React Playground

一个基于浏览器、支持多文件协作、实时编译和预览的 React 在线交互式开发环境。

在线预览: https://littleblacky.github.io/react-playground/

核心特性

• 强大编辑体验：集成 Monaco Editor（VS Code 核心），支持代码高亮、自动补全及多种快捷键。
• 实时编译预览：基于 @babel/standalone 实现前端实时编译，无需后端支持即可运行 React + TypeScript 代码。
• 自动类型获取 (ATA)：集成 @typescript/ata，自动下载并加载第三方依赖（如 React, Antd）的类型定义文件，提供完整的代码补全。
• 模块化支持：支持多文件间的相对路径导入（如 import App from './App'），通过递归编译和 Blob URL 技术实现浏览器端的模块解析。
• 安全沙箱：使用 Iframe 隔离运行环境，支持错误捕获与实时展示。
• 虚拟文件系统：使用 Zustand 管理应用状态，支持多文件并发编辑。

技术栈

• 框架: React 19
• 编辑器: @monaco-editor/react
• 编译: @babel/standalone
• 状态管理: Zustand
• 类型支持: @typescript/ata
• UI 组件库: Ant Design
• 样式: Tailwind CSS

核心原理说明

1. 跨文件模块解析

项目在编译阶段会拦截 ImportDeclaration。当发现相对路径导入时，会递归查找对应的本地文件，并将其编译后的代码转换为 Blob URL，动态替换原有的导入路径。这使得浏览器可以直接执行具备模块依赖关系的 ESM 代码。

2. Monaco 跨文件提示

通过在 Monaco 中统一虚拟文件的 URI 协议为 file:///，并开启 setEagerModelSync(true) 强制模型同步，确保了 TypeScript 语言服务能够在不同文件（如 main.tsx 引用 App.tsx）之间提供准确的类型校验和定义跳转。

3. 自动 JSX 转换

编译器配置了 runtime: 'automatic'，无需在每个文件中手动 import React from 'react'，完美适配现代 React 开发规范。

项目结构

• src/components/CodeEditor: 编辑器核心组件，处理 ATA 及多文件同步。
• src/components/Preview: 预览沙箱及实时编译逻辑。
• src/store: 基于 Zustand 的全局文件状态管理。
• src/template: 默认项目模板文件。
• src/files.ts: 虚拟文件系统初始化配置。