refactor: 💡 change structure

.eslintignore

@@ -4,3 +4,4 @@ build/
 .*
 ~*
 node_modules
+

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "./node_modules/@ali/lowcode-config/.eslintrc"
+}

.gitignore

@@ -1,3 +1,11 @@
+# project custom
+build
+packages/*/lib/
+
+# IDE
+.vscode
+.idea
+
 # Logs
 logs
 *.log

.prettierrc

@@ -2,5 +2,7 @@
   "trailingComma": "all",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 120,
+  "arrowParens": "always"
 }

lerna.json

@@ -1,17 +1,27 @@
 {
   "lerna": "2.11.0",
   "version": "independent",
-  "npmClient": "tnpm",
+  "npmClient": "yarn",
+  "registry": "http://registry.npm.alibaba-inc.com",
+  "useWorkspaces": true,
+  "packages": [
+    "packages/*"
+  ],
   "command": {
+    "bootstrap": {
+      "npmClientArgs": [
+        "--no-package-lock"
+      ]
+    },
     "publish": {
+      "npmClient": "tnpm",
+      "verifyRegistry": false,
+      "verifyAccess": false,
       "ignoreChanges": [
         "**/*.md",
         "**/test/**"
       ],
       "conventionalCommits": true
     }
-  },
-  "packages": [
-    "packages/*"
-  ]
+  }
 }

package.json

@@ -1,42 +1,45 @@
 {
-  "name": "ali-lowcode-engine",
+  "name": "@ali/lowcode",
   "private": true,
   "scripts": {
-    "boot": "lerna bootstrap --registry http://registry.npm.alibaba-inc.com --hoist",
-    "clean": "rimraf ./packages/*/lib ./packages/*/node_modules",
+    "reinstall": "./scripts/reinstall.sh",
+    "bootstrap": "lerna bootstrap --hoist",
     "pub": "npm run test && lerna publish --registry http://registry.npm.alibaba-inc.com",
-    "lint": "tslint -p tsconfig.json",
-    "lint:fix": "tslint --fix -p tsconfig.json",
+    "lint": "eslint -p tsconfig.json",
+    "lint:fix": "eslint --fix -p tsconfig.json",
     "build": "lerna run build",
     "test": "lerna run test",
     "test:snapshot": "lerna run test:snapshot",
     "commit": "git-cz"
   },
   "devDependencies": {
-    "@ice/spec": "^0.1.4",
-    "@types/node": "^10.12.18",
+    "@ali/lowcode-config": "^2.0.5",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.5.1",
     "ava": "^1.0.1",
     "commitizen": "^3.0.5",
     "cz-conventional-changelog": "^2.1.0",
-    "eslint": "^6.0.1",
     "git-cz": "^4.3.1",
     "husky": "^1.3.1",
     "lerna": "^2.11.0",
     "lint-staged": "^8.1.0",
     "prettier": "^1.15.3",
-    "rimraf": "^2.6.3",
     "ts-node": "^7.0.1",
-    "tslint": "^6.1.0",
-    "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.2.2"
+    "typescript": "^3.2.2",
+    "tslib": "^1.9.3"
+  },
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ],
+    "nohoist": []
   },
   "engines": {
-    "node": "^8 || ^10"
+    "node": "^10"
   },
   "lint-staged": {
-    "*.ts": [
-      "prettier --write",
-      "tslint --fix",
+    "*.{tsx,ts}": [
+      "eslint --fix",
       "git add"
     ]
   },

packages/designer/.editorconfig

@@ -1,16 +0,0 @@
-# EditorConfig is awesome: http://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-# Tab indentation
-[*]
-charset = utf-8
-end_of_line = lf
-indent_size = 2
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-trim_trailing_whitespace = false

packages/designer/.eslintignore

@@ -1,6 +0,0 @@
-.idea/
-.vscode/
-build/
-.*
-~*
-node_modules

packages/designer/.eslintrc

@@ -1,3 +0,0 @@
-{
-  "extends": "./node_modules/@recore/config/.eslintrc"
-}

packages/designer/.gitignore

@@ -1,41 +0,0 @@
-node_modules/
-coverage/
-build/
-dist/
-.idea/
-.vscode/
-.theia/
-.recore/
-demo/
-~*
-package-lock.json
-
-# Packages #
-############
-# it's better to unpack these files and commit the raw source
-# git has its own built in compression methods
-*.7z
-*.dmg
-*.gz
-*.iso
-*.jar
-*.rar
-*.tar
-*.zip
-
-# Logs and databases #
-######################
-*.log
-*.sql
-*.sqlite
-
-# OS generated files #
-######################
-.DS_Store
-.Trash*
-*.swp
-._*
-.Spotlight-V100
-.Trashes
-ehthumbs.db
-Thumbs.db

packages/designer/.prettierrc

@@ -1,6 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120,
-  "trailingComma": "all"
-}

packages/designer/package.json

@@ -1,40 +1,34 @@
 {
   "name": "@ali/lowcode-designer",
-  "version": "0.9.0",
+  "version": "0.8.0",
   "description": "alibaba lowcode designer",
-  "main": "src/index.ts",
-  "author": "",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "umd"
+  ],
   "license": "MIT",
   "dependencies": {
-    "@ali/iceluna-sdk": "^1.0.5-beta.12",
-    "@recore/obx": "^1.0.8",
-    "@recore/obx-react": "^1.0.7",
-    "@types/medium-editor": "^5.0.3",
     "classnames": "^2.2.6",
     "react": "^16",
-    "react-dom": "^16.7.0"
+    "react-dom": "^16.7.0",
+    "@ali/lowcode-globals": "^0.8"
   },
   "devDependencies": {
-    "@recore/config": "^2.0.0",
+    "@types/medium-editor": "^5.0.3",
     "@types/classnames": "^2.2.7",
-    "@types/jest": "^24.0.16",
     "@types/node": "^13.7.1",
     "@types/react": "^16",
-    "@types/react-dom": "^16",
-    "eslint": "^6.5.1",
-    "husky": "^1.1.2",
-    "jest": "^23.4.1",
-    "lint-staged": "^7.1.2",
-    "prettier": "^1.18.2",
-    "ts-jest": "^24.0.2",
-    "ts-node": "^8.0.1",
-    "tslib": "^1.9.3",
-    "typescript": "^3.1.3"
+    "@types/react-dom": "^16"
   },
