[RFC] support sandpack

[DBSDs]

背景

支持 sandpack 进行 demo 实时编辑预览 #1798 (comment)

主要按照如下需求实现：

1. 新增一个 sandpack 的按钮
2. 点击按钮后会把默认的预览换成 sandpack 的组件（最好 sandpack 是通过 umd 按需加载的），同时隐藏默认的源码展示和其他按钮，除非退出 sandpack 模式
3. 源码的参数比如 demo 文件内容可以通过 Previewer 的 props 拿到，不需要用 raw-loader

方案组成

1. 需要在 Previewer 中控制 sandpack 是否显示，伪代码大致如下：

// 新增 state
+ const [showSandPack, setShowSandPack] = useState(false);

{showSandPack ? (
  <Sandpack {...props} />
) : (
  <div className="dumi-default-previewer-demo">
  // ...
  </div>
)}

<PreviewerActions
  {...props}
+ showSandPack={showSandPack}
+ onSandpackClick={() => setShowSandPack((prev) => !prev)}
  demoContainer={
    props.iframe
      ? (demoContainer.current?.firstElementChild as HTMLIFrameElement)
      : demoContainer.current!
  }
/>

// 同时 PreviewerActions 新增 sandpack 按钮

2. dumi/theme/slots 新增 Sandpank ，代码如下，实现懒加载功能

import { type IPreviewerProps } from 'dumi';
import React, { Suspense, lazy, memo, type FC } from 'react';
const SandpackRoot = lazy(() => import('./SandpackRoot'));

import './index.less';

type SandPackWrapperProps = IPreviewerProps;

const SandpackFallback = () => {
  return <div className="dumi-default-sandpack-fallback-layout"></div>;
};

const SandPackWrapper: FC<SandPackWrapperProps> = memo((props) => {
  return (
    <Suspense fallback={<SandpackFallback />}>
      {<SandpackRoot {...props} />}
    </Suspense>
  );
});

export default SandPackWrapper;

3. SandpackRoot 代码如下

import { Sandpack } from '@codesandbox/sandpack-react';
import {
  genReactRenderCode,
  usePrefersColor,
  type IPreviewerProps,
} from 'dumi';
import * as React from 'react';

type SandpackRootProps = IPreviewerProps;

function SandpackRoot(props: SandpackRootProps) {
  const [themeColor] = usePrefersColor();
  const isTSX = Boolean(props.asset.dependencies?.['index.tsx']);
  const ext = isTSX ? '.tsx' : '.jsx';
  // 处理需要提交给 sandpack 的入口文件，依赖，以及注入文件
  // 以下逻辑类似 openStackBlitz.ts/openCodeSandbox.ts
  const entryFileName = `index${ext}`;
  const deps: Record<string, string> = {};
  const files: Record<string, string> = {};
  Object.entries(props.asset.dependencies).forEach(
    ([name, { type, value }]) => {
      if (type === 'NPM') {
        // generate dependencies
        deps[name] = value;
      } else {
        // append other imported local files
        files[name === entryFileName ? `App${ext}` : name] = value;
      }
    },
  );
  deps['react'] ??= 'latest';
  deps['react-dom'] ??= deps.react;
  files[entryFileName] = genReactRenderCode(deps.react);

  files['package.json'] = JSON.stringify(
    {
      name: props.title,
      description: props.description || 'An auto-generated demo by dumi',
      dependencies: deps,
      // add TypeScript dependency if required, must in devDeps to avoid csb compile error
      devDependencies: isTSX ? { typescript: '^4' } : {},
    },
    null,
    2,
  );

  return (
    <Sandpack
      theme={themeColor}
      files={files}
      options={{
        autorun: true,
        showConsoleButton: true,
        visibleFiles: Object.keys(files)
          .filter((key) => key !== 'package.json' && key !== entryFileName)
          .map((key) => `/${key}`),
        activeFile: `/App.${ext}`,
      }}
      customSetup={{
        dependencies: deps,
        entry: entryFileName,
      }}
    />
  );
}

export default SandpackRoot;

4. 同时引入一些 bugfixes sandpack index.less

@import (reference) '../../styles/variables.less';

.@{prefix}-sandpack-fallback {
  &-layout {
    height: 300px;
    background-color: #ffffff;
    border: 1px solid #EFEFEF;

    @{dark-selector} & {
      background-color: #151515;
      border: 1px solid #252525;
    }
  }
}

// 修复 rtl 下编辑器文字异常情况
.cm-editor {
  direction: ltr;
}

由于 dumi tooltip 会被加载中的 sandpack 遮挡，故在 index.less 中添加 z-index: 3

[data-dumi-tooltip] {
   position: relative;
+ z-index: 3;
  ...
}

目前效果

2023-12-11.01.mov

存在问题 or TODO

• 未引入 lint 插件，无法和 React.dev 官网中一样对报错精确到行
• 基本使用原生 sandpack 组件，未对 sandpack 做高度定制化，导致控制台按钮为 open sandpack 英文
• 未使用 cdn 进行加速 https://sandpack.codesandbox.io/docs/advanced-usage/bundlers
• 加载 sandpack 时的 network 中，有一条错误连接 (react 官网依旧有一条错误连接)

如果对以上方案有建议或者想法，欢迎在下方一起讨论。

[PeachScript]

感谢贡献 RFC，很迅速很详细 👍

看了下 RFC 中演示的能力和体验，对比 dumi 可提供的几种 demo 修改方式：

方式/特性	操作便利	速度	稳定性	增加依赖	修改非入口文件
Live Demo	是	快	稳定	不支持	暂不支持
Sandpack	是	慢	取决于网络	支持	支持
CodeSandbox	否	慢	取决于网络	支持	支持

从上面的对比来看，Sandpack 相比于 CodeSandbox 的优势就在于便利性，而 Live Demo 能提供更快更稳定的预览体验，Sandpack 作为中间的选项适用场景可能不多，所以我倾向于先不做 Sandpack 的支持，对于用户来说我们提供两种 demo 修改预览的方式：

1. 轻量编辑： 走 Live Demo
2. 重度编辑： 在 CodeSandbox 中打开

你看看有没有不同的想法