[RFC] optimize live demo feature in 2.3 alpha version

[PeachScript]

计划对 #1905 实现的 live demo 能力做调整，出发点如下：

1. 兼容自定义技术栈
2. 适配 iframe 模式
3. 复用 demo 数据实现最小改动
4. 提升稳定性和代码写法的宽容度，不依赖正则或其他方式解析 AST

调整计划：

1. 临时文件调整：去掉 demo-scopes 和 disabled，demo 的依赖作用域直接跟着 demo 元数据走，因为 demo component 执行本身也需要依赖，所以不会增加额外的尺寸
2. 编译时调整：
   1. live 插件：去掉该插件，根据 demo 元数据解析情况自动启用
   2. transformer 的 demo 元数据中要包含依赖的原始引入 source，比如 @/constants 之类的，下方生成 context 时会用到
   3. loader：
      1. 去掉 demo scopes 的相关逻辑，处理源代码用正则不可靠，用 AST 成本高，所以改用下面 context 的模式
      2. 在 demo 数据加载逻辑里，根据 demo 依赖数据生成类似结构：

      context: {
        'react': require('react'),
        '@/constants': require('/path/to/constants.ts'),
        ...
      },

   4. 如果该 demo 元数据里没有原始 source，则判定为 demo 对应技术栈不支持 context 不生成对应数据
3. 运行时调整：
   1. 将原 evalCode、LiveProvider、useDemoScopes 及相关的 slots 合并梳理成 useLiveDemo API 和 SourceCodeEditor Slot 两部分
   2. useLiveDemo
      1. 传入 id，返回 node、error 和 setSources 参数，内部会带上 context 执行 sources 后返回新的 demo 组件，包含原 evalCode 的逻辑，但执行方式为传入虚拟的 require、module 和 exports，这样不用对源代码做特殊处理
      2. 处理编译错误的情况，要 try catch 后返回 error 供外部展示
      3. 要处理运行时错误的情况，套上 ErrorBoundary
   3. SourceCodeEditor，是 SourceCode slot 的可编辑版本，为了覆盖已经自定义 SourceCode 的场景，所以要建个新的 slot 来实现，如何工作：
      1. 提供 onTranspile 的 prop，在源码被转换的时候触发，用 sucrase transpire 源码，以便为自定义留出空间（比如 sucrase 不支持 Vue，通过替换该 slot 可自定义编译 Vue）
      2. 实现上看能否用 GitHub 的方式，在 SourceCode 上面垫一个透明的 textarea，这样可以省去 editor 的尺寸，同时要考虑 SourceCode 自定义后行高、字体发生改变的情况
      3. 考虑到编译性能，要做防抖
      4. 考虑到尺寸，sucrase 可以异步按需加载
      5. 要处理编译错误的情况，通过 onTranspile 传递 error 供外部展示
4. PreviewerActions：
   1. SourceCode 的渲染根据 demo 的 context 标记差异化渲染为 SourceCodeEditor，存在 context 才支持编辑，兼容没实现该能力的技术栈
   2. 这一期仅 index 支持编辑，后续版本再支持其他文件的编辑
   3. 增加 onSourcesChange 的 prop，聚合内部 SourceCodeEditor 的 onChange 结果返回出来
   4. Tab 栏上展示已编辑状态，比如 * index.tsx
5. Previewer：
   1. 将 PreviewerActions 的 onSourcesChange 与 useLiveDemo 的 setSources 绑定
   2. 通过 useLiveDemo 获取实时编译的组件，存在 liveDemoNode 时替代 props.children 渲染
   3. 如果是 iframe 模式，则通过 postMessage 传递给 iframe 内的 DemoRenderPage 去做实时编译渲染
6. DemoRenderPage：
   1. 将 iframe 父级的 postMessage 数据与 useLiveDemo 的 setSources 绑定
   2. 通过 useLiveDemo 获取实时编译的组件，存在 liveDemoNode 时替代 demo.component 渲染