feat: 添加在codepen中打开

[Zhou-Bill]

🤔 这个变动的性质是？/ What is the nature of this change?

• 新特性提交 / New feature
• bug 修复 / Fix bug
• 样式优化 / Style optimization
• 代码风格优化 / Code style optimization
• 性能优化 / Performance optimization
• 构建优化 / Build optimization
• 网站、文档、Demo 改进 / Website, documentation, demo improvements
• 重构代码或样式 / Refactor code or style
• 测试相关 / Test related
• 其他 / Other

🔗 相关 Issue / Related Issue

#1157

💡 需求背景和解决方案 / Background or solution

添加在codepen 中打开

• 创建隐藏form
• 创建input 将demo 中的 asset.dependencies 转成 字符串
• 提交到codepen

从ant-design 官网参考了下从codepen打开的实现方式

https://github.com/ant-design/ant-design/blob/893b5285c018fec937f8422872e955850c3e68fa/.dumi/theme/builtins/Previewer/CodePreviewer.tsx#L256

📝 更新日志 / Changelog

组件demo 多了 从codepen 打开的按钮

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dumi	❌ Failed (Inspect)			Jul 6, 2023 3:12pm

[PeachScript]

感谢贡献，之前尝试接入 CodePen 的时候因为它无法支持多文件所以放弃了，这个方案有解多文件的问题吗

[Zhou-Bill]

这里处理多文件引入

[Zhou-Bill]

感谢贡献，之前尝试接入 CodePen 的时候因为它无法支持多文件所以放弃了，这个方案有解多文件的问题吗

codePen 下只能有一个js 文件。 我目前的做法是： markdown 引用其他文件的情况下，会其他文件内容都写到一个js 里面，然后将 import xxxx from 'xx' replace 成空字符串，（ 相当于把所有的内容都塞到一个文件里面，将多余的import 去除 )

另外这里有个问题，如果项目中依赖第三方包，且没有cdn 地址的话，在codepen 中预览也是有问题的，我在antd也遇过

[PeachScript]

明白，那这个功能的普适性可能不太高，单纯的文件合并很容易出现变量命名冲突之类的情况，我倾向于先不将该功能加到默认主题中；如果你的项目中需要在 CodePen 打开的功能，可以考虑使用 PreviewerActionsExtra 的 slot 将它加上。

简单的示意，创建 .dumi/theme/slots/PreviewerActionsExtra.tsx，内容大致为：

import type OriginalPreviewerActionsExtra from 'dumi/theme-default/slots/PreviewerActionsExtra';

const PreviewerActionsExtra: typeof OriginalPreviewerActionsExtra = (props) => (
  /* 实现 CodePen 按钮 */
);

export default PreviewerActionsExtra;