From 9228a2baa702eb72eb556967c25a73d175c534bd Mon Sep 17 00:00:00 2001 From: liujuping Date: Wed, 1 Mar 2023 16:49:39 +0800 Subject: [PATCH] feat: lowcode component add error placeholder --- .../react-simulator-renderer/src/renderer.ts | 119 +++++++++--------- .../renderer-core/src/renderer/renderer.tsx | 12 +- packages/renderer-core/src/types/index.ts | 8 +- 3 files changed, 74 insertions(+), 65 deletions(-) diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index e76bfb585..766150028 100644 --- a/packages/react-simulator-renderer/src/renderer.ts +++ b/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; diff --git a/packages/renderer-core/src/renderer/renderer.tsx b/packages/renderer-core/src/renderer/renderer.tsx index c0f1c2afc..d936b7d91 100644 --- a/packages/renderer-core/src/renderer/renderer.tsx +++ b/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, diff --git a/packages/renderer-core/src/types/index.ts b/packages/renderer-core/src/types/index.ts index 4e44dd312..067bf2153 100644 --- a/packages/renderer-core/src/types/index.ts +++ b/packages/renderer-core/src/types/index.ts @@ -323,10 +323,10 @@ export interface IRenderComponent { new(props: IRendererProps, context: any): IGeneralComponent & { [x: string]: any; __getRef: (ref: any) => void; - componentDidMount(): Promise; - componentDidUpdate(): Promise; - componentWillUnmount(): Promise; - componentDidCatch(e: any): Promise; + componentDidMount(): Promise | void; + componentDidUpdate(): Promise | void; + componentWillUnmount(): Promise | void; + componentDidCatch(e: any): Promise | void; shouldComponentUpdate(nextProps: IRendererProps): boolean; isValidComponent(SetComponent: any): any; patchDidCatch(SetComponent: any): void;