两棵树，两个线程，
一份 manifest

service thread                              render thread (one root per page)
+-------------------------------+           +-------------------------------+
| App / Page / Component        |           | host TreeRenderer             |
| glass-easel logic ComponentSpace |  tree  | real built-in components      |
| template -> virtual RenderNode | <------> | glass-easel render ComponentSpace |
| data / observers / relations  |  flow    | DOM / layout / styles          |
| node ids + patches            |  patch   | no app methods                 |
+-------------------------------+           +-------------------------------+复制

首屏由 tree.flow 发送一组 component flow：define、create-node、props、children、ready。后续模板变化由 tree.patch 发送 text、replace、props、insert、remove、reorder、extra，宿主只负责应用 patch。

# pnpm check:runtime-purity
packages/runtime/src/index.ts
  -> component / service / tree (logic + render) / host / diagnostics

不允许出现在依赖图里的内容：
  window · document · navigator · localStorage · MessageChannel
  HTMLCanvasElement · Image · requestAnimationFrame · fetch · performance
  名字里带 "browser" 的模块 · @tiny/host-* 导入

# hosts/browser
  canvas-bridge.ts       OffscreenCanvas handoff 与 canvas 测量
  runtime-port.ts        iframe 端口握手
  service-entry.ts       service 线程入口（含端口与 canvas 适配）
  render-entry.ts        render 线程入口（端口 + 渲染树工厂）
  standalone-host.ts     service + 每页 render 的连接
  devtool-client.ts      调试器控制接口

# hosts/web-components
  createGlassRenderTree  Web 渲染树 + tiny-* 内置组件
  createGlassRenderEntry 渲染树工厂（样式 + DOM 容器）复制

core        packages/manifest
            packages/bridge
            packages/template-compiler
            packages/stylesheet-compiler
            packages/runtime           -> manifest, bridge, glass-easel
hosts       hosts/browser              -> runtime, bridge   (环境适配)
            hosts/web-components       -> runtime, manifest, glass-easel
                                          (内置组件，注入 render)
tools       tools/cli                  -> manifest, template-compiler, stylesheet-compiler
apps        apps/devtool               -> host-browser, host-web-components
tests       tests/host                 -> host-browser, host-web-components
                                          (不是 workspace 包)
fixtures    tests/apps/*               -> 只有源码，编译后交给宿主

规则：packages/* 不能导入 tools/*、apps/*、hosts/*、tests/*复制

1. 01
   编译并写出产物tools/cli

   读取 app.json，扫描入口，生成 templates.js、styles、scripts 和 service.js，最后写出 schema-v2 manifest.json。诊断信息随 manifest 一起返回。

   compileMiniProgram({ sourceDir, outputDir })
2. 02
   创建两条独立通道宿主

   每个线程各一条 MessageChannel。service 和 render 不共享端口，由宿主分别持有两条 hostTransport。

   createHostMessageChannelPair() × 2
3. 03
   创建 iframe，等待线程就绪宿主

   service iframe 被隐藏为 0×0，render iframe 填满容器；每页 render 模式下，每新建一个页面就创建一个 render iframe。宿主等待线程发回 tiny-runtime-port-ready，最多等 15 秒。

   createStandaloneDualThreadHost(...)
4. 04
   线程装好连接后再通知宿主service / render

   service 先拿到 manifest、templates 和 styles；render 先在 prepare 里装好内置样式，渲染树本身在端口到达后创建。service bundle 在 bootstrap 时通过 loadArtifacts 导入。线程要等 connection 安装完成，才调用 listenForRuntimePort，避免端口消息到达时丢帧。

   bootBrowserServiceEntry(...) / bootBrowserRenderEntry(createGlassRenderEntry(...))
5. 05
   把 MessagePort 交给线程宿主

   宿主把 port2 作为 transferable 发给对应 iframe；线程再用 createMessagePortTransport 包装成 Transport。

   postMessage({ type: 'tiny-runtime-port' }, '*', [port])
6. 06
   两条连接分别握手bridge

   宿主分别发起 runtime.hello，service/render 回复握手信息并发送 runtime.ready。协议版本不一致时连接会直接关闭。

   host.service.handshake() · host.render.handshake()
7. 07
   service 启动首屏宿主 → service

   导入 service.js，App/Page/Component 在这里注册，App.onLaunch/onShow 也会立即执行。随后安装 runtimeCompatibility 兼容全局，构建组件 schema 和 glass-easel 逻辑树，创建首个页面并触发 onLoad/onShow，返回 pageId、initialData 和 componentSchemas。

   service.control('runtime', 'bootstrap')
8. 08
   render 建好渲染树宿主 → render

   render 创建 TreeRenderer（Web 侧 createGlassRenderTree），安装宿主内置组件，等待 service 发来的 tree.flow。首屏 flow 包含 define/create-node/props/children/ready，render 应用后挂到页面根。

   render.control('runtime', 'bootstrap')
9. 09
   同步首屏并触发 onReady宿主 → service

   render 挂载完成后宿主发送 tree.ready，service 用逻辑树快照发送 tree.flow；随后宿主发 page.ready，service 触发 onReady。此时逻辑树、组件实例和 relations 已经可用。

   service.control('page', 'ready', { pageId })
10. 10
    广播状态，页面可交互service

    service 发送 RUNTIME_STATE，包含 pageStack、currentPage 和 transport 状态；宿主诊断仓库和 devtool 据此更新界面。

    sendDiagnostic('state', { code: 'RUNTIME_STATE' })

                     +------------------- host --------------------+
                     | createTinyRuntime(options)                  |
                     |                                             |
                     |  BridgeConnection(host <-> service)         |
                     |  BridgeConnection(host <-> render) × 每页    |
                     |  pageId → render 连接 + 待发队列              |
                     |  HostApiRegistry / HostDiagnosticStore     |
                     +------+--------------------------+----------+
                            |                          |
                     MessageChannel             MessageChannel
                            |                          |
                  +---------v---------+      +---------v---------+
                  |   service iframe  |      |   render iframe   |
                  | 逻辑树 / 页面栈     |      |  渲染树 / DOM      |
                  +---------+---------+      +---------+---------+
                            ^                          ^
                            |   window.postMessage     |
                            +--- 端口交接 / canvas transferable ---+
                                     （不承载业务协议）

                        service 和 render 之间没有直连通道复制

转发、代理、终结、发起

宿主对消息有四种处理方式，决定了这条链路要等几次往返。

转发（event，host 重新封装后立即发给另一侧）
  service ── tree.flow / tree.snapshot / tree.patch / tree.animate ──► host ──► render
  service ◄── tree.event ───────────────────────────────────────────── host ◄── render
  service ◄── page.scroll / reachBottom / pullDownRefresh ──────────── host ◄── render

代理（call/control，host 等渲染树回包后再回 service）
  service ── query.select / query.intersection / canvas.measure ──► host ──► render
  service ◄──────────────── reply ───────────────────────────────── host ◄── reply

终结（host 自己处理，不再转发）
  service ── api.* ─────────────────────────────────► HostApiRegistry
  render  ── tree.hostAction ───────────────────────► navigate.* handler
  service/render ── diagnostic.* ───────────────────► HostDiagnosticStore

发起（host 主动驱动两侧）
  host ── runtime.bootstrap / page.ready / page.navigateTo ──► service
  host ── runtime.bootstrap / runtime.inspectTree ──────────► render复制