fix: createComponent 支持所有 schema

packages/designer/src/builtin-simulator/host.ts

@@ -31,7 +31,7 @@ import {
   CanvasPoint,
 } from '../designer';
 import { parseMetadata } from './utils/parse-metadata';
-import { ComponentMetadata, ComponentSchema } from '@ali/lowcode-types';
+import { ComponentMetadata, NodeSchema } from '@ali/lowcode-types';
 import { BuiltinSimulatorRenderer } from './renderer';
 import clipboard from '../designer/clipboard';
 import { LiveEditing } from './live-editing/live-editing';
@@ -542,7 +542,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     return this.renderer?.getComponent(componentName) || null;
   }
 
-  createComponent(schema: ComponentSchema): Component | null {
+  createComponent(schema: NodeSchema): Component | null {
     return this.renderer?.createComponent(schema) || null;
   }
 

packages/designer/src/builtin-simulator/renderer.ts

@@ -1,9 +1,9 @@
 import { ComponentInstance, NodeInstance, Component } from '../simulator';
-import { ComponentSchema } from '@ali/lowcode-types';
+import { NodeSchema } from '@ali/lowcode-types';
 
 export interface BuiltinSimulatorRenderer {
   readonly isSimulatorRenderer: true;
-  createComponent(schema: ComponentSchema): Component | null;
+  createComponent(schema: NodeSchema): Component | null;
   getComponent(componentName: string): Component;
   getComponentInstances(id: string): ComponentInstance[] | null;
   getClosestNodeInstance(from: ComponentInstance, nodeId?: string): NodeInstance<ComponentInstance> | null;

packages/designer/src/document/node/node-children.ts

@@ -87,7 +87,7 @@ export class NodeChildren {
     return this.size > 0;
   }
 
-  @computed length() {
+  @computed get length(): number {
     return this.children.length;
   }
 

packages/designer/src/document/node/node.ts

@@ -73,6 +73,7 @@ import { EventEmitter } from 'events';
  *  hidden
  */
 export class Node<Schema extends NodeSchema = NodeSchema> {
+  static Props = Props;
   private emitter: EventEmitter;
   /**
    * 是节点实例
@@ -866,10 +867,20 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     return this.document.simulator?.computeRect(this) || null;
   }
 
+  /**
+   * @deprecated
+   */
   getPrototype() {
     return this.componentMeta.prototype;
   }
 
+  /**
+   * @deprecated
+   */
+  setPrototype(proto: any) {
+    this.componentMeta.prototype = proto;
+  }
+
   getIcon() {
     return this.icon;
   }

packages/designer/src/simulator.ts

@@ -1,5 +1,5 @@
 import { Component as ReactComponent, ComponentType } from 'react';
-import { ComponentMetadata, ComponentSchema } from '@ali/lowcode-types';
+import { ComponentMetadata, NodeSchema } from '@ali/lowcode-types';
 import { ISensor, Point, ScrollTarget, IScrollable } from './designer';
 import { Node } from './document';
 
@@ -127,9 +127,9 @@ export interface ISimulatorHost<P = object> extends ISensor {
    */
   getComponentInstances(node: Node): ComponentInstance[] | null;
   /**
-   * 根据低代码组件 schema 创建组件类
+   * 根据 schema 创建组件类
    */
-  createComponent(schema: ComponentSchema): Component | null;
+  createComponent(schema: NodeSchema): Component | null;
   /**
    * 根据节点获取节点的组件运行上下文
    */

packages/editor-preset-vision/src/index.ts

@@ -26,6 +26,7 @@ import Viewport from './viewport';
 import Project from './project';
 import { designer, editor } from './editor';
 import Symbols from './symbols';
+import { Node } from '@ali/lowcode-designer';
 
 import './vision.less';
 
@@ -112,6 +113,7 @@ const VisualEngine = {
   Project,
   logger,
   Symbols,
+  Node,
 };
 
 (window as any).VisualEngine = VisualEngine;

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

@@ -8,7 +8,7 @@ import { getClientRects } from './utils/get-client-rects';
 import loader from './utils/loader';
 import { reactFindDOMNodes, FIBER_KEY } from './utils/react-find-dom-nodes';
 import { isESModule, isElement, cursor, setNativeSelection } from '@ali/lowcode-utils';
-import { RootSchema, NpmInfo, ComponentSchema, TransformStage } from '@ali/lowcode-types';
+import { RootSchema, NpmInfo, ComponentSchema, TransformStage, NodeSchema } from '@ali/lowcode-types';
 // just use types
 import { BuiltinSimulatorRenderer, NodeInstance, Component } from '@ali/lowcode-designer';
 import Slot from './builtin-components/slot';
@@ -212,7 +212,7 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
     return this.instancesMap.get(id) || null;
   }
 
-  createComponent(schema: ComponentSchema): Component | null {
+  createComponent(schema: NodeSchema): Component | null {
     let _schema: any = {
       ...schema,
     };
@@ -267,6 +267,9 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
         }
         const { schema, propsMap } = this.props;
         const Com = componentsMap[schema.componentName];
+        if (!Com) {
+          return null;
+        }
         let children = null;
         if (schema.children && schema.children.length > 0) {
           children = schema.children.map((item: any) => createElement(Ele, {schema: item, propsMap}));
@@ -280,12 +283,17 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
 
     class Com extends React.Component {
       render() {
-        let children = [];
-        const propsMap = this.props;
-        if (_schema.children && Array.isArray(_schema.children)) {
-          children = _schema.children.map((item: any) => createElement(Ele, {schema: item, propsMap}));
+        const componentName = _schema.componentName;
+        if (componentName === 'Component') {
+          let children = [];
+          const propsMap = this.props || {};
+          if (_schema.children && Array.isArray(_schema.children)) {
+            children = _schema.children.map((item: any) => createElement(Ele, {schema: item, propsMap}));
+          }
+          return createElement(React.Fragment, {}, children);
+        } else {
+          return createElement(Ele, {schema: _schema, propsMap: {}});
         }
-        return createElement(React.Fragment, {}, children);
       }
     }