Playground real-time editing feature

[MrKou47]

前言

目前不管是示例页还是文档中内嵌的示例，都只提供代码+显示效果的展示，代码不能够实时编辑。提供一个可以实时编辑/编译/显示效果的游乐场对于用户学习引擎的使用非常有帮助，本issue旨在基于 sandpack 来实现一个交互式的游乐场功能。

现状梳理

目前游乐场写了一些示例场景的代码来展示某个引擎 api 如何调用，以及对应的显示效果是什么。游乐场代码中还掺入了 dat.gui 的逻辑，用来调整 api 对应的参数。 因为目前不支持在当前页面做实时编辑操作，所以游乐场的代码支持在 codesandbox、stackblitz 以及 codepen 中打开，引导用户在这些第三方代码编辑平台中做代码编辑的操作。 在文档页面中，我们现在使用 react-markdown 来渲染 markdown 文件，在生成 Markdown AST 的过程中，针对代码中的特定语法 <playground 来渲染出 Playground 组件。

目标

• [ ] 在本页面实现实时编辑/编译/显示的功能
• [ ] 代码编辑支持 auto-completion
• [ ] 支持 typescript 语法
• [ ] 支持 code formatter
• [ ] 支持在本页面保存代码以及回退到未编辑的状态
• [ ] 文档中内嵌的示例，支持最大化到全屏来提供更好的编辑体验
• [ ] 内置 oasis-engine-toolkit

当然，我们的目的不是追求在文档中实现一个功能全面的代码编辑器，而是在编辑器文档中，给用户提供更便捷的方法来学习对应的api或者效果的实现方式。因此，我们的实现方案应更轻量。

方案

在调研了一些其他产品的方案后，我倾向使用 codesandbox 推出的 sandpack 来实现。sandpack 内置了一个 react 组件，可以用最简单的方式来接入到项目中。sandpack 基于 codemirror，同时提供了很多客制化的功能。

针对我们的需求来说：

模板代码

支持。

我们可以定义一些模板代码(比如 index.html，index.js)，对用户不暴露这些启动代码。

主题

支持。可自定义主题，提供主题定制能力。

real-time editing

默认支持，同时提供一个简单的 Console

代码编辑支持 auto-completion

不支持。需调研方案

内置 oasis-engine-toolkit

支持。提供 dependencies 的配置能力，我们可根据playground的所依赖的引擎版本来配置。

不足

typescript

目前 sandpack 没有官方支持 typescript，也没有推出 language server 的计划。所以 ts 的接入是有一些成本的，这个我们要考虑一下。

一些社区实现: https://discuss.codemirror.net/t/codemirror-6-and-typescript-lsp/3398/34 https://codesandbox.io/s/typescript-lsp-forked-9xldy8?file=/src/App.tsx https://codesandbox.io/s/github/danilowoz/sandpack-tsserver

访问速度

有两方面要考虑：npm package 的索引和 bundler 的请求。像是 oasis-engine 和 oasis-engine-toolkit 这种第三方包的加载我看是走的 jsdelivr，目前国内速度还行，如果不稳定的话我们需要自己搭一个 npm registry 来托管。

bundler 的话，sandpack 提供了一个 client 版本的 bundler，可以实现自行托管。

TODO

• [ ] 拆分现有 playground 代码
• [ ] 接口侧要做修改来获取一个playground下的多份代码
• [ ] 新建静态站点托管 client
• [ ] 接入sandpack来支持上述功能