ready build

packages/demo/build.json

@@ -1,6 +1,7 @@
 {
   "entry": {
-    "vision-preset": "../vision-preset/src/index.ts",
+    "index": "src/index.ts",
+    "editor-preset-vision": "../editor-preset-vision/src/index.ts",
     "react-simulator-renderer": "../react-simulator-renderer/src/index.ts"
   },
   "vendor": false,

packages/demo/build.plugin.js

@@ -1,15 +1,13 @@
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
-
 module.exports = ({ onGetWebpackConfig }) => {
   onGetWebpackConfig((config) => {
-    config.resolve
+    config.resolve.plugin('tsconfigpaths').use(TsconfigPathsPlugin, [
-      .plugin('tsconfigpaths')
+      {
-      .use(TsconfigPathsPlugin, [{
+        configFile: './tsconfig.json',
-        configFile: "./tsconfig.json"
+      },
-      }]);
+    ]);
-
 
     config
     // 定义插件名称

packages/demo/cloud-build.json

@@ -7,9 +7,12 @@
     "react": "window.React",
     "react-dom": "window.ReactDOM",
     "prop-types": "window.PropTypes",
-    "@ali/lowcode-editor-core": "window.LCECore",
     "@ali/visualengine": "window.VisualEngine",
-    "@ali/visualengine-utils": "window.VisualEngineUtils"
+    "@ali/visualengine-utils": "window.VisualEngineUtils",
+    "@ali/lowcode-editor-preset-general": "window.LowcodeEditor",
+    "@ali/lowcode-editor-core": "window.LowcodeEditor",
+    "@ali/lowcode-editor-skeleton": "window.LowcodeEditor",
+    "@ali/lowcode-designer": "window.LowcodeEditor"
   },
   "minify": false,
   "sourcemap": true,

packages/demo/package.json

@@ -5,8 +5,6 @@
   "description": "低代码引擎 DEMO",
   "scripts": {
     "cloud-build": "build-scripts build --config cloud-build.json",
-    "gen": "npm run genSkeleton && tyarn",
-    "genSkeleton": "iceluna gen lowcode -c ./skeleton.config.js -t ./src/editor/config",
     "start": "build-scripts start"
   },
   "config": {},
@@ -38,14 +36,12 @@
     "@ali/vu-function-parser": "^2.5.0-beta.0",
     "@ali/vu-legao-design-fetch-context": "^1.0.3",
     "@alifd/next": "^1.19.12",
-    "@alife/theme-lowcode-dark": "^0.1.0",
     "@alife/theme-lowcode-light": "^0.1.0",
     "compare-versions": "^3.0.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
   "devDependencies": {
-    "@ali/iceluna-cli": "^0.0.16",
     "@alib/build-scripts": "^0.1.18",
     "@types/events": "^3.0.0",
     "@types/react": "^16.8.3",

packages/demo/public/assets.json

@@ -1,21 +1,21 @@
 {
   "version": "1.0.0",
-  "packages": {
+  "packages": [
-    "moment": {
+    {
       "package": "moment",
       "urls": ["https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"],
       "library": "moment"
     },
-    "@alifd/next": {
+    {
       "title": "fusion组件库",
       "package": "@alifd/next",
       "version": "1.19.18",
       "urls": ["https://unpkg.antfin-inc.com/@alife/next@1.19.18/dist/next.js", "https://unpkg.antfin-inc.com/@alife/next@1.19.18/dist/next.css"],
       "library": "Next"
     }
-  },
+  ],
-  "components": {
+  "components": [
-    "Page": {
+    {
       "componentName": "Page",
       "title": "页面",
       "configure": {
@@ -39,7 +39,7 @@
         }
       }
     },
-    "Div": {
+    {
       "componentName": "Div",
       "title": "容器",
       "configure": {
@@ -48,7 +48,7 @@
         }
       }
     },
-    "Button": {
+    {
       "componentName": "Button",
       "title": "按钮",
       "devMode": "proCode",
@@ -147,7 +147,7 @@
         "propType": "node"
       }]
     },
-    "Button.Group": {
+    {
       "componentName": "Button.Group",
       "title": "按钮组",
       "devMode": "proCode",
@@ -186,7 +186,7 @@
         }
       }
     },
-    "Input": {
+    {
       "componentName": "Input",
       "title": "输入框",
       "devMode": "proCode",
@@ -300,7 +300,7 @@
         "description": "预览态模式下渲染的内容\n@param {number} value 评分值"
       }]
     },
-    "Form": {
+    {
       "componentName": "Form",
       "title": "表单容器",
       "devMode": "proCode",
@@ -423,7 +423,7 @@
         }
       }
     },
-    "Form.Item": {
+    {
       "componentName": "Form.Item",
       "title": "表单项",
       "devMode": "proCode",
@@ -677,7 +677,7 @@
         }
       }
     },
-    "NumberPicker": {
+    {
       "componentName": "NumberPicker",
       "title": "数字输入",
       "devMode": "proCode",
@@ -829,7 +829,7 @@
         "description": "预设屏幕宽度"
       }]
     },
-    "Select": {
+    {
       "componentName": "Select",
       "title": "下拉",
       "devMode": "proCode",
@@ -1461,7 +1461,7 @@
         }]
       }
     },
-    "Select.Option": {
+    {
       "componentName": "Select.Option",
       "title": "选择项",
       "devMode": "proCode",
@@ -1496,7 +1496,7 @@
         }
       }
     }
