refactor: remove dependency of shell from designer

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);