Playground real-time editing feature #578
Assignees
Labels
Comments
这些最好还是保留，因为这些平台可以存用户修改后的数据。 |
|
这个看起来完整做完工作量不小，建议先放一放，等编辑器比较稳定了再回头来搞这个，不着急。 |
嗯，我的意思是只保留一个就行了 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
前言
目前不管是示例页还是文档中内嵌的示例，都只提供代码+显示效果的展示，代码不能够实时编辑。提供一个可以实时编辑/编译/显示效果的游乐场对于用户学习引擎的使用非常有帮助，本issue旨在基于 sandpack 来实现一个交互式的游乐场功能。
现状梳理
目前游乐场写了一些示例场景的代码来展示某个引擎 api 如何调用，以及对应的显示效果是什么。游乐场代码中还掺入了 dat.gui 的逻辑，用来调整 api 对应的参数。
因为目前不支持在当前页面做实时编辑操作，所以游乐场的代码支持在 codesandbox、stackblitz 以及 codepen 中打开，引导用户在这些第三方代码编辑平台中做代码编辑的操作。
在文档页面中，我们现在使用 react-markdown 来渲染 markdown 文件，在生成 Markdown AST 的过程中，针对代码中的特定语法
<playground来渲染出 Playground 组件。目标
当然，我们的目的不是追求在文档中实现一个功能全面的代码编辑器，而是在编辑器文档中，给用户提供更便捷的方法来学习对应的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 的接入是有一些成本的，这个我们要考虑一下。
访问速度
有两方面要考虑：npm package 的索引和 bundler 的请求。像是 oasis-engine 和 oasis-engine-toolkit 这种第三方包的加载我看是走的 jsdelivr，目前国内速度还行，如果不稳定的话我们需要自己搭一个 npm registry 来托管。
bundler 的话，sandpack 提供了一个 client 版本的 bundler，可以实现自行托管。
TODO
The text was updated successfully, but these errors were encountered: