refactor: move common to shell

packages/engine/src/engine-core.ts

@@ -6,7 +6,6 @@ import {
   LowCodePluginManager,
   ILowCodePluginContext,
   PluginPreference,
-  TransformStage,
 } from '@alilc/lowcode-designer';
 import {
   Skeleton as InnerSkeleton,
@@ -16,15 +15,21 @@ import {
 
 import Outline, { OutlineBackupPane, getTreeMaster } from '@alilc/lowcode-plugin-outline-pane';
 import DesignerPlugin from '@alilc/lowcode-plugin-designer';
-import { Hotkey, Project, Skeleton, Setters, Material, Event, DocumentModel } from '@alilc/lowcode-shell';
+import {
+  Hotkey,
+  Project,
+  Skeleton,
+  Setters,
+  Material,
+  Event,
+  DocumentModel,
+  Common,
+} from '@alilc/lowcode-shell';
 import { getLogger, isPlainObject } from '@alilc/lowcode-utils';
 import './modules/live-editing';
-import utils from './modules/utils';
-import * as editorCabin from './modules/editor-cabin';
-import getSkeletonCabin from './modules/skeleton-cabin';
-import getDesignerCabin from './modules/designer-cabin';
 import classes from './modules/classes';
 import symbols from './modules/symbols';
+
 export * from './modules/editor-types';
 export * from './modules/skeleton-types';
 export * from './modules/designer-types';
@@ -46,8 +51,6 @@ const plugins = new LowCodePluginManager(editor).toProxy();
 editor.set('plugins' as any, plugins);
 
 const { project: innerProject } = designer;
-const skeletonCabin = getSkeletonCabin(innerSkeleton);
-const { Workbench } = skeletonCabin;
 
 const hotkey = new Hotkey();
 const project = new Project(innerProject);
@@ -57,17 +60,7 @@ const material = new Material(editor);
 const config = engineConfig;
 const event = new Event(editor, { prefix: 'common' });
 const logger = getLogger({ level: 'warn', bizName: 'common' });
-const designerCabin = getDesignerCabin(editor);
-const objects = {
-  TransformStage,
-};
-const common = {
-  utils,
-  objects,
-  editorCabin,
-  designerCabin,
-  skeletonCabin,
-};
+const common = new Common(editor, innerSkeleton);
 
 export {
   skeleton,
@@ -189,6 +182,7 @@ let engineContainer: HTMLElement;
 // @ts-ignore webpack Define variable
 export const version = VERSION_PLACEHOLDER;
 engineConfig.set('ENGINE_VERSION', version);
+
 export async function init(
   container?: HTMLElement,
   options?: EngineOptions,
@@ -213,6 +207,8 @@ export async function init(
   engineConfig.setEngineOptions(engineOptions as any);
 
   await plugins.init(pluginPreference as any);
+
+  const { Workbench } = common.skeletonCabin;
   render(
     createElement(Workbench, {
       skeleton: innerSkeleton,

packages/engine/src/modules/designer-cabin.ts

@@ -1,50 +0,0 @@
-import {
-  SettingField,
-  isSettingField,
-  Designer,
-  TransformStage,
-  LiveEditing,
-  isDragNodeDataObject,
-  isDragNodeObject,
-  isDragAnyObject,
-  DragObjectType,
-  isNode,
-  isShaken,
-  contains,
-  LocationDetailType,
-  isLocationChildrenDetail,
-  ScrollTarget,
-} from '@alilc/lowcode-designer';
-import { Editor } from '@alilc/lowcode-editor-core';
-import { designerCabinSymbol, Dragon } from '@alilc/lowcode-shell';
-
-export default function getDesignerCabin(editor: Editor) {
-  const designer = editor.get('designer') as Designer;
-
-  return {
-    SettingField,
-    isSettingField,
-    dragon: Dragon.create(designer.dragon),
-    TransformStage,
-    LiveEditing,
-    DragObjectType,
-    isDragNodeDataObject,
-    isNode,
-    [designerCabinSymbol]: {
-      isDragNodeObject,
-      isDragAnyObject,
-      isShaken,
-      contains,
-      LocationDetailType,
-      isLocationChildrenDetail,
-      ScrollTarget,
-      isSettingField,
-      TransformStage,
-      SettingField,
-      LiveEditing,
-      DragObjectType,
-      isDragNodeDataObject,
-      isNode,
-    },
-  };
-}

packages/engine/src/modules/editor-cabin.ts

@@ -1,15 +0,0 @@
-export {
-  Title,
-  Tip,
-  shallowIntl,
-  createIntl,
-  intl,
-  createSetterContent,
-  obx,
-  observable,
-  makeObservable,
-  untracked,
-  computed,
-  observer,
-  globalLocale,
-} from '@alilc/lowcode-editor-core';

packages/engine/src/modules/skeleton-cabin.tsx

@@ -1,16 +0,0 @@
-import {
-  Skeleton as InnerSkeleton,
-  createSettingFieldView,
-  PopupContext,
-  PopupPipe,
-  Workbench as InnerWorkbench,
-} from '@alilc/lowcode-editor-skeleton';
-
-export default function getSkeletonCabin(skeleton: InnerSkeleton) {
-  return {
-    createSettingFieldView,
-    PopupContext,
-    PopupPipe,
-    Workbench: (props: any) => <InnerWorkbench {...props} skeleton={skeleton} />, // hijack skeleton
-  };
-}

packages/engine/src/modules/utils.ts

@@ -1,17 +0,0 @@
-import { isFormEvent, compatibleLegaoSchema, getNodeSchemaById, transactionManager } from '@alilc/lowcode-utils';
-import { isNodeSchema } from '@alilc/lowcode-types';
-import { getConvertedExtraKey, getOriginalExtraKey } from '@alilc/lowcode-designer';
-import { createIntl } from '@alilc/lowcode-editor-core';
-
-const utils = {
-  isNodeSchema,
-  isFormEvent,
-  compatibleLegaoSchema,
-  getNodeSchemaById,
-  getConvertedExtraKey,
-  getOriginalExtraKey,
-  executeTransaction: transactionManager.executeTransaction.bind(transactionManager),
-  createIntl,
-};
-
-export default utils;

packages/shell/src/common.tsx

@@ -0,0 +1,183 @@
+import { editorSymbol, skeletonSymbol, designerCabinSymbol } from './symbols';
+import {
+  isFormEvent as innerIsFormEvent,
+  compatibleLegaoSchema as innerCompatibleLegaoSchema,
+  getNodeSchemaById as innerGetNodeSchemaById,
+  transactionManager,
+} from '@alilc/lowcode-utils';
+import {
+  isNodeSchema as innerIsNodeSchema,
+  NodeSchema,
+  TransitionType,
+} from '@alilc/lowcode-types';
+import {
+  SettingField,
+  isSettingField,
+  Designer,
+  TransformStage,
+  LiveEditing,
+  isDragNodeDataObject,
+  isDragNodeObject,
+  isDragAnyObject,
+  DragObjectType,
+  isNode,
+  isShaken,
+  contains,
+  LocationDetailType,
+  isLocationChildrenDetail,
+  ScrollTarget,
+  getConvertedExtraKey as innerGetConvertedExtraKey,
+  getOriginalExtraKey as innerGetOriginalExtraKey,
+} from '@alilc/lowcode-designer';
+import {
+  Skeleton as InnerSkeleton,
+  createSettingFieldView,
+  PopupContext,
+  PopupPipe,
+  Workbench as InnerWorkbench,
+} from '@alilc/lowcode-editor-skeleton';
+import Dragon from './dragon';
+import {
+  Editor,
+  Title as InnerTitle,
+  Tip as InnerTip,
+  shallowIntl,
+  createIntl as innerCreateIntl,
+  intl,
+  createSetterContent,
+  obx,
+  observable,
+  makeObservable,
+  untracked,
+  computed,
+  observer,
+  globalLocale,
+} from '@alilc/lowcode-editor-core';
+import { ReactNode } from 'react';
+
+
+const getDesignerCabin = (editor: Editor) => {
+  const designer = editor.get('designer') as Designer;
+
+  return {
+    SettingField,
+    isSettingField,
+    dragon: Dragon.create(designer.dragon),
+    TransformStage,
+    LiveEditing,
+    DragObjectType,
+    isDragNodeDataObject,
+    isNode,
+    [designerCabinSymbol]: {
+      isDragNodeObject,
+      isDragAnyObject,
+      isShaken,
+      contains,
+      LocationDetailType,
+      isLocationChildrenDetail,
+      ScrollTarget,
+      isSettingField,
+      TransformStage,
+      SettingField,
+      LiveEditing,
+      DragObjectType,
+      isDragNodeDataObject,
+      isNode,
+    },
+  };
+};
+
+const getSkeletonCabin = (skeleton: InnerSkeleton) => {
+  return {
+    createSettingFieldView,
+    PopupContext,
+    PopupPipe,
+    Workbench: (props: any) => <InnerWorkbench {...props} skeleton={skeleton} />, // hijack skeleton
+  };
+};
+
+class Utils {
+  isNodeSchema(data: any): data is NodeSchema {
+    return innerIsNodeSchema(data);
+  }
+
+  isFormEvent(e: KeyboardEvent | MouseEvent): boolean {
+    return innerIsFormEvent(e);
+  }
+
+  compatibleLegaoSchema(props: any): any {
+    return innerCompatibleLegaoSchema(props);
+  }
+
+  getNodeSchemaById(schema: NodeSchema, nodeId: string): NodeSchema | undefined {
+    return innerGetNodeSchemaById(schema, nodeId);
+  }
+
+  getConvertedExtraKey(key: string): string {
+    return innerGetConvertedExtraKey(key);
+  }
+
+  getOriginalExtraKey(key: string): string {
+    return innerGetOriginalExtraKey(key);
+  }
+
+  executeTransaction(fn: () => void, type: TransitionType = TransitionType.REPAINT): void {
+    transactionManager.executeTransaction(fn, type);
+  }
+
+  createIntl(instance: string | object): {
+      intlNode(id: string, params?: object): ReactNode;
+      intl(id: string, params?: object): string;
+      getLocale(): string;
+      setLocale(locale: string): void;
+    } {
+    return innerCreateIntl(instance);
+  }
+}
+
+export default class Common {
+  private readonly [editorSymbol]: Editor;
+  private readonly [skeletonSymbol]: InnerSkeleton;
+  private readonly __designerCabin: any;
+  private readonly __skeletonCabin: any;
+  private readonly __editorCabin: any;
+  private readonly __utils: Utils;
+
+  constructor(editor: Editor, skeleton: InnerSkeleton) {
+    this[editorSymbol] = editor;
+    this[skeletonSymbol] = skeleton;
+    this.__designerCabin = getDesignerCabin(this[editorSymbol]);
+    this.__skeletonCabin = getSkeletonCabin(this[skeletonSymbol]);
+    this.__utils = new Utils();
+  }
+
+  get utils(): any {
+    return this.__utils;
+  }
+
+  get editorCabin(): any {
+    return {
+      Title: InnerTitle,
+      Tip: InnerTip,
+      shallowIntl,
+      createIntl: innerCreateIntl,
+      intl,
+      createSetterContent,
+      obx,
+      observable,
+      makeObservable,
+      untracked,
+      computed,
+      observer,
+      globalLocale,
+    };
+  }
+
+  get designerCabin(): any {
+    return this.__designerCabin;
+  }
+
+  get skeletonCabin(): any {
+    return this.__skeletonCabin;
+  }
+}

packages/shell/src/index.ts

@@ -1,5 +1,4 @@
 import Detecting from './detecting';
-// import Dragon from './dragon';
 import DocumentModel from './document-model';
 import Event, { getEvent } from './event';
 import History from './history';
@@ -15,6 +14,8 @@ import Skeleton from './skeleton';
 import Dragon from './dragon';
 import SettingPropEntry from './setting-prop-entry';
 import SettingTopEntry from './setting-top-entry';
+import Common from './common';
+
 export * from './symbols';
 
 /**
@@ -27,7 +28,6 @@ export * from './symbols';
 export {
   DocumentModel,
   Detecting,
-  // Dragon,
   Event,
   History,
   Material,
@@ -42,5 +42,6 @@ export {
   SettingPropEntry,
   SettingTopEntry,
   Dragon,
+  Common,
   getEvent,
 };