SuperAPI AI 工具集

docs-rsc-sandpack

编程与开发

查看项目

更新于 10-16 03:17

技能介绍

用途:在 React 文档中嵌入可交互的 RSC 代码示例,或修改 RSC Sandpack 基础设施。通用 Sandpack 规范见 /docs-sandpack,本技能只覆盖 RSC 专属模式。

主要能力与差异:<SandpackRSC> 与 <Sandpack> 不同,服务端代码在 Web Worker 中运行,客户端代码在 iframe 中运行。支持 'use client'(标记客户端组件,须为首条语句)、'use server'(标记可从客户端调用的 Server Functions)与 async 服务端组件。不支持外部依赖,仅有 react 与 react-dom,因此不要包含 package.json。入口为 src/App.js,需 export default,src/app.js 大小写不敏感也可。

文件规则:无指令的文件默认在 Web Worker(服务端)运行,可为 async、可导入其他服务端文件,但不能使用 hooks、事件处理或浏览器 API;'use client' 文件在 iframe 运行,可用 hooks 与浏览器 API,不能 async,也不能导入服务端文件。

常见模式:服务端+客户端组件组合;带 Suspense 的 async 服务端组件;通过 props 或 form action 调用的 Server Functions。基础设施文件(如 /src/index.js、/src/rsc-client.js、/src/rsc-server.js 等)由 sandpack-rsc-setup.ts 自动注入,不应写入 MDX。

构建与开发:修改 rsc-server.js 或 webpack-shim.js 后运行 node scripts/buildRscWorker.mjs 重建 worker bundle;用 yarn dev 启动开发服务器测试示例。详细架构与其余源码文件用途暂未在资料中完整展开。