feat: 是否考虑支持 sandpack？

[wabi-habi]

是否考虑支持 sandpack？

https://sandpack.codesandbox.io/docs/getting-started

[PeachScript]

是指 demo 实时编辑预览吗，能支持自然很好但目前没精力做，如果你感兴趣的话欢迎 PR

ref 下以前的讨论：https://github.com/umijs/dumi/issues/623#issuecomment-1449273652

[github-actions[bot]]

Hello @wabi-habi. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please be sure to fill in the default template in the Pull Request, provide changelog/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @wabi-habi，我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[wabi-habi]

是指 demo 实时编辑预览吗，能支持自然很好但目前没精力做，如果你感兴趣的话欢迎 PR

ref 下以前的讨论：#623 (comment)

当然，我是个菜鸟，没啥思路的，期待各位大佬的贡献了！

[fewismuch]

sandpack在dumi中可以直接使用，但是sandpack依赖一个sandbox的一个服务，国内网络可能不太好

<Sandpack
        theme="light"
        files={{
          '/Button.js': `export const Button = () => {
            console.log(1)
    return <div style={{ border: '1px solid #ccc', padding: 10 }}>btn</div>;
};`,
          '/App.js': `import {Button} from './Button';
          export default function App() {
            return <Button/>
          }`,
        }}
        options={{
          visibleFiles: ['/App.js', '/Button.js'],
          activeFile: '/Button.js',
          showLineNumbers: true,
          showInlineErrors: true,
          showConsoleButton: true,
        }}
        template="react"
      />

代码文本可以通过 raw-loader这个webpack插件获取，示例如下

import buttonCode from '!!raw-loader!./Button'

[PeachScript]

@fewismuch 有兴趣把它实现到 dumi 默认的 Previewer 里吗，设想的大致效果：

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

[fewismuch]

@fewismuch 有兴趣把它实现到 dumi 默认的 Previewer 里吗，设想的大致效果：

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

多谢邀请，但目前没足够的精力

[DBSDs]

这个问题我可以试下吗？

[PeachScript]

@DBSDs 非常欢迎，但这个 feature 应该比较复杂，建议先调研下在 Discussion 里写个 RFC 讨论下

另外同步下目前与这个 feature 有关的进展：

1. @MadCcc 在 feature 分支实现了一个基础的 live demo，目前用在了 Ant Design 官网上，相关 PR：https://github.com/umijs/dumi/pull/1905
2. 我正在熟悉这个 PR，打算做一些调整后作为 2.3.0 的特性之一发布，2.3 的计划

你可以先看看上面的信息，有两个可选的推进路线：

1. 基于目前 feature 分支的 live demo 思路做完善，但缺点是不可能和 sandpack 一样拥有类似 CloudIDE 的能力（比如无法安装依赖包）
2. 尝试基于 sandpack 的方案，如果可行则未来和 1 一起，作为 dumi live demo 的可选方案（内置 or 官方 plugin），用户可以根据自己的需求进行切换

[DBSDs]

好的，RFC 已创建 https://github.com/umijs/dumi/discussions/1979#discussion-5945504