-  "lint-staged": {
-    "./src/**/*.{ts,tsx}": [
-      "eslint --fix",
-      "git add"
+  "ava": {
+    "compileEnhancements": false,
+    "snapshotDir": "test/fixtures/__snapshots__",
+    "extensions": [
+      "ts"
+    ],
+    "require": [
+      "ts-node/register"
     ]
   }
 }

packages/designer/src/builtin-simulator/README.md

@@ -0,0 +1 @@
+内置模拟器主进程

packages/designer/src/builtin-simulator/bem-tools/border-hovering.tsx

@@ -1,8 +1,8 @@
 import { Component, Fragment, PureComponent } from 'react';
 import classNames from 'classnames';
+import { computed, observer, TitleContent, Title } from '@ali/lowcode-globals';
 import { SimulatorContext } from '../context';
-import { SimulatorHost } from '../host';
-import { computed, observer, TitleContent, Title } from '../../../../../../globals/src';
+import { BuiltinSimulatorHost } from '../host';
 
 export class BorderHoveringInstance extends PureComponent<{
   title: TitleContent;
@@ -46,19 +46,19 @@ export class BorderHovering extends Component {
   }
 
   @computed get scale() {
-    return (this.context as SimulatorHost).viewport.scale;
+    return (this.context as BuiltinSimulatorHost).viewport.scale;
   }
 
   @computed get scrollX() {
-    return (this.context as SimulatorHost).viewport.scrollX;
+    return (this.context as BuiltinSimulatorHost).viewport.scrollX;
   }
 
   @computed get scrollY() {
-    return (this.context as SimulatorHost).viewport.scrollY;
+    return (this.context as BuiltinSimulatorHost).viewport.scrollY;
   }
 
   @computed get current() {
-    const host = this.context as SimulatorHost;
+    const host = this.context as BuiltinSimulatorHost;
     const doc = host.document;
     const selection = doc.selection;
     const current = host.designer.hovering.current;
@@ -69,7 +69,7 @@ export class BorderHovering extends Component {
   }
 
   render() {
-    const host = this.context as SimulatorHost;
+    const host = this.context as BuiltinSimulatorHost;
     const current = this.current;
     if (!current || host.viewport.scrolling) {
       return <Fragment />;

packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx

@@ -9,10 +9,6 @@ import {
   ComponentType,
 } from 'react';
 import classNames from 'classnames';
-import { SimulatorContext } from '../context';
-import { SimulatorHost } from '../host';
-import OffsetObserver from '../../../../designer/helper/offset-observer';
-import Node from '../../../../designer/document/node/node';
 import {
   observer,
   computed,
@@ -21,7 +17,11 @@ import {
   isReactComponent,
   ActionContentObject,
   isActionContentObject,
-} from '../../../../../../globals';
+} from '@ali/lowcode-globals';
+import { SimulatorContext } from '../context';
+import { BuiltinSimulatorHost } from '../host';
+import { OffsetObserver } from '../../../designer';
+import { Node } from '../../../document';
 
 @observer
 export class BorderSelectingInstance extends Component<{
@@ -141,7 +141,7 @@ function createAction(content: ReactNode | ComponentType<any> | ActionContentObj
 export class BorderSelectingForNode extends Component<{ node: Node }> {
   static contextType = SimulatorContext;
 
-  get host(): SimulatorHost {
+  get host(): BuiltinSimulatorHost {
     return this.context;
   }
 
@@ -186,7 +186,7 @@ export class BorderSelectingForNode extends Component<{ node: Node }> {
 export class BorderSelecting extends Component {
   static contextType = SimulatorContext;
 
-  get host(): SimulatorHost {
+  get host(): BuiltinSimulatorHost {
     return this.context;
   }
 

packages/designer/src/builtin-simulator/bem-tools/index.tsx

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { observer } from '../../../../../../globals';
+import { observer } from '@ali/lowcode-globals';
 import { BorderHovering } from './border-hovering';
 import { SimulatorContext } from '../context';
-import { SimulatorHost } from '../host';
+import { BuiltinSimulatorHost } from '../host';
 import { BorderSelecting } from './border-selecting';
 import { InsertionView } from './insertion';
 import './bem-tools.less';
@@ -17,7 +17,7 @@ export class BemTools extends Component {
   }
 
   render() {
-    const host = this.context as SimulatorHost;
+    const host = this.context as BuiltinSimulatorHost;
     const { scrollX, scrollY, scale } = host.viewport;
     return (
       <div className="lc-bem-tools" style={{ transform: `translate(${-scrollX * scale}px,${-scrollY * scale}px)` }}>

packages/designer/src/builtin-simulator/bem-tools/insertion.tsx

@@ -1,15 +1,16 @@
 import { Component } from 'react';
-import { computed, observer } from '../../../../../../globals';
+import { computed, observer } from '@ali/lowcode-globals';
 import { SimulatorContext } from '../context';
-import { SimulatorHost } from '../host';
-import DropLocation, {
+import { BuiltinSimulatorHost } from '../host';
+import {
+  DropLocation,
   Rect,
   isLocationChildrenDetail,
   LocationChildrenDetail,
-  isVertical,
-} from '../../../../designer/helper/location';
-import { ISimulator } from '../../../../designer/simulator';
-import { NodeParent } from '../../../../designer/document/node/node';
+  isVertical
+} from '../../../designer';
+import { ISimulatorHost, } from '../../../simulator';
+import {NodeParent } from '../../../document';
 import './insertion.less';
 
 interface InsertionData {
@@ -23,7 +24,7 @@ interface InsertionData {
 /**
  * 处理拖拽子节点(INode)情况
  */
-function processChildrenDetail(sim: ISimulator, container: NodeParent, detail: LocationChildrenDetail): InsertionData {
+function processChildrenDetail(sim: ISimulatorHost, container: NodeParent, detail: LocationChildrenDetail): InsertionData {
   let edge = detail.edge || null;
 
   if (!edge) {
@@ -114,7 +115,7 @@ function processDetail({ target, detail, document }: DropLocation): InsertionDat
 export class InsertionView extends Component {
   static contextType = SimulatorContext;
 
-  @computed get host(): SimulatorHost {
+  @computed get host(): BuiltinSimulatorHost {
     return this.context;
   }
 

packages/designer/src/builtin-simulator/context.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { BuiltinSimulatorHost } from './host';
+
+export const SimulatorContext = createContext<BuiltinSimulatorHost>({} as any);

packages/designer/src/builtin-simulator/create-simulator.ts

@@ -1,14 +1,14 @@
 // NOTE: 仅用作类型标注，切勿作为实体使用
-import { SimulatorRenderer } from '../renderer/renderer';
-import { SimulatorHost } from './host';
-import { AssetLevel, AssetLevels, AssetList, isAssetBundle, isAssetItem, AssetType, assetItem } from '../utils/asset';
-import { isCSSUrl } from '../../../utils/is-css-url';
+import { BuiltinSimulatorHost } from './host';
+import { AssetLevel, AssetLevels, AssetList, isAssetBundle, isAssetItem, AssetType, assetItem } from 'utils/asset';
+import { isCSSUrl } from 'utils/is-css-url';
+import { BuiltinSimulatorRenderer } from './renderer';
 
 export function createSimulator(
-  host: SimulatorHost,
+  host: BuiltinSimulatorHost,
   iframe: HTMLIFrameElement,
   vendors: AssetList = [],
-): Promise<SimulatorRenderer> {
+): Promise<BuiltinSimulatorRenderer> {
   const win: any = iframe.contentWindow;
   const doc = iframe.contentDocument!;
 

packages/designer/src/builtin-simulator/host-view.tsx

@@ -1,7 +1,7 @@
 import { Component } from 'react';
-import { observer } from '../../../../../globals';
-import { SimulatorHost, SimulatorProps } from './host';
-import DocumentModel from '../../../designer/document/document-model';
+import { observer } from '@ali/lowcode-globals';
+import { BuiltinSimulatorHost, BuiltinSimulatorProps } from './host';
+import { DocumentModel } from '../document';
 import { SimulatorContext } from './context';
 import { BemTools } from './bem-tools';
 import './host.less';
@@ -15,20 +15,20 @@ import './host.less';
   Auxiliary 辅助显示层，初始相对 Content 位置 0,0，紧贴 Canvas, 根据 Content 滚动位置，改变相对位置
 */
 
-type SimulatorHostProps = SimulatorProps & {
+type SimulatorHostProps = BuiltinSimulatorProps & {
   documentContext: DocumentModel;
-  onMount?: (host: SimulatorHost) => void;
+  onMount?: (host: BuiltinSimulatorHost) => void;
 };
 
-export class SimulatorHostView extends Component<SimulatorHostProps> {
-  readonly host: SimulatorHost;
+export class BuiltinSimulatorHostView extends Component<SimulatorHostProps> {
+  readonly host: BuiltinSimulatorHost;
   constructor(props: any) {
     super(props);
     const { documentContext } = this.props;
-    this.host = (documentContext.simulator as SimulatorHost) || new SimulatorHost(documentContext);
+    this.host = (documentContext.simulator as BuiltinSimulatorHost) || new BuiltinSimulatorHost(documentContext);
     this.host.setProps(this.props);
   }
-  shouldComponentUpdate(nextProps: SimulatorProps) {
+  shouldComponentUpdate(nextProps: BuiltinSimulatorProps) {
     this.host.setProps(nextProps);
     return false;
   }
@@ -54,7 +54,7 @@ export class SimulatorHostView extends Component<SimulatorHostProps> {
 class Canvas extends Component {
   static contextType = SimulatorContext;
   render() {
-    const sim = this.context as SimulatorHost;
+    const sim = this.context as BuiltinSimulatorHost;
     let className = 'lc-simulator-canvas';
     if (sim.deviceClassName) {
       className += ` ${sim.deviceClassName}`;
@@ -77,7 +77,7 @@ class Canvas extends Component {
 class Content extends Component {
   static contextType = SimulatorContext;
   render() {
-    const sim = this.context as SimulatorHost;
+    const sim = this.context as BuiltinSimulatorHost;
     const viewport = sim.viewport;
     let frameStyle = {};
     if (viewport.scale < 1) {

packages/designer/src/builtin-simulator/host.ts

@@ -1,23 +1,16 @@
-import { obx, autorun, computed } from '../../../../../globals';
-import { ISimulator, Component, NodeInstance } from '../../../designer/simulator';
+import { obx, autorun, computed } from '@ali/lowcode-globals';
+import { ISimulatorHost, Component, NodeInstance, ComponentInstance } from '../simulator';
 import Viewport from './viewport';
 import { createSimulator } from './create-simulator';
-import { SimulatorRenderer } from '../renderer/renderer';
-import Node, { NodeParent, isNodeParent, isNode, contains, PositionNO } from '../../../designer/document/node/node';
-import DocumentModel from '../../../designer/document/document-model';
+import { Node, NodeParent, DocumentModel, isNodeParent, isNode, contains, isRootNode } from '../document';
 import ResourceConsumer from './resource-consumer';
-import { AssetLevel, Asset, AssetList, assetBundle, assetItem, AssetType } from '../utils/asset';
+import { AssetLevel, Asset, AssetList, assetBundle, assetItem, AssetType } from 'utils/asset';
 import {
   DragObjectType,
   isShaken,
   LocateEvent,
-  DragNodeObject,
-  DragNodeDataObject,
   isDragAnyObject,
   isDragNodeObject,
-  isDragNodeDataObject,
-} from '../../../designer/helper/dragon';
-import {
   LocationData,
   isLocationData,
   LocationChildrenDetail,
@@ -27,12 +20,11 @@ import {
   getRectTarget,
   Rect,
   CanvasPoint,
-} from '../../../designer/helper/location';
-import { ReactInstance } from 'react';
-import { isRootNode } from '../../../designer/document/node/root-node';
-import { parseProps } from '../utils/parse-props';
-import { isElement } from '../../../utils/is-element';
-import { ComponentMetadata, NodeSchema, isNodeSchema } from '../../../../../globals';
+} from '../designer';
+import { parseProps } from './utils/parse-props';
+import { isElement } from 'utils/is-element';
+import { ComponentMetadata } from '@ali/lowcode-globals';
+import { BuiltinSimulatorRenderer } from './renderer';
 
 export interface LibraryItem {
   package: string;
@@ -40,7 +32,7 @@ export interface LibraryItem {
   urls: Asset;
 }
 
-export interface SimulatorProps {
+export interface BuiltinSimulatorProps {
   // 从 documentModel 上获取
   // suspended?: boolean;
   designMode?: 'live' | 'design' | 'mock' | 'extend' | 'border' | 'preview';
@@ -56,6 +48,7 @@ export interface SimulatorProps {
 
 const publicPath = (document.currentScript as HTMLScriptElement).src.replace(/^(.*\/)[^/]+$/, '$1');
 
+// TODO: use MACRO replace
 const defaultSimulatorUrl = (() => {
   let urls;
   if (process.env.NODE_ENV === 'production') {
@@ -73,10 +66,9 @@ const defaultEnvironment = [
     AssetType.JSText,
     'window.PropTypes=parent.PropTypes;React.PropTypes=parent.PropTypes; window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;',
   ),
-  assetItem(AssetType.JSUrl, '/statics/lowcode-renderer.js'),
 ];
 
-export class SimulatorHost implements ISimulator<SimulatorProps> {
+export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProps> {
   readonly isSimulator = true;
 
   constructor(readonly document: DocumentModel) {}
@@ -112,11 +104,11 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
     return this.designer.componentsMap;
   }
 
-  @obx.ref _props: SimulatorProps = {};
+  @obx.ref _props: BuiltinSimulatorProps = {};
   /**
    * @see ISimulator
    */
-  setProps(props: SimulatorProps) {
+  setProps(props: BuiltinSimulatorProps) {
     this._props = props;
   }
   set(key: string, value: any) {
@@ -132,7 +124,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
   /**
    * 有 Renderer 进程连接进来，设置同步机制
    */
-  connect(renderer: SimulatorRenderer, fn: (context: { dispose: () => void; firstRun: boolean }) => void) {
+  connect(renderer: BuiltinSimulatorRenderer, fn: (context: { dispose: () => void; firstRun: boolean }) => void) {
     this._renderer = renderer;
     return autorun(fn as any, true);
   }
@@ -158,7 +150,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
     return this._contentDocument;
   }
 
-  private _renderer?: SimulatorRenderer;
+  private _renderer?: BuiltinSimulatorRenderer;
   get renderer() {
     return this._renderer;
   }
@@ -183,7 +175,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
     const library = this.get('library') as LibraryItem[];
     const libraryAsset: AssetList = [];
     if (library) {
-      library.forEach(item => {
+      library.forEach((item) => {
         this.libraryMap[item.package] = item.library;
         libraryAsset.push(item.urls);
       });
@@ -295,7 +287,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
 
     doc.addEventListener(
       'click',
-      e => {
+      (e) => {
         // stop response document click event
         e.preventDefault();
         e.stopPropagation();
@@ -405,8 +397,8 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
     return this.renderer?.getComponent(componentName) || null;
   }
 
-  @obx.val private instancesMap = new Map<string, ReactInstance[]>();
-  setInstance(id: string, instances: ReactInstance[] | null) {
+  @obx.val private instancesMap = new Map<string, ComponentInstance[]>();
+  setInstance(id: string, instances: ComponentInstance[] | null) {
     if (instances == null) {
       this.instancesMap.delete(id);
     } else {
@@ -417,14 +409,14 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
   /**
    * @see ISimulator
    */
-  getComponentInstances(node: Node): ReactInstance[] | null {
+  getComponentInstances(node: Node): ComponentInstance[] | null {
     return this.instancesMap.get(node.id) || null;
   }
 
   /**
    * @see ISimulator
    */
-  getComponentInstanceId(instance: ReactInstance) {
+  getComponentInstanceId(instance: ComponentInstance) {
     throw new Error('Method not implemented.');
   }
 
@@ -438,7 +430,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
   /**
    * @see ISimulator
    */
-  getClosestNodeInstance(from: ReactInstance, specId?: string): NodeInstance<ReactInstance> | null {
+  getClosestNodeInstance(from: ComponentInstance, specId?: string): NodeInstance<ComponentInstance> | null {
     return this.renderer?.getClosestNodeInstance(from, specId) || null;
   }
 
@@ -456,7 +448,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
   /**
    * @see ISimulator
    */
-  computeComponentInstanceRect(instance: ReactInstance, selector?: string): Rect | null {
+  computeComponentInstanceRect(instance: ComponentInstance, selector?: string): Rect | null {
     const renderer = this.renderer!;
     const elements = renderer.findDOMNodes(instance);
     if (!elements) {
@@ -529,14 +521,14 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
   /**
    * @see ISimulator
    */
-  findDOMNodes(instance: ReactInstance): Array<Element | Text> | null {
+  findDOMNodes(instance: ComponentInstance): Array<Element | Text> | null {
     return this._renderer?.findDOMNodes(instance) || null;
   }
 
   /**
    * 通过 DOM 节点获取节点，依赖 simulator 的接口
    */
-  getNodeInstanceFromElement(target: Element | null): NodeInstance<ReactInstance> | null {
+  getNodeInstanceFromElement(target: Element | null): NodeInstance<ComponentInstance> | null {
     if (!target) {
       return null;
     }
@@ -750,7 +742,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
       const instances = this.getComponentInstances(node);
       const inst = instances
         ? instances.length > 1
-          ? instances.find(inst => this.getClosestNodeInstance(inst, container.id)?.instance === containerInstance)
+          ? instances.find((inst) => this.getClosestNodeInstance(inst, container.id)?.instance === containerInstance)
           : instances[0]
         : null;
       const rect = inst ? this.computeComponentInstanceRect(inst, node.componentMeta.rectSelector) : null;
@@ -833,7 +825,7 @@ export class SimulatorHost implements ISimulator<SimulatorProps> {
     const isAny = isDragAnyObject(dragObject);
     const { modalNode, currentRoot } = this.document;
     let container: Node;
-    let nodeInstance: NodeInstance<ReactInstance> | undefined;
+    let nodeInstance: NodeInstance<ComponentInstance> | undefined;
 
     if (target) {
       const ref = this.getNodeInstanceFromElement(target);
@@ -1106,7 +1098,7 @@ function getMatched(elements: Array<Element | Text>, selector: string): Element
   return firstQueried;
 }
 
-export interface DropContainer {
+interface DropContainer {
   container: NodeParent;
-  instance: ReactInstance;
+  instance: ComponentInstance;
 }

packages/designer/src/builtin-simulator/index.ts

@@ -1,2 +1,3 @@
 export * from './host';
 export * from './host-view';
+export * from './renderer';

packages/designer/src/builtin-simulator/renderer.ts

@@ -0,0 +1,19 @@
+import { ComponentInstance, NodeInstance, Component } from '../simulator';
+
+export interface BuiltinSimulatorRenderer {
+  readonly isSimulatorRenderer: true;
+  getComponent(componentName: string): Component;
+  getComponentInstances(id: string): ComponentInstance[] | null;
+  getClosestNodeInstance(from: ComponentInstance, nodeId?: string): NodeInstance<ComponentInstance> | null;
+  findDOMNodes(instance: ComponentInstance): Array<Element | Text> | null;
+  getClientRects(element: Element | Text): DOMRect[];
+  setNativeSelection(enableFlag: boolean): void;
+  setDraggingState(state: boolean): void;
+  setCopyState(state: boolean): void;
+  clearState(): void;
+  run(): void;
+}
+
+export function isSimulatorRenderer(obj: any): obj is BuiltinSimulatorRenderer {
+  return obj && obj.isSimulatorRenderer;
+}

packages/designer/src/builtin-simulator/resource-consumer.ts

@@ -1,11 +1,11 @@
-import { SimulatorRenderer } from '../renderer/renderer';
-import { autorun, obx } from '../../../../../globals';
-import { SimulatorHost } from './host';
+import { autorun, obx } from '@ali/lowcode-globals';
+import { BuiltinSimulatorHost } from './host';
 import { EventEmitter } from 'events';
+import { BuiltinSimulatorRenderer, isSimulatorRenderer } from './renderer';
 
 const UNSET = Symbol('unset');
-export type MasterProvider = (master: SimulatorHost) => any;
-export type RendererConsumer<T> = (renderer: SimulatorRenderer, data: T) => Promise<any>;
+export type MasterProvider = (master: BuiltinSimulatorHost) => any;
+export type RendererConsumer<T> = (renderer: BuiltinSimulatorRenderer, data: T) => Promise<any>;
 
 // master 进程
 //  0. 初始化该对象，因为需要响应变更发生在 master 进程
@@ -19,10 +19,6 @@ export type RendererConsumer<T> = (renderer: SimulatorRenderer, data: T) => Prom
 //  1. 被消费数据协议
 //  2. 消费机制（渲染进程自定 + 传递进入）
 
-function isSimulatorRenderer(obj: any): obj is SimulatorRenderer {
-  return obj && obj.isSimulatorRenderer;
-}
-
 export default class ResourceConsumer<T = any> {
   private emitter = new EventEmitter();
   @obx.ref private _data: T | typeof UNSET = UNSET;
@@ -35,7 +31,7 @@ export default class ResourceConsumer<T = any> {
   }
 
   private _consuming?: () => void;
-  consume(consumerOrRenderer: SimulatorRenderer | ((data: T) => any)) {
+  consume(consumerOrRenderer: BuiltinSimulatorRenderer | ((data: T) => any)) {
     if (this._consuming) {
       return;
     }

packages/designer/src/builtin-simulator/utils/parse-props.ts

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { isValidElement } from 'react';
-import { isElement } from '../../../utils/is-element';
-import { PropConfig } from '../../../../../globals';
+import { isElement } from 'utils/is-element';
+import { PropConfig } from '@ali/lowcode-globals';
 
 export const primitiveTypes = [
   'string',

packages/designer/src/builtin-simulator/viewport.ts

@@ -1,7 +1,6 @@
-import { obx, computed } from '../../../../../globals';
-import { Point } from '../../../designer/helper/location';
-import { ScrollTarget } from '../../../designer/helper/scroller';
-import { AutoFit, IViewport } from '../../../designer/simulator';
+import { obx, computed } from '@ali/lowcode-globals';
+import { Point, ScrollTarget } from '../designer';
+import { AutoFit, IViewport } from '../simulator';
 
 export default class Viewport implements IViewport {
   @obx.ref private rect?: DOMRect;

packages/designer/src/builtins/simulator/host/README.md

@@ -1 +0,0 @@
-主进程

packages/designer/src/builtins/simulator/host/context.ts

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-import { SimulatorHost } from './host';
-
-export const SimulatorContext = createContext<SimulatorHost>({} as any);

packages/designer/src/builtins/simulator/index.ts

@@ -1,5 +0,0 @@
-import { SimulatorHostView } from './host/host-view';
-
-export * from './host/host';
-export * from './host/host-view';
-export default SimulatorHostView;

packages/designer/src/builtins/simulator/renderer/host.ts

@@ -1,4 +0,0 @@
-// NOTE: 仅做类型标注，切勿做其它用途
-import { SimulatorHost } from '../host';
-
-export const host: SimulatorHost = (window as any).LCSimulatorHost;

packages/designer/src/component-meta.ts

@@ -1,5 +1,3 @@
-import Node, { NodeParent } from './document/node/node';
-import Designer from './designer';
 import {
   IconRemove,
   IconClone,
@@ -16,8 +14,10 @@ import {
   getRegisteredMetadataTransducers,
   registerMetadataTransducer,
   computed,
-} from '../../../globals';
-import { intl } from '../locale';
+} from '@ali/lowcode-globals';
+import { Node, NodeParent } from './document';
+import { Designer } from './designer';
+import { intl } from './locale';
 
 function ensureAList(list?: string | string[]): string[] | null {
   if (!list) {

packages/designer/src/designer/active-tracker.ts

@@ -1,13 +1,13 @@
 import { EventEmitter } from 'events';
 import { LocationDetail } from './location';
-import Node, { isNode } from '../document/node/node';
+import { Node,  isNode } from '../document/node/node';
 
-interface ActiveTarget {
+export interface ActiveTarget {
   node: Node;
   detail?: LocationDetail;
 }
 
-export default class ActiveTracker {
+export class ActiveTracker {
   private emitter = new EventEmitter();
 
   track(target: ActiveTarget | Node) {

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

@@ -1,11 +1,11 @@
 import { Component } from 'react';
 import classNames from 'classnames';
-import Designer, { DesignerProps } from './designer';
-import BuiltinDragGhostComponent from '../builtins/drag-ghost';
-import ProjectView from './project-view';
+import BuiltinDragGhostComponent from './drag-ghost';
+import { Designer, DesignerProps } from './designer';
+import { ProjectView } from '../project';
 import './designer.less';
 
-export default class DesignerView extends Component<DesignerProps> {
+export class DesignerView extends Component<DesignerProps> {
   readonly designer: Designer;
 
   constructor(props: any) {

packages/designer/src/designer/designer.less

@@ -48,26 +48,6 @@
   * {
     box-sizing: border-box;
   }
-  .lc-project {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    .lc-document {
-      width: 100%;
-      height: 100%;
-      &-hidden {
-        // todo:
-        display: none;
-      }
-
-      .lc-simulator-shell {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
 }
 
 

packages/designer/src/designer/designer.ts

@@ -1,19 +1,24 @@
 import { ComponentType } from 'react';
-import BuiltinSimulatorView from '../builtins/simulator';
-import Project from './project';
-import Dragon, { isDragNodeObject, isDragNodeDataObject, LocateEvent, DragObject } from './helper/dragon';
-import ActiveTracker from './helper/active-tracker';
-import Hovering from './helper/hovering';
-import DropLocation, { LocationData, isLocationChildrenDetail } from './helper/location';
-import DocumentModel from './document/document-model';
-import Node, { insertChildren } from './document/node/node';
-import { isRootNode } from './document/node/root-node';
-import { ComponentMeta } from './component-meta';
-import Scroller, { IScrollable } from './helper/scroller';
-import { INodeSelector } from './simulator';
-import OffsetObserver, { createOffsetObserver } from './helper/offset-observer';
 import { EventEmitter } from 'events';
-import { ProjectSchema, ComponentMetadata, ComponentAction, NpmInfo, obx, computed, autorun } from '../../../globals';
+import {
+  ProjectSchema,
+  ComponentMetadata,
+  ComponentAction,
+  NpmInfo,
+  obx,
+  computed,
+  autorun,
+} from '@ali/lowcode-globals';
+import { Project } from '../project';
+import { Node, DocumentModel, insertChildren, isRootNode } from '../document';
+import { ComponentMeta } from '../component-meta';
+import { INodeSelector } from '../simulator';
+import { Scroller, IScrollable } from './scroller';
+import { Dragon, isDragNodeObject, isDragNodeDataObject, LocateEvent, DragObject } from './dragon';
+import { ActiveTracker } from './active-tracker';
+import { Hovering } from './hovering';
+import { DropLocation, LocationData, isLocationChildrenDetail } from './location';
+import { OffsetObserver, createOffsetObserver } from './offset-observer';
 
 export interface DesignerProps {
   className?: string;
@@ -34,7 +39,7 @@ export interface DesignerProps {
   [key: string]: any;
 }
 
-export default class Designer {
+export class Designer {
   // readonly hotkey: Hotkey;
   readonly dragon = new Dragon(this);
   readonly activeTracker = new ActiveTracker();
@@ -58,7 +63,7 @@ export default class Designer {
 
     this.project = new Project(this, props.defaultSchema);
 
-    this.dragon.onDragstart(e => {
+    this.dragon.onDragstart((e) => {
       this.hovering.enable = false;
       const { dragObject } = e;
       if (isDragNodeObject(dragObject)) {
@@ -75,14 +80,14 @@ export default class Designer {
       this.postEvent('dragstart', e);
     });
 
-    this.dragon.onDrag(e => {
+    this.dragon.onDrag((e) => {
       if (this.props?.onDrag) {
         this.props.onDrag(e);
       }
       this.postEvent('drag', e);
     });
 
-    this.dragon.onDragend(e => {
+    this.dragon.onDragend((e) => {
       const { dragObject, copy } = e;
       const loc = this._dropLocation;
       if (loc) {
@@ -96,7 +101,7 @@ export default class Designer {
             nodes = insertChildren(loc.target, nodeData, loc.detail.index);
           }
           if (nodes) {
-            loc.document.selection.selectAll(nodes.map(o => o.id));
+            loc.document.selection.selectAll(nodes.map((o) => o.id));
             setTimeout(() => this.activeTracker.track(nodes![0]), 10);
           }
         }
@@ -262,8 +267,8 @@ export default class Designer {
 
   @obx.ref private _simulatorComponent?: ComponentType<any>;
 
-  @computed get simulatorComponent(): ComponentType<any> {
-    return this._simulatorComponent || BuiltinSimulatorView;
+  @computed get simulatorComponent(): ComponentType<any> | undefined {
+    return this._simulatorComponent;
   }
 
   @obx.ref private _simulatorProps?: object | ((document: DocumentModel) => object);
@@ -298,7 +303,7 @@ export default class Designer {
   private _lostComponentMetasMap = new Map<string, ComponentMeta>();
 
   private buildComponentMetasMap(metas: ComponentMetadata[]) {
-    metas.forEach(data => {
+    metas.forEach((data) => {
       const key = data.componentName;
       let meta = this._componentMetasMap.get(key);
       if (meta) {

packages/designer/src/designer/drag-ghost/README.md

@@ -0,0 +1 @@
+内置拖拽替身

packages/designer/src/designer/drag-ghost/index.tsx

@@ -1,13 +1,13 @@
 import { Component } from 'react';
-import { observer, obx, Title } from '../../../../globals';
-import Designer from '../../designer/designer';
-import { isDragNodeObject, DragObject, isDragNodeDataObject } from '../../designer/helper/dragon';
+import { observer, obx, Title } from '@ali/lowcode-globals';
+import { Designer } from '../designer';
+import { DragObject, isDragNodeObject, isDragNodeDataObject } from '../dragon';
 import './ghost.less';
 
 type offBinding = () => any;
 
 @observer
-export default class Ghost extends Component<{ designer: Designer }> {
+export default class DragGhost extends Component<{ designer: Designer }> {
   private dispose: offBinding[] = [];
   @obx.ref private dragObject: DragObject | null = null;
   @obx.ref private x = 0;

packages/designer/src/designer/dragon.ts

@@ -1,12 +1,11 @@
 import { EventEmitter } from 'events';
-import DropLocation from './location';
-import DocumentModel from '../document/document-model';
-import { ISimulator, isSimulator, ComponentInstance } from '../simulator';
-import Node from '../document/node/node';
-import Designer from '../designer';
-import { setNativeSelection } from './navtive-selection';
-import cursor from './cursor';
-import { NodeSchema, obx } from '../../../../globals';
+import { NodeSchema, obx } from '@ali/lowcode-globals';
+import { DropLocation } from './location';
+import { Node, DocumentModel } from '../document';
+import { ISimulatorHost, isSimulatorHost } from '../simulator';
+import { Designer } from './designer';
+import { setNativeSelection } from 'utils/navtive-selection';
+import cursor from 'utils/cursor';
 
 export interface LocateEvent {
   readonly type: 'LocateEvent';
@@ -147,7 +146,7 @@ export function setShaken(e: any) {
   e.shaken = true;
 }
 
-function getSourceSensor(dragObject: DragObject): ISimulator | null {
+function getSourceSensor(dragObject: DragObject): ISimulatorHost | null {
   if (!isDragNodeObject(dragObject)) {
     return null;
   }
@@ -156,7 +155,7 @@ function getSourceSensor(dragObject: DragObject): ISimulator | null {
 
 function makeEventsHandler(
   boostEvent: MouseEvent | DragEvent,
-  sensors: ISimulator[],
+  sensors: ISimulatorHost[],
 ): (fn: (sdoc: Document) => void) => void {
   const topDoc = window.top.document;
   const sourceDoc = boostEvent.view?.document || topDoc;
@@ -184,7 +183,7 @@ function isDragEvent(e: any): e is DragEvent {
   return e?.type?.substr(0, 4) === 'drag';
 }
 
-export default class Dragon {
+export class Dragon {
   private sensors: ISensor[] = [];
 
   /**
@@ -400,8 +399,8 @@ export default class Dragon {
         evt.globalX = e.clientX;
         evt.globalY = e.clientY;
       } else {
-        let srcSim: ISimulator | undefined;
-        const lastSim = lastSensor && isSimulator(lastSensor) ? lastSensor : null;
+        let srcSim: ISimulatorHost | undefined;
+        const lastSim = lastSensor && isSimulatorHost(lastSensor) ? lastSensor : null;
         if (lastSim && lastSim.contentDocument === sourceDocument) {
           srcSim = lastSim;
         } else {
@@ -498,7 +497,7 @@ export default class Dragon {
     }
   }
 
-  private getMasterSensors(): ISimulator[] {
+  private getMasterSensors(): ISimulatorHost[] {
     return this.designer.project.documents
       .map(doc => {
         // TODO: not use actived,

packages/designer/src/designer/hotkey.ts

@@ -345,7 +345,7 @@ function fireCallback(callback: HotkeyCallback, e: KeyboardEvent, combo?: string
   }
 }
 
-export default class Hotkey {
+export class Hotkey {
   private callBacks: HotkeyCallbacks = {};
   private directMap: HotkeyDirectMap = {};
   private sequenceLevels: SequenceLevels = {};

packages/designer/src/designer/hovering.ts

@@ -1,8 +1,7 @@
-import Node from '../document/node/node';
-import DocumentModel from '../document/document-model';
-import { obx } from '../../../../globals';
+import { obx } from '@ali/lowcode-globals';
+import { Node, DocumentModel } from '../document';
 
-export default class Hovering {
+export class Hovering {
   @obx.ref private _enable = true;
   get enable() {
     return this._enable;

packages/designer/src/designer/index.ts

@@ -1,3 +1,8 @@
-import DesignerView from './designer-view';
-
-export default DesignerView;
+export * from './designer';
+export * from './designer-view';
+export * from './dragon';
+export * from './hotkey';
+export * from './hovering';
+export * from './location';
+export * from './offset-observer';
+export * from './scroller';

packages/designer/src/designer/location.ts

@@ -1,5 +1,4 @@
-import ComponentNode, { NodeParent } from '../document/node/node';
-import DocumentModel from '../document/document-model';
+import { DocumentModel, Node as ComponentNode, NodeParent } from '../document';
 import { LocateEvent } from './dragon';
 
 export interface LocationData {
@@ -126,7 +125,7 @@ export function getWindow(elem: Element | Document): Window {
   return (isDocument(elem) ? elem : elem.ownerDocument!).defaultView!;
 }
 
-export default class DropLocation {
+export class DropLocation {
   readonly target: NodeParent;
   readonly detail: LocationDetail;
   readonly event: LocateEvent;

packages/designer/src/designer/offset-observer.ts

@@ -1,10 +1,9 @@
-import { obx, computed } from '../../../../globals';
+import { obx, computed } from '@ali/lowcode-globals';
+import { uniqueId } from 'utils/unique-id';
 import { INodeSelector, IViewport } from '../simulator';
-import { uniqueId } from '../../../../utils/unique-id';
-import { isRootNode } from '../document/node/root-node';
-import Node from '../document/node/node';
+import { isRootNode, Node } from '../document';
 
-export default class OffsetObserver {
+export class OffsetObserver {
   readonly id = uniqueId('oobx');
 
   private lastOffsetLeft?: number;

packages/designer/src/designer/scroller.ts

@@ -1,4 +1,4 @@
-import { isElement } from '../../utils/is-element';
+import { isElement } from 'utils/is-element';
 
 export class ScrollTarget {
   get left() {
@@ -47,7 +47,7 @@ export interface IScrollable {
   scale?: number;
 }
 
-export default class Scroller {
+export class Scroller {
   private pid: number | undefined;
 
   get scrollTarget(): ScrollTarget | null {

packages/designer/src/document/document-model.ts

@@ -1,12 +1,3 @@
-import Project from '../project';
-import Node, { isNodeParent, insertChildren, insertChild, NodeParent, isNode } from './node/node';
-import { Selection } from './selection';
-import RootNode from './node/root-node';
-import { ISimulator } from '../simulator';
-import DropLocation from '../helper/location';
-import { ComponentMeta } from '../component-meta';
-import History from '../helper/history';
-import Prop from './node/props/prop';
 import {
   RootSchema,
   NodeData,
@@ -17,10 +8,19 @@ import {
   obx,
   autorun,
   isNodeSchema,
-} from '../../../../globals';
-import { isDragNodeDataObject, DragNodeObject, DragNodeDataObject } from '../helper/dragon';
+} from '@ali/lowcode-globals';
+import { Project } from '../project';
+import { Node, isNodeParent, insertChildren, insertChild, NodeParent, isNode } from './node/node';
+import { Selection } from './selection';
+import { RootNode } from './node/root-node';
+import { ISimulatorHost } from '../simulator';
+import { DropLocation } from '../designer/location';
+import { ComponentMeta } from '../component-meta';
+import { History } from './history';
+import { Prop } from './node/props/prop';
+import { isDragNodeDataObject, DragNodeObject, DragNodeDataObject } from '../designer/dragon';
 
-export default class DocumentModel {
+export class DocumentModel {
   /**
    * 根节点 类型有：Page/Component/Block
    */
@@ -41,12 +41,12 @@ export default class DocumentModel {
   private nodesMap = new Map<string, Node>();
   @obx.val private nodes = new Set<Node>();
   private seqId = 0;
-  private _simulator?: ISimulator;
+  private _simulator?: ISimulatorHost;
 
   /**
    * 模拟器
    */
-  get simulator(): ISimulator | null {
+  get simulator(): ISimulatorHost | null {
     return this._simulator || null;
   }
 
@@ -295,7 +295,7 @@ export default class DocumentModel {
     };
   }
 
-  private mountSimulator(simulator: ISimulator) {
+  private mountSimulator(simulator: ISimulatorHost) {
     this._simulator = simulator;
     // TODO: emit simulator mounted
   }

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

@@ -1,17 +1,18 @@
 import { Component } from 'react';
-import DocumentModel from './document-model';
-import { observer } from '../../../../globals';
 import classNames from 'classnames';
+import { observer } from '@ali/lowcode-globals';
+import { DocumentModel } from './document-model';
+import { BuiltinSimulatorHostView } from '../builtin-simulator';
 
 @observer
-export default class DocumentView extends Component<{ document: DocumentModel }> {
+export class DocumentView extends Component<{ document: DocumentModel }> {
   shouldComponentUpdate() {
     return false;
   }
   render() {
     const { document } = this.props;
     const simulatorProps = document.simulatorProps;
-    const Simulator = document.designer.simulatorComponent;
+    const Simulator = document.designer.simulatorComponent || BuiltinSimulatorHostView;
     return (
       <div
         className={classNames('lc-document', {

packages/designer/src/document/history.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from 'events';
-import { NodeSchema, autorun, Reaction, untracked } from '../../../../globals';
+import { NodeSchema, autorun, Reaction, untracked } from '@ali/lowcode-globals';
 
 // TODO: cache to localStorage
 
@@ -21,7 +21,7 @@ export function setSerialization(serializion: Serialization) {
   currentSerializion = serializion;
 }
 
-export default class History {
+export class History {
   private session: Session;
   private records: Session[];
   private point = 0;

packages/designer/src/document/index.ts

@@ -0,0 +1,5 @@
+export * from './document-view';
+export * from './document-model';
+export * from './node';
+export * from './selection';
+export * from './history';

packages/designer/src/document/node/exclusive-group.ts

@@ -1,11 +1,11 @@
-import { obx, computed, TitleContent } from '../../../../../globals';
-import { uniqueId } from '../../../../../utils/unique-id';
-import Node from './node';
-import { intl } from '../../../locale';
+import { obx, computed, TitleContent } from '@ali/lowcode-globals';
+import { uniqueId } from 'utils/unique-id';
+import { Node } from './node';
+import { intl } from '../../locale';
 
 // modals assoc x-hide value, initial: check is Modal, yes will put it in modals, cross levels
 // if-else-if assoc conditionGroup value, should be the same level, and siblings, need renderEngine support
-export default class ExclusiveGroup {
+export class ExclusiveGroup {
   readonly isExclusiveGroup = true;
   readonly id = uniqueId('exclusive');
   @obx.val readonly children: Node[] = [];

packages/designer/src/document/node/index.ts

@@ -0,0 +1,7 @@
+export * from './exclusive-group';
+export * from './node';
+export * from './node-children';
+export * from './root-node';
+export * from './props/prop';
+export * from './props/prop-stash';
+export * from './props/props';

packages/designer/src/document/node/node-children.ts

@@ -1,7 +1,7 @@
-import Node, { NodeParent } from './node';
-import { NodeData, isNodeSchema, obx, computed } from '../../../../../globals';
+import { NodeData, isNodeSchema, obx, computed } from '@ali/lowcode-globals';
+import { Node, NodeParent } from './node';
 
-export default class NodeChildren {
+export class NodeChildren {
   @obx.val private children: Node[];
   constructor(readonly owner: NodeParent, data: NodeData | NodeData[]) {
     this.children = (Array.isArray(data) ? data : [data]).map(child => {

packages/designer/src/document/node/node.ts

@@ -1,8 +1,3 @@
-import Props, { EXTRA_KEY_PREFIX } from './props/props';
-import DocumentModel from '../document-model';
-import NodeChildren from './node-children';
-import Prop from './props/prop';
-import { ComponentMeta } from '../../component-meta';
 import {
   isDOMText,
   isJSExpression,
@@ -13,8 +8,13 @@ import {
   TitleContent,
   obx,
   computed,
-} from '../../../../../globals';
-import ExclusiveGroup, { isExclusiveGroup } from './exclusive-group';
+} from '@ali/lowcode-globals';
+import { Props, EXTRA_KEY_PREFIX } from './props/props';
+import { DocumentModel } from '../document-model';
+import { NodeChildren } from './node-children';
+import { Prop } from './props/prop';
+import { ComponentMeta } from '../../component-meta';
+import { ExclusiveGroup, isExclusiveGroup } from './exclusive-group';
 
 /**
  * 基础节点
@@ -36,7 +36,7 @@ import ExclusiveGroup, { isExclusiveGroup } from './exclusive-group';
  *  hidden         not visible on canvas
  *  slotArgs       like loopArgs, for slot node
  */
-export default class Node {
+export class Node {
   /**
    * 是节点实例
    */

packages/designer/src/document/node/props/prop-stash.ts

@@ -1,9 +1,9 @@
-import { obx, autorun, untracked, computed } from '../../../../../../globals';
-import Prop, { IPropParent, UNSET } from './prop';
-import Props from './props';
+import { obx, autorun, untracked, computed } from '@ali/lowcode-globals';
+import { Prop, IPropParent, UNSET } from './prop';
+import { Props } from './props';
 
 export type PendingItem = Prop[];
-export default class PropStash implements IPropParent {
+export class PropStash implements IPropParent {
   @obx.val private space: Set<Prop> = new Set();
   @computed private get maps(): Map<string | number, Prop> {
     const maps = new Map();

packages/designer/src/document/node/props/prop.ts

@@ -1,10 +1,3 @@
-import { valueToSource } from '../../../../utils/value-to-source';
-import PropStash from './prop-stash';
-import { uniqueId } from '../../../../../../utils/unique-id';
-import { isPlainObject } from '../../../../../../utils/is-plain-object';
-import { hasOwnProperty } from '../../../../utils/has-own-property';
-import Props from './props';
-import Node from '../node';
 import {
   CompositeValue,
   isJSExpression,
@@ -13,8 +6,15 @@ import {
   isNodeSchema,
   untracked,
   computed,
-  obx,
-} from '../../../../../../globals';
+  obx
+} from '@ali/lowcode-globals';
+import { uniqueId } from 'utils/unique-id';
+import { isPlainObject } from 'utils/is-plain-object';
+import { hasOwnProperty } from 'utils/has-own-property';
+import { PropStash } from './prop-stash';
+import { valueToSource } from './value-to-source';
+import { Props } from './props';
+import { Node } from '../node';
 
 export const UNSET = Symbol.for('unset');
 export type UNSET = typeof UNSET;
@@ -26,7 +26,7 @@ export interface IPropParent {
 
 export type ValueTypes = 'unset' | 'literal' | 'map' | 'list' | 'expression' | 'slot';
 
-export default class Prop implements IPropParent {
+export class Prop implements IPropParent {
   readonly isProp = true;
 
   readonly id = uniqueId('prop$');
@@ -84,7 +84,7 @@ export default class Prop implements IPropParent {
       if (!this._items) {
         return this._value;
       }
-      return this.items!.map(prop => {
+      return this.items!.map((prop) => {
         const v = prop.export(serialize);
         return v === UNSET ? null : v;
       });
@@ -191,7 +191,7 @@ export default class Prop implements IPropParent {
   private dispose() {
     const items = untracked(() => this._items);
     if (items) {
-      items.forEach(prop => prop.purge());
+      items.forEach((prop) => prop.purge());
     }
     this._items = null;
     this._maps = null;
@@ -374,7 +374,7 @@ export default class Prop implements IPropParent {
 
     if (stash) {
       if (!this.stash) {
-        this.stash = new PropStash(this.props, item => {
+        this.stash = new PropStash(this.props, (item) => {
           // item take effect
           if (item.key) {
             this.set(item.key, item, true);
@@ -527,7 +527,7 @@ export default class Prop implements IPropParent {
       this.stash.purge();
     }
     if (this._items) {
-      this._items.forEach(item => item.purge());
+      this._items.forEach((item) => item.purge());
     }
     this._maps = null;
     if (this._slotNode && this._slotNode.slotFor === this) {

packages/designer/src/document/node/props/props.ts

@@ -1,12 +1,11 @@
-import { uniqueId } from '../../../../../../utils/unique-id';
-import PropStash from './prop-stash';
-import Prop, { IPropParent, UNSET } from './prop';
-import Node from '../node';
-import { PropsMap, PropsList, CompositeValue, computed, obx } from '../../../../../../globals';
+import { PropsMap, PropsList, CompositeValue, computed, obx, uniqueId } from '@ali/lowcode-globals';
+import { PropStash } from './prop-stash';
+import { Prop, IPropParent, UNSET } from './prop';
+import { Node } from '../node';
 
 export const EXTRA_KEY_PREFIX = '__';
 
-export default class Props implements IPropParent {
+export class Props implements IPropParent {
   readonly id = uniqueId('props');
   @obx.val private items: Prop[] = [];
   @computed private get maps(): Map<string, Prop> {

packages/designer/src/document/node/root-node.ts

@@ -1,7 +1,7 @@
-import Node, { NodeParent } from './node';
-import DocumentModel from '../document-model';
-import NodeChildren from './node-children';
-import { RootSchema } from '../../../../../globals';
+import { RootSchema } from '@ali/lowcode-globals';
+import { Node, NodeParent } from './node';
+import { DocumentModel } from '../document-model';
+import { NodeChildren } from './node-children';
 
 /**
  * 根容器节点
@@ -32,7 +32,7 @@ import { RootSchema } from '../../../../../globals';
  *  locked
  *  hidden
  */
-export default class RootNode extends Node implements NodeParent {
+export class RootNode extends Node implements NodeParent {
   readonly isRootNode = true;
   get isNodeParent() {
     return true;

packages/designer/src/document/selection.ts

@@ -1,7 +1,7 @@
-import Node, { comparePosition, PositionNO } from './node/node';
-import { obx } from '../../../../globals';
-import DocumentModel from './document-model';
 import { EventEmitter } from 'events';
+import { obx } from '@ali/lowcode-globals';
+import { Node, comparePosition, PositionNO } from './node/node';
+import { DocumentModel } from './document-model';
 
 export class Selection {
   private emitter = new EventEmitter();

packages/designer/src/index.ts

@@ -1,3 +1,6 @@
-import DesignerView from './designer';
-
-export default DesignerView;
+export * from './component-meta';
+export * from './simulator';
+export * from './designer';
+export * from './document';
+export * from './project';
+export * from './builtin-simulator';

packages/designer/src/locale/index.ts

@@ -1,4 +1,4 @@
-import { createIntl } from '../../../globals';
+import { createIntl } from '@ali/lowcode-globals';
 import en_US from './en-US.json';
 import zh_CN from './zh-CN.json';
 

packages/designer/src/module.d.ts

@@ -1 +0,0 @@
-declare module '@ali/iceluna-sdk';

packages/designer/src/project/index.ts

@@ -0,0 +1,2 @@
+export * from './project';
+export * from './project-view';

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

@@ -1,10 +1,11 @@
 import { Component } from 'react';
-import Designer from './designer';
-import DocumentView from './document/document-view';
-import { observer } from '../../../globals';
+import { observer } from '@ali/lowcode-globals';
+import { Designer } from '../designer';
+import { DocumentView } from '../document';
+import './project.less';
 
 @observer
-export default class ProjectView extends Component<{ designer: Designer }> {
+export class ProjectView extends Component<{ designer: Designer }> {
   render() {
     const { designer } = this.props;
     // TODO: support splitview

packages/designer/src/project/project.less

@@ -0,0 +1,20 @@
+.lc-project {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  .lc-document {
+    width: 100%;
+    height: 100%;
+    &-hidden {
+      // todo:
+      display: none;
+    }
+
+    .lc-simulator-shell {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

packages/designer/src/project/project.ts

@@ -1,9 +1,9 @@
 import { EventEmitter } from 'events';
-import Designer from './designer';
-import DocumentModel, { isDocumentModel } from './document/document-model';
-import { ProjectSchema, RootSchema, obx, computed } from '../../../globals';
+import { ProjectSchema, RootSchema, obx, computed } from '@ali/lowcode-globals';
+import { Designer } from '../designer';
+import { DocumentModel, isDocumentModel } from '../document';
 
-export default class Project {
+export class Project {
   private emitter = new EventEmitter();
   @obx.val readonly documents: DocumentModel[] = [];
 

packages/designer/src/simulator.ts

@@ -1,9 +1,7 @@
 import { Component as ReactComponent, ComponentType } from 'react';
-import { ISensor } from './helper/dragon';
-import { Point } from './helper/location';
-import Node from './document/node/node';
-import { ScrollTarget, IScrollable } from './helper/scroller';
-import { ComponentMetadata } from '../../../globals';
+import { ComponentMetadata } from '@ali/lowcode-globals';
+import { ISensor, Point, ScrollTarget, IScrollable } from './designer';
+import { Node } from './document';
 
 export type AutoFit = '100%';
 export const AutoFit = '100%';
@@ -65,7 +63,7 @@ export interface IViewport extends IScrollable {
 /**
  * 模拟器控制进程协议
  */
-export interface ISimulator<P = object> extends ISensor {
+export interface ISimulatorHost<P = object> extends ISensor {
   readonly isSimulator: true;
   /**
    * 获得边界维度等信息
@@ -144,7 +142,7 @@ export interface ISimulator<P = object> extends ISensor {
   purge(): void;
 }
 
-export function isSimulator(obj: any): obj is ISimulator {
+export function isSimulatorHost(obj: any): obj is ISimulatorHost {
   return obj && obj.isSimulator;
 }
 

packages/designer/src/utils/has-own-property.ts

@@ -1,4 +0,0 @@
-const prototypeHasOwnProperty = Object.prototype.hasOwnProperty;
-export function hasOwnProperty(obj: any, key: string | number | symbol): boolean {
-  return obj && prototypeHasOwnProperty.call(obj, key);
-}

packages/designer/tsconfig.json

@@ -1,9 +1,13 @@
 {
-  "extends": "./node_modules/@recore/config/tsconfig",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "experimentalDecorators": true
+    "outDir": "lib"
   },
   "include": [
-    "./src/", "../utils/unique-id.ts", "../utils/is-plain-object.ts", "../utils/is-object.ts", "../utils/is-function.ts"
+    "./src/"
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }
+

packages/globals/.eslintrc

@@ -1,3 +0,0 @@
-{
-  "extends": "./node_modules/@recore/config/.eslintrc"
-}

packages/globals/.prettierrc

@@ -1,6 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120,
-  "trailingComma": "all"
-}

packages/globals/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@ali/lowcode-globals",
-  "version": "0.0.0",
-  "description": "xxx for Ali lowCode engine",
-  "main": "src/index.ts",
+  "version": "0.8.0",
+  "description": "Globals api for Ali lowCode engine",
+  "main": "lib/index.js",
   "files": [
     "lib"
   ],
@@ -20,16 +20,10 @@
     "react-dom": "^16.7.0"
   },
   "devDependencies": {
-    "@recore/config": "^2.0.0",
     "@types/classnames": "^2.2.7",
     "@types/node": "^13.7.1",
     "@types/react": "^16",
-    "@types/react-dom": "^16",
-    "eslint": "^6.5.1",
-    "prettier": "^1.18.2",
-    "tslib": "^1.9.3",
-    "typescript": "^3.1.3",
-    "ts-node": "^8.0.1"
+    "@types/react-dom": "^16"
   },
   "ava": {
     "compileEnhancements": false,

packages/globals/src/components/tip/embed-tip.tsx

@@ -1,4 +1,4 @@
-import { uniqueId } from '../../../../utils/unique-id';
+import { uniqueId } from 'utils/unique-id';
 import { Component } from 'react';
 import { saveTips } from './tip-handler';
 import { TipConfig } from '../../types';

packages/globals/src/di/setter.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { CustomView, isCustomView } from '../types/setter-config';
-import { createContent } from '../../../utils/create-content';
+import { createContent } from '../utils/create-content';
 import { TitleContent } from '../types';
 
 export type RegisteredSetter = {

packages/globals/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './create-icon';
 export * from './is-react';
-export * from './unique-id';
+export * from 'utils/unique-id';
+export * from './create-content';

packages/globals/src/utils/unique-id.ts

@@ -1,4 +0,0 @@
-let guid = Date.now();
-export function uniqueId(prefix = '') {
-  return `${prefix}${(guid++).toString(36).toLowerCase()}`;
-}

packages/globals/tsconfig.json

@@ -1,9 +1,7 @@
 {
-  "extends": "./node_modules/@recore/config/tsconfig",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "experimentalDecorators": true
+    "outDir": "lib"
   },
-  "include": [
-    "./src/"
-  ]
+  "include": ["./src/"],
 }

packages/material-parser/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ali/lowcode-engine-material-parser",
+  "name": "@ali/lowcode-material-parser",
   "version": "0.1.0",
   "description": "material parser for Ali lowCode engine",
   "main": "lib/index.js",

packages/plugin-outline-pane/package.json

@@ -1,10 +1,11 @@
 {
-  "name": "@ali/lowcode-plugin-settings",
-  "version": "0.0.0",
-  "description": "xxx for Ali lowCode engine",
-  "main": "src/index.tsx",
+  "name": "@ali/lowcode-plugin-outline-pane",
+  "version": "0.8.0",
+  "description": "Outline pane for Ali lowCode engine",
+  "main": "lib/index.js",
   "files": [
-    "lib"
+    "lib",
+    "umd"
   ],
   "scripts": {
     "build": "tsc",
@@ -18,16 +19,10 @@
     "react-dom": "^16.7.0"
   },
   "devDependencies": {
-    "@recore/config": "^2.0.0",
     "@types/classnames": "^2.2.7",
     "@types/node": "^13.7.1",
     "@types/react": "^16",
-    "@types/react-dom": "^16",
-    "eslint": "^6.5.1",
-    "prettier": "^1.18.2",
-    "tslib": "^1.9.3",
-    "typescript": "^3.1.3",
-    "ts-node": "^8.0.1"
+    "@types/react-dom": "^16"
   },
   "ava": {
     "compileEnhancements": false,

packages/plugin-outline-pane/src/helper/dwell-timer.ts

@@ -1,6 +1,4 @@
-import { NodeParent } from '../../../designer/src/designer/document/node/node';
-import DropLocation, { isLocationChildrenDetail } from '../../../designer/src/designer/helper/location';
-import { LocateEvent } from '../../../designer/src/designer/helper/dragon';
+import { NodeParent, DropLocation, isLocationChildrenDetail, LocateEvent } from '@ali/lowcode-designer';
 
 /**
  * 停留检查计时器
@@ -8,7 +6,7 @@ import { LocateEvent } from '../../../designer/src/designer/helper/dragon';
 export default class DwellTimer {
   private timer: number | undefined;
   private previous?: NodeParent;
-  private event?: LocateEvent
+  private event?: LocateEvent;
 
   constructor(private decide: (node: NodeParent, event: LocateEvent) => void, private timeout: number = 800) {}
 

packages/plugin-outline-pane/src/helper/indent-track.ts

@@ -1,5 +1,4 @@
-import DropLocation, { isLocationChildrenDetail } from '../../../designer/src/designer/helper/location';
-import { NodeParent } from '../../../designer/src/designer/document/node/node';
+import { DropLocation, NodeParent, isLocationChildrenDetail } from '@ali/lowcode-designer';
 
 const IndentSensitive = 15;
 export class IndentTrack {

packages/plugin-outline-pane/src/icons/arrow-right.tsx

@@ -1,4 +1,4 @@
-import { IconBase, IconProps } from '../../../globals';
+import { IconBase, IconProps } from '@ali/lowcode-globals';
 
 export function IconArrowRight(props: IconProps) {
   return (

packages/plugin-outline-pane/src/icons/cond.tsx

@@ -1,4 +1,4 @@
-import { IconBase, IconProps } from '../../../globals';
+import { IconBase, IconProps } from '@ali/lowcode-globals';
 
 export function IconCond(props: IconProps) {
   return (

packages/plugin-outline-pane/src/icons/eye-close.tsx

@@ -1,4 +1,4 @@
-import { IconBase, IconProps } from '../../../globals';
+import { IconBase, IconProps } from '@ali/lowcode-globals';
 
 export function IconEyeClose(props: IconProps) {
   return (

packages/plugin-outline-pane/src/icons/eye.tsx

@@ -1,4 +1,4 @@
-import { IconBase, IconProps } from '../../../globals';
+import { IconBase, IconProps } from '@ali/lowcode-globals';
 
 export function IconEye(props: IconProps) {
   return (

packages/plugin-outline-pane/src/icons/lock.tsx

@@ -1,4 +1,4 @@
-import { IconBase, IconProps } from '../../../globals';
+import { IconBase, IconProps } from '@ali/lowcode-globals';
 
 export function IconLock(props: IconProps) {
   return (