@rxdrag/astro-sandbox

┌─────────────────────────────────────────────────────────────┐ │ 宿主窗口 │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ModuleLoader │ │ │ │ - 编译 Astro 组件 → 代码字符串 │ │ │ │ - 编译 React 组件 → 代码字符串（React import 改为 CDN） │ │ │ │ - 缓存编译结果，多 iframe 共享 │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ │ ▼ 代码字符串（通过 srcdoc 注入） │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ MultiIframeSandboxSession │ │ │ │ - moduleCodeRegistry: 编译后的代码字符串 │ │ │ │ - 多个 iframe 共享同一份 moduleCodeRegistry │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ │ ┌───────────────────┼───────────────────┐ ▼ ▼ ▼ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐ │ iframe 1 │ │ iframe 2 │ │ iframe 3 │ │ │ │ │ │ │ │ 1. 从 CDN 加载 │ │ 1. 从 CDN 加载 │ │ 1. 从 CDN 加载 │ │ React │ │ React │ │ React │ │ │ │ │ │ │ │ 2. 创建 blob │ │ 2. 创建 blob │ │ 2. 创建 blob │ │ URL 并 │ │ URL 并 │ │ URL 并 │ │ import │ │ import │ │ import │ │ │ │ │ │ │ │ 3. SSR 渲染 │ │ 3. SSR 渲染 │ │ 3. SSR 渲染 │ │ HTML │ │ HTML │ │ HTML │ │ │ │ │ │ │ │ 4. hydration │ │ 4. hydration │ │ 4. hydration │ │ 激活交互 │ │ 激活交互 │ │ 激活交互 │ └───────────────┘ └───────────────┘ └───────────────┘

关键点 编译在宿主完成：避免每个 iframe 都要加载 esbuild-wasm 编译结果共享：moduleCodeRegistry 存储编译后的代码字符串，多 iframe 共享 React import 重写为 CDN：编译时把 import React from 'react' 改为 import React from 'https://esm.sh/[email protected]' iframe 内部执行： 从 CDN 加载 React 创建 blob URL 并 import 编译后的代码 执行 SSR（renderToString） 执行 hydration（hydrateRoot）