-  },
+  ],
   "componentList": [{
     "title": "基础",
     "icon": "",

packages/demo/public/index.html

@@ -16,7 +16,7 @@
     <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>
-    <link rel="stylesheet" href="/css/vision-preset.css" />
+    <link rel="stylesheet" href="/css/editor-preset-vision.css" />
     <script>
       window.pageConfig = {
         env: 'release',
@@ -68,7 +68,7 @@
 
   <body>
     <!-- lowcode engine globals -->
-    <script src="/js/vision-preset.js"></script>
+    <script src="/js/editor-preset-vision.js"></script>
     <script src="https://dev.g.alicdn.com/vision/visualengine-utils/5.0.0/engine-utils.js"></script>
   </body>
 </html>

packages/demo/public/legao-assets.json

@@ -97,22 +97,6 @@
       "packageName": "@ali/vc-div",
       "version": "1.0.1"
     },
-    {
-      "prototypeConfigsUrl": [
-        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-page/1.0.5/proto.899e4b1.css",
-        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-page/1.0.5/proto.451d5fc.js"
-      ],
-      "prototypeViewsUrl": null,
-      "alias": "",
-      "library": "AliVcPage",
-      "urls": [
-        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-page/1.0.5/view.3fdc557.css",
-        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-page/1.0.5/view.ae881b7.js"
-      ],
-      "components": null,
-      "packageName": "@ali/vc-page",
-      "version": "1.0.5"
-    },
     {
       "prototypeConfigsUrl": [
         "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.1.12/proto.611ab53.css",

packages/demo/skeleton.config.js

@@ -1,157 +0,0 @@
-module.exports =  {
-  skeleton: {
-    config: {
-      package: '@ali/lowcode-editor-skeleton',
-      version: '^0.8.0'
-    }
-  },
-  theme: {
-    fusion: {
-      package: '@alife/theme-lowcode-light',
-      version: '^0.1.0'
-    },
-    scss: ''
-  },
-  constants: {
-    namespace: 'page'
-  },
-  utils: [],
-  plugins: {
-    topArea: [
-      {
-        pluginKey: 'logo',
-        type: 'Custom',
-        props: {
-          align: 'left',
-          width: 100
-        },
-        config: {
-          package: '@ali/lowcode-plugin-sample-logo',
-          version: '^0.8.0'
-        },
-        pluginProps: {
-          logo: 'https://img.alicdn.com/tfs/TB1hoI9x1H2gK0jSZFEXXcqMpXa-146-40.png',
-          href: '/'
-        }
-      },
-      {
-        pluginKey: 'undoRedo',
-        type: 'Custom',
-        props: {
-          align: 'right',
-          width: 88
-        },
-        config: {
-          package: '@ali/lowcode-plugin-undo-redo',
-          version: '^0.8.0'
-        }
-      },
-      {
-        pluginKey: 'divider',
-        type: 'Divider',
-        props: {
-          align: 'right'
-        }
-      },
-      {
-        pluginKey: 'samplePreview',
-        type: 'Custom',
-        props: {
-          align: 'right',
-          width: 64
-        },
-        config: {
-          package: '@ali/lowcode-plugin-sample-preview',
-          version: '^0.8.0'
-        }
-      }
-    ],
-    leftArea: [
-      {
-        pluginKey: 'componentsPane',
-        type: 'PanelIcon',
-        props: {
-          align: 'top',
-          icon: 'zujianku',
-          title: '组件库',
-          floatable: true,
-        },
-        config: {
-          package: '@ali/lowcode-plugin-components-pane',
-          version: '^0.8.0'
-        },
-        pluginProps: {
-        }
-      },
-
-      {
-        pluginKey: 'soueceEditor',
-        type: 'PanelIcon',
-        props: {
-          align: 'top',
-          icon: 'shuxingkongjian',
-          title: '源码面板'
-        },
-        config: {
-          package: '@ali/lowcode-plugin-source-editor',
-          version: '^0.8.2'
-        },
-        pluginProps: {}
-      },
-      {
-        pluginKey: 'zhEn',
-        type: 'Custom',
-        props: {
-          align: 'bottom',
-        },
-        config: {
-          package: '@ali/lowcode-plugin-zh-en',
-          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',
-        config: {
-          package: '@ali/lowcode-plugin-designer',
-          version: '^0.8.0'
-        }
-      },
-      {
-        pluginKey: 'eventBindDialog',
-        config: {
-          package: '@ali/lowcode-plugin-event-bind-dialog',
-          version: '^0.8.0'
-        }
-      }
-
-    ]
-  },
-  hooks: [],
-  shortCuts: [],
-  lifeCycles: {
-    init: async function init(editor) {
-      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/demo/src/editor/components.ts

@@ -1,26 +1,21 @@
-import LowcodeSkeleton from '@ali/lowcode-editor-skeleton';
 import logo from '@ali/lowcode-plugin-sample-logo';
-import undoRedo from '@ali/lowcode-plugin-undo-redo';
 import samplePreview from '@ali/lowcode-plugin-sample-preview';
+//import undoRedo from '@ali/lowcode-plugin-undo-redo';
 import componentsPane from '@ali/lowcode-plugin-components-pane';
-import outlinePane from '@ali/lowcode-plugin-outline-pane';
+import outline, { OutlinePane } from '@ali/lowcode-plugin-outline-pane';
 import zhEn from '@ali/lowcode-plugin-zh-en';
-import settingsPane from '@ali/lowcode-plugin-settings-pane';
-import designer from '@ali/lowcode-plugin-designer';
 import eventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
 import variableBindDialog from '@ali/lowcode-plugin-variable-bind-dialog';
-// import sourceEditor from '@ali/lowcode-plugin-source-editor';
+import sourceEditor from '@ali/lowcode-plugin-source-editor';
+
 export default {
-  LowcodeSkeleton,
   logo,
-  undoRedo,
   samplePreview,
+  //undoRedo,
   componentsPane,
-  outlinePane,
+  outline,
   zhEn,
-  settingsPane,
-  designer,
   eventBindDialog,
   variableBindDialog,
-  // sourceEditor
+  sourceEditor,
-};
+}

packages/demo/src/editor/config.js

@@ -0,0 +1,105 @@
+export default {
+  plugins: {
+    topArea: [
+      {
+        pluginKey: 'logo',
+        type: 'Custom',
+        props: {
+          align: 'left',
+          width: 100,
+        },
+        pluginProps: {
+          logo: 'https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png',
+          href: '/',
+        },
+      },
+      /*
+      {
+        pluginKey: 'undoRedo',
+        type: 'Custom',
+        props: {
+          align: 'right',
+          width: 88,
+        },
+      },
+      {
+        pluginKey: 'divider',
+        type: 'Divider',
+        props: {
+          align: 'right',
+        },
+      },*/
+      {
+        pluginKey: 'samplePreview',
+        type: 'Custom',
+        props: {
+          align: 'right',
+          width: 64,
+        },
+      },
+    ],
+    leftArea: [
+      {
+        pluginKey: 'componentsPane',
+        type: 'PanelIcon',
+        props: {
+          align: 'top',
+          icon: 'zujianku',
+          description: '组件库',
+        },
+        pluginProps: {},
+      },
+      {
+        pluginKey: 'outline',
+        type: 'PanelIcon',
+        props: {
+          align: 'top',
+          icon: 'shuxingkongjian',
+          description: '大纲树',
+        },
+        pluginProps: {},
+      },
+      {
+        pluginKey: 'sourceEditor',
+        type: 'PanelIcon',
+        props: {
+          align: 'top',
+          icon: 'zujianku',
+          description: '资源面板',
+          panelProps: {
+            floatable: true,
+            defaultWidth: 500,
+          },
+        },
+        pluginProps: {},
+      },
+      {
+        pluginKey: 'zhEn',
+        type: 'Custom',
+        props: {
+          align: 'bottom',
+        },
+        pluginProps: {},
+      },
+    ],
+    /*
+    centerArea: [
+      {
+        pluginKey: 'eventBindDialog',
+      },
+      {
+        pluginKey: 'variableBindDialog',
+      },
+    ],*/
+  },
+  shortCuts: [],
+  lifeCycles: {
+    init: async function init(editor) {
+      const assets = await editor.utils.get('./assets.json');
+      editor.set('assets', assets);
+
+      const schema = await editor.utils.get('./schema.json');
+      editor.set('schema', schema);
+    },
+  },
+};

packages/demo/src/editor/config/constants.js

@@ -1,3 +0,0 @@
-export default {
-  "namespace": "page"
-}

packages/demo/src/editor/config/locale/en-US.js

@@ -1 +0,0 @@
-export default {};

packages/demo/src/editor/config/locale/index.js

@@ -1,10 +0,0 @@
-import en_us from './en-US';
-import zh_cn from './zh-CN';
-import zh_tw from './zh-TW';
-import ja_jp from './ja-JP';
-export default {
-  'en-US': en_us,
-  'zh-CN': zh_cn,
-  'zh-TW': zh_tw,
-  'ja-JP': ja_jp
-};

packages/demo/src/editor/config/locale/ja-JP.js

@@ -1 +0,0 @@
-export default {};

packages/demo/src/editor/config/locale/zh-CN.js

@@ -1 +0,0 @@
-export default {};

packages/demo/src/editor/config/locale/zh-TW.js

@@ -1 +0,0 @@
-export default {};

packages/demo/src/editor/config/skeleton.js

@@ -1,173 +0,0 @@
-export default {
-  "skeleton": {
-    "config": {
-      "package": "@ali/lowcode-editor-skeleton",
-      "version": "^0.8.0"
-    }
-  },
-  "theme": {
-    "fusion": {
-      "package": "@alife/theme-lowcode-light",
-      "version": "^0.1.0"
-    },
-    "scss": ""
-  },
-  "constants": {
-    "namespace": "page"
-  },
-  "utils": [],
-  "plugins": {
-    "topArea": [{
-      "pluginKey": "logo",
-      "type": "Custom",
-      "props": {
-        "align": "left",
-        "width": 100
-      },
-      "config": {
-        "package": "@ali/lowcode-plugin-sample-logo",
-        "version": "^0.8.0"
-      },
-      "pluginProps": {
-        "logo": "https://img.alicdn.com/tfs/TB1hoI9x1H2gK0jSZFEXXcqMpXa-146-40.png",
-        "href": "/"
-      }
-    }, {
-      "pluginKey": "undoRedo",
-      "type": "Custom",
-      "props": {
-        "align": "right",
-        "width": 88
-      },
-      "config": {
-        "package": "@ali/lowcode-plugin-undo-redo",
-        "version": "^0.8.0"
-      }
-    }, {
-      "pluginKey": "divider",
-      "type": "Divider",
-      "props": {
-        "align": "right"
-      }
-    }, {
-      "pluginKey": "samplePreview",
-      "type": "Custom",
-      "props": {
-        "align": "right",
-        "width": 64
-      },
-      "config": {
-        "package": "@ali/lowcode-plugin-sample-preview",
-        "version": "^0.8.0"
-      }
-    }],
-    "leftArea": [{
-      "pluginKey": "componentsPane",
-      "type": "PanelIcon",
-      "props": {
-        "align": "top",
-        "icon": "zujianku",
-        "title": "组件库",
-        "panelProps": {
-          "floatable": true
-        }
-      },
-      "config": {
-        "package": "@ali/lowcode-plugin-components-pane",
-        "version": "^0.8.0"
-      },
-      "pluginProps": {}
-    }, {
-      "pluginKey": "outlinePane",
-      "type": "PanelIcon",
-      "props": {
-        "align": "top",
-        "icon": "shuxingkongjian",
-        "title": "大纲树"
-      },
-      "config": {
-        "package": "@ali/lowcode-plugin-outline-pane",
-        "version": "^0.8.0"
-      },
-      "pluginProps": {}
-    },
-
-    {
-      "pluginKey": "sourceEditor",
-      "type": "PanelIcon",
-      "props": {
-        "align": "top",
-        "icon": "zujianku",
-        "title": "组件库",
-        "panelProps":{
-          "floatable": true,
-          "defaultWidth":500
-
-        },
-
-      },
-      "config": {
-        "package": "@ali/lowcode-plugin-source-editor",
-        "version": "^0.8.0"
-      },
-      "pluginProps": {}
-    },
-
-    {
-      "pluginKey": "zhEn",
-      "type": "Custom",
-      "props": {
-        "align": "bottom"
-      },
-      "config": {
-        "package": "@ali/lowcode-plugin-zh-en",
-        "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",
-      "config": {
-        "package": "@ali/lowcode-plugin-designer",
-        "version": "^0.8.0"
-      }
-    }, {
-      "pluginKey": "eventBindDialog",
-      "config": {
-        "package": "@ali/lowcode-plugin-event-bind-dialog",
-        "version": "^0.8.0"
-      }
-    },
-    {
-      "pluginKey": "variableBindDialog",
-      "config": {
-        "package": "@ali/lowcode-plugin-variable-bind-dialog",
-        "version": "^0.8.0"
-      }
-    }
-    ]
-  },
-  "hooks": [],
-  "shortCuts": [],
-  "lifeCycles": {
-    "init": async function init(editor) {
-      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/demo/src/editor/config/utils.js

@@ -1,3 +0,0 @@
-export default {
-
-};

packages/demo/src/editor/global.scss

@@ -5,3 +5,25 @@ body {
     box-sizing: border-box;
   }
 }
+
+body, #lce-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  text-rendering: optimizeLegibility;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-text-size-adjust: none;
+  -webkit-touch-callout: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+html {
+  min-width: 1024px;
+}

packages/demo/src/editor/index.tsx

@@ -1,20 +1,9 @@
-import React from 'react';
+import { render } from 'react-dom';
-import ReactDOM from 'react-dom';
+import GeneralWorkbench from '@ali/lowcode-editor-preset-general';
-// import { registerSetters } from '@ali/lowcode-setters';
+import config from './config';
-import config from './config/skeleton';
+import components from './components';
-import components from './config/components';
-import utils from './config/utils';
-
 import './global.scss';
-import './config/theme.scss';
 
-// registerSetters();
-const Skeleton = components.LowcodeSkeleton;
 const LCE_CONTAINER = document.getElementById('lce-container');
 
-if (!LCE_CONTAINER) {
+render(<GeneralWorkbench config={config} components={components} />, LCE_CONTAINER);
-  throw new Error('当前页面不存在 <div id="lce-container"></div> 节点.');
-}
-
-// @ts-ignore
-ReactDOM.render(<Skeleton config={config} utils={utils} components={components} />, LCE_CONTAINER);

packages/demo/src/index.ts

@@ -1 +1 @@
-import './editor';
+import './vision';

packages/demo/src/vision/index.ts

@@ -17,27 +17,86 @@ import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
 import loadUrls from './loader';
 import { upgradeAssetsBundle } from './upgrade-assets';
 import { isCSSUrl } from '@ali/lowcode-utils';
-import { I18nSetter } from '@ali/visualengine-utils';
 import VariableSetter from '@ali/vs-variable-setter';
 import _isArray from "lodash/isArray";
 import _isObject from "lodash/isObject";
 import _get from 'lodash/get';
 import funcParser from '@ali/vu-function-parser';
-import cv from 'compare-versions';
+import {
-
+  NumberSetter,
+  BoolSetter,
+  ChoiceSetter,
+  CodeSetter,
+  ColorSetter,
+  DateSetter,
+  I18nSetter,
+  JsonSetter,
+  ListSetter,
+  SelectSetter,
+  OptionsSetter,
+  TextSetter,
+  ValidationSetter,
+  ActionSetter,
+} from '@ali/visualengine-utils';
 
 const { editor, skeleton, context, HOOKS, Trunk } = Engine;
 
-Trunk.registerSetter('I18nSetter', {
+Trunk.registerSetter('Input', TextSetter);
-  component: I18nSetter,
+Trunk.registerSetter('StringSetter', TextSetter);
-  // todo: add icon
+Trunk.registerSetter('TextArea', TextSetter);
-  title: {
+Trunk.registerSetter('Object', JsonSetter);
-    type: 'i18n',
+Trunk.registerSetter('Function', ActionSetter);
-    'zh-CN': '国际化输入',
+Trunk.registerSetter('Node', CodeSetter);
-    'en-US': 'International Input'
+Trunk.registerSetter('Mixin', CodeSetter);
-  },
+Trunk.registerSetter('Expression', CodeSetter);
+Trunk.registerSetter('List', ListSetter);
+Trunk.registerSetter('Switch', BoolSetter);
+Trunk.registerSetter('Number', NumberSetter);
+Trunk.registerSetter('Select', SelectSetter);
+
+Trunk.registerSetter('ActionSetter', ActionSetter);
+Trunk.registerSetter('BoolSetter', BoolSetter);
+Trunk.registerSetter('ChoiceSetter', ChoiceSetter);
+Trunk.registerSetter('CodeSetter', CodeSetter);
+Trunk.registerSetter('ColorSetter', ColorSetter);
+Trunk.registerSetter('DateSetter', DateSetter);
+Trunk.registerSetter('JsonSetter', JsonSetter);
+Trunk.registerSetter('ListSetter', ListSetter);
+Trunk.registerSetter('SelectSetter', SelectSetter);
+Trunk.registerSetter('OptionsSetter', OptionsSetter);
+Trunk.registerSetter('TextSetter', TextSetter);
+Trunk.registerSetter('NumberSetter', NumberSetter);
+Trunk.registerSetter('ValidationSetter', ValidationSetter);
+
+// 需要额外覆盖配置的 setters
+
+function wrapSetter(component: any, title: any, initialValueWrapper: any) {
+  return {
+    component,
+    title,
     recommend: true,
-});
+    initialValue: initialValueWrapper ? (field: any) => {
+      let defaultValueFromSetter;
+      if (component.initial) {
+        defaultValueFromSetter = component.initial.call(field, field.getValue());
+      }
+      const defaultValue = initialValueWrapper(defaultValueFromSetter);
+      return defaultValue;
+    } : undefined,
+  }
+}
+
+Trunk.registerSetter('I18nSetter', wrapSetter(
+  I18nSetter,
+  { type: 'i18n', 'zh-CN': '国际化输入', 'en-US': 'International Input' },
+  (defaultValue: any) => {
+    if (defaultValue[defaultValue.use] && typeof defaultValue[defaultValue.use] !== 'string') {
+      defaultValue[defaultValue.use] = null;
+    }
+    return defaultValue;
+  }
+));
+
 context.use(HOOKS.VE_SETTING_FIELD_VARIABLE_SETTER, VariableSetter);
 
 const externals = ['react', 'react-dom', 'prop-types', 'react-router', 'react-router-dom', '@ali/recore'];
@@ -358,7 +417,7 @@ function initActionPane() {
   });
 }
 function replaceFuncProp(props?: any){
-  const replaceProps = {};
+  const replaceProps: any = {};
   for (const name in props) {
     const prop = props[name];
     if (!prop) {
@@ -448,11 +507,11 @@ async function init() {
   await loadAssets();
   await loadSchema();
   await initTrunkPane();
-  initDataPoolPane();
+  // initDataPoolPane();
-  initI18nPane();
+  // initI18nPane();
-  initActionPane();
+  // initActionPane();
   initDemoPanes();
-  initHistoryPane();
+  // initHistoryPane();
   Engine.init();
 }
 init();

packages/designer/src/designer/setting/utils.js

@@ -47,9 +47,6 @@ export class Transducer {
     }
     if (typeof setter === 'string') {
       setter = getSetter(setter)?.component;
-      if (!setter) {
-        debugger;
-      }
     }
 
     this.setterTransducer = combineTransducer(

packages/editor-core/src/editor.ts

@@ -1,23 +1,9 @@
 import { EventEmitter } from 'events';
-import { IEditor, EditorConfig, PluginClassSet } from '@ali/lowcode-types';
+import { IEditor, EditorConfig, PluginClassSet, KeyType, GetOptions, GetReturnType } from '@ali/lowcode-types';
 import { IocContext, RegisterOptions } from './di';
 import { globalLocale } from './intl';
 EventEmitter.defaultMaxListeners = 100;
 
-export type KeyType = Function | Symbol | string;
-export type ClassType = Function | (new (...args: any[]) => any);
-export interface GetOptions {
-  forceNew?: boolean;
-  sourceCls?: ClassType;
-}
-export type GetReturnType<T, ClsType> = T extends undefined
-  ? ClsType extends {
-      prototype: infer R;
-    }
-    ? R
-    : any
-  : T;
-
 const NOT_FOUND = Symbol.for('not_found');
 
 import * as utils from './utils';
@@ -36,10 +22,6 @@ export class Editor extends EventEmitter implements IEditor {
 
   readonly utils = utils;
 
-  constructor(readonly config: EditorConfig = {}, readonly components: PluginClassSet = {}) {
-    super();
-  }
-
   get<T = undefined, KeyOrType = any>(keyOrType: KeyOrType, opt?: GetOptions): GetReturnType<T, KeyOrType> | undefined {
     const x = this.context.get<T, KeyOrType>(keyOrType, opt);
     if (x === NOT_FOUND) {
@@ -92,14 +74,17 @@ export class Editor extends EventEmitter implements IEditor {
     this.notifyGot(key || data);
   }
 
-  async init(): Promise<any> {
+  config?: EditorConfig;
-    const { shortCuts = [], lifeCycles } = this.config || {};
+  components?: PluginClassSet;
+  async init(config?: EditorConfig, components?: PluginClassSet): Promise<any> {
+    this.config = config || {};
+    this.components = components || {};
+    const { shortCuts = [], lifeCycles } = this.config;
 
     this.emit('editor.beforeInit');
     const init = (lifeCycles && lifeCycles.init) || ((): void => {});
-    // 用户可以通过设置extensions.init自定义初始化流程；
     try {
-      // await transformToPromise(init(this));
+      await init(this);
       // 注册快捷键
       // registShortCuts(shortCuts, this);
       this.emit('editor.afterInit');
@@ -110,6 +95,9 @@ export class Editor extends EventEmitter implements IEditor {
   }
 
   destroy(): void {
+    if (!this.config) {
+      return;
+    }
     try {
       const { shortCuts = [], lifeCycles = {} } = this.config;
       // unRegistShortCuts(shortCuts);

packages/editor-preset-general/build.json

@@ -0,0 +1,22 @@
+{
+  "plugins": [
+    [
+      "build-plugin-component",
+      {
+        "filename": "editor-preset-general",
+        "library": "LowcodeEditor",
+        "libraryTarget": "umd",
+        "externals": {
+          "react": "var window.React",
+          "react-dom": "var window.ReactDOM",
+          "prop-types": "var window.PropTypes"
+        }
+      }
+    ],
+    "build-plugin-fusion",
+    ["build-plugin-moment-locales", {
+      "locales": ["zh-cn"]
+    }],
+    "./build.plugin.js"
+  ]
+}

packages/editor-preset-general/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@ali/lowcode-editor-preset-general",
+  "version": "0.9.0",
+  "description": "Ali General Editor Preset",
+  "main": "lib/index.js",
+  "files": [
+    "dist",
+    "es",
+    "lib"
+  ],
+  "scripts": {
+    "build": "build-scripts build --skip-demo",
+    "cloud-build": "build-scripts build --skip-demo"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ali/lowcode-utils": "^0.8.0",
+    "@ali/lowcode-types": "^0.8.0",
+    "@ali/lowcode-editor-core": "^0.8.12",
+    "@ali/lowcode-editor-skeleton": "^0.8.17",
+    "@ali/lowcode-plugin-designer": "^0.9.11",
+    "@ali/lowcode-plugin-outline-pane": "^0.8.17",
+    "@alifd/next": "^1.19.12",
+    "@alife/theme-lowcode-dark": "^0.1.0",
+    "@alife/theme-lowcode-light": "^0.1.0",
+    "domready": "^1.0.8",
+    "immutable": "^3.8.1",
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1"
+  },
+  "devDependencies": {
+    "@ali/lowcode-editor-setters": "^0.9.0",
+    "@alib/build-scripts": "^0.1.18",
+    "@types/domready": "^1.0.0",
+    "@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"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npm.alibaba-inc.com"
+  }
+}

packages/editor-preset-general/src/index.ts

@@ -0,0 +1,87 @@
+import { render } from 'react-dom';
+import { createElement } from 'react';
+import { Workbench } from '@ali/lowcode-editor-skeleton';
+import { globalContext, Editor } from '@ali/lowcode-editor-core';
+import { Skeleton, SettingsPrimaryPane } from '@ali/lowcode-editor-skeleton';
+import { Designer } from '@ali/lowcode-designer';
+import Outline, { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane';
+import DesignerPlugin from '@ali/lowcode-plugin-designer';
+import '@ali/lowcode-editor-setters';
+
+export * from '@ali/lowcode-types';
+export * from '@ali/lowcode-utils';
+export * from '@ali/lowcode-editor-core';
+export * from '@ali/lowcode-editor-skeleton';
+export * from '@ali/lowcode-designer';
+
+export const editor = new Editor();
+globalContext.register(editor, Editor);
+
+export const skeleton = new Skeleton(editor);
+editor.set(Skeleton, skeleton);
+editor.set('skeleton', skeleton);
+
+export const designer = new Designer({ editor: editor });
+editor.set(Designer, designer);
+editor.set('designer', designer);
+
+skeleton.add({
+  area: 'mainArea',
+  name: 'designer',
+  type: 'Widget',
+  content: DesignerPlugin,
+});
+skeleton.add({
+  area: 'leftArea',
+  name: 'outlinePane',
+  type: 'PanelDock',
+  content: Outline,
+  panelProps: {
+    area: 'leftFixedArea',
+  },
+});
+skeleton.add({
+  area: 'rightArea',
+  name: 'settingsPane',
+  type: 'Panel',
+  content: SettingsPrimaryPane,
+});
+skeleton.add({
+  area: 'rightArea',
+  name: 'backupOutline',
+  type: 'Panel',
+  props: {
+    condition: () => {
+      return designer.dragon.dragging && !getTreeMaster(designer).hasVisibleTreeBoard();
+    }
+  },
+  content: OutlineBackupPane,
+});
+
+const version = '0.9.0-beta';
+
+export default function GeneralWorkbench(props: any) {
+  return createElement(Workbench, {
+    skeleton,
+    ...props,
+  });
+}
+
+export function init(container?: Element) {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  }
+  container.id = 'lowcodeEditorPresetGeneral';
+
+  render(
+    createElement(GeneralWorkbench),
+    container,
+  );
+}
+
+console.log(
+  `%cLowcodeEngine %cv${version}`,
+  "color:#000;font-weight:bold;",
+  "color:green;font-weight:bold;"
+);

packages/editor-preset-vision/README.md

@@ -0,0 +1,82 @@
+子视图
+prototype.view
+view.Preview
+view.Mobile
+
+实时切
+
+设备
+device
+创建多个 simulator
+
+不同simulator 加载不同视图
+
+这样有利于 环境隔离，比如 rax 和 react
+
+适配规则
+
+规则 1
+mobile view.mobile.xxx
+rax    view.rax.xxx
+miniapp view.miniapp.xxx
+view.<device>.xxx
+通配 view.xxx
+
+universal
+
+规则 2
+urls: "view.js,view2 <device selector>, view3 <device selector>",
+urls: [
+  "view.js",
+  "view.js *",
+  "view1.js mobile|pc",
+  "view2.js <device selector>"
+]
+
+环境通用资源
+
+"react": {
+  "urls": [
+    "//g.alicdn.com/platform/c/react/16.5.2/react.min.js"
+  ],
+  "library": "React",
+  "package": "react",
+  "version": "16.5.2",
+  "devices-for": "*" | ["mobile", "web"] | "rax|mobile"
+}
+
+
+load legao assets
+  load all x-prototype-urls
+  
+
+load assets
+
+  build componentMeta
+  if has x-prototype-urls ,
+  load x-prototype-urls
+    call Bundle.createPrototype() or something register
+   got prototypeView
+
+load schema
+
+
+open schema
+
+load simulator resources
+
+
+
+simulator 中加载资源，根据 componentsMap 构建组件查询字典，
+
+
+获取 view 相关的样式、脚本
+获取 proto 相关的样式
+在 simulator 中也加载一次
+
+1. meta 信息构造
+2. components 字典构造, proto.getView 或者 通过 npm 信息查询
+3. 
+
+
+componentMeta 段描述的信息，如果包含 x-prototype-urls ，那么这个 meta 信息都可以丢掉

packages/editor-preset-vision/build.json

@@ -3,8 +3,8 @@
     [
       "build-plugin-component",
       {
-        "filename": "vision-preset",
+        "filename": "editor-preset-vision",
-        "library": "VisualEngine",
+        "library": "LowcodeEditor",
         "libraryTarget": "umd",
         "externals": {
           "react": "var window.React",

packages/editor-preset-vision/build.plugin.js

@@ -0,0 +1,23 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+module.exports = ({ onGetWebpackConfig }) => {
+  onGetWebpackConfig((config) => {
+    config.resolve
+      .plugin('tsconfigpaths')
+      .use(TsconfigPathsPlugin, [{
+        configFile: "./tsconfig.json"
+      }]);
+
+    /*
+    config
+      // 定义插件名称
+      .plugin('MonacoWebpackPlugin')
+      // 第一项为具体插件，第二项为插件参数
+      .use(new MonacoWebpackPlugin({
+        languages:["javascript","css","json"]
+      }), []);
+      */
+    config.plugins.delete('hot');
+    config.devServer.hot(false);
+  });
+};

packages/editor-preset-vision/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ali/lowcode-vision-preset",
+  "name": "@ali/lowcode-editor-preset-vision",
   "private": true,
   "version": "0.8.14",
   "description": "Vision Polyfill for Ali lowCode engine",
@@ -10,6 +10,7 @@
     "lib"
   ],
   "scripts": {
+    "build": "build-scripts build --skip-demo",
     "cloud-build": "build-scripts build --skip-demo"
   },
   "license": "MIT",

packages/editor-preset-vision/src/viewport.ts

@@ -56,7 +56,7 @@ class StyleResource {
 
     const { type, content } = this.config;
 
-    let styleElement;
+    let styleElement: any;
     if (type === 'URL') {
       styleElement = document.createElement('link');
       styleElement.href = content || '';

packages/editor-setters/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@ali/lowcode-setters",
+  "name": "@ali/lowcode-editor-setters",
-  "version": "0.8.15",
+  "version": "0.9.0",
   "description": "Builtin setters for Ali lowCode engine",
   "files": [
     "es",

packages/editor-setters/src/index.tsx

@@ -1,10 +1,9 @@
-import { registerSetter, isJSSlot } from '@ali/lowcode-globals';
+import { registerSetter } from '@ali/lowcode-globals';
 import { DatePicker, Input, Radio, Select, Switch, NumberPicker } from '@alifd/next';
 import ExpressionSetter from './expression-setter';
 import ColorSetter from './color-setter';
 import JsonSetter from './json-setter';
 import EventsSetter from './events-setter';
-// import StyleSetter from './style-setter';
 
 export const StringSetter = {
   component: Input,
@@ -14,6 +13,8 @@ export const StringSetter = {
 };
 export const NumberSetter = NumberPicker;
 export const BoolSetter = Switch;
+export const SelectSetter = Select;
+
 // suggest: 做成 SelectSetter 一种变体
 export const RadioGroupSetter = {
   component: Radio.Group,
@@ -21,8 +22,6 @@ export const RadioGroupSetter = {
     shape: 'button',
   },
 };
-export const SelectSetter = Select;
-
 // suggest: 做成 StringSetter 的一个参数，
 export const TextAreaSetter = Input.TextArea;
 export const DateSetter = DatePicker;
@@ -30,16 +29,7 @@ export const DateYearSetter = DatePicker.YearPicker;
 export const DateMonthSetter = DatePicker.MonthPicker;
 export const DateRangeSetter = DatePicker.RangePicker;
 
-export { ExpressionSetter, EventsSetter }
+export { ExpressionSetter, EventsSetter };
-
-// todo:
-export const ClassNameSetter = () => {
-  return <div className="lc-block-setter">这里是类名绑定</div>;
-};
-
-export const SlotSetter = () => {
-  return <div>这里是 SlotSetter</div>;
-};
 
 const builtinSetters: any = {
   StringSetter,
@@ -52,23 +42,6 @@ const builtinSetters: any = {
     title: '表达式输入',
     recommend: true,
   },
-  SlotSetter: {
-    component: SlotSetter,
-    title: '插槽输入',
-    condition: (field: any) => {
-      return isJSSlot(field.getValue());
-    },
-    initialValue: (field: any, value: any) => {
-      if (isJSSlot(value)) {
-        return value;
-      }
-      return {
-        type: 'JSSlot',
-        value: value
-      };
-    },
-    recommend: true,
-  },
   RadioGroupSetter,
   TextAreaSetter,
   DateSetter,
@@ -76,11 +49,8 @@ const builtinSetters: any = {
   DateMonthSetter,
   DateRangeSetter,
   EventsSetter,
-  // StyleSetter,
+  ColorSetter,
-  // ColorSetter,
   JsonSetter,
 };
 
-export function registerSetters() {
 registerSetter(builtinSetters);
-}