premerge

package.json

@@ -13,7 +13,7 @@
     "build": "lerna run build --stream",
     "clean": "rm -rf ./packages/*/lib ./packages/*/es ./packages/*/dist ./packages/*/build",
     "commit": "git-cz",
-    "pub": "lerna publish",
+    "pub": "lerna publish --cd-version patch",
     "setup": "./scripts/setup.sh",
     "start": "lerna exec --scope @ali/lowcode-vision-polyfill -- npm start",
     "test": "lerna run test --stream",

packages/designer/src/designer/designer.ts

@@ -124,11 +124,11 @@ export class Designer {
         selectionDispose();
         selectionDispose = undefined;
       }
-      this.postEvent('selection-change', this.currentSelection);
+      this.postEvent('selection.change', this.currentSelection);
       if (this.currentSelection) {
         const currentSelection = this.currentSelection;
         selectionDispose = currentSelection.onSelectionChange(() => {
-          this.postEvent('selection-change', currentSelection);
+          this.postEvent('selection.change', currentSelection);
         });
       }
     };
@@ -147,9 +147,9 @@ export class Designer {
       }
     };
     this.project.onCurrentDocumentChange(() => {
-      this.postEvent('current-document-change', this.currentDocument);
+      this.postEvent('current-document.change', this.currentDocument);
-      this.postEvent('selection-change', this.currentSelection);
+      this.postEvent('selection.change', this.currentSelection);
-      this.postEvent('history-change', this.currentHistory);
+      this.postEvent('history.change', this.currentHistory);
       setupSelection();
       setupHistory();
     });

packages/designer/src/project/project.ts

@@ -142,7 +142,7 @@ export class Project {
         doc.suspense();
       }
     });
