refactor: remove dependency of shell from designer (#1328)

packages/designer/jest.config.js

@@ -12,7 +12,8 @@ const jestConfig = {
   // testMatch: ['**/node-children.test.ts'],
   // testMatch: ['**/plugin-manager.test.ts'],
   // testMatch: ['**/history/history.test.ts'],
-  // testMatch: ['**/host-view.test.tsx'],
+  // testMatch: ['**/document-model.test.ts'],
+  // testMatch: ['**/prop.test.ts'],
   // testMatch: ['(/tests?/.*(test))\\.[jt]s$'],
   transformIgnorePatterns: [
     `/node_modules/(?!${esModules})/`,

packages/designer/package.json

@@ -16,12 +16,9 @@
   "license": "MIT",
   "dependencies": {
     "@alilc/lowcode-editor-core": "1.0.17",
-    "@alilc/lowcode-shell": "1.0.17",
     "@alilc/lowcode-types": "1.0.17",
     "@alilc/lowcode-utils": "1.0.17",
     "classnames": "^2.2.6",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
     "react": "^16",
     "react-dom": "^16.7.0",
     "ric-shim": "^1.0.1",
@@ -30,6 +27,7 @@
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.29",
+    "@alilc/lowcode-shell": "1.0.17",
     "@alilc/lowcode-test-mate": "^1.0.1",
     "@testing-library/react": "^11.2.2",
     "@types/classnames": "^2.2.7",
@@ -43,6 +41,10 @@
     "babel-jest": "^26.5.2",
     "build-plugin-component": "^0.2.10",
     "build-scripts-config": "^0.1.8",
+    "enzyme": "^3.11.0",
+    "@types/enzyme": "^3.10.12",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "jest": "^26.6.3",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",

packages/designer/src/designer/designer.ts

@@ -10,6 +10,7 @@ import {
   PropsList,
   NodeSchema,
   PropsTransducer,
+  IShellModelFactory,
 } from '@alilc/lowcode-types';
 import { megreAssets, AssetsJson, isNodeSchema } from '@alilc/lowcode-utils';
 import { Project } from '../project';
@@ -28,6 +29,7 @@ import { BemToolsManager } from '../builtin-simulator/bem-tools/manager';
 
 export interface DesignerProps {
   editor: IEditor;
+  shellModelFactory: IShellModelFactory;
   className?: string;
   style?: object;
   defaultSchema?: ProjectSchema;
@@ -58,6 +60,8 @@ export class Designer {
 
   readonly bemToolsManager = new BemToolsManager(this);
 
+  readonly shellModelFactory: IShellModelFactory;
+
   get currentDocument() {
     return this.project.currentDocument;
   }
@@ -72,25 +76,17 @@ export class Designer {
 
   constructor(props: DesignerProps) {
     makeObservable(this);
-    const { editor } = props;
+    const { editor, shellModelFactory } = props;
     this.editor = editor;
+    this.shellModelFactory = shellModelFactory;
     this.setProps(props);
 
     this.project = new Project(this, props.defaultSchema);
 
-    let startTime: any;
-    let src = '';
     this.dragon.onDragstart((e) => {
-      startTime = Date.now() / 1000;
       this.detecting.enable = false;
       const { dragObject } = e;
       if (isDragNodeObject(dragObject)) {
-        const node = dragObject.nodes[0]?.parent;
-        const npm = node?.componentMeta?.npm;
-        src =
-          [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
-          node?.componentMeta?.componentName ||
-          '';
         if (dragObject.nodes.length === 1) {
           if (dragObject.nodes[0].parent) {
             // ensure current selecting
@@ -135,34 +131,6 @@ export class Designer {
           if (nodes) {
             loc.document.selection.selectAll(nodes.map((o) => o.id));
             setTimeout(() => this.activeTracker.track(nodes![0]), 10);
-            const endTime: any = Date.now() / 1000;
-            const parent = nodes[0]?.parent;
-            const npm = parent?.componentMeta?.npm;
-            const dest =
-              [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
-              parent?.componentMeta?.componentName ||
-              '';
-            // eslint-disable-next-line no-unused-expressions
-            // this.postEvent('drag', {
-            //   time: (endTime - startTime).toFixed(2),
-            //   selected: nodes
-            //     ?.map((n) => {
-            //       if (!n) {
-            //         return;
-            //       }
-            //       // eslint-disable-next-line no-shadow
-            //       const npm = n?.componentMeta?.npm;
-            //       return (
-            //         [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
-            //         n?.componentMeta?.componentName
-            //       );
-            //     })
-            //     .join('&'),
-            //   align: loc?.detail?.near?.align || '',
-            //   pos: loc?.detail?.near?.pos || '',
-            //   src,
-            //   dest,
-            // });
           }
         }
       }

packages/designer/src/designer/dragon.ts

@@ -1,7 +1,6 @@
 import { EventEmitter } from 'events';
 import { obx, makeObservable } from '@alilc/lowcode-editor-core';
-import { DragNodeObject, DragAnyObject, DragObjectType, DragNodeDataObject, DragObject } from '@alilc/lowcode-types';
-import { Node as ShellNode } from '@alilc/lowcode-shell';
+import { DragNodeObject, DragAnyObject, DragObjectType, DragNodeDataObject, DragObject, IPublicModelNode } from '@alilc/lowcode-types';
 import { setNativeSelection, cursor } from '@alilc/lowcode-utils';
 import { DropLocation } from './location';
 import { Node, DocumentModel } from '../document';
@@ -201,13 +200,13 @@ export class Dragon {
    * @param dragObject 拖拽对象
    * @param boostEvent 拖拽初始时事件
    */
-  boost(dragObject: DragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: Node | ShellNode) {
+  boost(dragObject: DragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: Node | IPublicModelNode) {
     const { designer } = this;
     const masterSensors = this.getMasterSensors();
     const handleEvents = makeEventsHandler(boostEvent, masterSensors);
     const newBie = !isDragNodeObject(dragObject);
     const forceCopyState =
-      isDragNodeObject(dragObject) && dragObject.nodes.some((node: Node | ShellNode) => (typeof node.isSlot === 'function' ? node.isSlot() : node.isSlot));
+      isDragNodeObject(dragObject) && dragObject.nodes.some((node: Node | IPublicModelNode) => (typeof node.isSlot === 'function' ? node.isSlot() : node.isSlot));
     const isBoostFromDragAPI = isDragEvent(boostEvent);
     let lastSensor: ISensor | undefined;
 

packages/designer/src/designer/setting/setting-prop-entry.ts

@@ -1,7 +1,6 @@
 import { obx, computed, makeObservable, runInAction } from '@alilc/lowcode-editor-core';
 import { GlobalEvent, IEditor, ISetValueOptions } from '@alilc/lowcode-types';
 import { uniqueId, isJSExpression } from '@alilc/lowcode-utils';
-import { SettingPropEntry as ShellSettingPropEntry } from '@alilc/lowcode-shell';
 import { SettingEntry } from './setting-entry';
 import { Node } from '../../document';
 import { ComponentMeta } from '../../component-meta';
@@ -363,6 +362,6 @@ export class SettingPropEntry implements SettingEntry {
   }
 
   internalToShellPropEntry() {
-    return ShellSettingPropEntry.create(this) as any;
+    return this.designer.shellModelFactory.createSettingPropEntry(this);
   }
 }

packages/designer/src/document/history.ts

@@ -1,7 +1,6 @@
 import { EventEmitter } from 'events';
 import { reaction, untracked, globalContext, Editor } from '@alilc/lowcode-editor-core';
 import { NodeSchema } from '@alilc/lowcode-types';
-import { History as ShellHistory } from '@alilc/lowcode-shell';
 
 export interface Serialization<K = NodeSchema, T = string> {
   serialize(data: K): T;
@@ -192,10 +191,6 @@ export class History<T = NodeSchema> {
   isModified() {
     return this.isSavePoint();
   }
-
-  internalToShellHistory() {
-    return new ShellHistory(this);
-  }
 }
 
 export class Session {

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

@@ -14,10 +14,10 @@ import {
   CompositeValue,
   GlobalEvent,
   ComponentAction,
+  IPublicModelNode,
 } from '@alilc/lowcode-types';
 import { compatStage, isDOMText, isJSExpression } from '@alilc/lowcode-utils';
 import { SettingTopEntry } from '@alilc/lowcode-designer';
-import { Node as ShellNode } from '@alilc/lowcode-shell';
 import { Props, getConvertedExtraKey } from './props/props';
 import { DocumentModel } from '../document-model';
 import { NodeChildren } from './node-children';
@@ -366,8 +366,8 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     this._slotFor = slotFor;
   }
 
-  internalToShellNode(): ShellNode | null {
-    return ShellNode.create(this);
+  internalToShellNode(): IPublicModelNode | null {
+    return this.document.designer.shellModelFactory.createNode(this);
   }
 
   /**

packages/designer/src/plugin/plugin-context.ts

@@ -2,14 +2,14 @@
 import { EngineConfig, engineConfig } from '@alilc/lowcode-editor-core';
 import { ILowCodePluginManager } from '@alilc/lowcode-designer';
 import {
-  Hotkey,
-  Project,
-  Skeleton,
-  Setters,
-  Material,
-  Event,
-  Common,
-} from '@alilc/lowcode-shell';
+  IPublicApiHotkey,
+  IPublicApiProject,
+  IPublicApiSkeleton,
+  IPublicApiSetters,
+  IPublicApiMaterial,
+  IPublicApiEvent,
+  IPublicApiCommon,
+} from '@alilc/lowcode-types';
 import { getLogger, Logger } from '@alilc/lowcode-utils';
 import {
   ILowCodePluginContext,
@@ -24,14 +24,14 @@ import { isValidPreferenceKey } from './plugin-utils';
 
 
 export default class PluginContext implements ILowCodePluginContext, ILowCodePluginContextPrivate {
-  hotkey: Hotkey;
-  project: Project;
-  skeleton: Skeleton;
-  setters: Setters;
-  material: Material;
-  event: Event;
+  hotkey: IPublicApiHotkey;
+  project: IPublicApiProject;
+  skeleton: IPublicApiSkeleton;
+  setters: IPublicApiSetters;
+  material: IPublicApiMaterial;
+  event: IPublicApiEvent;
   config: EngineConfig;
-  common: Common;
+  common: IPublicApiCommon;
   logger: Logger;
   plugins: ILowCodePluginManager;
   preference: IPluginPreferenceMananger;

packages/designer/src/plugin/plugin-types.ts

@@ -1,6 +1,16 @@
-import { CompositeObject, ComponentAction, MetadataTransducer } from '@alilc/lowcode-types';
 import Logger from 'zen-logger';
-import { Hotkey, Skeleton, Project, Event, Material, Common } from '@alilc/lowcode-shell';
+import {
+  IPublicApiHotkey,
+  IPublicApiProject,
+  IPublicApiSkeleton,
+  IPublicApiSetters,
+  IPublicApiMaterial,
+  IPublicApiEvent,
+  IPublicApiCommon,
+  CompositeObject,
+  ComponentAction,
+  MetadataTransducer,
+} from '@alilc/lowcode-types';
 import { EngineConfig } from '@alilc/lowcode-editor-core';
 import { Setters } from '../types';
 
@@ -95,27 +105,27 @@ export interface IPluginPreferenceMananger {
 }
 
 export interface ILowCodePluginContext {
-  get skeleton(): Skeleton;
-  get hotkey(): Hotkey;
-  get setters(): Setters;
+  get skeleton(): IPublicApiSkeleton;
+  get hotkey(): IPublicApiHotkey;
+  get setters(): IPublicApiSetters;
   get config(): EngineConfig;
-  get material(): Material;
-  get event(): Event;
-  get project(): Project;
-  get common(): Common;
+  get material(): IPublicApiMaterial;
+  get event(): IPublicApiEvent;
+  get project(): IPublicApiProject;
+  get common(): IPublicApiCommon;
   logger: Logger;
   plugins: ILowCodePluginManager;
   preference: IPluginPreferenceMananger;
 }
 export interface ILowCodePluginContextPrivate {
-  set hotkey(hotkey: Hotkey);
-  set project(project: Project);
-  set skeleton(skeleton: Skeleton);
+  set hotkey(hotkey: IPublicApiHotkey);
+  set project(project: IPublicApiProject);
+  set skeleton(skeleton: IPublicApiSkeleton);
   set setters(setters: Setters);
-  set material(material: Material);
-  set event(event: Event);
+  set material(material: IPublicApiMaterial);
+  set event(event: IPublicApiEvent);
   set config(config: EngineConfig);
-  set common(common: Common);
+  set common(common: IPublicApiCommon);
 }
 export interface ILowCodePluginContextApiAssembler {
   assembleApis: (context: ILowCodePluginContextPrivate) => void;

packages/designer/tests/bugs/prop-variable-jse.test.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { Editor } from '@alilc/lowcode-editor-core';
 import { TransformStage } from '@alilc/lowcode-types';
 import { isPlainObject, isVariable, isJSBlock } from '@alilc/lowcode-utils';
@@ -7,6 +6,7 @@ import { Designer } from '../../src/designer/designer';
 import { DocumentModel } from '../../src/document/document-model';
 import { Project } from '../../src/project/project';
 import formSchema from '../fixtures/schema/form';
+import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory';
 
 /**
  * bug 背景：
@@ -58,7 +58,7 @@ describe('Node 方法测试', () => {
 
   it('原始 prop 值是 variable 结构，通过一个 propsReducer 转成了 JSExpression 结构', () => {
     editor = new Editor();
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     designer.addPropsReducer(upgradePropsReducer, TransformStage.Upgrade);
     project = designer.project;
     doc = new DocumentModel(project, formSchema);

packages/designer/tests/builtin-simulator/bem-tools/drag-resize-engine.test.ts

@@ -1,17 +1,12 @@
 import '../../fixtures/window';
-import { set } from '../../utils';
 import { Editor, globalContext } from '@alilc/lowcode-editor-core';
 import { Project } from '../../../src/project/project';
 import { DocumentModel } from '../../../src/document/document-model';
 import { Designer } from '../../../src/designer/designer';
 import DragResizeEngine from '../../../src/builtin-simulator/bem-tools/drag-resize-engine';
 import formSchema from '../../fixtures/schema/form';
-import divMetadata from '../../fixtures/component-metadata/div';
-import formMetadata from '../../fixtures/component-metadata/form';
-import otherMeta from '../../fixtures/component-metadata/other';
-import pageMetadata from '../../fixtures/component-metadata/page';
 import { fireEvent, createEvent } from '@testing-library/react';
-import { create } from 'lodash';
+import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory';
 
 describe('DragResizeEngine 测试', () => {
   let editor: Editor;
@@ -26,7 +21,7 @@ describe('DragResizeEngine 测试', () => {
   });
 
   beforeEach(() => {
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     project = designer.project;
     doc = project.createDocument(formSchema);
     doc.open();

packages/designer/tests/builtin-simulator/bem-tools/manager.test.tsx

@@ -1,21 +1,8 @@
 import '../../fixtures/window';
-import { set, delayObxTick, delay } from '../../utils';
 import { Editor } from '@alilc/lowcode-editor-core';
-import { Project } from '../../../src/project/project';
-import { DocumentModel } from '../../../src/document/document-model';
-import {
-  isRootNode,
-  Node,
-  isNode,
-  comparePosition,
-  contains,
-  insertChild,
-  insertChildren,
-  PositionNO,
-} from '../../../src/document/node/node';
 import { Designer } from '../../../src/designer/designer';
 import { BemToolsManager } from '../../../src/builtin-simulator/bem-tools/manager';
-import formSchema from '../../fixtures/schema/form';
+import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory';
 
 describe('Node 方法测试', () => {
   let editor: Editor;
@@ -26,7 +13,7 @@ describe('Node 方法测试', () => {
 
   beforeEach(() => {
     editor = new Editor();
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     // project = designer.project;
     // doc = new DocumentModel(project, formSchema);
     manager = new BemToolsManager(designer);

packages/designer/tests/builtin-simulator/host-view.test.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import set from 'lodash/set';
-import cloneDeep from 'lodash/cloneDeep';
-import '../fixtures/window';
-import { Editor } from '@alilc/lowcode-editor-core';
-import { Project } from '../../src/project/project';
-import { Node } from '../../src/document/node/node';
-import TestRenderer from 'react-test-renderer';
-import { configure, render, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import { Designer } from '../../src/designer/designer';
-import formSchema from '../fixtures/schema/form';
-import { getIdsFromSchema, getNodeFromSchemaById } from '../utils';
-import { BuiltinSimulatorHostView } from '../../src/builtin-simulator/host-view';
-
-configure({ adapter: new Adapter() });
-const editor = new Editor();
-
-describe('host-view 测试', () => {
-  let designer: Designer;
-  beforeEach(() => {
-    designer = new Designer({ editor });
-  });
-  afterEach(() => {
-    designer._componentMetasMap.clear();
-    designer = null;
-  });
-
-  it.skip('host-view', () => {
-    const hostView = render(<BuiltinSimulatorHostView project={designer.project} />);
-  });
-});

packages/designer/tests/builtin-simulator/host.test.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import '../fixtures/window';
 import { Editor, globalContext } from '@alilc/lowcode-editor-core';
 import {
@@ -15,6 +14,7 @@ import formSchema from '../fixtures/schema/form';
 import { getMockDocument, getMockWindow, getMockEvent, delayObxTick } from '../utils';
 import { BuiltinSimulatorHost } from '../../src/builtin-simulator/host';
 import { fireEvent } from '@testing-library/react';
+import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory';
 
 describe('Host 测试', () => {
   let editor: Editor;
@@ -29,7 +29,7 @@ describe('Host 测试', () => {
   });
 
   beforeEach(() => {
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     project = designer.project;
     designer.createComponentMeta(pageMetadata);
     doc = project.createDocument(formSchema);

packages/designer/tests/builtin-simulator/viewport.test.ts

@@ -1,11 +1,11 @@
 import '../fixtures/window';
-import { getMockWindow, set, getMockElement, delay } from '../utils';
+import { getMockWindow, getMockElement, delay } from '../utils';
 import { Editor, globalContext } from '@alilc/lowcode-editor-core';
 import { Project } from '../../src/project/project';
 import { DocumentModel } from '../../src/document/document-model';
 import Viewport from '../../src/builtin-simulator/viewport';
 import { Designer } from '../../src/designer/designer';
-import { fireEvent } from '@testing-library/react';
+import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory';
 
 
 describe('Viewport 测试', () => {
@@ -28,7 +28,7 @@ describe('Viewport 测试', () => {
   });
 
   beforeEach(() => {
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     project = designer.project;
     // doc = project.createDocument(formSchema);
   });

packages/designer/tests/designer/builtin-hotkey.test.ts

@@ -5,6 +5,7 @@ import formSchema from '../fixtures/schema/form';
 import '../../src/designer/builtin-hotkey';
 import { fireEvent } from '@testing-library/react';
 import { isInLiveEditing } from '../../src/designer/builtin-hotkey';
+import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory';
 
 const editor = new Editor();
 
@@ -23,7 +24,7 @@ describe('快捷键测试', () => {
     globalContext.register(editor, Editor);
   });
   beforeEach(() => {
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     editor.set('designer', designer);
     designer.project.open(formSchema);
   });

packages/designer/tests/designer/designer.test.ts

@@ -12,6 +12,7 @@ import divMetadata from '../fixtures/component-metadata/div';
 import { delayObxTick } from '../utils';
 import { fireEvent } from '@testing-library/react';
 import { DragObjectType } from '@alilc/lowcode-types';
+import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory';
 
 const mockNode = {
   internalToShellNode() {
@@ -32,7 +33,7 @@ describe('Designer 测试', () => {
   });
 
   beforeEach(() => {
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     project = designer.project;
     doc = project.createDocument(formSchema);
     dragon = new Dragon(designer);
@@ -58,6 +59,7 @@ describe('Designer 测试', () => {
 
       const designer = new Designer({
         editor,
+        shellModelFactory,
         onDragstart: dragStartMockFn,
         onDrag: dragMockFn,
         onDragend: dragEndMockFn,
@@ -124,6 +126,7 @@ describe('Designer 测试', () => {
 
       const designer = new Designer({
         editor,
+        shellModelFactory,
         onDragstart: dragStartMockFn,
         onDrag: dragMockFn,
         onDragend: dragEndMockFn,
@@ -245,14 +248,18 @@ describe('Designer 测试', () => {
       suspensed: true,
       componentMetadatas: [buttonMetadata, divMetadata],
     };
-    designer = new Designer({ editor, ...initialProps });
+    designer = new Designer({
+      editor,
+      shellModelFactory,
+      ...initialProps,
+     });
 
     expect(designer.simulatorComponent).toEqual({ isSimulatorComp: true });
     expect(designer.simulatorProps).toEqual({ designMode: 'design' });
     expect(designer.suspensed).toBeTruthy();
-    expect(designer._componentMetasMap.has('Div')).toBeTruthy();
-    expect(designer._componentMetasMap.has('Button')).toBeTruthy();
-    const { editor: editorFromDesigner, ...others } = designer.props;
+    expect((designer as any)._componentMetasMap.has('Div')).toBeTruthy();
+    expect((designer as any)._componentMetasMap.has('Button')).toBeTruthy();
+    const { editor: editorFromDesigner, shellModelFactory: shellModelFactoryFromDesigner, ...others } = (designer as any).props;
     expect(others).toEqual(initialProps);
     expect(designer.get('simulatorProps')).toEqual({ designMode: 'design' });
     expect(designer.get('suspensed')).toBeTruthy();
@@ -270,9 +277,9 @@ describe('Designer 测试', () => {
     expect(designer.simulatorComponent).toEqual({ isSimulatorComp2: true });
     expect(designer.simulatorProps).toEqual({ designMode: 'live' });
     expect(designer.suspensed).toBeFalsy();
-    expect(designer._componentMetasMap.has('Button')).toBeTruthy();
-    expect(designer._componentMetasMap.has('Div')).toBeTruthy();
-    const { editor: editorFromDesigner2, ...others2 } = designer.props;
+    expect((designer as any)._componentMetasMap.has('Button')).toBeTruthy();
+    expect((designer as any)._componentMetasMap.has('Div')).toBeTruthy();
+    const { editor: editorFromDesigner2, shellModelFactory: shellModelFactoryFromDesigner2,  ...others2 } = (designer as any).props;
     expect(others2).toEqual(updatedProps);
 
     // 第三次设置 props，跟第二次值一样，for 覆盖率测试
@@ -282,9 +289,9 @@ describe('Designer 测试', () => {
     expect(designer.simulatorComponent).toEqual({ isSimulatorComp2: true });
     expect(designer.simulatorProps).toEqual({ designMode: 'live' });
     expect(designer.suspensed).toBeFalsy();
-    expect(designer._componentMetasMap.has('Button')).toBeTruthy();
-    expect(designer._componentMetasMap.has('Div')).toBeTruthy();
-    const { editor: editorFromDesigner3, ...others3 } = designer.props;
+    expect((designer as any)._componentMetasMap.has('Button')).toBeTruthy();
+    expect((designer as any)._componentMetasMap.has('Div')).toBeTruthy();
+    const { editor: editorFromDesigner3, shellModelFactory: shellModelFactoryFromDesigner3, ...others3 } = (designer as any).props;
     expect(others3).toEqual(updatedProps);
   });
 

packages/designer/tests/designer/dragon.test.ts

@@ -1,5 +1,4 @@
 import '../fixtures/window';
-import { set } from '../utils';
 import { Editor, globalContext } from '@alilc/lowcode-editor-core';
 import { Project } from '../../src/project/project';
 import { DocumentModel } from '../../src/document/document-model';
@@ -18,6 +17,7 @@ import {
 import { DragObjectType } from '@alilc/lowcode-types';
 import formSchema from '../fixtures/schema/form';
 import { fireEvent } from '@testing-library/react';
+import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory';
 
 describe('Dragon 测试', () => {
   let editor: Editor;
@@ -32,7 +32,7 @@ describe('Dragon 测试', () => {
   });
 
   beforeEach(() => {
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     project = designer.project;
     doc = project.createDocument(formSchema);
     dragon = new Dragon(designer);

packages/designer/tests/designer/scroller.test.ts

@@ -8,6 +8,7 @@ import {
   Dragon,
 } from '../../src/designer/dragon';
 import formSchema from '../fixtures/schema/form';
+import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory';
 
 describe('Scroller 测试', () => {
   let editor: Editor;
@@ -22,7 +23,7 @@ describe('Scroller 测试', () => {
   });
 
   beforeEach(() => {
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     project = designer.project;
     doc = project.createDocument(formSchema);
     dragon = new Dragon(designer);

packages/designer/tests/designer/setting/setting-field.test.ts

@@ -1,7 +1,6 @@
 // @ts-nocheck
 import '../../fixtures/window';
 import { Editor } from '@alilc/lowcode-editor-core';
-import { Project } from '../../../src/project/project';
 import { SettingTopEntry } from '../../../src/designer/setting/setting-top-entry';
 import { SettingField } from '../../../src/designer/setting/setting-field';
 import { Node } from '../../../src/document/node/node';
@@ -10,6 +9,7 @@ import settingSchema from '../../fixtures/schema/setting';
 import buttonMeta from '../../fixtures/component-metadata/button';
 import { DocumentModel } from 'designer/src/document';
 import { delayObxTick } from '../../utils';
+import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory';
 
 const editor = new Editor();
 
@@ -17,7 +17,7 @@ describe('setting-field 测试', () => {
   let designer: Designer;
   let doc: DocumentModel;
   beforeEach(() => {
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     designer.createComponentMeta(buttonMeta);
     doc = designer.project.open(settingSchema);
   });

packages/designer/tests/designer/setting/setting-prop-entry.test.ts

@@ -1,18 +1,13 @@
-// @ts-nocheck
-import set from 'lodash/set';
-import cloneDeep from 'lodash/cloneDeep';
 import '../../fixtures/window';
 import { Editor } from '@alilc/lowcode-editor-core';
-import { Project } from '../../../src/project/project';
 import { SettingTopEntry } from '../../../src/designer/setting/setting-top-entry';
 import { SettingPropEntry } from '../../../src/designer/setting/setting-prop-entry';
 import { Node } from '../../../src/document/node/node';
 import { Designer } from '../../../src/designer/designer';
-import formSchema from '../../../fixtures/schema/form';
 import settingSchema from '../../fixtures/schema/setting';
 import divMeta from '../../fixtures/component-metadata/div';
-import { getIdsFromSchema, getNodeFromSchemaById } from '../../utils';
 import { DocumentModel } from 'designer/src/document';
+import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory';
 
 const editor = new Editor();
 
@@ -20,7 +15,7 @@ describe('setting-prop-entry 测试', () => {
   let designer: Designer;
   let doc: DocumentModel;
   beforeEach(() => {
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     designer.createComponentMeta(divMeta);
     doc = designer.project.open(settingSchema);
   });

packages/designer/tests/designer/setting/setting-top-entry.test.ts

@@ -1,22 +1,17 @@
-// @ts-nocheck
-import set from 'lodash/set';
-import cloneDeep from 'lodash/cloneDeep';
 import '../../fixtures/window';
 import { Editor } from '@alilc/lowcode-editor-core';
-import { Project } from '../../../src/project/project';
 import { Node } from '../../../src/document/node/node';
 import { Designer } from '../../../src/designer/designer';
-import formSchema from '../../fixtures/schema/form';
 import settingSchema from '../../fixtures/schema/setting';
 import divMeta from '../../fixtures/component-metadata/div';
-import { getIdsFromSchema, getNodeFromSchemaById } from '../../utils';
+import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory';
 
 const editor = new Editor();
 
 describe('setting-top-entry 测试', () => {
   let designer: Designer;
   beforeEach(() => {
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
   });
   afterEach(() => {
     designer._componentMetasMap.clear();

packages/designer/tests/document/document-model/document-model.test.ts

@@ -2,15 +2,13 @@ import '../../fixtures/window';
 import { DocumentModel, isDocumentModel, isPageSchema } from '../../../src/document/document-model';
 import { Editor } from '@alilc/lowcode-editor-core';
 import { Project } from '../../../src/project/project';
-import { Node } from '../../../src/document/node/node';
 import { Designer } from '../../../src/designer/designer';
 import formSchema from '../../fixtures/schema/form';
 import divMeta from '../../fixtures/component-metadata/div';
 import formMeta from '../../fixtures/component-metadata/form';
 import otherMeta from '../../fixtures/component-metadata/other';
 import pageMeta from '../../fixtures/component-metadata/page';
-// const { DocumentModel } = require('../../../src/document/document-model');
-// const { Node } = require('../__mocks__/node');
+import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory';
 
 describe('document-model 测试', () => {
   let editor: Editor;
@@ -19,7 +17,7 @@ describe('document-model 测试', () => {
 
   beforeEach(() => {
     editor = new Editor();
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     project = designer.project;
   });
 

packages/designer/tests/document/history/history.test.ts

@@ -272,20 +272,6 @@ describe('History', () => {
     expect(history.records).toHaveLength(0);
   });
 
-  it('internalToShellHistory()', async () => {
-    const history = new History<Node>(
-      () => {
-        const data = tree.toObject();
-        return data;
-      },
-      (data) => {
-        mockRedoFn(data);
-      },
-    );
-
-    expect(history.internalToShellHistory().isModified).toBeUndefined();
-  });
-
   it('sleep & wakeup', async () => {
     const mockRedoFn = jest.fn();
     const history = new History<Node>(

packages/designer/tests/document/node/modal-nodes-manager.test.ts

@@ -7,6 +7,7 @@ import { Designer } from '../../../src/designer/designer';
 import formSchema from '../../fixtures/schema/form-with-modal';
 import dlgMetadata from '../../fixtures/component-metadata/dialog';
 import { getModalNodes } from '../../../src/document/node/modal-nodes-manager';
+import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory';
 
 let editor: Editor;
 let designer: Designer;
@@ -15,7 +16,7 @@ let doc: DocumentModel;
 
 beforeEach(() => {
   editor = new Editor();
-  designer = new Designer({ editor });
+  designer = new Designer({ editor, shellModelFactory });
   designer.createComponentMeta(dlgMetadata);
   project = designer.project;
   doc = new DocumentModel(project, formSchema);

packages/designer/tests/document/node/node-children.test.ts

@@ -8,6 +8,7 @@ import {
 import { Designer } from '../../../src/designer/designer';
 import formSchema from '../../fixtures/schema/form';
 import divMetadata from '../../fixtures/component-metadata/div';
+import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory';
 
 describe('NodeChildren 方法测试', () => {
   let editor: Editor;
@@ -17,7 +18,7 @@ describe('NodeChildren 方法测试', () => {
 
   beforeEach(() => {
     editor = new Editor();
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     project = designer.project;
     doc = new DocumentModel(project, formSchema);
   });

packages/designer/tests/document/node/node.test.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import '../../fixtures/window';
-import { set, delayObxTick, delay } from '../../utils';
+import { set } from '../../utils';
 import { Editor } from '@alilc/lowcode-editor-core';
 import { Project } from '../../../src/project/project';
 import { DocumentModel } from '../../../src/document/document-model';
@@ -10,8 +10,6 @@ import {
   isNode,
   comparePosition,
   contains,
-  insertChild,
-  insertChildren,
   PositionNO,
 } from '../../../src/document/node/node';
 import { Designer } from '../../../src/designer/designer';
@@ -20,11 +18,11 @@ import divMetadata from '../../fixtures/component-metadata/div';
 import dialogMetadata from '../../fixtures/component-metadata/dialog';
 import btnMetadata from '../../fixtures/component-metadata/button';
 import formMetadata from '../../fixtures/component-metadata/form';
-import otherMeta from '../../fixtures/component-metadata/other';
 import pageMetadata from '../../fixtures/component-metadata/page';
 import rootHeaderMetadata from '../../fixtures/component-metadata/root-header';
 import rootContentMetadata from '../../fixtures/component-metadata/root-content';
 import rootFooterMetadata from '../../fixtures/component-metadata/root-footer';
+import { shellModelFactory } from '../../../../engine/src/modules/shell-model-factory';
 
 describe('Node 方法测试', () => {
   let editor: Editor;
@@ -34,7 +32,7 @@ describe('Node 方法测试', () => {
 
   beforeEach(() => {
     editor = new Editor();
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     project = designer.project;
     doc = new DocumentModel(project, formSchema);
   });

packages/designer/tests/document/node/props/prop.test.ts

@@ -1,11 +1,10 @@
-// @ts-nocheck
 import '../../../fixtures/window';
-import { delayObxTick } from '../../../utils';
 import { Editor, engineConfig } from '@alilc/lowcode-editor-core';
 import { Designer } from '../../../../src/designer/designer';
 import { DocumentModel } from '../../../../src/document/document-model';
 import { Prop, isProp, isValidArrayIndex } from '../../../../src/document/node/props/prop';
 import { TransformStage } from '@alilc/lowcode-types';
+import { shellModelFactory } from '../../../../../engine/src/modules/shell-model-factory';
 
 const slotNodeImportMockFn = jest.fn();
 const slotNodeRemoveMockFn = jest.fn();
@@ -465,7 +464,7 @@ describe('Prop 类测试', () => {
 
   describe('slotNode / setAsSlot', () => {
     const editor = new Editor();
-    const designer = new Designer({ editor });
+    const designer = new Designer({ editor, shellModelFactory });
     const doc = new DocumentModel(designer.project, {
       componentName: 'Page',
       children: [

packages/designer/tests/project/project-methods.test.ts

@@ -1,13 +1,10 @@
-import set from 'lodash/set';
-import cloneDeep from 'lodash/cloneDeep';
 import '../fixtures/window';
 import { Editor } from '@alilc/lowcode-editor-core';
 import { Project } from '../../src/project/project';
 import { DocumentModel } from '../../src/document/document-model';
-import { Node } from '../../src/document/node/node';
 import { Designer } from '../../src/designer/designer';
 import formSchema from '../fixtures/schema/form';
-import { getIdsFromSchema, getNodeFromSchemaById } from '../utils';
+import { shellModelFactory } from '../../../engine/src/modules/shell-model-factory';
 
 describe.only('Project 方法测试', () => {
   let editor: Editor;
@@ -17,7 +14,7 @@ describe.only('Project 方法测试', () => {
 
   beforeEach(() => {
     editor = new Editor();
-    designer = new Designer({ editor });
+    designer = new Designer({ editor, shellModelFactory });
     project = designer.project;
     doc = new DocumentModel(project, formSchema);
   });

packages/designer/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "types": ["node","jest"]
+  },
+  "include": [
+    "./src/",
+    "./tests/"
+  ],
+  "exclude": ["**/lib", "**/es", "node_modules"]
+}

packages/engine/src/engine-core.ts

@@ -32,6 +32,7 @@ import { getLogger, isPlainObject } from '@alilc/lowcode-utils';
 import './modules/live-editing';
 import classes from './modules/classes';
 import symbols from './modules/symbols';
+import { shellModelFactory } from './modules/shell-model-factory';
 
 export * from './modules/skeleton-types';
 export * from './modules/designer-types';
@@ -46,7 +47,7 @@ globalContext.register(editor, 'editor');
 const innerSkeleton = new InnerSkeleton(editor);
 editor.set('skeleton' as any, innerSkeleton);
 
-const designer = new Designer({ editor });
+const designer = new Designer({ editor, shellModelFactory });
 editor.set('designer' as any, designer);
 const { project: innerProject } = designer;
 

packages/engine/src/modules/shell-model-factory.ts

@@ -0,0 +1,18 @@
+import {
+  Node as InnerNode,
+  SettingField as InnerSettingField,
+} from '@alilc/lowcode-designer';
+import { IShellModelFactory, IPublicModelNode, IPublicModelSettingPropEntry } from '@alilc/lowcode-types';
+import {
+  Node,
+  SettingPropEntry,
+} from '@alilc/lowcode-shell';
+class ShellModelFactory implements IShellModelFactory {
+  createNode(node: InnerNode | null | undefined): IPublicModelNode | null {
+    return Node.create(node);
+  }
+  createSettingPropEntry(prop: InnerSettingField): IPublicModelSettingPropEntry {
+    return SettingPropEntry.create(prop);
+  }
+}
+export const shellModelFactory = new ShellModelFactory();

packages/types/src/index.ts

@@ -27,5 +27,6 @@ export * from './editor-skeleton';
 export * from './designer';
 export * from './dragon';
 export * from './shell';
+export * from './shell-model-factory';
 // TODO: remove this in future versions
 export * from './deprecated';

packages/types/src/shell-model-factory.ts

@@ -0,0 +1,8 @@
+import { IPublicModelSettingPropEntry, IPublicModelNode } from './shell';
+
+export interface IShellModelFactory {
+  // TODO: 需要给 innerNode 提供一个 interface 并用在这里
+  createNode(node: any | null | undefined): IPublicModelNode | null;
+  // TODO: 需要给 InnerSettingField 提供一个 interface 并用在这里
+  createSettingPropEntry(prop: any): IPublicModelSettingPropEntry;
+}

packages/types/src/shell/index.ts

@@ -1,5 +1,7 @@
-import { IPublicModelNode } from './model/node';
-import { IPublicModelProp } from './model/prop';
+import {
+  IPublicModelNode,
+  IPublicModelProp,
+} from './model';
 
 export interface PropChangeOptions {
   key?: string | number;