fix: 低代码组件丢失代码找回

packages/designer/src/designer/designer.ts

@@ -454,7 +454,7 @@ export class Designer {
     designer._componentMetasMap.forEach((config, key) => {
       const metaData = config.getMetadata();
       if (metaData.devMode === 'lowcode') {
-        maps[key] = this.currentDocument?.simulator?.createComponent(metaData.schema!);
+        maps[key] = metaData.schema;
       } else {
         const view = metaData.experimental?.view;
         if (view) {

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

@@ -18,7 +18,7 @@ import { RootSchema, ComponentSchema, TransformStage, NodeSchema } from '@ali/lo
 // import { isESModule, isElement, acceptsRef, wrapReactClass, cursor, setNativeSelection } from '@ali/lowcode-utils';
 // import { RootSchema, NpmInfo, ComponentSchema, TransformStage, NodeSchema } from '@ali/lowcode-types';
 // just use types
-import { BuiltinSimulatorRenderer, NodeInstance, Component } from '@ali/lowcode-designer';
+import { BuiltinSimulatorRenderer, NodeInstance, Component, DocumentModel } from '@ali/lowcode-designer';
 import { createMemoryHistory, MemoryHistory } from 'history';
 import Slot from './builtin-components/slot';
 import Leaf from './builtin-components/leaf';
@@ -41,17 +41,13 @@ export class DocumentInstance {
     });
   }
 
-  @obx.ref private _schema?: RootSchema;
+  // private _libraryMap: { [key: string]: string } = {};
-  @computed get schema(): any {
+  // private buildComponents() {
-    return this._schema;
+  //   this._components = {
-  }
+  //     ...builtinComponents,
-  private _libraryMap: { [key: string]: string } = {};
+  //     ...buildComponents(this._libraryMap, this._componentsMap),
-  private buildComponents() {
+  //   };
-    this._components = {
+  // }
-      ...builtinComponents,
-      ...buildComponents(this._libraryMap, this._componentsMap),
-    };
-  }
   @obx.ref private _components: any = {};
   @computed get components(): object {
     // 根据 device 选择不同组件，进行响应式
@@ -271,6 +267,10 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
   private buildComponents() {
     // TODO: remove this.createComponent
     this._components = buildComponents(this._libraryMap, this._componentsMap, this.createComponent.bind(this));
+    this._components = {
+      ...builtinComponents,
+      ...this._components,
+    }
   }
   @obx.ref private _components: any = {};
   @computed get components(): object {
@@ -348,11 +348,8 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
     cursor.release();
   }
 
-  createComponent(schema: ComponentSchema): Component | null {
+  createComponent(schema: NodeSchema): Component | null {
-    return null;
+    let _schema: any = {
-    // TODO: use ComponentEngine refactor
-    /*
-    const _schema = {
       ...schema,
     };
     _schema.methods = {};
@@ -367,8 +364,8 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
       doc.getElementsByTagName('head')[0].appendChild(s);
     }
 
-    const node = host.document.createNode(_schema);
+    const node = host.currentDocument?.createNode(_schema);
-    _schema = node.export(TransformStage.Render);
+    _schema = node?.export(TransformStage.Render);
 
     const processPropsSchema = (propsSchema: any, propsMap: any): any => {
       if (!propsSchema) {
@@ -395,17 +392,16 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
     };
 
     const renderer = this;
-    const componentsMap = renderer.componentsMap;
+    const { componentsMap } = renderer;
 
     class Ele extends React.Component<{ schema: any; propsMap: any }> {
       private isModal: boolean;
 
       constructor(props: any) {
         super(props);
-        const componentMeta = host.document.getComponentMeta(props.schema.componentName);
+        const componentMeta = host.currentDocument?.getComponentMeta(props.schema.componentName);
         if (componentMeta?.prototype?.isModal()) {
           this.isModal = true;
-          return;
         }
       }
 
@@ -423,19 +419,12 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
           children = schema.children.map((item: any) => createElement(Ele, { schema: item, propsMap }));
         }
         const props = processPropsSchema(schema.props, propsMap);
-        const _leaf = host.document.createNode(schema);
+        const _leaf = host.currentDocument?.createNode(schema);
 
         return createElement(Com, { ...props, _leaf }, children);
       }
-      const _leaf = this.document.designer.currentDocument?.createNode(schema);
+    }
-      const node = this.document.createNode(schema);
-      let props = processPropsSchema(schema.props, propsMap);
-      props = this.document.designer.transformProps(props, node, TransformStage.Init);
-      props = this.document.designer.transformProps(props, node, TransformStage.Render);
-      return createElement(Com, { ...props, _leaf }, children);
-    };
 
-    const container = this;
     class Com extends React.Component {
       // TODO: 暂时解决性能问题
       shouldComponentUpdate() {
@@ -443,7 +432,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
       }
 
       render() {
-        const componentName = _schema.componentName;
+        const { componentName } = _schema;
         if (componentName === 'Component') {
           let children = [];
           const propsMap = this.props || {};
@@ -458,7 +447,6 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
     }
 
     return Com;
-    */
   }
 
   private _running = false;
@@ -559,4 +547,4 @@ function checkInstanceMounted(instance: any): boolean {
   return true;
 }
 
-export default new SimulatorRendererContainer();
+export default new SimulatorRendererContainer();

packages/utils/src/build-components.ts

@@ -1,7 +1,9 @@
-import { ComponentType, forwardRef, createElement } from 'react';
+import { ComponentType, forwardRef, createElement, FunctionComponent } from 'react';
-import { NpmInfo } from '@ali/lowcode-types';
+import { NpmInfo, ComponentSchema } from '@ali/lowcode-types';
+import { Component } from '@ali/lowcode-designer';
 import { isReactComponent } from './is-react';
 import { isESModule } from './is-es-module';
+import { acceptsRef, wrapReactClass } from './is-react';
 
 interface LibraryMap {
   [key: string]: string;
@@ -75,12 +77,18 @@ function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmI
   return getSubComponent(library, paths);
 }
 
-export function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo | ComponentType<any> }) {
+export function buildComponents(libraryMap: LibraryMap,
-  const components: any = {
+  componentsMap: { [componentName: string]: NpmInfo | ComponentType<any> | ComponentSchema },
-  };
+  createComponent: (schema: ComponentSchema) => Component | null) {
+  const components: any = {};
   Object.keys(componentsMap).forEach((componentName) => {
     let component = componentsMap[componentName];
-    if (isReactComponent(component)) {
+    if (component && (component as ComponentSchema).componentName === 'Component') {
+      components[componentName] = createComponent(component as ComponentSchema);
+    } else if (isReactComponent(component)) {
+      if (!acceptsRef(component)) {
+        component = wrapReactClass(component as FunctionComponent);
+      }
       components[componentName] = component;
     } else {
       component = findComponent(libraryMap, componentName, component);