feat: lowcode component add error placeholder

packages/react-simulator-renderer/src/renderer.ts

@@ -39,10 +39,6 @@ export class DocumentInstance {
 
   private disposeFunctions: Array<() => void> = [];
 
-  constructor(readonly container: SimulatorRendererContainer, readonly document: DocumentModel) {
-    makeObservable(this);
-  }
-
   @obx.ref private _components: any = {};
 
   @computed get components(): object {
@@ -98,6 +94,10 @@ export class DocumentInstance {
     return this.document.id;
   }
 
+  constructor(readonly container: SimulatorRendererContainer, readonly document: DocumentModel) {
+    makeObservable(this);
+  }
+
   private unmountInstance(id: string, instance: ReactInstance) {
     const instances = this.instancesMap.get(id);
     if (instances) {
@@ -170,8 +170,7 @@ export class DocumentInstance {
     host.setInstance(this.document.id, id, instances);
   }
 
-  mountContext(docId: string, id: string, ctx: object) {
-    // this.ctxMap.set(id, ctx);
+  mountContext() {
   }
 
   getNode(id: string): Node | null {
@@ -195,6 +194,60 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
     return this._documentInstances;
   }
 
+  @obx private _layout: any = null;
+
+  @computed get layout(): any {
+    // TODO: parse layout Component
+    return this._layout;
+  }
+
+  set layout(value: any) {
+    this._layout = value;
+  }
+
+  private _libraryMap: { [key: string]: string } = {};
+
+  private _components: any = {};
+
+  get components(): object {
+    // 根据 device 选择不同组件，进行响应式
+    // 更好的做法是，根据 device 选择加载不同的组件资源，甚至是 simulatorUrl
+    return this._components;
+  }
+  // context from: utils、constants、history、location、match
+  @obx.ref private _appContext: any = {};
+  @computed get context(): any {
+    return this._appContext;
+  }
+  @obx.ref private _designMode: string = 'design';
+  @computed get designMode(): any {
+    return this._designMode;
+  }
+  @obx.ref private _device: string = 'default';
+  @computed get device() {
+    return this._device;
+  }
+  @obx.ref private _locale: string | undefined = undefined;
+  @computed get locale() {
+    return this._locale;
+  }
+  @obx.ref private _componentsMap = {};
+  @computed get componentsMap(): any {
+    return this._componentsMap;
+  }
+
+  /**
+   * 是否为画布自动渲染
+   */
+  autoRender = true;
+
+  /**
+   * 画布是否自动监听事件来重绘节点
+   */
+  autoRepaintNode = true;
+
+  private _running = false;
+
   constructor() {
     makeObservable(this);
     this.autoRender = host.autoRender;
@@ -306,19 +359,6 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
     });
   }
 
-  @obx private _layout: any = null;
-
-  @computed get layout(): any {
-    // TODO: parse layout Component
-    return this._layout;
-  }
-
-  set layout(value: any) {
-    this._layout = value;
-  }
-
-  private _libraryMap: { [key: string]: string } = {};
-
   private buildComponents() {
     this._components = buildComponents(
         this._libraryMap,
@@ -330,44 +370,6 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
       ...this._components,
     };
   }
-  private _components: any = {};
-
-  get components(): object {
-    // 根据 device 选择不同组件，进行响应式
-    // 更好的做法是，根据 device 选择加载不同的组件资源，甚至是 simulatorUrl
-    return this._components;
-  }
-  // context from: utils、constants、history、location、match
-  @obx.ref private _appContext: any = {};
-  @computed get context(): any {
-    return this._appContext;
-  }
-  @obx.ref private _designMode: string = 'design';
-  @computed get designMode(): any {
-    return this._designMode;
-  }
-  @obx.ref private _device: string = 'default';
-  @computed get device() {
-    return this._device;
-  }
-  @obx.ref private _locale: string | undefined = undefined;
-  @computed get locale() {
-    return this._locale;
-  }
-  @obx.ref private _componentsMap = {};
-  @computed get componentsMap(): any {
-    return this._componentsMap;
-  }
-
-  /**
-   * 是否为画布自动渲染
-   */
-  autoRender = true;
-
-  /**
-   * 画布是否自动监听事件来重绘节点
-   */
-  autoRepaintNode = true;
 
   /**
    * 加载资源
@@ -457,6 +459,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
           appHelper: renderer.context,
           rendererName: 'LowCodeRenderer',
           thisRequiredInJSE: host.thisRequiredInJSE,
+          faultComponent: host.faultComponent,
           customCreateElement: (Comp: any, props: any, children: any) => {
             const componentMeta = host.currentDocument?.getComponentMeta(Comp.displayName);
             if (componentMeta?.isModal) {
@@ -479,8 +482,6 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
     return LowCodeComp;
   }
 
-  private _running = false;
-
   run() {
     if (this._running) {
       return;

packages/renderer-core/src/renderer/renderer.tsx

@@ -86,8 +86,9 @@ export default function rendererFactory(): IRenderComponent {
       debug(`entry.componentWillUnmount - ${this.props?.schema?.componentName}`);
     }
 
-    async componentDidCatch(e: any) {
-      console.warn(e);
+    componentDidCatch(error: Error) {
+      this.state.engineRenderError = true;
+      this.state.error = error;
     }
 
     shouldComponentUpdate(nextProps: IRendererProps) {
@@ -182,6 +183,13 @@ export default function rendererFactory(): IRenderComponent {
         }
       }
 
+      if (this.state && this.state.engineRenderError) {
+        return createElement(this.getFaultComponent(), {
+          ...this.props,
+          error: this.state.error,
+        });
+      }
+
       if (Comp) {
         return createElement(AppContext.Provider, { value: {
           appHelper,

packages/renderer-core/src/types/index.ts

@@ -323,10 +323,10 @@ export interface IRenderComponent {
   new(props: IRendererProps, context: any): IGeneralComponent<IRendererProps, IRendererState> & {
     [x: string]: any;
     __getRef: (ref: any) => void;
-    componentDidMount(): Promise<void>;
-    componentDidUpdate(): Promise<void>;
-    componentWillUnmount(): Promise<void>;
-    componentDidCatch(e: any): Promise<void>;
+    componentDidMount(): Promise<void> | void;
+    componentDidUpdate(): Promise<void> | void;
+    componentWillUnmount(): Promise<void> | void;
+    componentDidCatch(e: any): Promise<void> | void;
     shouldComponentUpdate(nextProps: IRendererProps): boolean;
     isValidComponent(SetComponent: any): any;
     patchDidCatch(SetComponent: any): void;