feat: optimize the error prompts and editing experience of vue demo

jeffwcx commented 2 months ago

让第三方框架(比如Vue)应用拥有如React Demo一样的错误提示和编辑体验（之前闪烁比较明显）
由于第三方框架（有renderer）的错误抛出是异步的，所以其在iframe中的消息发出时机需要有所改变，主要是要取决于 userRenderer 中 resolveRenderer 何时完成
IDemoCancelableFn 添加两个参数，插件开发者可根据其实现的框架，在不同时机抛出不同的错误，一般来说，开发者要确保demo会被正确mount，当demo不能正确mount时应调用onInitError, 在mount之后，如果demo在运行时生命周期或者是用户交互报的错误，则应该调用onRuntimeError.

除此之外，组件库开发者如果编写了错误的demo，dumi会直接在renderer调用onInitError时直接抛出错误，被ErrorBoundary捕获
```
export type IDemoCancelableFn = (
options?: {
  /**
   * If the renderer of a third-party application invokes this function,
   * it will be processed by the react application in ErrorBoundary
   */
  onRuntimeError?: (error: Error) => void;
  /**
   * Error message will only be given below the Demo
   *
   * Usually this is an error during demo initialization.
   */
  onInitError?: (error: Error) => void;
},
) => (() => void) | Promise<() => void>;
```

Language	Changelog
🇺🇸 English	optimize the error prompts and editing experience of vue demo
🇨🇳 Chinese	优化vue demo的错误提示及编辑体验

vercel[bot] commented 2 months ago

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

Name	Status	Preview	Comments	Updated (UTC)
dumi	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 25, 2024 8:06am

jeffwcx commented 2 months ago

看看喽，我还以为很快写完的，结果问题远比我想象的多 @PeachScript

umijs / dumi