[RFC] dumi 2.0 atom render solution

[PeachScript]

dumi 2.0 会提供与 Storybook Controls 类似的 Playground 功能，通过属性面板提供的 UI 控件来设置组件的 props、再实时渲染出对应结果，所以需要一个渲染方案，暂且称之为 atom renderer。

注：atom 是 dumi 资产元数据中对资产描述的最小粒度——原子资产，即组件、函数等，所以 atom renderer 意味着未来还可能支持函数渲染（或者应该叫执行）

（Storybook 的 Controls 功能截图）

方案组成

协议

用来描述渲染的参数，包含原子资产 id，类型，入参等等，数据格式为 JSON。例如一个最简单的协议数据类似这样：

{
  type: 'COMPONENT',
  id: 'Button',
  value: {
    type: 'primary',
    children: [
      {
        $$__type: 'element',
        $$__body: { componentName: 'Badge', props: { children: ['hello'] } }
      },
    ],
  },
},

简单理解，id 就是该组件在该组件库中的导出名，value 就是组件的 props、结构与 dumi 2.0 资产元数据中的预设值资产一致。

解析器

用来将渲染协议解析为实际的资产对象和调用参数。在这个过程中，我们需要根据组件 id 取得该组件的 Component 对象，而 props 中如果有嵌套 ReactNode，也需要将其转换为对应的 children 值。例如上述数据最终会变成：

{
  component: function Button(), // 实际的 FC 对象
  props: {
    type: 'primary',
    // 子组件数据也会被转换为真正的组件
    children: [React.createElement(function Badge(), null, ['hello'])],
  },
},

函数解析暂时用不到，以后再定。

渲染器

将解析器数据渲染成最终结果的内置组件。暂且命名为 AtomRenderer，接收协议参数，内部调用解析器拿到解析结果，最终执行渲染。用法类似：

import { AtomRenderer } from 'dumi';

export default () => <AtomRenderer id="Button" type="COMPONENT" value={{ ... }} />;

同时为了满足 iframe 场景（例如 H5 组件渲染、Kitchen C2D 等），dumi 还支持一个特殊路由 /~atom-renderer、可以用 PostMessage 形式传送协议数据实现 iframe 渲染，用法示例：

export default () => {
  const elm = useRef();

  useEffect(() => {
    elm.current.addEventListener('load', () => {
      elm.current.contentWindow.postMessage({ type: 'dumi:atom-render', value: JSON.stringify({ ... }) });
    });
  }, []);

  return <iframe src="/~atom-renderer" ref={elm} />;
}

开放能力

默认情况下 Playground 是直接渲染组件的，但在 H5 场景下可能需要套一层 iframe 来渲染、实现样式及逻辑（例如高清方案）隔离，所以默认主题会提供类似 PlaygroundRenderer 之类的 slots，在 dumi 支持 mobile 主题时、以及其他开发者希望定制 Playground 渲染逻辑时（例如接入其他技术栈的渲染），可以通过覆盖默认的 PlaygroundRenderer 来实现自定义。