-    this.emitter.emit('current-document-change', actived);
+    this.emitter.emit('current-document.change', actived);
   }
 
   closeOthers(opened: DocumentModel) {
@@ -154,9 +154,9 @@ export class Project {
   }
 
   onCurrentDocumentChange(fn: (doc: DocumentModel) => void): () => void {
-    this.emitter.on('current-document-change', fn);
+    this.emitter.on('current-document.change', fn);
     return () => {
-      this.emitter.removeListener('current-document-change', fn);
+      this.emitter.removeListener('current-document.change', fn);
     };
   }
   // 通知标记删除，需要告知服务端

packages/editor-core/package.json

@@ -21,6 +21,7 @@
   "author": "xiayang.xy",
   "dependencies": {
     "@alifd/next": "1.x",
+    "@ali/lowcode-globals": "^0.9.1",
     "debug": "^4.1.1",
     "events": "^3.1.0",
     "intl-messageformat": "^8.3.1",
@@ -31,6 +32,7 @@
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
+    "@types/store": "^2.0.2",
     "@alib/build-scripts": "^0.1.3",
     "@types/lodash": "^4.14.149",
     "@types/react": "^16.9.13",

packages/editor-core/src/app-preset.ts

@@ -0,0 +1,45 @@
+import store from 'store';
+
+declare global {
+  interface Window {
+    __isDebug?: boolean;
+    __newFunc?: (funcStr: string) => (...args: any[]) => any;
+  }
+}
+
+// 根据url参数设置debug选项
+const debugRegRes = /_?debug=(.*?)(&|$)/.exec(location.search);
+if (debugRegRes && debugRegRes[1]) {
+  // eslint-disable-next-line no-underscore-dangle
+  window.__isDebug = true;
+  // @ts-ignore
+  store.storage.write('debug', debugRegRes[1] === 'true' ? '*' : debugRegRes[1]);
+} else {
+  // eslint-disable-next-line no-underscore-dangle
+  window.__isDebug = false;
+  store.remove('debug');
+}
+
+// 重要，用于矫正画布执行new Function的window对象上下文
+// eslint-disable-next-line no-underscore-dangle
+window.__newFunc = (funContext: string): ((...args: any[]) => any) => {
+  // eslint-disable-next-line no-new-func
+  return new Function(funContext) as (...args: any[]) => any;
+};
+
+// 关闭浏览器前提醒,只有产生过交互才会生效
+window.onbeforeunload = function(e: Event): string | void {
+  const ev = e || window.event;
+  // 本地调试不生效
+  if (location.href.indexOf('localhost') > 0) {
+    return;
+  }
+  const msg = '您确定要离开此页面吗？';
+  ev.cancelBubble = true;
+  ev.returnValue = true;
+  if (e.stopPropagation) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+  return msg;
+};

packages/editor-core/src/editor.ts

@@ -1,6 +1,6 @@
-import Debug from 'debug';
 import { EventEmitter } from 'events';
 import store from 'store';
+import { IocContext, RegisterOptions } from '@ali/lowcode-globals';
 import {
   EditorConfig,
   HooksConfig,
@@ -17,58 +17,21 @@ import * as editorUtils from './utils';
 
 const { registShortCuts, transformToPromise, unRegistShortCuts } = editorUtils;
 
-declare global {
-  interface Window {
-    __isDebug?: boolean;
-    __newFunc?: (funcStr: string) => (...args: any[]) => any;
-  }
-}
-
-// 根据url参数设置debug选项
-const debugRegRes = /_?debug=(.*?)(&|$)/.exec(location.search);
-if (debugRegRes && debugRegRes[1]) {
-  // eslint-disable-next-line no-underscore-dangle
-  window.__isDebug = true;
-  store.storage.write('debug', debugRegRes[1] === 'true' ? '*' : debugRegRes[1]);
-} else {
-  // eslint-disable-next-line no-underscore-dangle
-  window.__isDebug = false;
-  store.remove('debug');
-}
-
-// 重要，用于矫正画布执行new Function的window对象上下文
-// eslint-disable-next-line no-underscore-dangle
-window.__newFunc = (funContext: string): ((...args: any[]) => any) => {
-  // eslint-disable-next-line no-new-func
-  return new Function(funContext) as (...args: any[]) => any;
-};
-
-// 关闭浏览器前提醒,只有产生过交互才会生效
-window.onbeforeunload = function(e: Event): string | void {
-  const ev = e || window.event;
-  // 本地调试不生效
-  if (location.href.indexOf('localhost') > 0) {
-    return;
-  }
-  const msg = '您确定要离开此页面吗？';
-  ev.cancelBubble = true;
-  ev.returnValue = true;
-  if (e.stopPropagation) {
-    e.stopPropagation();
-    e.preventDefault();
-  }
-  return msg;
-};
-
 let instance: Editor;
 
-const debug = Debug('editor');
 EventEmitter.defaultMaxListeners = 100;
 
 export interface HooksFuncs {
   [idx: number]: (msg: string, handler: (...args: []) => void) => void;
 }
 
+export type KeyType = Function | Symbol | string;
+export type ClassType = Function | (new (...args: any[]) => any);
+export interface GetOptions {
+  forceNew?: boolean;
+  sourceCls?: ClassType;
+}
+
 export default class Editor extends EventEmitter {
   static getInstance = (config: EditorConfig, components: PluginClassSet, utils?: Utils): Editor => {
     if (!instance) {
@@ -89,6 +52,10 @@ export default class Editor extends EventEmitter {
   }
 
   readonly utils: Utils;
+  /**
+   * Ioc Container
+   */
+  readonly context = new IocContext();
 
   pluginStatus?: PluginStatusSet;
 
@@ -100,35 +67,32 @@ export default class Editor extends EventEmitter {
 
   constructor(readonly config: EditorConfig = {}, readonly componentsMap: PluginClassSet = {}, utils?: Utils) {
     super();
-    this.utils = ({ ...editorUtils, ...utils } as any);
+    this.utils = { ...editorUtils, ...utils } as any;
     instance = this;
   }
 
-  init(): Promise<any> {
+  async init(): Promise<any> {
     const { hooks, shortCuts = [], lifeCycles } = this.config || {};
     this.locale = store.get('lowcode-editor-locale') || 'zh-CN';
-    // this.messages = this.messagesSet[this.locale];
-    // this.i18n = generateI18n(this.locale, this.messages);
     this.pluginStatus = this.initPluginStatus();
     this.initHooks(hooks || []);
 
     this.emit('editor.beforeInit');
     const init = (lifeCycles && lifeCycles.init) || ((): void => {});
     // 用户可以通过设置extensions.init自定义初始化流程；
-    return transformToPromise(init(this))
+    try {
-      .then((): boolean => {
+      await transformToPromise(init(this));
       // 注册快捷键
       registShortCuts(shortCuts, this);
       this.emit('editor.afterInit');
       return true;
-      })
+    }
-      .catch((err): void => {
+    catch (err) {
       console.error(err);
-      });
+    }
   }
 
   destroy(): void {
-    debug('destroy');
     try {
       const { hooks = [], shortCuts = [], lifeCycles = {} } = this.config;
       unRegistShortCuts(shortCuts);
@@ -141,23 +105,20 @@ export default class Editor extends EventEmitter {
     }
   }
 
-  get(key: string): any {
+  get<T = undefined, KeyOrType = any>(keyOrType: KeyOrType, opt?: GetOptions) {
-    return (this as any)[key];
+    return this.context.get<T, KeyOrType>(keyOrType, opt);
   }
 
-  set(key: string | object, val: any): void {
+  has(keyOrType: KeyType): boolean {
-    if (typeof key === 'string') {
+    return this.context.has(keyOrType);
-      if (['init', 'destroy', 'get', 'set', 'batchOn', 'batchOff', 'batchOnce'].includes(key)) {
-        console.error('init, destroy, get, set, batchOn, batchOff, batchOnce is private attribute');
-        return;
   }
-      // FIXME! set to plugins, not to this
+
-      (this as any)[key] = val;
+  set(key: KeyType, data: any): void {
-    } else if (typeof key === 'object') {
+    this.context.register(data, key);
-      Object.keys(key).forEach((item): void => {
-        (this as any)[item] = (key as any)[item];
-      });
   }
+
+  register(data: any, key?: KeyType, options?: RegisterOptions): void {
+    this.context.register(data, key, options);
   }
 
   batchOn(events: string[], lisenter: (...args: any[]) => void): void {

packages/globals/package.json

@@ -30,6 +30,7 @@
     "@recore/obx": "^1.0.8",
     "@recore/obx-react": "^1.0.7",
     "classnames": "^2.2.6",
+    "power-di": "^2.2.4",
     "react": "^16",
     "react-dom": "^16.7.0"
   },

packages/globals/src/di/index.ts

@@ -1,2 +1,3 @@
 export * from './setter';
 export * from './transducer';
+export * from './ioc-context';

packages/globals/src/di/ioc-context.ts

@@ -0,0 +1,4 @@
+import { IocContext } from 'power-di';
+export * from 'power-di';
+
+export const globalContext = IocContext.DefaultInstance;

packages/plugin-components-pane/package.json

@@ -23,7 +23,8 @@
     "@ali/iceluna-addon-component-list": "^1.0.11",
     "@ali/iceluna-comp-material-show": "^1.0.10",
     "@ali/iceluna-sdk": "^1.0.6-beta.6",
-    "@ali/lowcode-editor-core": "0.8.0",
+    "@ali/lowcode-editor-core": "^0.8.4",
+    "@ali/lowcode-designer": "^0.9.1",
     "@alifd/next": "^1.19.19",
     "react": "^16.8.1"
   },

packages/plugin-components-pane/src/index.tsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import { Icon, Search, Select } from '@alifd/next';
 import MaterialShow from '@ali/iceluna-comp-material-show';
 import { PluginProps } from '@ali/lowcode-editor-core';
+import { Designer } from '@ali/lowcode-designer';
 
 import './index.scss';
 
@@ -42,7 +43,7 @@ export default class ComponentListPlugin extends PureComponent<
 
   componentDidMount(): void {
     const { editor } = this.props;
-    if (editor.assets) {
+    if (editor.get('assets')) {
       this.initComponentList();
     } else {
       editor.once('editor.ready', this.initComponentList);
@@ -72,7 +73,7 @@ export default class ComponentListPlugin extends PureComponent<
 
   initComponentList = (): void => {
     const { editor } = this.props;
-    const assets = editor.assets || {};
+    const assets = editor.get('assets') || {};
     const list: string[] = [];
     const libs: LibrayInfo[] = [];
     Object.values(assets.packages).forEach((item): void => {
@@ -100,10 +101,9 @@ export default class ComponentListPlugin extends PureComponent<
 
     editor.set('dndHelper', {
       handleResourceDragStart: function(ev, tagName, schema) {
-        // 物料面板中组件snippet的dragStart回调
+        const designer = editor.get(Designer);
-        // ev: 原始的domEvent；tagName: 组件的描述文案；schema: snippet的schema
+        if (designer) {
-        if (editor.designer) {
+          designer.dragon.boost(
-          editor.designer.dragon.boost(
             {
               type: 'nodedata',
               data: schema,

packages/plugin-designer/src/index.tsx

@@ -57,7 +57,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
 
   handleDesignerMount = (designer: Designer): void => {
     const { editor } = this.props;
-    editor.set('designer', designer);
+    editor.set(Designer, designer);
     editor.emit('designer.ready', designer);
     const schema = editor.get('schema');
     if (schema) {
@@ -82,7 +82,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
         onMount={this.handleDesignerMount}
         className="lowcode-plugin-designer"
         eventPipe={editor}
-        designer={editor.get('designer')}
+        designer={editor.get(Designer)}
         componentMetadatas={componentMetadatas}
         simulatorProps={{
           library,

packages/plugin-outline-pane/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@ali/lowcode-designer": "^0.9.1",
     "@ali/lowcode-globals": "^0.9.1",
+    "@ali/lowcode-editor-core": "^0.8.4",
     "@alifd/next": "^1.19.16",
     "classnames": "^2.2.6",
     "react": "^16",

packages/plugin-outline-pane/src/main.ts

@@ -17,6 +17,7 @@ import {
   contains,
   Node,
 } from '@ali/lowcode-designer';
+import { Editor } from '@ali/lowcode-editor-core';
 import { Tree } from './tree';
 import TreeNode from './tree-node';
 import { IndentTrack } from './helper/indent-track';
@@ -130,15 +131,16 @@ export class OutlineMain implements ISensor, IScrollBoard, IScrollable {
   readonly id = uniqueId('outline');
 
   private fixed = false;
-  constructor(readonly editor: any, at?: string) {
+  constructor(readonly editor: Editor, at?: string) {
     let inited = false;
     const setup = () => {
       if (inited) {
         return false;
       }
       inited = true;
-      if (editor.designer) {
+      const designer = editor.get(Designer);
-        this.setupDesigner(editor.designer);
+      if (designer) {
+        this.setupDesigner(designer);
       } else {
         editor.once('designer.mount', (designer: Designer) => {
           this.setupDesigner(designer);
@@ -151,7 +153,6 @@ export class OutlineMain implements ISensor, IScrollBoard, IScrollable {
       setup();
     } else {
       editor.on('skeleton.panel.show', (key: string) => {
-        console.info('show', key);
         if (key === at) {
           setup();
           if (this.master) {
@@ -160,7 +161,10 @@ export class OutlineMain implements ISensor, IScrollBoard, IScrollable {
             this.fixed = true;
           }
           document.documentElement.classList.add('lowcode-has-fixed-tree');
-        } else {
+        }
+      });
+      editor.on('skeleton.panel.hide', (key: string) => {
+        if (key === at) {
           document.documentElement.classList.remove('lowcode-has-fixed-tree');
           if (this.master) {
             this.master.unFixed(this);

packages/plugin-sample-preview/src/index.tsx

@@ -6,7 +6,7 @@ import './index.scss';
 
 const SamplePreview = ({ editor }: PluginProps) => {
   const handleClick = () => {
-    const designer = editor.get('designer') as Designer;
+    const designer = editor.get(Designer);
     console.info('save schema:', designer.schema);
     localStorage.setItem('lce-dev-store', JSON.stringify(designer.schema));
     window.open('./preview.html', 'preview');

packages/plugin-sample-save/CHANGELOG.md

@@ -1,28 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-<a name="0.8.3"></a>
-## [0.8.3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-save@0.8.2...@ali/lowcode-plugin-sample-save@0.8.3) (2020-03-30)
-
-
-
-
-**Note:** Version bump only for package @ali/lowcode-plugin-sample-save
-
-<a name="0.8.2"></a>
-## 0.8.2 (2020-03-30)
-
-
-
-
-**Note:** Version bump only for package @ali/lowcode-plugin-sample-save
-
-<a name="0.8.1"></a>
-## 0.8.1 (2020-03-30)
-
-
-
-
-**Note:** Version bump only for package @ali/lowcode-plugin-sample-save

packages/plugin-sample-save/README.md

@@ -1,3 +0,0 @@
-## todo
-
-Sample save plugin

packages/plugin-sample-save/build.json

@@ -1,9 +0,0 @@
-{
-  "plugins": [
-    "build-plugin-component",
-    "build-plugin-fusion",
-    ["build-plugin-moment-locales", {
-      "locales": ["zh-cn"]
-    }]
-  ]
-}

packages/plugin-sample-save/package.json

@@ -1,37 +0,0 @@
-{
-  "name": "@ali/lowcode-plugin-sample-save",
-  "version": "0.8.3",
-  "description": "alibaba lowcode editor sample save plugin",
-  "files": [
-    "es",
-    "lib"
-  ],
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "scripts": {
-    "build": "build-scripts build --skip-demo",
-    "test": "ava",
-    "test:snapshot": "ava --update-snapshots"
-  },
-  "keywords": [
-    "lowcode",
-    "editor"
-  ],
-  "author": "xiayang.xy",
-  "dependencies": {
-    "@ali/lowcode-editor-core": "^0.8.4",
-    "@alifd/next": "^1.x",
-    "react": "^16.8.1"
-  },
-  "devDependencies": {
-    "@alib/build-scripts": "^0.1.3",
-    "@types/react": "^16.9.13",
-    "@types/react-dom": "^16.9.4",
-    "build-plugin-component": "^0.2.7-1",
-    "build-plugin-fusion": "^0.1.0",
-    "build-plugin-moment-locales": "^0.1.0"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npm.alibaba-inc.com"
-  }
-}

packages/plugin-sample-save/src/index.scss

@@ -1,3 +0,0 @@
-.lowcode-plugin-save {
-  padding: 10px 4px;
-}

packages/plugin-sample-save/src/index.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Button } from '@alifd/next';
-import { PluginProps } from '@ali/lowcode-editor-core';
-import './index.scss';
-
-const Save: React.FC<PluginProps> = (props): React.ReactElement => {
-  const handleClick = (): void => {
-    console.log('save data:', props.editor.designer.currentDocument.schema);
-    console.log('save data json:', JSON.stringify(props.editor.designer.currentDocument.schema));
-  };
-
-  return (
-    <div className="lowcode-plugin-save">
-      <Button type="primary" onClick={handleClick}>
-        保存
-      </Button>
-    </div>
-  );
-};
-
-export default Save;

packages/plugin-sample-save/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "lib"
-  },
-  "include": [
-    "./src/"
-  ]
-}

packages/plugin-settings-pane/src/main.ts

@@ -3,6 +3,7 @@ import { uniqueId } from '@ali/lowcode-globals';
 import { ComponentMeta, Node, Designer, Selection } from '@ali/lowcode-designer';
 import { TitleContent, FieldExtraProps, SetterType, CustomView, FieldConfig, isCustomView } from '@ali/lowcode-globals';
 import { getTreeMaster } from '@ali/lowcode-plugin-outline-pane';
+import Editor from '@ali/lowcode-editor-core';
 
 export interface SettingTarget {
   // 所设置的节点集，至少一个
@@ -323,10 +324,10 @@ export class SettingsMain implements SettingTarget {
 
   private _designer?: Designer;
   get designer() {
-    return this._designer || this.editor.designer;
+    return this._designer || this.editor.get(Designer);
   }
 
-  constructor(readonly editor: any) {
+  constructor(readonly editor: Editor) {
     const setupSelection = (selection?: Selection) => {
       if (selection) {
         if (!this._designer) {
@@ -337,20 +338,21 @@ export class SettingsMain implements SettingTarget {
         this.setup([]);
       }
     };
-    editor.on('designer.selection-change', setupSelection);
+    editor.on('designer.selection.change', setupSelection);
     const connectTree = (designer: any) => {
       getTreeMaster(designer).onceEnableBuiltin(() => {
         this.emitter.emit('outline-visible');
       });
     }
-    if (editor.designer) {
+    const designer = editor.get(Designer);
-      connectTree(editor.designer);
+    if (designer) {
-      setupSelection(editor.designer.currentSelection);
+      connectTree(designer);
+      setupSelection(designer.currentSelection);
     } else {
       editor.once('designer.mount', connectTree);
     }
     this.disposeListener = () => {
-      editor.removeListener('designer.selection-change', setupSelection);
+      editor.removeListener('designer.selection.change', setupSelection);
     };
   }
 

packages/plugin-undo-redo/package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@ali/lowcode-editor-core": "^0.8.4",
     "@ali/lowcode-editor-skeleton": "^0.8.5",
+    "@ali/lowcode-designer": "^0.9.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },

packages/plugin-undo-redo/src/index.tsx

@@ -1,10 +1,11 @@
 import React, { PureComponent } from 'react';
 import './index.scss';
-import { PluginProps } from '@ali/lowcode-editor-core';
+import Editor, { PluginProps } from '@ali/lowcode-editor-core';
 import { TopIcon } from '@ali/lowcode-editor-skeleton';
+import { Designer } from '@ali/lowcode-designer';
 
 export interface IProps {
-  editor: any;
+  editor: Editor;
   logo?: string;
 }
 
@@ -33,12 +34,13 @@ export default class UndoRedo extends PureComponent<
     const { editor } = this.props;
     editor.on('designer.history-change', this.handleHistoryChange);
 
-    if (editor.designer) {
+    const designer = editor.get(Designer);
-      this.history = editor.designer?.currentHistory;
+    if (designer) {
+      this.history = designer.currentHistory;
       this.updateState(this.history?.getState() || 0);
     } else {
       editor.once('designer.ready', (): void => {
-        this.history = editor.designer?.currentHistory;
+        this.history = editor.get(Designer)?.currentHistory;
         this.updateState(this.history?.getState() || 0);
       });
     }
@@ -57,7 +59,7 @@ export default class UndoRedo extends PureComponent<
   init = (): void => {
     const { editor } = this.props;
 
-    this.history = editor.designer?.currentHistory;
+    this.history = editor.get(Designer)?.currentHistory;
     this.updateState(this.history?.getState() || 0);
 
     editor.on('designer.history-change', (history: any): void => {

packages/vision-polyfill/src/editor.ts

@@ -5,16 +5,20 @@ import DesignerView from '@ali/lowcode-plugin-designer';
 import { registerSetters } from '@ali/lowcode-setters';
 import { Skeleton } from './skeleton/skeleton';
 import { Designer } from 'designer/src/designer';
+import { globalContext } from 'globals/src/di';
 
 registerSetters();
 
 export const editor = new Editor();
+globalContext.register(editor, Editor);
 
-export const skeleton = new Skeleton(editor);
+export const skeleton = new Skeleton();
 
-export const designer = new Designer({editor});
+console.info(skeleton.editor);
 
-editor.set('designer', designer)
+export const designer = new Designer({ eventPipe: editor });
+
+editor.set(Designer, designer);
 
 skeleton.mainArea.add({
   name: 'designer',
@@ -36,8 +40,8 @@ skeleton.leftArea.add({
   },
   content: OutlinePane,
   panelProps: {
-    area: 'leftFixedArea'
+    area: 'leftFixedArea',
-  }
+  },
 });
 
 // editor-core

packages/vision-polyfill/src/skeleton/skeleton.ts

@@ -1,3 +1,5 @@
+import { Editor } from '@ali/lowcode-editor-core';
+import { inject } from '@ali/lowcode-globals';
 import {
   DockConfig,
   PanelConfig,
@@ -9,7 +11,6 @@ import {
   isPanelDockConfig,
   isPanelConfig,
 } from './types';
-import Editor from '@ali/lowcode-editor-core';
 import Panel, { isPanel } from './panel';
 import WidgetContainer from './widget-container';
 import Area from './area';
@@ -19,6 +20,17 @@ import Dock from './dock';
 import { Stage, StageConfig } from './stage';
 import { isValidElement } from 'react';
 
+export enum SkeletonEvents {
+  PANEL_DOCK_ACTIVE = 'skeleton.panel-dock.active',
+  PANEL_DOCK_UNACTIVE = 'skeleton.panel-dock.unactive',
+  PANEL_SHOW = 'skeleton.panel.show',
+  PANEL_HIDE = 'skeleton.panel.hide',
+  WIDGET_SHOW = 'skeleton.widget.show',
+  WIDGET_HIDE = 'skeleton.widget.hide',
+}
+
+console.log(inject);
+
 export class Skeleton {
   private panels = new Map<string, Panel>();
   private containers = new Map<string, WidgetContainer<any>>();
@@ -31,7 +43,10 @@ export class Skeleton {
   readonly mainArea: Area<WidgetConfig | PanelConfig, Widget | Panel>;
   readonly bottomArea: Area<PanelConfig, Panel>;
   readonly stages: Area<StageConfig, Stage>;
-  constructor(readonly editor: Editor) {
+
+  @inject() public editor: Editor;
+
+  constructor() {
     this.leftArea = new Area(
       this,
       'leftArea',
@@ -174,6 +189,10 @@ export class Skeleton {
     })
   }
 
+  postEvent(event: SkeletonEvents, ...args: any[]) {
+    this.editor.emit(event, ...args);
+  }
+
   createWidget(config: IWidgetBaseConfig | IWidget) {
     if (isWidget(config)) {
       return config;

packages/vision-polyfill/src/skeleton/widget-views.tsx

@@ -7,6 +7,7 @@ import { composeTitle } from './utils';
 import WidgetContainer from './widget-container';
 import Panel from './panel';
 import { IWidget } from './widget';
+import { SkeletonEvents } from './skeleton';
 
 export function DockView({ title, icon, description, size, className, onClick }: DockProps) {
   return (
@@ -34,9 +35,9 @@ export class PanelDockView extends Component<DockProps & { dock: PanelDock }> {
     if (dock.actived !== this.lastActived) {
       this.lastActived = dock.actived;
       if (this.lastActived) {
-        dock.skeleton.editor.emit('skeleton.panel-dock.active', dock.name, dock);
+        dock.skeleton.postEvent(SkeletonEvents.PANEL_DOCK_ACTIVE, dock.name, dock);
       } else {
-        dock.skeleton.editor.emit('skeleton.panel-dock.unactive', dock.name, dock);
+        dock.skeleton.postEvent(SkeletonEvents.PANEL_DOCK_UNACTIVE, dock.name, dock);
       }
     }
   }
@@ -78,9 +79,9 @@ export class TitledPanelView extends Component<{ panel: Panel }> {
     if (currentVisible !== this.lastVisible) {
       this.lastVisible = currentVisible;
       if (this.lastVisible) {
-        panel.skeleton.editor.emit('skeleton.panel.show', panel.name, panel);
+        panel.skeleton.postEvent(SkeletonEvents.PANEL_SHOW, panel.name, panel);
       } else {
-        panel.skeleton.editor.emit('skeleton.panel.hide', panel.name, panel);
+        panel.skeleton.postEvent(SkeletonEvents.PANEL_HIDE, panel.name, panel);
       }
     }
   }
@@ -118,9 +119,9 @@ export class PanelView extends Component<{ panel: Panel }> {
     if (currentVisible !== this.lastVisible) {
       this.lastVisible = currentVisible;
       if (this.lastVisible) {
-        panel.skeleton.editor.emit('skeleton.panel.show', panel.name, panel);
+        panel.skeleton.postEvent(SkeletonEvents.PANEL_SHOW, panel.name, panel);
       } else {
-        panel.skeleton.editor.emit('skeleton.panel.hide', panel.name, panel);
+        panel.skeleton.postEvent(SkeletonEvents.PANEL_HIDE, panel.name, panel);
       }
     }
   }
@@ -215,9 +216,9 @@ export class WidgetView extends Component<{ widget: IWidget }> {
     if (currentVisible !== this.lastVisible) {
       this.lastVisible = currentVisible;
       if (this.lastVisible) {
-        widget.skeleton.editor.emit('skeleton.widget.show', widget.name, widget);
+        widget.skeleton.postEvent(SkeletonEvents.WIDGET_SHOW, widget.name, widget);
       } else {
-        widget.skeleton.editor.emit('skeleton.widget.hide', widget.name, widget);
+        widget.skeleton.postEvent(SkeletonEvents.WIDGET_SHOW, widget.name, widget);
       }
     }
   }

tsconfig.json

@@ -16,6 +16,7 @@
     // "noEmit": true,
     // Enable strictest settings like strictNullChecks & noImplicitAny.
     "strict": true,
+    "strictPropertyInitialization": false,
     // Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
     "allowSyntheticDefaultImports": true,
     // Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'.
@@ -26,6 +27,7 @@
     "importHelpers": true,
     // Enables experimental support for ES7 decorators.
     "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
     // Generates corresponding .map file.
     "sourceMap": true,
     // Disallow inconsistently-cased references to the same file.