feat: run vision polyfill

package.json

@@ -15,7 +15,7 @@
     "commit": "git-cz",
     "pub": "lerna publish",
     "setup": "./scripts/setup.sh",
-    "start": "./scripts/start.sh",
+    "start": "lerna exec --scope @ali/lowcode-vision-polyfill -- npm start",
     "test": "lerna run test --stream",
     "test:snapshot": "lerna run test:snapshot"
   },

packages/designer/src/designer/designer-view.tsx

@@ -7,12 +7,15 @@ import { ProjectView } from '../project';
 import './designer.less';
 import clipboard from './clipboard';
 
-export class DesignerView extends Component<DesignerProps> {
+export class DesignerView extends Component<DesignerProps & {
+  designer: Designer;
+}> {
   readonly designer: Designer;
 
   constructor(props: any) {
     super(props);
-    this.designer = new Designer(props);
+    const { designer, ...designerProps } = props;
+    this.designer = designer || new Designer(designerProps);
   }
 
   shouldComponentUpdate(nextProps: DesignerProps) {

packages/editor-skeleton/src/skeleton.tsx

@@ -31,12 +31,13 @@ declare global {
 }
 
 export interface SkeletonProps {
-  components: PluginClassSet;
-  config: EditorConfig;
-  history: object;
-  location: object;
-  match: object;
-  utils: Utils;
+  components?: PluginClassSet;
+  config?: EditorConfig;
+  history?: object;
+  location?: object;
+  match?: object;
+  utils?: Utils;
+  editor?: Editor;
 }
 
 export interface SkeletonState {
@@ -79,29 +80,32 @@ export class Skeleton extends PureComponent<SkeletonProps, SkeletonState> {
     if (this.editor) {
       this.editor.destroy();
     }
-    const { utils, config, components } = this.props;
-    const editor = new Editor(
-      comboEditorConfig(defaultConfig, config),
-      components,
-      {
-        ...skeletonUtils,
-        ...utils,
-      },
-    );
-    this.editor = editor;
+    const { utils, config, components, editor } = this.props;
+    if (!editor) {
+      this.editor = new Editor(
+        comboEditorConfig(defaultConfig, config),
+        components,
+        {
+          ...skeletonUtils,
+          ...utils,
+        },
+      );
+      this.editor.once('editor.reset', (): void => {
+        this.setState({
+          initReady: false,
+        });
+        this.editor.emit('editor.beforeReset');
+        this.init(true);
+      });
+    } else {
+      this.editor = editor;
+    }
+
     // eslint-disable-next-line no-underscore-dangle
     window.__ctx = {
-      editor,
-      appHelper: editor,
+      editor: this.editor,
+      appHelper: this.editor,
     };
-    editor.once('editor.reset', (): void => {
-      this.setState({
-        initReady: false,
-      });
-      editor.emit('editor.beforeReset');
-      this.init(true);
-    });
-
     this.editor.init().then((): void => {
       this.setState(
         {
@@ -151,9 +155,10 @@ export class Skeleton extends PureComponent<SkeletonProps, SkeletonState> {
 
 // 通过React-Router包裹，支持编辑器内页面根据路由切换
 export interface SkeletonWithRouterProps {
-  components: PluginClassSet;
-  config: EditorConfig;
-  utils: Utils;
+  components?: PluginClassSet;
+  config?: EditorConfig;
+  utils?: Utils;
+  editor?: Editor;
 }
 
 const SkeletonWithRouter: React.FC<SkeletonWithRouterProps> = (
@@ -168,7 +173,7 @@ const SkeletonWithRouter: React.FC<SkeletonWithRouterProps> = (
           <Skeleton
             {...routerProps}
             {...otherProps}
-            {...(config.skeleton && config.skeleton.props)}
+            {...(config && config.skeleton && config.skeleton.props)}
             config={config}
           />
         )}

packages/vision-polyfill/build.json

@@ -0,0 +1,37 @@
+{
+  "entry": {
+    "index": "src/demo.ts"
+  },
+  "vendor": false,
+  "devServer": {
+    "hot": false
+  },
+  "publicPath": "/",
+  "externals": {
+    "react": "window.React",
+    "react-dom": "window.ReactDOM",
+    "prop-types": "window.PropTypes",
+    "@alifd/next": "window.Next",
+    "@ali/lowcode-globals": "window.LCEGlobals"
+  },
+  "plugins": [
+    [
+      "build-plugin-react-app"
+    ],
+    [
+      "build-plugin-fusion",
+      {
+        "themePackage": "@alife/theme-lowcode-light"
+      }
+    ],
+    [
+      "build-plugin-moment-locales",
+      {
+        "locales": [
+          "zh-cn"
+        ]
+      }
+    ],
+    "./build.plugin.js"
+  ]
+}

packages/vision-polyfill/build.plugin.js

@@ -0,0 +1,13 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+module.exports = ({ onGetWebpackConfig }) => {
+  onGetWebpackConfig((config) => {
+    config.resolve
+      .plugin('tsconfigpaths')
+      .use(TsconfigPathsPlugin, [{
+        configFile: "./tsconfig.json"
+      }]);
+    config.plugins.delete('hot');
+    config.devServer.hot(false);
+  });
+};

packages/vision-polyfill/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@ali/lowcode-vision-polyfill",
+  "private": true,
   "version": "0.8.0",
   "description": "Vision Polyfill for Ali lowCode engine",
   "main": "lib/index.js",
   "files": [
     "dist"
   ],
-  "scripts": {},
+  "scripts": {
+    "start": "build-scripts start"
+  },
   "license": "MIT",
   "dependencies": {
     "@ali/ve-icons": "^4.1.9",
@@ -14,6 +17,30 @@
     "@ali/ve-utils": "^1.1.0",
     "@ali/vu-css-style": "^1.1.3",
     "@ali/vu-logger": "^1.0.7",
-    "@ali/vu-style-sheet": "^2.4.0"
+    "@ali/vu-style-sheet": "^2.4.0",
+    "@ali/lowcode-editor-core": "^0.8.4",
+    "@ali/lowcode-editor-skeleton": "^0.8.0",
+    "@ali/lowcode-plugin-components-pane": "^0.8.0",
+    "@ali/lowcode-plugin-designer": "^0.9.1",
+    "@ali/lowcode-plugin-outline-pane": "^0.8.7",
+    "@ali/lowcode-plugin-settings-pane": "^0.8.8",
+    "@ali/lowcode-plugin-undo-redo": "^0.8.0",
+    "@ali/lowcode-plugin-zh-en": "^0.8.6",
+    "@ali/lowcode-setters": "^0.8.6",
+    "@alifd/next": "^1.19.12",
+    "@alife/theme-lowcode-dark": "^0.1.0",
+    "@alife/theme-lowcode-light": "^0.1.0",
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1"
+  },
+  "devDependencies": {
+    "@alib/build-scripts": "^0.1.18",
+    "@types/events": "^3.0.0",
+    "@types/react": "^16.8.3",
+    "@types/react-dom": "^16.8.2",
+    "build-plugin-fusion": "^0.1.0",
+    "build-plugin-moment-locales": "^0.1.0",
+    "build-plugin-react-app": "^1.1.2",
+    "tsconfig-paths-webpack-plugin": "^3.2.0"
   }
 }

packages/vision-polyfill/public/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width" />
+    <title>LowCodeEngine Editor DEMO</title>
+    <link rel="shortcut icon" href="./favicon.png" />
+    <script src="https://g.alicdn.com/code/lib/react/16.9.0/umd/react.development.js"></script>
+    <script src="https://g.alicdn.com/code/lib/react-dom/16.9.0/umd/react-dom.development.js"></script>
+    <script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
+    <script> React.PropTypes = PropTypes; </script>
+    <script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
+    <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css" />
+    <script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
+    <!-- lowcode engine globals -->
+    <link rel="stylesheet" href="https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.8.0/globals.css" />
+  </head>
+
+  <body>
+    <!-- lowcode engine globals -->
+    <script src="https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.8.0/globals.js"></script>
+  </body>
+</html>

packages/vision-polyfill/public/schema.json

@@ -0,0 +1,110 @@
+{
+  "componentName": "Page",
+  "fileName": "test",
+  "dataSource": {
+    "list": []
+  },
+  "state": {
+    "text": "outter"
+  },
+  "props": {
+    "ref": "outterView",
+    "autoLoading": true,
+    "style": {
+      "padding": 20
+    }
+  },
+  "children": [{
+    "componentName": "Form",
+    "props": {
+      "labelCol": 3,
+      "style": {},
+      "ref": "testForm"
+    },
+    "children": [{
+      "componentName": "Form.Item",
+      "props": {
+        "label": "姓名：",
+        "name": "name",
+        "initValue": "李雷"
+      },
+      "children": [{
+        "componentName": "Input",
+        "props": {
+          "placeholder": "请输入",
+          "size": "medium",
+          "style": {
+            "width": 320
+          }
+        }
+      }]
+    }, {
+      "componentName": "Form.Item",
+      "props": {
+        "label": "年龄：",
+        "name": "age",
+        "initValue": "22"
+      },
+      "children": [{
+        "componentName": "NumberPicker",
+        "props": {
+          "size": "medium",
+          "type": "normal"
+        }
+      }]
+    }, {
+      "componentName": "Form.Item",
+      "props": {
+        "label": "职业：",
+        "name": "profession"
+      },
+      "children": [{
+        "componentName": "Select",
+        "props": {
+          "dataSource": [{
+            "label": "教师",
+            "value": "t"
+          }, {
+            "label": "医生",
+            "value": "d"
+          }, {
+            "label": "歌手",
+            "value": "s"
+          }]
+        }
+      }]
+    }, {
+      "componentName": "Div",
+      "props": {
+        "style": {
+          "textAlign": "center"
+        }
+      },
+      "children": [{
+        "componentName": "Button.Group",
+        "props": {},
+        "children": [{
+          "componentName": "Button",
+          "props": {
+            "type": "primary",
+            "style": {
+              "margin": "0 5px 0 5px"
+            },
+            "htmlType": "submit"
+          },
+          "children": "提交"
+        }, {
+          "componentName": "Button",
+          "props": {
+            "type": "normal",
+            "style": {
+              "margin": "0 5px 0 5px"
+            },
+            "htmlType": "reset"
+          },
+          "children": "重置"
+        }]
+      }]
+    }]
+  }]
+}

packages/vision-polyfill/src/bak/trunk.ts

@@ -1,10 +1,10 @@
 import lg from '@ali/vu-logger';
-import EventEmitter = require('events');
+import { EventEmitter } from 'events';
 import { ComponentClass } from 'react';
 
-import Bundle from './bundle/bundle';
-import Prototype, { setPackages } from './bundle/prototype';
-import Bus from './bus';
+import Bundle from '../bundle/bundle';
+import Prototype, { setPackages } from '../bundle/prototype';
+import Bus from '../bus';
 
 interface IComponentInfo {
   image?: string;

packages/vision-polyfill/src/bak/vision copy.ts

@@ -0,0 +1,161 @@
+import * as utils from '@ali/ve-utils';
+import popups from '@ali/ve-popups';
+import Icons from '@ali/ve-icons';
+import { VE_EVENTS, VE_HOOKS } from '../const';
+import Bus from '../bus';
+import Symbols from '../symbols';
+import Skeleton from '@ali/lowcode-editor-skeleton';
+import editor from '../editor';
+
+const VEOldAPIs = {
+  /**
+   * VE.Popup
+   */
+  Popup: popups,
+  /**
+   * VE.ui.xxx
+   *
+   * Core UI Components
+   */
+  ui: {
+    Field: {
+      SettingField,
+      Stage,
+      CaptionField,
+      PopupField,
+      EntryField,
+      AccordionField,
+      BlockField,
+      InlineField,
+      PlainField
+    },
+    Icon: Icons,
+    Icons,
+    Popup: popups,
+    /*
+    // for rax visualpage, will not support any
+    FaultComponent,
+    HiddenComponent,
+    UnknownComponent,
+    InsertionGhost,
+    */
+  },
+
+  /**
+   * VE.context DI 实现
+   *
+   * 默认未初始化，需要等待 init 之后
+   */
+  context: new VisualEngineContext(),
+
+  /**
+   * VE.init
+   *
+   * Initialized the whole VisualEngine UI
+   */
+  init: (container?: Element, contextConfigs?: any) => {
+    if (!container) {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    }
+    container.id = 'engine';
+    ReactDOM.render(<Skeleton editor={editor} />, container);
+  },
+
+  /**
+   * VE.modules.xxx
+   *
+   * VE BuildIn Modules
+   */
+  modules: {
+    // SchemaManager, 没看到使用的地方
+    // VisualDesigner, 没看到使用的地方
+    VisualManager // legao-designer 有用
+    // VisualRender, 没看到使用的地方
+    I18nUtil, // vs-list vs-rhino-widget-mapping
+    Prop, // vs-list vs-rhino-widget-mapping
+    /* 没看到使用的地方
+    Node,
+    Props,
+
+    Scroller,
+    Insertion,
+    */
+  },
+
+  /**
+   * VE Utils
+   */
+  utils,
+  /* 包抽象 */
+  Bundle,
+
+  /* pub/sub 集线器 */
+  // ve-quick-search-pane, ve-section-pane vp-in-place-editing ve-action-save
+  // ve-page-history vs-q-chart-data ve-action-pane ve-page-lock-pane
+  // ve-datapool-pane ve-youshu-card-param-pane
+  Bus,
+
+  /* 拖拽引擎 */
+  DragEngine, //  在 ve-metadata-pane, ve-section-pane， ve-trunk-pane-simple， ve-trunk-pane 中有用
+
+  /* 环境变量 */
+  // vu-oneapi-parser vu-events-property ve-section-pane vs-formula vu-link-property
+  // ve-datapool-pane  vs-form-validator vs-style vs-link vs-micro-link vs-link-options vu-field-property
+  Env,
+
+  /* 状态交换 */
+  //
+  Exchange,
+
+  /* 状态 Flags */
+  // legao-design tree-pane
+  Flags,
+
+  /* 快捷键 */
+  // legao-design
+  Hotkey,
+
+  /* 多语言文案 */
+  I18nUtil,
+
+  /* 页面管理 */
+  Pages,
+
+  /* 面板管理 */
+  Panes,
+
+  /* 应用管理 */
+  Project,
+
+  /* 包原型 */
+  Prototype,
+
+  /* 组件仓库 */
+  Trunk,
+
+  /* 事件 */
+  EVENTS: VE_EVENTS, // legao-design
+
+  /* 修饰方法 */
+  HOOKS: VE_HOOKS, // legao-design vu-visualpage-rax
+
+  /* 视图管理 */
+  Viewport,
+
+  /* Symbol 管理类 */
+  Symbols, // legao-design vu-action-util
+
+  /**
+   * VisualEngine Logger Tool
+   */
+  // lg: logger, 没看到使用的地方
+  // logger,
+
+  /* 版本号 */
+  // Version: VERSION,
+
+  // Location,
+  // Node,
+  // VirtualRenderingNode
+}

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

@@ -3,7 +3,7 @@ import { camelCase, find, findIndex, upperFirst } from 'lodash';
 import { ComponentClass, ReactElement, ComponentType } from 'react';
 
 import { UnknownComponent } from '../../ui/placeholders';
-import Trunk, { IComponentBundle } from '../trunk';
+import Trunk, { IComponentBundle } from '../bak/trunk';
 import Prototype from './prototype';
 
 function basename(name: string) {

packages/vision-polyfill/src/demo.ts

@@ -0,0 +1,16 @@
+import { init } from "./vision";
+import editor from './editor';
+
+init();
+
+load();
+
+async function load() {
+  const assets = await editor.utils.get('./assets.json');
+  editor.set('assets', assets);
+  editor.emit('assets.loaded', assets);
+
+  const schema = await editor.utils.get('./schema.json');
+  editor.set('schema', schema);
+  editor.emit('schema.loaded', schema);
+}

packages/vision-polyfill/src/editor.ts

@@ -0,0 +1,68 @@
+import Editor from '@ali/lowcode-editor-core';
+import outlinePane from '@ali/lowcode-plugin-outline-pane';
+import settingsPane from '@ali/lowcode-plugin-settings-pane';
+import designer from '@ali/lowcode-plugin-designer';
+import { registerSetters } from '@ali/lowcode-setters';
+
+registerSetters();
+
+export default new Editor(
+  {
+    plugins: {
+      topArea: [],
+      leftArea: [
+        {
+          pluginKey: 'outlinePane',
+          type: 'PanelIcon',
+          props: {
+            align: 'top',
+            icon: 'shuxingkongjian',
+            title: '大纲树',
+          },
+          config: {
+            package: '@ali/lowcode-plugin-outline-pane',
+            version: '^0.8.0',
+          },
+          pluginProps: {},
+        },
+      ],
+      rightArea: [
+        {
+          pluginKey: 'settingsPane',
+          type: 'Panel',
+          props: {},
+          config: {
+            package: '@ali/lowcode-plugin-settings-pane',
+            version: '^0.8.0',
+          },
+          pluginProps: {},
+        },
+      ],
+      centerArea: [
+        {
+          pluginKey: 'designer',
+          type: '',
+          props: {},
+          config: {
+            package: '@ali/lowcode-plugin-designer',
+            version: '^0.8.0',
+          },
+        },
+      ],
+    },
+  },
+  {
+    outlinePane,
+    settingsPane,
+    designer,
+  },
+);
+
+
+// editor-core
+//  1. di 实现
+//  2. skeleton 区域管理
+//  3. general bus: pub/sub
+// editor-skeleton/workbench 视图实现
+//  provide fixed left pane
+//  provide float left pane

packages/vision-polyfill/src/vision.ts

@@ -1,159 +1,54 @@
 import * as utils from '@ali/ve-utils';
-import popups from '@ali/ve-popups';
+import Popup from '@ali/ve-popups';
 import Icons from '@ali/ve-icons';
-import { VE_EVENTS, VE_HOOKS } from './const';
+import { render } from 'react-dom';
+import { createElement } from 'react';
+import { VE_EVENTS as EVENTS, VE_HOOKS as HOOKS } from './const';
 import Bus from './bus';
 import Symbols from './symbols';
+import Skeleton from '@ali/lowcode-editor-skeleton';
+import editor from './editor';
 
-const VEOldAPIs = {
+function init(container?: Element) {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  }
+  container.id = 'engine';
+
+  render(createElement(Skeleton, {
+    editor,
+  }), container);
+}
+
+const ui = {
+  Icon: Icons,
+  Icons,
+  Popup,
+};
+
+export {
   /**
    * VE.Popup
    */
-  Popup: popups,
+  Popup,
   /**
-   * VE.ui.xxx
-   *
-   * Core UI Components
+   * VE Utils
    */
-  ui: {
-    Field: {
-      SettingField,
-      Stage,
-      CaptionField,
-      PopupField,
-      EntryField,
-      AccordionField,
-      BlockField,
-      InlineField,
-      PlainField
-    },
-    Icon: Icons,
-    Icons,
-    Popup: popups,
-    /*
-    // for rax visualpage, will not support any
-    FaultComponent,
-    HiddenComponent,
-    UnknownComponent,
-    InsertionGhost,
-    */
-  },
-
-  /**
-   * VE.context DI 实现
-   *
-   * 默认未初始化，需要等待 init 之后
-   */
-  context: new VisualEngineContext(),
-
+  utils,
+  /* pub/sub 集线器 */
+  Bus,
+  /* 事件 */
+  EVENTS,
+  /* 修饰方法 */
+  HOOKS,
+  /* Symbol 管理类 */
+  Symbols,
   /**
    * VE.init
    *
    * Initialized the whole VisualEngine UI
    */
-  init: once((container?: Element, contextConfigs?: any) => {
-    if (!container) {
-      container = document.createElement('div');
-      document.body.appendChild(container);
-    }
-    container.id = 'engine';
-    ReactDOM.render(<Editor />, container);
-  }),
-
-  /**
-   * VE.modules.xxx
-   *
-   * VE BuildIn Modules
-   */
-  modules: {
-    // SchemaManager, 没看到使用的地方
-    // VisualDesigner, 没看到使用的地方
-    VisualManager // legao-designer 有用
-    // VisualRender, 没看到使用的地方
-    I18nUtil, // vs-list vs-rhino-widget-mapping
-    Prop, // vs-list vs-rhino-widget-mapping
-    /* 没看到使用的地方
-    Node,
-    Props,
-
-    Scroller,
-    Insertion,
-    */
-  },
-
-  /**
-   * VE Utils
-   */
-  utils,
-  /* 包抽象 */
-  Bundle,
-
-  /* pub/sub 集线器 */
-  // ve-quick-search-pane, ve-section-pane vp-in-place-editing ve-action-save
-  // ve-page-history vs-q-chart-data ve-action-pane ve-page-lock-pane
-  // ve-datapool-pane ve-youshu-card-param-pane
-  Bus,
-
-  /* 拖拽引擎 */
-  DragEngine, //  在 ve-metadata-pane, ve-section-pane， ve-trunk-pane-simple， ve-trunk-pane 中有用
-
-  /* 环境变量 */
-  // vu-oneapi-parser vu-events-property ve-section-pane vs-formula vu-link-property
-  // ve-datapool-pane  vs-form-validator vs-style vs-link vs-micro-link vs-link-options vu-field-property
-  Env,
-
-  /* 状态交换 */
-  //
-  Exchange,
-
-  /* 状态 Flags */
-  // legao-design tree-pane
-  Flags,
-
-  /* 快捷键 */
-  // legao-design
-  Hotkey,
-
-  /* 多语言文案 */
-  I18nUtil,
-
-  /* 页面管理 */
-  Pages,
-
-  /* 面板管理 */
-  Panes,
-
-  /* 应用管理 */
-  Project,
-
-  /* 包原型 */
-  Prototype,
-
-  /* 组件仓库 */
-  Trunk,
-
-  /* 事件 */
-  EVENTS: VE_EVENTS, // legao-design
-
-  /* 修饰方法 */
-  HOOKS: VE_HOOKS, // legao-design vu-visualpage-rax
-
-  /* 视图管理 */
-  Viewport,
-
-  /* Symbol 管理类 */
-  Symbols, // legao-design vu-action-util
-
-  /**
-   * VisualEngine Logger Tool
-   */
-  // lg: logger, 没看到使用的地方
-  // logger,
-
-  /* 版本号 */
-  // Version: VERSION,
-
-  // Location,
-  // Node,
-  // VirtualRenderingNode
-}
+  init,
+  ui,
+};

packages/vision-polyfill/tsconfig.json

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