From 5767023d3f7d1406343a14089941e8365d029fa7 Mon Sep 17 00:00:00 2001
From: kangwei <bingbing.yb@alibaba-inc.com>
Date: Mon, 20 Jul 2020 14:01:00 +0800
Subject: [PATCH] Revert "Merge branch 'feat/rax-simulator' into
 'release/0.9.0'
"

This reverts commit 44d0f0b246c6b92af9c8c5d4d019286568d434ad, reversing
changes made to d282a375425435e7e292ab0f819141b6e50f541d.
---
 packages/demo/build.json                      |   6 +-
 packages/demo/build.plugin.js                 |  15 +-
 packages/demo/public/index.html               |   1 -
 packages/demo/public/rax.json                 |  20 -
 packages/demo/public/raxAssets.json           |  83 ----
 packages/demo/src/editor/components.ts        |   2 +-
 packages/demo/src/editor/config.js            |  10 +-
 packages/demo/src/vision/index.ts             |   2 -
 .../src/builtin-simulator/create-simulator.ts |  18 +-
 .../designer/src/builtin-simulator/host.ts    |  74 +--
 packages/designer/src/simulator.ts            |   2 +-
 packages/plugin-designer/src/index.tsx        |   9 +-
 packages/rax-render/CHANGELOG.md              |   4 -
 packages/rax-render/package.json              |   5 +-
 packages/rax-render/src/engine/base.jsx       | 264 +++++------
 .../rax-render/src/engine/blockEngine.jsx     |  16 +-
 packages/rax-render/src/engine/compEngine.jsx |  32 +-
 packages/rax-render/src/engine/index.jsx      | 115 +----
 packages/rax-render/src/engine/pageEngine.jsx | 100 +----
 packages/rax-render/src/engine/tempEngine.jsx |  16 +-
 packages/rax-render/src/hoc/compWrapper.js    |   6 +-
 packages/rax-render/src/utils/index.js        | 213 +++++----
 packages/rax-simulator-renderer/build.json    |  21 -
 .../rax-simulator-renderer/build.plugin.js    |   0
 packages/rax-simulator-renderer/package.json  |  53 ---
 .../src/builtin-components/Leaf/index.tsx     | 226 ----------
 .../UnusualComponent/index.less               |   0
 .../UnusualComponent/index.tsx                |  34 --
 .../src/builtin-components/renderUtils.ts     |  82 ----
 packages/rax-simulator-renderer/src/host.ts   |   4 -
 .../rax-simulator-renderer/src/image.d.ts     |   1 -
 packages/rax-simulator-renderer/src/index.ts  |   7 -
 .../src/obx-rax/derivation.ts                 | 210 ---------
 .../src/obx-rax/global-state.ts               |  68 ---
 .../src/obx-rax/next-tick.ts                  |  56 ---
 .../src/obx-rax/observable/compare.ts         |   5 -
 .../src/obx-rax/observable/observable.ts      | 179 --------
 .../src/obx-rax/observable/obx-array.ts       | 152 -------
 .../src/obx-rax/observable/obx-instance.ts    |  14 -
 .../src/obx-rax/observable/obx-map.ts         |  37 --
 .../src/obx-rax/observable/obx-object.ts      |  93 ----
 .../src/obx-rax/observable/obx-property.ts    | 212 ---------
 .../src/obx-rax/observable/obx-set.ts         | 133 ------
 .../src/obx-rax/observable/obx.ts             | 141 ------
 .../src/obx-rax/observable/proxy.ts           |  40 --
 .../src/obx-rax/observer.ts                   | 149 ------
 .../src/obx-rax/reaction.ts                   | 252 -----------
 .../src/obx-rax/utils.ts                      |   0
 .../src/obx-rax/utils/has-own-property.ts     |   5 -
 .../src/obx-rax/utils/index.ts                |   7 -
 .../src/obx-rax/utils/invariant.ts            |   5 -
 .../src/obx-rax/utils/is-primitive.ts         |   8 -
 .../src/obx-rax/utils/next-id.ts              |   4 -
 .../src/obx-rax/utils/shallow-equal.ts        |  28 --
 .../src/obx-rax/utils/split-path.ts           |   5 -
 .../src/obx-rax/utils/throttle.ts             |  97 ----
 .../src/renderer-view.tsx                     | 151 -------
 .../rax-simulator-renderer/src/renderer.less  | 111 -----
 .../rax-simulator-renderer/src/renderer.ts    | 423 ------------------
 .../src/utils/create-defer.ts                 |  17 -
 .../src/utils/get-client-rects.ts             |  13 -
 .../src/utils/get-closest-node-instance.ts    |   0
 .../src/utils/get-device-view.ts              |  23 -
 .../src/utils/loader.ts                       | 113 -----
 .../src/utils/script.ts                       |  54 ---
 .../rax-simulator-renderer/src/utils/style.ts |  73 ---
 packages/react-renderer/src/engine/index.jsx  |  20 +-
 .../react-renderer/src/engine/pageEngine.jsx  |  13 +-
 .../src/renderer-view.tsx                     |   2 +-
 .../react-simulator-renderer/src/renderer.ts  |  19 +-
 scripts/start.sh                              |   1 -
 71 files changed, 329 insertions(+), 4045 deletions(-)
 delete mode 100644 packages/demo/public/rax.json
 delete mode 100644 packages/demo/public/raxAssets.json
 delete mode 100644 packages/rax-simulator-renderer/build.json
 delete mode 100644 packages/rax-simulator-renderer/build.plugin.js
 delete mode 100644 packages/rax-simulator-renderer/package.json
 delete mode 100644 packages/rax-simulator-renderer/src/builtin-components/Leaf/index.tsx
 delete mode 100644 packages/rax-simulator-renderer/src/builtin-components/UnusualComponent/index.less
 delete mode 100644 packages/rax-simulator-renderer/src/builtin-components/UnusualComponent/index.tsx
 delete mode 100644 packages/rax-simulator-renderer/src/builtin-components/renderUtils.ts
 delete mode 100644 packages/rax-simulator-renderer/src/host.ts
 delete mode 100644 packages/rax-simulator-renderer/src/image.d.ts
 delete mode 100644 packages/rax-simulator-renderer/src/index.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/derivation.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/global-state.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/next-tick.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/observable/compare.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/observable/observable.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/observable/obx-array.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/observable/obx-instance.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/observable/obx-map.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/observable/obx-object.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/observable/obx-property.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/observable/obx-set.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/observable/obx.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/observable/proxy.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/observer.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/reaction.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/utils.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/utils/has-own-property.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/utils/index.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/utils/invariant.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/utils/is-primitive.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/utils/next-id.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/utils/shallow-equal.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/utils/split-path.ts
 delete mode 100644 packages/rax-simulator-renderer/src/obx-rax/utils/throttle.ts
 delete mode 100644 packages/rax-simulator-renderer/src/renderer-view.tsx
 delete mode 100644 packages/rax-simulator-renderer/src/renderer.less
 delete mode 100644 packages/rax-simulator-renderer/src/renderer.ts
 delete mode 100644 packages/rax-simulator-renderer/src/utils/create-defer.ts
 delete mode 100644 packages/rax-simulator-renderer/src/utils/get-client-rects.ts
 delete mode 100644 packages/rax-simulator-renderer/src/utils/get-closest-node-instance.ts
 delete mode 100644 packages/rax-simulator-renderer/src/utils/get-device-view.ts
 delete mode 100644 packages/rax-simulator-renderer/src/utils/loader.ts
 delete mode 100644 packages/rax-simulator-renderer/src/utils/script.ts
 delete mode 100644 packages/rax-simulator-renderer/src/utils/style.ts

diff --git a/packages/demo/build.json b/packages/demo/build.json
index 42ade8d92..83cf581dd 100644
--- a/packages/demo/build.json
+++ b/packages/demo/build.json
@@ -2,8 +2,7 @@
   "entry": {
     "index": "src/index",
     "editor-preset-vision": "../editor-preset-vision/src/index.ts",
-    "react-simulator-renderer": "../react-simulator-renderer/src/index.ts",
-    "rax-simulator-renderer": "../rax-simulator-renderer/src/index.ts"
+    "react-simulator-renderer": "../react-simulator-renderer/src/index.ts"
   },
   "vendor": false,
   "devServer": {
@@ -16,8 +15,7 @@
     "prop-types": "var window.PropTypes",
     "@alifd/next": "var window.Next",
     "@ali/visualengine": "var window.VisualEngine",
-    "@ali/visualengine-utils": "var window.VisualEngineUtils",
-    "rax": "var window.Rax"
+    "@ali/visualengine-utils": "var window.VisualEngineUtils"
   },
   "plugins": [
     [
diff --git a/packages/demo/build.plugin.js b/packages/demo/build.plugin.js
index 9e95cbd09..53380e73a 100644
--- a/packages/demo/build.plugin.js
+++ b/packages/demo/build.plugin.js
@@ -10,15 +10,12 @@ module.exports = ({ onGetWebpackConfig }) => {
     ]);
 
     config
-      // 定义插件名称
-      .plugin('MonacoWebpackPlugin')
-      // 第一项为具体插件，第二项为插件参数
-      .use(
-        new MonacoWebpackPlugin({
-          languages: ['typescript', 'css', 'json'],
-        }),
-        [],
-      );
+    // 定义插件名称
+    .plugin('MonacoWebpackPlugin')
+    // 第一项为具体插件，第二项为插件参数
+    .use(new MonacoWebpackPlugin({
+      languages:["typescript","css","json"]
+     }), []);
 
     config.plugins.delete('hot');
     config.devServer.hot(false);
diff --git a/packages/demo/public/index.html b/packages/demo/public/index.html
index 5a4ed76dd..e219c8bad 100644
--- a/packages/demo/public/index.html
+++ b/packages/demo/public/index.html
@@ -16,7 +16,6 @@
     <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>
-    <script src="https://cdn.jsdelivr.net/npm/rax@1.1.3/dist/rax.min.js"></script>
     <link rel="stylesheet" href="/css/editor-preset-vision.css" />
     <script>
       window.pageConfig = {
diff --git a/packages/demo/public/rax.json b/packages/demo/public/rax.json
deleted file mode 100644
index f5f4238ff..000000000
--- a/packages/demo/public/rax.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "componentName": "Page",
-  "fileName": "home",
-  "props": {},
-  "children": [
-    {
-      "componentName": "View",
-      "props": {},
-      "children": [
-        {
-          "componentName": "Text",
-          "props": {
-            "type": "primary"
-          },
-          "children": ["Welcome to Your Rax App!"]
-        }
-      ]
-    }
-  ]
-}
diff --git a/packages/demo/public/raxAssets.json b/packages/demo/public/raxAssets.json
deleted file mode 100644
index 1a2ea09bf..000000000
--- a/packages/demo/public/raxAssets.json
+++ /dev/null
@@ -1,83 +0,0 @@
-{
-  "version": "1.0.0",
-  "externals": [],
-  "componentDependencies": [{
-    "prototypeConfigsUrl": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.4/proto.c0b2ef2.js"],
-    "prototypeViewsUrl": null,
-    "alias": "",
-    "library": "AliVcDiv",
-    "urls": [
-      "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.4/view.c0b2ef2.css",
-      "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.4/view.c0b2ef2.js"
-    ],
-    "components": null,
-    "packageName": "@ali/vc-deep-mobile",
-    "version": "1.0.1"
-  }],
-  "packages": [
-    {
-      "title": "view",
-      "package": "rax-view",
-      "version": "1.19.18",
-      "urls": ["https://cdn.jsdelivr.net/npm/rax-view@1.1.2/build/index.js"],
-      "library": "View"
-    },
-    {
-      "title": "view",
-      "package": "rax-text",
-      "version": "1.19.18",
-      "urls": ["https://cdn.jsdelivr.net/npm/rax-text@1.3.1/build/index.js"],
-      "library": "Text"
-    }
-  ],
-  "components": [{
-    "componentName": "Page",
-    "title": "页面",
-    "configure": {
-      "events": {
-        "supportedLifecycles": [{
-          "description": "初始化时",
-          "name": "constructor"
-        }, {
-          "description": "装载后",
-          "name": "componentDidMount"
-        }, {
-          "description": "更新时",
-          "name": "componentDidMount"
-        }, {
-          "description": "卸载时",
-          "name": "componentWillUnmount"
-        }]
-      },
-      "component": {
-        "isContainer": true
-      }
-    }
-  },{
-    "componentName": "View",
-    "npm": {
-      "package": "rax-view",
-      "destructuring": true,
-      "exportName": "View"
-    },
-    "title": "视图",
-    "configure": {
-      "component": {
-        "isContainer": true
-      }
-    }
-  },{
-    "componentName": "Text",
-    "npm": {
-      "package": "rax-text",
-      "destructuring": true,
-      "exportName": "Text"
-    },
-    "title": "文本",
-    "configure": {
-      "component": {
-        "isContainer": true
-      }
-    }
-  }]
-}
diff --git a/packages/demo/src/editor/components.ts b/packages/demo/src/editor/components.ts
index ee1d6a545..8390b622e 100644
--- a/packages/demo/src/editor/components.ts
+++ b/packages/demo/src/editor/components.ts
@@ -18,4 +18,4 @@ export default {
   eventBindDialog,
   variableBindDialog,
   sourceEditor,
-};
+}
diff --git a/packages/demo/src/editor/config.js b/packages/demo/src/editor/config.js
index c3342cb93..153e58de1 100644
--- a/packages/demo/src/editor/config.js
+++ b/packages/demo/src/editor/config.js
@@ -28,7 +28,7 @@ export default {
         props: {
           align: 'right',
         },
-      }, */
+      },*/
       {
         pluginKey: 'samplePreview',
         type: 'Custom',
@@ -73,10 +73,10 @@ export default {
             hideTitleBar: true,
             maxHeight: 800,
             maxWidth: 1200,
-            title: '动作面板',
-            width: 600,
+            title: "动作面板",
+            width: 600
           },
-        },
+        }
       },
       {
         pluginKey: 'zhEn',
@@ -94,7 +94,7 @@ export default {
       {
         pluginKey: 'variableBindDialog',
       },
-    ],
+    ]
   },
   shortCuts: [],
   lifeCycles: {
diff --git a/packages/demo/src/vision/index.ts b/packages/demo/src/vision/index.ts
index 3f9fc7dcb..3916b8233 100644
--- a/packages/demo/src/vision/index.ts
+++ b/packages/demo/src/vision/index.ts
@@ -102,7 +102,6 @@ context.use(HOOKS.VE_SETTING_FIELD_VARIABLE_SETTER, VariableSetter);
 const externals = ['react', 'react-dom', 'prop-types', 'react-router', 'react-router-dom', '@ali/recore'];
 
 async function loadAssets() {
-  // const legaoAssets = await editor.utils.get('./raxAssets.json');
   const legaoAssets = await editor.utils.get('./legao-assets.json');
 
   const assets = upgradeAssetsBundle(legaoAssets);
@@ -145,7 +144,6 @@ async function loadAssets() {
 }
 
 async function loadSchema() {
-  // const schema = await editor.utils.get('./rax.json');
   const schema = await editor.utils.get('./schema.json');
   editor.set('schema', schema);
 }
diff --git a/packages/designer/src/builtin-simulator/create-simulator.ts b/packages/designer/src/builtin-simulator/create-simulator.ts
index 7bca2aec1..796b10f01 100644
--- a/packages/designer/src/builtin-simulator/create-simulator.ts
+++ b/packages/designer/src/builtin-simulator/create-simulator.ts
@@ -1,14 +1,6 @@
 // NOTE: 仅用作类型标注，切勿作为实体使用
 import { BuiltinSimulatorHost } from './host';
-import {
-  AssetLevel,
-  AssetLevels,
-  AssetList,
-  isAssetBundle,
-  isAssetItem,
-  AssetType,
-  assetItem,
-} from '@ali/lowcode-utils';
+import { AssetLevel, AssetLevels, AssetList, isAssetBundle, isAssetItem, AssetType, assetItem } from '@ali/lowcode-utils';
 import { isCSSUrl } from '@ali/lowcode-utils';
 import { BuiltinSimulatorRenderer } from './renderer';
 
@@ -24,7 +16,7 @@ export function createSimulator(
 
   const styles: any = {};
   const scripts: any = {};
-  AssetLevels.forEach((lv) => {
+  AssetLevels.forEach(lv => {
     styles[lv] = [];
     scripts[lv] = [];
   });
@@ -64,12 +56,12 @@ export function createSimulator(
   parseAssetList(vendors);
 
   const styleFrags = Object.keys(styles)
-    .map((key) => {
+    .map(key => {
       return styles[key].join('\n') + `<meta level="${key}" />`;
     })
     .join('');
   const scriptFrags = Object.keys(scripts)
-    .map((key) => {
+    .map(key => {
       return scripts[key].join('\n');
     })
     .join('');
@@ -80,7 +72,7 @@ export function createSimulator(
 </head><body>${scriptFrags}</body></html>`);
   doc.close();
 
-  return new Promise((resolve) => {
+  return new Promise(resolve => {
     if (win.SimulatorRenderer || host.renderer) {
       return resolve(win.SimulatorRenderer || host.renderer);
     }
diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts
index df9899965..d71715cc6 100644
--- a/packages/designer/src/builtin-simulator/host.ts
+++ b/packages/designer/src/builtin-simulator/host.ts
@@ -4,16 +4,7 @@ import Viewport from './viewport';
 import { createSimulator } from './create-simulator';
 import { Node, ParentalNode, DocumentModel, isNode, contains, isRootNode } from '../document';
 import ResourceConsumer from './resource-consumer';
-import {
-  AssetLevel,
-  Asset,
-  AssetList,
-  assetBundle,
-  assetItem,
-  AssetType,
-  isElement,
-  isFormEvent,
-} from '@ali/lowcode-utils';
+import { AssetLevel, Asset, AssetList, assetBundle, assetItem, AssetType, isElement, isFormEvent } from '@ali/lowcode-utils';
 import {
   DragObjectType,
   isShaken,
@@ -71,20 +62,6 @@ const defaultSimulatorUrl = (() => {
   return urls;
 })();
 
-const defaultRaxSimulatorUrl = (() => {
-  const publicPath = getPublicPath();
-  let urls;
-  const [_, prefix = '', dev] = /^(.+?)(\/js)?\/?$/.exec(publicPath) || [];
-  if (dev) {
-    urls = [`${prefix}/css/rax-simulator-renderer.css`, `${prefix}/js/rax-simulator-renderer.js`];
-  } else if (process.env.NODE_ENV === 'production') {
-    urls = [`${prefix}/rax-simulator-renderer.css`, `${prefix}/rax-simulator-renderer.js`];
-  } else {
-    urls = [`${prefix}/rax-simulator-renderer.css`, `${prefix}/rax-simulator-renderer.js`];
-  }
-  return urls;
-})();
-
 const defaultEnvironment = [
   // https://g.alicdn.com/mylib/??react/16.11.0/umd/react.production.min.js,react-dom/16.8.6/umd/react-dom.production.min.js,prop-types/15.7.2/prop-types.min.js
   assetItem(AssetType.JSText, 'window.React=parent.React;window.ReactDOM=parent.ReactDOM;', undefined, 'react'),
@@ -94,17 +71,6 @@ const defaultEnvironment = [
   ),
 ];
 
-const defaultRaxEnvironment = [
-  assetItem(
-    AssetType.JSText,
-    'window.Rax=parent.Rax;window.React=parent.React;window.ReactDOM=parent.ReactDOM;window.VisualEngineUtils=parent.VisualEngineUtils;window.VisualEngine=parent.VisualEngine',
-  ),
-  assetItem(
-    AssetType.JSText,
-    'window.PropTypes=parent.PropTypes;React.PropTypes=parent.PropTypes; window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;',
-  ),
-];
-
 export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProps> {
   readonly isSimulator = true;
 
@@ -112,10 +78,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
 
   readonly designer = this.document.designer;
 
-  @computed get renderEnv(): string {
-    return this.get('renderEnv') || 'default';
-  }
-
   @computed get device(): string {
     return this.get('device') || 'default';
   }
@@ -224,10 +186,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
 
     const vendors = [
       // required & use once
-      assetBundle(
-        this.get('environment') || this.renderEnv === 'rax' ? defaultRaxEnvironment : defaultEnvironment,
-        AssetLevel.Environment,
-      ),
+      assetBundle(this.get('environment') || defaultEnvironment, AssetLevel.Environment),
       // required & use once
       assetBundle(this.get('extraEnvironment'), AssetLevel.Environment),
       // required & use once
@@ -235,10 +194,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
       // required & TODO: think of update
       assetBundle(this.theme, AssetLevel.Theme),
       // required & use once
-      assetBundle(
-        this.get('simulatorUrl') || this.renderEnv === 'rax' ? defaultRaxSimulatorUrl : defaultSimulatorUrl,
-        AssetLevel.Runtime,
-      ),
+      assetBundle(this.get('simulatorUrl') || defaultSimulatorUrl, AssetLevel.Runtime),
     ];
 
     // wait 准备 iframe 内容、依赖库注入
@@ -370,12 +326,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
         x.initEvent('click', true);
         this._iframe?.dispatchEvent(x);
         const target = e.target as HTMLElement;
-        if (
-          isFormEvent(e) ||
-          target?.closest(
-            '.next-input-group,.next-checkbox-group,.next-date-picker,.next-input,.next-month-picker,.next-number-picker,.next-radio-group,.next-range,.next-range-picker,.next-rating,.next-select,.next-switch,.next-time-picker,.next-upload,.next-year-picker,.next-breadcrumb-item,.next-calendar-header,.next-calendar-table',
-          )
-        ) {
+        if (isFormEvent(e) || target?.closest('.next-input-group,.next-checkbox-group,.next-date-picker,.next-input,.next-month-picker,.next-number-picker,.next-radio-group,.next-range,.next-range-picker,.next-rating,.next-select,.next-switch,.next-time-picker,.next-upload,.next-year-picker,.next-breadcrumb-item,.next-calendar-header,.next-calendar-table')) {
           e.preventDefault();
           e.stopPropagation();
         }
@@ -441,9 +392,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
         }
         const node = nodeInst.node || this.document.rootNode;
 
-        const rootElement = this.findDOMNodes(nodeInst.instance, node.componentMeta.rootSelector)?.find((item) =>
-          item.contains(targetElement),
-        ) as HTMLElement;
+        const rootElement = this.findDOMNodes(nodeInst.instance, node.componentMeta.rootSelector)?.find(item => item.contains(targetElement)) as HTMLElement;
         if (!rootElement) {
           return;
         }
@@ -456,6 +405,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
       },
       true,
     );
+
   }
 
   /**
@@ -842,12 +792,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     this.sensing = true;
     this.scroller.scrolling(e);
     const dropContainer = this.getDropContainer(e);
-    if (
-      !dropContainer ||
-      // too dirty
-      (typeof dropContainer.container?.componentMeta?.prototype?.options?.canDropIn === 'function' &&
-        !dropContainer.container?.componentMeta?.prototype?.options?.canDropIn(e.dragObject.nodes[0]))
-    ) {
+    if (!dropContainer ||
+       // too dirty
+        (typeof dropContainer.container?.componentMeta?.prototype?.options?.canDropIn === 'function' &&
+          !dropContainer.container?.componentMeta?.prototype?.options?.canDropIn(e.dragObject.nodes[0]))) {
       return null;
     }
 
@@ -888,7 +836,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
         },
         source: 'simulator' + this.document.id,
         event: e,
-      });
+      }); 
     }
 
     if (!children || children.size < 1 || !edge) {
diff --git a/packages/designer/src/simulator.ts b/packages/designer/src/simulator.ts
index f051bc1f8..e383517e3 100644
--- a/packages/designer/src/simulator.ts
+++ b/packages/designer/src/simulator.ts
@@ -142,7 +142,7 @@ export interface ISimulatorHost<P = object> extends ISensor {
   computeComponentInstanceRect(instance: ComponentInstance, selector?: string): DOMRect | null;
 
   findDOMNodes(instance: ComponentInstance, selector?: string): Array<Element | Text> | null;
-
+  
   /**
    * 销毁
    */
diff --git a/packages/plugin-designer/src/index.tsx b/packages/plugin-designer/src/index.tsx
index 5d68132e2..aac7dab28 100644
--- a/packages/plugin-designer/src/index.tsx
+++ b/packages/plugin-designer/src/index.tsx
@@ -11,7 +11,6 @@ interface DesignerPluginState {
   componentMetadatas?: any[] | null;
   library?: any[] | null;
   extraEnvironment?: any[] | null;
-  renderEnv?: string;
 }
 
 export default class DesignerPlugin extends PureComponent<PluginProps, DesignerPluginState> {
@@ -21,7 +20,6 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
     componentMetadatas: null,
     library: null,
     extraEnvironment: null,
-    renderEnv: 'default',
   };
 
   private _mounted = true;
@@ -34,7 +32,6 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
   private async setupAssets() {
     const { editor } = this.props;
     const assets = await editor.onceGot('assets');
-    const renderEnv = await editor.onceGot('renderEnv');
     if (!this._mounted) {
       return;
     }
@@ -43,10 +40,9 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
       componentMetadatas: components || [],
       library: packages || [],
       extraEnvironment,
-      renderEnv,
     };
     this.setState(state);
-  }
+  };
 
   componentWillUnmount() {
     this._mounted = false;
@@ -63,7 +59,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
 
   render(): React.ReactNode {
     const { editor } = this.props;
-    const { componentMetadatas, library, extraEnvironment, renderEnv } = this.state;
+    const { componentMetadatas, library, extraEnvironment } = this.state;
 
     if (!library || !componentMetadatas) {
       // TODO: use a Loading
@@ -80,7 +76,6 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
         simulatorProps={{
           library,
           extraEnvironment,
-          renderEnv,
         }}
       />
     );
diff --git a/packages/rax-render/CHANGELOG.md b/packages/rax-render/CHANGELOG.md
index 646296f35..88562f678 100644
--- a/packages/rax-render/CHANGELOG.md
+++ b/packages/rax-render/CHANGELOG.md
@@ -26,7 +26,3 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Features
 
 * init rax-render ([7167767](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/7167767))
-                                              
-&&
-      &&
-|| 
\ No newline at end of file
diff --git a/packages/rax-render/package.json b/packages/rax-render/package.json
index 3d94e3d9f..ca349b08f 100644
--- a/packages/rax-render/package.json
+++ b/packages/rax-render/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@ali/lowcode-rax-renderer",
+  "name": "@ali/lowcode-engine-rax-renderer",
   "version": "0.1.2",
   "private": true,
   "description": "Rax renderer for Ali lowCode engine",
@@ -30,8 +30,7 @@
   },
   "scripts": {
     "start": "build-scripts start",
-    "prepublish": "npm run build",
-    "build": "build-scripts build"
+    "prepublish": "npm run build"
   },
   "dependencies": {
     "@ali/b3-one": "^0.0.17",
diff --git a/packages/rax-render/src/engine/base.jsx b/packages/rax-render/src/engine/base.jsx
index 101438235..95d1dcaff 100644
--- a/packages/rax-render/src/engine/base.jsx
+++ b/packages/rax-render/src/engine/base.jsx
@@ -2,7 +2,6 @@ import { Component, createElement } from 'rax';
 import PropTypes from 'prop-types';
 import Debug from 'debug';
 import View from 'rax-view';
-import classnames from 'classnames';
 import DataHelper from '../utils/dataHelper';
 import {
   forEach,
@@ -19,12 +18,10 @@ import {
   checkPropTypes,
   generateI18n,
   acceptsRef,
-  getFileCssName,
 } from '../utils';
 import VisualDom from '../comp/visualDom';
 import AppContext from '../context/appContext';
-
-// import CompWrapper from '../hoc/compWrapper';
+import CompWrapper from '../hoc/compWrapper';
 
 const debug = Debug('engine:base');
 const DESIGN_MODE = {
@@ -37,7 +34,6 @@ let scopeIdx = 0;
 
 export default class BaseEngine extends Component {
   static dislayName = 'base-engine';
-
   static propTypes = {
     locale: PropTypes.string,
     messages: PropTypes.object,
@@ -45,13 +41,11 @@ export default class BaseEngine extends Component {
     __components: PropTypes.object,
     __componentsMap: PropTypes.object,
     __ctx: PropTypes.object,
-    __schema: PropTypes.object,
+    __schema: PropTypes.object
   };
-
   static defaultProps = {
-    __schema: {},
+    __schema: {}
   };
-
   static contextType = AppContext;
 
   constructor(props, context) {
@@ -85,31 +79,32 @@ export default class BaseEngine extends Component {
     console.warn(e);
   }
 
-  reloadDataSource = () =>
-    new Promise((resolve, reject) => {
-    debug('reload data source');
-    if (!this.__dataHelper) {
-      this.__showPlaceholder = false;
-      return resolve();
-    }
-    this.__dataHelper
-      .getInitData()
-      .then((res) => {
+  reloadDataSource = () => {
+    return new Promise((resolve, reject) => {
+      debug('reload data source');
+      if (!this.__dataHelper) {
         this.__showPlaceholder = false;
-        if (isEmpty(res)) {
-          this.forceUpdate();
-          return resolve();
-        }
-        this.setState(res, resolve);
-      })
-      .catch((err) => {
-        if (this.__showPlaceholder) {
+        return resolve();
+      }
+      this.__dataHelper
+        .getInitData()
+        .then(res => {
           this.__showPlaceholder = false;
-          this.forceUpdate();
-        }
-        reject(err);
-      });
-  });
+          if (isEmpty(res)) {
+            this.forceUpdate();
+            return resolve();
+          }
+          this.setState(res, resolve);
+        })
+        .catch(err => {
+          if (this.__showPlaceholder) {
+            this.__showPlaceholder = false;
+            this.forceUpdate();
+          }
+          reject(err);
+        });
+    });
+  };
 
   __setLifeCycleMethods = (method, args) => {
     const lifeCycleMethods = getValue(this.props.__schema, 'lifeCycles', {});
@@ -126,7 +121,7 @@ export default class BaseEngine extends Component {
     const { __schema } = props;
     const customMethodsList = Object.keys(__schema.methods || {}) || [];
     this.__customMethodsList &&
-      this.__customMethodsList.forEach((item) => {
+      this.__customMethodsList.forEach(item => {
         if (!customMethodsList.includes(item)) {
           delete this[item];
         }
@@ -137,12 +132,12 @@ export default class BaseEngine extends Component {
     });
   };
 
-  __generateCtx = (ctx) => {
+  __generateCtx = ctx => {
     const { pageContext, compContext } = this.context;
     const obj = {
       page: pageContext,
       component: compContext,
-      ...ctx,
+      ...ctx
     };
     forEach(obj, (val, key) => {
       this[key] = val;
@@ -158,22 +153,19 @@ export default class BaseEngine extends Component {
     const schema = props.__schema || {};
     const appHelper = props.__appHelper;
     const dataSource = (schema && schema.dataSource) || {};
-    this.__dataHelper = new DataHelper(this, dataSource, appHelper, (config) => this.__parseData(config));
+    this.__dataHelper = new DataHelper(this, dataSource, appHelper, config => this.__parseData(config));
     this.dataSourceMap = this.__dataHelper.dataSourceMap;
     // 设置容器组件占位，若设置占位则在初始异步请求完成之前用loading占位且不渲染容器组件内部内容
-    if (this.__parseData(schema.props && schema.props.autoLoading)) {
-      this.__showPlaceholder = (dataSource.list || []).some((item) => !!this.__parseData(item.isInit));
-    }
-    // this.__showPlaceholder = this.__parseData(schema.props && schema.props.autoLoading) && (dataSource.list || []).some(
-    //   (item) => !!this.__parseData(item.isInit),
-    // );
+    this.__showPlaceholder =
+      this.__parseData(schema.props && schema.props.autoLoading) &&
+      (dataSource.list || []).some(item => !!this.__parseData(item.isInit));
   };
 
   __render = () => {
     const schema = this.props.__schema;
     this.__setLifeCycleMethods('render');
 
-    const { engine } = this.context;
+    const engine = this.context.engine;
     if (engine) {
       engine.props.onCompGetCtx(schema, this);
       // 画布场景才需要每次渲染bind自定义方法
@@ -184,10 +176,7 @@ export default class BaseEngine extends Component {
     }
   };
 
-  __getRef = (ref) => {
-    const { engine } = this.context;
-    const { __schema } = this.props;
-    engine && engine.props.onCompGetRef(__schema, ref);
+  __getRef = ref => {
     this.__ref = ref;
   };
 
@@ -197,7 +186,7 @@ export default class BaseEngine extends Component {
     self.__proto__ = __ctx || this;
     return this.__createVirtualDom(__schema.children, self, {
       schema: __schema,
-      Comp: __components[__schema.componentName],
+      Comp: __components[__schema.componentName]
     });
   };
 
@@ -211,7 +200,7 @@ export default class BaseEngine extends Component {
     // rax text prop 兼容处理
     if (schema.componentName === 'Text') {
       if (typeof schema.props.text === 'string') {
-        schema = { ...schema };
+        schema = Object.assign({}, schema);
         schema.children = [schema.props.text];
       }
     }
@@ -229,13 +218,13 @@ export default class BaseEngine extends Component {
     if (Array.isArray(schema)) {
       if (schema.length === 1) return this.__createVirtualDom(schema[0], self, parentInfo);
       return schema.map((item, idx) =>
-        this.__createVirtualDom(item, self, parentInfo, item && item.__ctx && item.__ctx.lunaKey ? '' : idx),
+        this.__createVirtualDom(item, self, parentInfo, item && item.__ctx && item.__ctx.lunaKey ? '' : idx)
       );
     }
 
-    // 解析占位组件
+    //解析占位组件
     if (schema.componentName === 'Flagment' && schema.children) {
-      const tarChildren = isJSExpression(schema.children) ? parseExpression(schema.children, self) : schema.children;
+      let tarChildren = isJSExpression(schema.children) ? parseExpression(schema.children, self) : schema.children;
       return this.__createVirtualDom(tarChildren, self, parentInfo);
     }
 
@@ -249,11 +238,11 @@ export default class BaseEngine extends Component {
       return this.__createLoopVirtualDom(
         {
           ...schema,
-          loop: parseData(schema.loop, self),
+          loop: parseData(schema.loop, self)
         },
         self,
         parentInfo,
-        idx,
+        idx
       );
     }
     const condition = schema.condition === undefined ? true : parseData(schema.condition, self);
@@ -269,7 +258,7 @@ export default class BaseEngine extends Component {
       } else if (!schema.__ctx) {
         // 在生产环境schema没有__ctx上下文，需要手动生成一个lunaKey
         schema.__ctx = {
-          lunaKey: `luna${++scopeIdx}`,
+          lunaKey: `luna${++scopeIdx}`
         };
         scopeKey = schema.__ctx.lunaKey;
       } else {
@@ -293,7 +282,7 @@ export default class BaseEngine extends Component {
           __schema: schema,
           __appHelper: appHelper,
           __components: components,
-          // __componentsMap: componentsMap,
+          __componentsMap: componentsMap
         }
       : {};
     if (engine && engine.props.designMode) {
@@ -305,20 +294,20 @@ export default class BaseEngine extends Component {
       Comp,
       componentInfo: {
         ...componentInfo,
-        props: transformArrayToMap(componentInfo.props, 'name'),
-      },
+        props: transformArrayToMap(componentInfo.props, 'name')
+      }
     });
     // 对于可以获取到ref的组件做特殊处理
-    if (acceptsRef(Comp)) {
-      otherProps.ref = (ref) => {
-        const refProps = props.ref;
-        if (refProps && typeof refProps === 'string') {
-          this[refProps] = ref;
-        }
-        engine && engine.props.onCompGetRef(schema, ref);
-      };
+    if (!acceptsRef(Comp)) {
+      Comp = CompWrapper(Comp);
     }
-
+    otherProps.ref = ref => {
+      const refProps = props.ref;
+      if (refProps && typeof refProps === 'string') {
+        this[refProps] = ref;
+      }
+      engine && engine.props.onCompGetRef(schema, ref);
+    };
     // scope需要传入到组件上
     if (scopeKey && this.__compScopes[scopeKey]) {
       props.__scope = this.__compScopes[scopeKey];
@@ -331,39 +320,24 @@ export default class BaseEngine extends Component {
     } else if (typeof idx === 'number' && !props.key) {
       props.key = idx;
     }
-    props.__id = schema.id;
-
-    let Child = null;
-    if (!isFileSchema(schema) && schema.children) {
-      Child = this.__createVirtualDom(
-        isJSExpression(schema.children) ? parseExpression(schema.children, self) : schema.children,
-        self,
-        {
-          schema,
-          Comp,
-        },
-      );
-    }
-
-    const renderComp = (props) => engine.createElement(
-        Comp,
-        props,
-        (!isFileSchema(schema)
-          && !!schema.children
-          &&
+    const renderComp = props => (
+      <Comp {...props}>
+        {(!isFileSchema(schema) &&
+          !!schema.children &&
           this.__createVirtualDom(
             isJSExpression(schema.children) ? parseExpression(schema.children, self) : schema.children,
             self,
             {
               schema,
-              Comp,
-            },
+              Comp
+            }
           )) ||
-          null,
-      );
-    // 设计模式下的特殊处理
+          null}
+      </Comp>
+    );
+    //设计模式下的特殊处理
     if (engine && [DESIGN_MODE.EXTEND, DESIGN_MODE.BORDER].includes(engine.props.designMode)) {
-      // 对于overlay,dialog等组件为了使其在设计模式下显示，外层需要增加一个div容器
+      //对于overlay,dialog等组件为了使其在设计模式下显示，外层需要增加一个div容器
       if (OVERLAY_LIST.includes(schema.componentName)) {
         const { ref, ...overlayProps } = otherProps;
         return (
@@ -399,56 +373,49 @@ export default class BaseEngine extends Component {
     return schema.loop.map((item, i) => {
       const loopSelf = {
         [itemArg]: item,
-        [indexArg]: i,
+        [indexArg]: i
       };
       loopSelf.__proto__ = self;
       return this.__createVirtualDom(
         {
           ...schema,
-          loop: undefined,
+          loop: undefined
         },
         loopSelf,
         parentInfo,
-        idx ? `${idx}_${i}` : i,
+        idx ? `${idx}_${i}` : i
       );
     });
   };
 
-  __createContextDom = (childCtx, currCtx, props) => (
-    <AppContext.Consumer>
-      {(context) => {
-        this.context = context;
-        this.__generateCtx(currCtx);
-        this.__render();
-        return (
-          <AppContext.Provider
-            value={{
-              ...this.context,
-              ...childCtx,
-            }}
-          >
-            {context.engine.createElement(
-              props.__components.Page,
-              {
-                ...props,
-                ref: this.__getRef,
-                className: classnames(getFileCssName(props.__schema.fileName), props.className),
-                __id: props.__schema.id,
-              },
-              this.__createDom(),
-            )}
-          </AppContext.Provider>
-        );
-      }}
-    </AppContext.Consumer>
-  );
+  __createContextDom = (childCtx, currCtx) => {
+    return (
+      <AppContext.Consumer>
+        {context => {
+          this.context = context;
+          this.__generateCtx(currCtx);
+          this.__render();
+          return (
+            <AppContext.Provider
+              value={{
+                ...this.context,
+                ...childCtx
+              }}
+            >
+              {this.__createDom()}
+            </AppContext.Provider>
+          );
+        }}
+      </AppContext.Consumer>
+    );
+  };
 
   __parseProps = (props, self, path, info) => {
     const { schema, Comp, componentInfo = {} } = info;
     const propInfo = getValue(componentInfo.props, path);
     const propType = propInfo && propInfo.extra && propInfo.extra.propType;
     const ignoreParse = schema.__ignoreParse || [];
-    const checkProps = (value) => {
+    const checkProps = value => {
       if (!propType) return value;
       return checkPropTypes(value, path, propType, componentInfo.name) ? value : undefined;
     };
@@ -456,26 +423,27 @@ export default class BaseEngine extends Component {
     const parseReactNode = (data, params) => {
       if (isEmpty(params)) {
         return checkProps(this.__createVirtualDom(data, self, { schema, Comp }));
+      } else {
+        return checkProps(function() {
+          const args = {};
+          if (Array.isArray(params) && params.length) {
+            params.map((item, idx) => {
+              if (typeof item === 'string') {
+                args[item] = arguments[idx];
+              } else if (item && typeof item === 'object') {
+                args[item.name] = arguments[idx];
+              }
+            });
+          }
+          args.__proto__ = self;
+          return self.__createVirtualDom(data, args, { schema, Comp });
+        });
       }
-      return checkProps(function() {
-        const args = {};
-        if (Array.isArray(params) && params.length) {
-          params.map((item, idx) => {
-            if (typeof item === 'string') {
-              args[item] = arguments[idx];
-            } else if (item && typeof item === 'object') {
-              args[item.name] = arguments[idx];
-            }
-          });
-        }
-        args.__proto__ = self;
-        return self.__createVirtualDom(data, args, { schema, Comp });
-      });
     };
 
     // 判断是否需要解析变量
     if (
-      ignoreParse.some((item) => {
+      ignoreParse.some(item => {
         if (item instanceof RegExp) {
           return item.test(path);
         }
@@ -501,14 +469,11 @@ export default class BaseEngine extends Component {
     // 兼容通过componentInfo判断的情况
     if (isSchema(props)) {
       return parseReactNode(props);
-    }
-    if (Array.isArray(props)) {
+    } else if (Array.isArray(props)) {
       return checkProps(props.map((item, idx) => this.__parseProps(item, self, path ? `${path}.${idx}` : idx, info)));
-    }
-    if (typeof props === 'function') {
+    } else if (typeof props === 'function') {
       return checkProps(props.bind(self));
-    }
-    if (props && typeof props === 'object') {
+    } else if (props && typeof props === 'object') {
       if (props.$$typeof) return checkProps(props);
       const res = {};
       forEach(props, (val, key) => {
@@ -519,8 +484,7 @@ export default class BaseEngine extends Component {
         res[key] = this.__parseProps(val, self, path ? `${path}.${key}` : key, info);
       });
       return checkProps(res);
-    }
-    if (typeof props === 'string') {
+    } else if (typeof props === 'string') {
       return checkProps(props.trim());
     }
     return checkProps(props);
@@ -529,19 +493,15 @@ export default class BaseEngine extends Component {
   get utils() {
     return this.appHelper && this.appHelper.utils;
   }
-
   get constants() {
     return this.appHelper && this.appHelper.constants;
   }
-
   get history() {
     return this.appHelper && this.appHelper.history;
   }
-
   get location() {
     return this.appHelper && this.appHelper.location;
   }
-
   get match() {
     return this.appHelper && this.appHelper.match;
   }
diff --git a/packages/rax-render/src/engine/blockEngine.jsx b/packages/rax-render/src/engine/blockEngine.jsx
index 718059244..ab986cc1a 100644
--- a/packages/rax-render/src/engine/blockEngine.jsx
+++ b/packages/rax-render/src/engine/blockEngine.jsx
@@ -9,17 +9,15 @@ const debug = Debug('engine:block');
 
 export default class BlockEngine extends BaseEngine {
   static dislayName = 'block-engine';
-
   static propTypes = {
-    __schema: PropTypes.object,
+    __schema: PropTypes.object
   };
-
   static defaultProps = {
-    __schema: {},
+    __schema: {}
   };
 
   static getDerivedStateFromProps(props, state) {
-    debug('block.getDerivedStateFromProps');
+    debug(`block.getDerivedStateFromProps`);
     const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps;
     if (func) {
       return func(props, state);
@@ -41,22 +39,18 @@ export default class BlockEngine extends BaseEngine {
     super.getSnapshotBeforeUpdate(...arguments);
     debug(`block.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`);
   }
-
   async componentDidMount() {
     super.componentDidMount(...arguments);
     debug(`block.componentDidMount - ${this.props.__schema.fileName}`);
   }
-
   async componentDidUpdate() {
     super.componentDidUpdate(...arguments);
     debug(`block.componentDidUpdate - ${this.props.__schema.fileName}`);
   }
-
   async componentWillUnmount() {
     super.componentWillUnmount(...arguments);
     debug(`block.componentWillUnmount - ${this.props.__schema.fileName}`);
   }
-
   async componentDidCatch() {
     await super.componentDidCatch(...arguments);
     debug(`block.componentDidCatch - ${this.props.__schema.fileName}`);
@@ -75,13 +69,13 @@ export default class BlockEngine extends BaseEngine {
 
     return (
       <div
-        // ref={this.__getRef}
+        ref={this.__getRef}
         className={classnames('luna-block', getFileCssName(__schema.fileName), className, this.props.className)}
         id={id}
         style={style}
       >
         {this.__createContextDom({
-          blockContext: this,
+          blockContext: this
         })}
       </div>
     );
diff --git a/packages/rax-render/src/engine/compEngine.jsx b/packages/rax-render/src/engine/compEngine.jsx
index 772071987..235ad4996 100644
--- a/packages/rax-render/src/engine/compEngine.jsx
+++ b/packages/rax-render/src/engine/compEngine.jsx
@@ -9,17 +9,15 @@ const debug = Debug('engine:comp');
 
 export default class CompEngine extends BaseEngine {
   static dislayName = 'comp-engine';
-
   static propTypes = {
-    __schema: PropTypes.object,
+    __schema: PropTypes.object
   };
-
   static defaultProps = {
-    __schema: {},
+    __schema: {}
   };
 
   static getDerivedStateFromProps(props, state) {
-    debug('comp.getDerivedStateFromProps');
+    debug(`comp.getDerivedStateFromProps`);
     const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps;
     if (func) {
       return func(props, state);
@@ -30,7 +28,7 @@ export default class CompEngine extends BaseEngine {
   constructor(props, context) {
     super(props, context);
     this.__generateCtx({
-      component: this,
+      component: this
     });
     const schema = props.__schema || {};
     this.state = this.__parseData(schema.state || {});
@@ -43,22 +41,18 @@ export default class CompEngine extends BaseEngine {
     super.getSnapshotBeforeUpdate(...arguments);
     debug(`comp.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`);
   }
-
   async componentDidMount() {
     super.componentDidMount(...arguments);
     debug(`comp.componentDidMount - ${this.props.__schema.fileName}`);
   }
-
   async componentDidUpdate() {
     super.componentDidUpdate(...arguments);
     debug(`comp.componentDidUpdate - ${this.props.__schema.fileName}`);
   }
-
   async componentWillUnmount() {
     super.componentWillUnmount(...arguments);
     debug(`comp.componentWillUnmount - ${this.props.__schema.fileName}`);
   }
-
   async componentDidCatch(e) {
     super.componentDidCatch(...arguments);
     debug(`comp.componentDidCatch - ${this.props.__schema.fileName}`);
@@ -73,25 +67,23 @@ export default class CompEngine extends BaseEngine {
 
     debug(`comp.render - ${__schema.fileName}`);
 
-    const {
- id, className, style, noContainer
-} = this.__parseData(__schema.props);
+    const { id, className, style, noContainer } = this.__parseData(__schema.props);
 
     if (noContainer) {
       return this.__createContextDom(
         {
           compContext: this,
-          blockContext: this,
+          blockContext: this
         },
         {
-          component: this,
-        },
+          component: this
+        }
       );
     }
 
     return (
       <div
-        // ref={this.__getRef}
+        ref={this.__getRef}
         className={classnames('luna-comp', getFileCssName(__schema.fileName), className, this.props.className)}
         id={this.props.id || id}
         style={{ ...style, ...this.props.style }}
@@ -99,11 +91,11 @@ export default class CompEngine extends BaseEngine {
         {this.__createContextDom(
           {
             compContext: this,
-            blockContext: this,
+            blockContext: this
           },
           {
-            component: this,
-          },
+            component: this
+          }
         )}
       </div>
     );
diff --git a/packages/rax-render/src/engine/index.jsx b/packages/rax-render/src/engine/index.jsx
index ae16ce761..7bbe0fad4 100644
--- a/packages/rax-render/src/engine/index.jsx
+++ b/packages/rax-render/src/engine/index.jsx
@@ -1,43 +1,24 @@
-/* eslint-disable */
-import { Component, createElement as raxCreateElement } from 'rax';
+import { Component, createElement } from 'rax';
 import PropTypes from 'prop-types';
 import Debug from 'debug';
 import * as isEmpty from 'lodash/isEmpty';
 import findDOMNode from 'rax-find-dom-node';
 import { isFileSchema, goldlog } from '../utils';
 import AppContext from '../context/appContext';
-import PageEngine from './pageEngine';
-import ComponentEngine from './compEngine';
-import BlockEngine from './blockEngine';
-import TempEngine from './tempEngine';
-import BaseEngine from './base';
+import Page from './pageEngine';
+import CustomComp from './compEngine';
+import Block from './blockEngine';
+import Temp from './tempEngine';
 
 const debug = Debug('engine:entry');
 const ENGINE_COMPS = {
-  PageEngine,
-  ComponentEngine,
-  BlockEngine,
-  TempEngine,
+  Page,
+  Component: CustomComp,
+  Block,
+  Temp,
 };
-
-class FaultComponent extends Component {
-  render() {
-    // FIXME: errorlog
-    console.error('render error', this.props);
-    return <Div>RenderError</Div>;
-  }
-}
-
-class NotFoundComponent extends Component {
-  render() {
-    console.error('component not found', this.props);
-    return <Div {...this.props} />;
-  }
-}
-
 export default class Engine extends Component {
   static dislayName = 'engine';
-
   static propTypes = {
     appHelper: PropTypes.object,
     components: PropTypes.object,
@@ -46,12 +27,8 @@ export default class Engine extends Component {
     suspended: PropTypes.bool,
     schema: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
     onCompGetRef: PropTypes.func,
-    onCompGetCtx: PropTypes.func,
-    customCreateElement: PropTypes.func,
-    notFoundComponent: PropTypes.element,
-    faultComponent: PropTypes.element,
+    onCompGetCtx: PropTypes.func
   };
-
   static defaultProps = {
     appHelper: null,
     components: {},
@@ -60,7 +37,7 @@ export default class Engine extends Component {
     suspended: false,
     schema: {},
     onCompGetRef: () => {},
-    onCompGetCtx: () => {},
+    onCompGetCtx: () => {}
   };
 
   constructor(props, context) {
@@ -74,9 +51,9 @@ export default class Engine extends Component {
       'EXP',
       {
         action: 'appear',
-        value: !!this.props.designMode,
+        value: !!this.props.designMode
       },
-      'engine',
+      'engine'
     );
     debug(`entry.componentDidMount - ${this.props.schema && this.props.schema.componentName}`);
   }
@@ -97,60 +74,15 @@ export default class Engine extends Component {
     return !nextProps.suspended;
   }
 
-  getNotFoundComponent() {
-    const { notFoundComponent } = this.props;
-    return notFoundComponent || NotFoundComponent;
-  }
-
-  getFaultComponent() {
-    const { faultComponent } = this.props;
-    return faultComponent || FaultComponent;
-  }
-
-  __getRef = (ref) => {
-    const { schema, onCompGetRef } = this.props;
+  __getRef = ref => {
     this.__ref = ref;
     if (ref) {
-      onCompGetRef(schema, ref, true);
+      this.props.onCompGetRef(this.props.schema, ref, true);
     }
   };
 
-  patchDidCatch(Comp) {
-    if (Comp.patchedCatch) {
-      return;
-    }
-    Comp.patchedCatch = true;// eslint-disable-line
-    Comp.getDerivedStateFromError = (error) => ({ engineRenderError: true, error });// eslint-disable-line
-    // const engine = this;
-    const originRender = Comp.prototype.render;
-    Comp.prototype.render = function() {
-      if (this.state && this.state.engineRenderError) {
-        this.state.engineRenderError = false;
-        return engine.createElement(engine.getFaultComponent(), {
-          ...this.props,
-          error: this.state.error,
-        });
-      }
-      return originRender.call(this);
-    };
-    const originShouldComponentUpdate = Comp.prototype.shouldComponentUpdate;
-    Comp.prototype.shouldComponentUpdate = (nextProps, nextState) => {// eslint-disable-line
-      if (nextState && nextState.engineRenderError) {
-        return true;
-      }
-      return originShouldComponentUpdate ? originShouldComponentUpdate.call(this, nextProps, nextState) : true;// eslint-disable-line
-    };
-  }
-
-  createElement(Comp, props, children) {
-    const { customCreateElement } = this.props;
-    // TODO: enable in runtime mode?
-    this.patchDidCatch(Component);
-    return (customCreateElement || raxCreateElement)(Comp, props, children);
-  }
-
   render() {
-    const { schema, designMode, appHelper, components } = this.props;
+    const { schema, designMode, appHelper, components, componentsMap } = this.props;
     if (isEmpty(schema)) {
       return null;
     }
@@ -159,22 +91,15 @@ export default class Engine extends Component {
     }
     debug('entry.render');
     const allComponents = { ...ENGINE_COMPS, ...components };
-    const { componentName } = schema;
-    // const Comp = allComponents[schema.componentName];
-    let Comp = allComponents[componentName] || ENGINE_COMPS[`${componentName}Engine`];
-    if (Comp && Comp.prototype) {
-      // const proto = Comp.prototype;
-      if (!(Comp.prototype instanceof BaseEngine)) {
-        Comp = ENGINE_COMPS[`${componentName}Engine`];
-      }
-    }
+    const Comp = allComponents[schema.componentName];
     if (Comp) {
       return (
         <AppContext.Provider
           value={{
             appHelper,
             components: allComponents,
-            engine: this,
+            componentsMap,
+            engine: this
           }}
         >
           <Comp
@@ -182,9 +107,9 @@ export default class Engine extends Component {
             ref={this.__getRef}
             __appHelper={appHelper}
             __components={allComponents}
+            __componentsMap={componentsMap}
             __schema={schema}
             __designMode={designMode}
-            // __id={schema.id}
             {...this.props}
           />
         </AppContext.Provider>
diff --git a/packages/rax-render/src/engine/pageEngine.jsx b/packages/rax-render/src/engine/pageEngine.jsx
index 464abf649..c09eaa265 100644
--- a/packages/rax-render/src/engine/pageEngine.jsx
+++ b/packages/rax-render/src/engine/pageEngine.jsx
@@ -2,7 +2,6 @@ import { createElement } from 'rax';
 import PropTypes from 'prop-types';
 import Debug from 'debug';
 import classnames from 'classnames';
-import AppContext from '../context/appContext';
 import { isSchema, getFileCssName } from '../utils';
 import BaseEngine from './base';
 
@@ -10,19 +9,15 @@ const debug = Debug('engine:page');
 
 export default class PageEngine extends BaseEngine {
   static dislayName = 'page-engine';
-
   static propTypes = {
-    __schema: PropTypes.object,
+    __schema: PropTypes.object
   };
-
   static defaultProps = {
-    __schema: {},
+    __schema: {}
   };
 
-  static contextType = AppContext;
-
   static getDerivedStateFromProps(props, state) {
-    debug('page.getDerivedStateFromProps');
+    debug(`page.getDerivedStateFromProps`);
     const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps;
     if (func) {
       return func(props, state);
@@ -33,11 +28,10 @@ export default class PageEngine extends BaseEngine {
   constructor(props, context) {
     super(props, context);
     this.__generateCtx({
-      page: this,
+      page: this
     });
     const schema = props.__schema || {};
     this.state = this.__parseData(schema.state || {});
-
     this.__initDataSource(props);
     this.__setLifeCycleMethods('constructor', arguments);
 
@@ -48,103 +42,31 @@ export default class PageEngine extends BaseEngine {
     super.getSnapshotBeforeUpdate(...arguments);
     debug(`page.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`);
   }
-
   async componentDidMount() {
     super.componentDidMount(...arguments);
     debug(`page.componentDidMount - ${this.props.__schema.fileName}`);
   }
-
   async componentDidUpdate() {
     super.componentDidUpdate(...arguments);
     debug(`page.componentDidUpdate - ${this.props.__schema.fileName}`);
   }
-
   async componentWillUnmount() {
     super.componentWillUnmount(...arguments);
     debug(`page.componentWillUnmount - ${this.props.__schema.fileName}`);
   }
-
   async componentDidCatch() {
     await super.componentDidCatch(...arguments);
     debug(`page.componentDidCatch - ${this.props.__schema.fileName}`);
   }
 
   render() {
-    const { __schema, __components } = this.props;
+    const { __schema } = this.props;
     if (!isSchema(__schema, true) || __schema.componentName !== 'Page') {
       return '页面schema结构异常！';
     }
     debug(`page.render - ${__schema.fileName}`);
 
-    const {
- id, className, style, autoLoading, defaultHeight = 300, loading
-} = this.__parseData(__schema.props);
-
-    const { Page } = __components;
-    if (Page) {
-      // const { engine } = this.context || {};
-      return (
-        <AppContext.Consumer>
-          {(context) => {
-            this.context = context;
-            {
-              /* this.__generateCtx(currCtx); */
-            }
-            this.__render();
-            return (
-              <AppContext.Provider
-                value={{
-                  ...this.context,
-                  pageContext: this,
-                  blockContext: this,
-                }}
-              >
-                {this.context.engine.createElement(
-                  Page,
-                  {
-                    ...this.props,
-                    ref: this.__getRef,
-                    className: classnames(getFileCssName(__schema.fileName), className, this.props.className),
-                    __id: __schema.id,
-                  },
-                  this.__createDom(),
-                )}
-              </AppContext.Provider>
-            );
-          }}
-        </AppContext.Consumer>
-      );
-    }
-
-    const renderContent = () => (
-      <AppContext.Provider
-        value={{
-          ...this.context,
-          pageContext: this,
-          blockContext: this,
-        }}
-      >
-        {this.__createDom()}
-      </AppContext.Provider>
-    );
-
-    // if (autoLoading || loading !== undefined) {
-    //   return (
-    //     <Loading
-    //       size="medium"
-    //       visible={!!(this.__showPlaceholder || loading)}
-    //       style={{
-    //         height: this.__showPlaceholder ? defaultHeight : 'auto',
-    //         display: 'block',
-    //         ...style,
-    //       }}
-    //       className={classnames('luna-page', getFileCssName(__schema.fileName), className, this.props.className)}
-    //       id={id}
-    //     >
-    //       {!this.__showPlaceholder && renderContent()}
-    //     </Loading>
-    //   );
-    // }
+    const { id, className, style } = this.__parseData(__schema.props);
 
     return (
       <div
@@ -153,7 +75,15 @@ export default class PageEngine extends BaseEngine {
         id={id}
         style={style}
       >
-        {renderContent()}
+        {this.__createContextDom(
+          {
+            pageContext: this,
+            blockContext: this
+          },
+          {
+            page: this
+          }
+        )}
       </div>
     );
   }
diff --git a/packages/rax-render/src/engine/tempEngine.jsx b/packages/rax-render/src/engine/tempEngine.jsx
index 582ab1ee0..b55436320 100644
--- a/packages/rax-render/src/engine/tempEngine.jsx
+++ b/packages/rax-render/src/engine/tempEngine.jsx
@@ -8,15 +8,13 @@ import BaseEngine from './base';
 const debug = Debug('engine:temp');
 export default class TempEngine extends BaseEngine {
   static dislayName = 'temp-engine';
-
   static propTypes = {
     __ctx: PropTypes.object,
-    __schema: PropTypes.object,
+    __schema: PropTypes.object
   };
-
   static defaultProps = {
     __ctx: {},
-    __schema: {},
+    __schema: {}
   };
 
   constructor(props, context) {
@@ -29,7 +27,7 @@ export default class TempEngine extends BaseEngine {
   componentDidMount() {
     const ctx = this.props.__ctx;
     if (!ctx) return;
-    const { setState } = ctx;
+    const setState = ctx.setState;
     this.cacheSetState = setState;
     ctx.setState = (...args) => {
       setState.call(ctx, ...args);
@@ -37,11 +35,9 @@ export default class TempEngine extends BaseEngine {
     };
     debug(`temp.componentDidMount - ${this.props.__schema.fileName}`);
   }
-
   componentDidUpdate(prevProps, prevState, snapshot) {
     debug(`temp.componentDidUpdate - ${this.props.__schema.fileName}`);
   }
-
   componentWillUnmount() {
     const ctx = this.props.__ctx;
     if (!ctx || !this.cacheSetState) return;
@@ -49,7 +45,6 @@ export default class TempEngine extends BaseEngine {
     delete this.cacheSetState;
     debug(`temp.componentWillUnmount - ${this.props.__schema.fileName}`);
   }
-
   componentDidCatch(e) {
     console.warn(e);
     debug(`temp.componentDidCatch - ${this.props.__schema.fileName}`);
@@ -64,10 +59,7 @@ export default class TempEngine extends BaseEngine {
     debug(`temp.render - ${__schema.fileName}`);
 
     return (
-      <div
-        // ref={this.__getRef}
-        className="luna-temp"
-      >
+      <div ref={this.__getRef} className="luna-temp">
         <AppContext.Provider value={{ ...this.context, ...__ctx }}>{this.__createDom()}</AppContext.Provider>
       </div>
     );
diff --git a/packages/rax-render/src/hoc/compWrapper.js b/packages/rax-render/src/hoc/compWrapper.js
index e9af5b3d7..4f55a6683 100644
--- a/packages/rax-render/src/hoc/compWrapper.js
+++ b/packages/rax-render/src/hoc/compWrapper.js
@@ -1,15 +1,13 @@
 import { createElement, Component } from 'rax';
 
-export default function (Comp) {
+export default function(Comp) {
   class CompWrapper extends Component {
     constructor(props, context) {
       super(props, context);
     }
 
     render() {
-      return createElement(Comp, {
-        ...this.props,
-      });
+      return <Comp {...this.props} />;
     }
   }
 
diff --git a/packages/rax-render/src/utils/index.js b/packages/rax-render/src/utils/index.js
index 802d5733d..814f1edc9 100644
--- a/packages/rax-render/src/utils/index.js
+++ b/packages/rax-render/src/utils/index.js
@@ -30,9 +30,7 @@ export const throttle = _throttle;
 export const debounce = _debounce;
 export const serialize = _serialize;
 export const jsonuri = _jsonuri;
-export {
- get, post, jsonp, mtop, request
-} from './request';
+export { get, post, jsonp, mtop, request } from './request';
 
 const ReactIs = require('react-is');
 
@@ -45,18 +43,18 @@ const PropTypes2 = factoryWithTypeCheckers(ReactIs.isElement, true);
 const EXPRESSION_TYPE = {
   JSEXPRESSION: 'JSExpression',
   JSFUNCTION: 'JSFunction',
-  JSSLOT: 'JSSlot',
+  JSSLOT: 'JSSlot'
 };
 const EXPRESSION_REG = /^\{\{(\{.*\}|.*?)\}\}$/;
-const hasSymbol = typeof Symbol === 'function' && Symbol.for;
-const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+const hasSymbol = typeof Symbol === 'function' && Symbol['for'];
+const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol['for']('react.forward_ref') : 0xead0;
 const debug = Debug('utils:index');
 
 const ENV = {
   TBE: 'TBE',
   WEBIDE: 'WEB-IDE',
   VSCODE: 'VSCODE',
-  WEB: 'WEB',
+  WEB: 'WEB'
 };
 
 /**
@@ -65,7 +63,7 @@ const ENV = {
  */
 export function isSchema(schema, ignoreArr) {
   if (isEmpty(schema)) return false;
-  if (!ignoreArr && Array.isArray(schema)) return schema.every((item) => isSchema(item));
+  if (!ignoreArr && Array.isArray(schema)) return schema.every(item => isSchema(item));
   return !!(schema.componentName && schema.props && (typeof schema.props === 'object' || isJSExpression(schema.props)));
 }
 
@@ -85,10 +83,10 @@ export function inSameDomain() {
 
 export function getFileCssName(fileName) {
   if (!fileName) return;
-  const name = fileName.replace(/([A-Z])/g, '-$1').toLowerCase();
-  return `luna-${name}`
+  let name = fileName.replace(/([A-Z])/g, '-$1').toLowerCase();
+  return ('luna-' + name)
     .split('-')
-    .filter((p) => !!p)
+    .filter(p => !!p)
     .join('-');
 }
 
@@ -99,8 +97,9 @@ export function isJSFunction(obj) {
   return obj && typeof obj === 'object' && EXPRESSION_TYPE.JSFUNCTION === obj.type;
 }
 export function isJSExpression(obj) {
-  // 兼容两种写法，有js构造表达式的情况
-  const isJSExpressionObj =    obj && typeof obj === 'object' && EXPRESSION_TYPE.JSEXPRESSION === obj.type && typeof obj.value === 'string';
+  //兼容两种写法，有js构造表达式的情况
+  const isJSExpressionObj =
+    obj && typeof obj === 'object' && EXPRESSION_TYPE.JSEXPRESSION === obj.type && typeof obj.value === 'string';
   const isJSExpressionStr = typeof obj === 'string' && EXPRESSION_REG.test(obj.trim());
   return isJSExpressionObj || isJSExpressionStr;
 }
@@ -110,11 +109,13 @@ export function isJSExpression(obj) {
  * @description 等待函数
  */
 export function wait(ms) {
-  return new Promise((resolve) => setTimeout(() => resolve(true), ms));
+  return new Promise(resolve => setTimeout(() => resolve(true), ms));
 }
 
 export function curry(Comp, hocs = []) {
-  return hocs.reverse().reduce((pre, cur) => cur(pre), Comp);
+  return hocs.reverse().reduce((pre, cur) => {
+    return cur(pre);
+  }, Comp);
 }
 
 /**
@@ -129,14 +130,16 @@ export function getParentWinValue(key) {
 
 export function getValue(obj, path, defaultValue) {
   if (isEmpty(obj) || typeof obj !== 'object') return defaultValue;
-  const res = path.split('.').reduce((pre, cur) => pre && pre[cur], obj);
+  const res = path.split('.').reduce((pre, cur) => {
+    return pre && pre[cur];
+  }, obj);
   if (res === undefined) return defaultValue;
   return res;
 }
 
 export function parseObj(schemaStr) {
   if (typeof schemaStr !== 'string') return schemaStr;
-  // 默认调用顶层窗口的parseObj,保障new Function的window对象是顶层的window对象
+  //默认调用顶层窗口的parseObj,保障new Function的window对象是顶层的window对象
   try {
     if (inSameDomain() && window.parent.__newFunc) {
       return window.parent.__newFunc(`"use strict"; return ${schemaStr}`)();
@@ -154,7 +157,7 @@ export function parseSearch(search) {
   const str = search.replace(/^\?/, '');
   const paramStr = str.split('&');
   const res = {};
-  paramStr.forEach((item) => {
+  paramStr.forEach(item => {
     const regRes = item.split('=');
     if (regRes[0] && regRes[1]) {
       res[regRes[0]] = decodeURIComponent(regRes[1]);
@@ -169,7 +172,7 @@ export function fastClone(obj) {
 
 // 更新obj的内容但不改变obj的指针
 export function fillObj(receiver = {}, ...suppliers) {
-  Object.keys(receiver).forEach((item) => {
+  Object.keys(receiver).forEach(item => {
     delete receiver[item];
   });
   Object.assign(receiver, ...suppliers);
@@ -178,7 +181,9 @@ export function fillObj(receiver = {}, ...suppliers) {
 
 // 中划线转驼峰
 export function toHump(name) {
-  return name.replace(/\-(\w)/g, (all, letter) => letter.toUpperCase());
+  return name.replace(/\-(\w)/g, function(all, letter) {
+    return letter.toUpperCase();
+  });
 }
 // 驼峰转中划线
 export function toLine(name) {
@@ -187,7 +192,7 @@ export function toLine(name) {
 
 // 获取当前环境
 export function getEnv() {
-  const { userAgent } = navigator;
+  const userAgent = navigator.userAgent;
   const isVscode = /Electron\//.test(userAgent);
   if (isVscode) return ENV.VSCODE;
   const isTheia = window.is_theia === true;
@@ -201,14 +206,12 @@ export function getEnv() {
  * @param {*} 用户自定义配置
  */
 export function comboSkeletonConfig(defaultConfig = {}, customConfig) {
-  const {
- skeleton, theme, addons, hooks, shortCuts, extensions, constants, utils, i18n
-} = customConfig || {};
+  const { skeleton, theme, addons, hooks, shortCuts, extensions, constants, utils, i18n } = customConfig || {};
 
   if (skeleton && skeleton.handler && typeof skeleton.handler === 'function') {
     return skeleton.handler({
       skeleton,
-      ...defaultConfig,
+      ...defaultConfig
     });
   }
 
@@ -216,37 +219,37 @@ export function comboSkeletonConfig(defaultConfig = {}, customConfig) {
   const customShortCuts = transformArrayToMap(shortCuts || [], 'keyboard');
   const localeList = ['zh-CN', 'zh-TW', 'en-US', 'ja-JP'];
   const i18nConfig = {};
-  localeList.forEach((key) => {
+  localeList.forEach(key => {
     i18nConfig[key] = {
       ...(defaultConfig.i18n && defaultConfig.i18n[key]),
-      ...(i18n && i18n[key]),
+      ...(i18n && i18n[key])
     };
   });
   return {
     skeleton,
     theme: {
       ...defaultConfig.theme,
-      ...theme,
+      ...theme
     },
     addons: {
       ...defaultConfig.addons,
-      ...addons,
+      ...addons
     },
     hooks: [...(defaultConfig.hooks || []), ...(hooks || [])],
     shortCuts: Object.values({
       ...defaultShortCuts,
-      ...customShortCuts,
+      ...customShortCuts
     }),
     extensions: {
       ...defaultConfig.extensions,
-      ...extensions,
+      ...extensions
     },
     constants: {
       ...defaultConfig.constants,
-      ...constants,
+      ...constants
     },
     utils: [...(defaultConfig.utils || []), ...(utils || [])],
-    i18n: i18nConfig,
+    i18n: i18nConfig
   };
 }
 
@@ -268,7 +271,9 @@ export function generateI18n(locale = 'zh-CN', messages = {}) {
  * @param {*} Comp 需要判断的组件
  */
 export function acceptsRef(Comp) {
-  return !!Comp;
+  return (
+    (Comp.$$typeof && Comp.$$typeof === REACT_FORWARD_REF_TYPE) || (Comp.prototype && Comp.prototype.isReactComponent)
+  );
 }
 
 /**
@@ -283,7 +288,7 @@ export function goldlog(gmKey, params = {}, logKey = 'other') {
   const goKey = serializeParams({
     sdkVersion: pkg.version,
     env: getEnv(),
-    ...params,
+    ...params
   });
   if (sendIDEMessage) {
     sendIDEMessage({
@@ -291,8 +296,8 @@ export function goldlog(gmKey, params = {}, logKey = 'other') {
       data: {
         logKey: `/iceluna.core.${logKey}`,
         gmKey,
-        goKey,
-      },
+        goKey
+      }
     });
   }
   window.goldlog && window.goldlog.record(`/iceluna.core.${logKey}`, gmKey, goKey, 'POST');
@@ -302,7 +307,7 @@ export function goldlog(gmKey, params = {}, logKey = 'other') {
 export function generateUtils(utils, utilsConfig) {
   if (!Array.isArray(utilsConfig)) return { ...utils };
   const res = {};
-  utilsConfig.forEach((item) => {
+  utilsConfig.forEach(item => {
     if (!item.name || !item.type || !item.content) return;
     if (item.type === 'function' && typeof item.content === 'function') {
       res[item.name] = item.content;
@@ -322,7 +327,7 @@ export function setClipboardData(str) {
         .then(() => {
           resolve();
         })
-        .catch((err) => {
+        .catch(err => {
           reject('复制失败，请重试！', err);
         });
     } else {
@@ -332,7 +337,7 @@ export function setClipboardData(str) {
       textArea.focus();
       textArea.select();
       try {
-        const successful = document.execCommand('copy');
+        let successful = document.execCommand('copy');
         if (successful) {
           document.body.removeChild(textArea);
           resolve();
@@ -352,10 +357,10 @@ export function getClipboardData() {
     } else if (navigator.clipboard) {
       return navigator.clipboard
         .readText()
-        .then((res) => {
+        .then(res => {
           resolve(res);
         })
-        .catch((err) => {
+        .catch(err => {
           reject('粘贴板获取失败', err);
         });
     } else {
@@ -377,15 +382,14 @@ export function transformToPromise(input) {
 
 export function moveArrayItem(arr, sourceIdx, distIdx, direction) {
   if (
-    !Array.isArray(arr)
-    || sourceIdx === distIdx
-    || sourceIdx < 0
-    || sourceIdx >= arr.length
-    || distIdx < 0
-    || distIdx >= arr.length
-  ) {
+    !Array.isArray(arr) ||
+    sourceIdx === distIdx ||
+    sourceIdx < 0 ||
+    sourceIdx >= arr.length ||
+    distIdx < 0 ||
+    distIdx >= arr.length
+  )
     return arr;
-  }
   const item = arr[sourceIdx];
   if (direction === 'after') {
     arr.splice(distIdx + 1, 0, item);
@@ -403,7 +407,7 @@ export function moveArrayItem(arr, sourceIdx, distIdx, direction) {
 export function transformArrayToMap(arr, key, overwrite = true) {
   if (isEmpty(arr) || !Array.isArray(arr)) return {};
   const res = {};
-  arr.forEach((item) => {
+  arr.forEach(item => {
     const curKey = item[key];
     if (item[key] === undefined) return;
     if (res[curKey] && !overwrite) return;
@@ -422,13 +426,13 @@ export function checkPropTypes(value, name, rule, componentName) {
   }
   const err = rule(
     {
-      [name]: value,
+      [name]: value
     },
     name,
     componentName,
     'prop',
     null,
-    ReactPropTypesSecret,
+    ReactPropTypesSecret
   );
   if (err) {
     console.warn(err);
@@ -437,11 +441,10 @@ export function checkPropTypes(value, name, rule, componentName) {
 }
 
 export function transformSchemaToPure(obj) {
-  const pureObj = (obj) => {
+  const pureObj = obj => {
     if (Array.isArray(obj)) {
-      return obj.map((item) => pureObj(item));
-    }
-    if (typeof obj === 'object') {
+      return obj.map(item => pureObj(item));
+    } else if (typeof obj === 'object') {
       // 对于undefined及null直接返回
       if (!obj) return obj;
       const res = {};
@@ -457,11 +460,10 @@ export function transformSchemaToPure(obj) {
 }
 
 export function transformSchemaToStandard(obj) {
-  const standardObj = (obj) => {
+  const standardObj = obj => {
     if (Array.isArray(obj)) {
-      return obj.map((item) => standardObj(item));
-    }
-    if (typeof obj === 'object') {
+      return obj.map(item => standardObj(item));
+    } else if (typeof obj === 'object') {
       // 对于undefined及null直接返回
       if (!obj) return obj;
       const res = {};
@@ -470,7 +472,7 @@ export function transformSchemaToStandard(obj) {
         if (isSchema(val) && key !== 'children' && obj.type !== 'JSSlot') {
           res[key] = {
             type: 'JSSlot',
-            value: standardObj(val),
+            value: standardObj(val)
           };
           // table特殊处理
           if (key === 'cell') {
@@ -481,18 +483,16 @@ export function transformSchemaToStandard(obj) {
         }
       });
       return res;
-    }
-    if (typeof obj === 'function') {
+    } else if (typeof obj === 'function') {
       return {
         type: 'JSFunction',
-        value: obj.toString(),
+        value: obj.toString()
       };
-    }
-    if (typeof obj === 'string' && EXPRESSION_REG.test(obj.trim())) {
+    } else if (typeof obj === 'string' && EXPRESSION_REG.test(obj.trim())) {
       const regRes = obj.trim().match(EXPRESSION_REG);
       return {
         type: 'JSExpression',
-        value: (regRes && regRes[1]) || '',
+        value: (regRes && regRes[1]) || ''
       };
     }
     return obj;
@@ -504,8 +504,9 @@ export function transformStringToFunction(str) {
   if (typeof str !== 'string') return str;
   if (inSameDomain() && window.parent.__newFunc) {
     return window.parent.__newFunc(`"use strict"; return ${str}`)();
+  } else {
+    return new Function(`"use strict"; return ${str}`)();
   }
-  return new Function(`"use strict"; return ${str}`)();
 }
 
 export function addCssTag(id, content) {
@@ -523,11 +524,11 @@ export function addCssTag(id, content) {
 
 // 注册快捷
 export function registShortCuts(config, appHelper) {
-  const keyboardFilter = (keymaster.filter = (event) => {
+  const keyboardFilter = (keymaster.filter = event => {
     const eTarget = event.target || event.srcElement;
-    const { tagName } = eTarget;
+    const tagName = eTarget.tagName;
     const isInput = !!(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
-    const isContenteditable = (target) => {
+    const isContenteditable = target => {
       while (target) {
         if (target.contentEditable === 'true') return true;
         target = target.parentNode;
@@ -535,23 +536,24 @@ export function registShortCuts(config, appHelper) {
       return false;
     };
     if (isInput || isContenteditable(eTarget)) {
-      if (event.metaKey === true && [70, 83].includes(event.keyCode)) event.preventDefault(); // 禁止触发chrome原生的页面保存或查找
+      if (event.metaKey === true && [70, 83].includes(event.keyCode)) event.preventDefault(); //禁止触发chrome原生的页面保存或查找
       return false;
+    } else {
+      return true;
     }
-    return true;
   });
 
   const ideMessage = appHelper.utils && appHelper.utils.ideMessage;
 
-  // 复制
+  //复制
   if (!document.copyListener) {
-    document.copyListener = (e) => {
+    document.copyListener = e => {
       if (!keyboardFilter(e) || appHelper.isCopying) return;
       const schema = appHelper.schemaHelper && appHelper.schemaHelper.schemaMap[appHelper.activeKey];
       if (!schema || !isSchema(schema)) return;
       appHelper.isCopying = true;
       const schemaStr = serialize(transformSchemaToPure(schema), {
-        unsafe: true,
+        unsafe: true
       });
       setClipboardData(schemaStr)
         .then(() => {
@@ -559,7 +561,7 @@ export function registShortCuts(config, appHelper) {
           appHelper.emit('schema.copy', schemaStr, schema);
           appHelper.isCopying = false;
         })
-        .catch((errMsg) => {
+        .catch(errMsg => {
           ideMessage && ideMessage('error', errMsg);
           appHelper.isCopying = false;
         });
@@ -570,16 +572,16 @@ export function registShortCuts(config, appHelper) {
     }
   }
 
-  // 粘贴
+  //粘贴
   if (!document.pasteListener) {
     const doPaste = (e, text) => {
       if (!keyboardFilter(e) || appHelper.isPasting) return;
-      const { schemaHelper } = appHelper;
+      const schemaHelper = appHelper.schemaHelper;
       let targetKey = appHelper.activeKey;
       let direction = 'after';
       const topKey = schemaHelper.schema && schemaHelper.schema.__ctx && schemaHelper.schema.__ctx.lunaKey;
       if (!targetKey || topKey === targetKey) {
-        const { schemaHelper } = appHelper;
+        const schemaHelper = appHelper.schemaHelper;
         const topKey = schemaHelper.schema && schemaHelper.schema.__ctx && schemaHelper.schema.__ctx.lunaKey;
         if (!topKey) return;
         targetKey = topKey;
@@ -597,36 +599,36 @@ export function registShortCuts(config, appHelper) {
       appHelper.emit('material.add', {
         schema,
         targetKey,
-        direction,
+        direction
       });
       appHelper.isPasting = false;
       appHelper.emit('schema.paste', schema);
     };
-    document.pasteListener = (e) => {
+    document.pasteListener = e => {
       const clipboardData = e.clipboardData || window.clipboardData;
       const text = clipboardData && clipboardData.getData('text');
       doPaste(e, text);
     };
     document.addEventListener('paste', document.pasteListener);
     if (getParentWinValue('vscode')) {
-      keymaster('command+v', (e) => {
+      keymaster('command+v', e => {
         const sendIDEMessage = getParentWinValue('sendIDEMessage');
-        sendIDEMessage
-          && sendIDEMessage({
-            action: 'readClipboard',
+        sendIDEMessage &&
+          sendIDEMessage({
+            action: 'readClipboard'
           })
-            .then((text) => {
+            .then(text => {
               doPaste(e, text);
             })
-            .catch((err) => {
+            .catch(err => {
               console.warn(err);
             });
       });
     }
   }
 
-  (config || []).forEach((item) => {
-    keymaster(item.keyboard, (ev) => {
+  (config || []).forEach(item => {
+    keymaster(item.keyboard, ev => {
       ev.preventDefault();
       item.handler(ev, appHelper, keymaster);
     });
@@ -635,7 +637,7 @@ export function registShortCuts(config, appHelper) {
 
 // 取消注册快捷
 export function unRegistShortCuts(config) {
-  (config || []).forEach((item) => {
+  (config || []).forEach(item => {
     keymaster.unbind(item.keyboard);
   });
   if (getParentWinValue('vscode')) {
@@ -655,17 +657,13 @@ export function unRegistShortCuts(config) {
 export function parseData(schema, self) {
   if (isJSExpression(schema)) {
     return parseExpression(schema, self);
-  }
-  if (typeof schema === 'string') {
+  } else if (typeof schema === 'string') {
     return schema.trim();
-  }
-  if (Array.isArray(schema)) {
-    return schema.map((item) => parseData(item, self));
-  }
-  if (typeof schema === 'function') {
+  } else if (Array.isArray(schema)) {
+    return schema.map(item => parseData(item, self));
+  } else if (typeof schema === 'function') {
     return schema.bind(self);
-  }
-  if (typeof schema === 'object') {
+  } else if (typeof schema === 'object') {
     // 对于undefined及null直接返回
     if (!schema) return schema;
     const res = {};
@@ -678,13 +676,13 @@ export function parseData(schema, self) {
   return schema;
 }
 
-/* 全匹配{{开头,}}结尾的变量表达式，或者对象类型JSExpression，且均不支持省略this */
+/*全匹配{{开头,}}结尾的变量表达式，或者对象类型JSExpression，且均不支持省略this */
 export function parseExpression(str, self) {
   try {
     const contextArr = ['"use strict";', 'var __self = arguments[0];'];
     contextArr.push('return ');
     let tarStr;
-    // 向前兼容，支持标准协议新格式
+    //向前兼容，支持标准协议新格式
     if (typeof str === 'string') {
       const regRes = str.trim().match(EXPRESSION_REG);
       tarStr = regRes[1];
@@ -693,7 +691,7 @@ export function parseExpression(str, self) {
     }
     tarStr = tarStr.replace(/this(\W|$)/g, (a, b) => `__self${b}`);
     tarStr = contextArr.join('\n') + tarStr;
-    // 默认调用顶层窗口的parseObj,保障new Function的window对象是顶层的window对象
+    //默认调用顶层窗口的parseObj,保障new Function的window对象是顶层的window对象
     if (inSameDomain() && window.parent.__newFunc) {
       return window.parent.__newFunc(tarStr)(self);
     }
@@ -709,13 +707,12 @@ export function parseExpression(str, self) {
  * @param {*} componentInfo
  */
 export function hasReactNodeFuncProps(componentInfo) {
-  const isReactNodeFuncProps = (config) => {
+  const isReactNodeFuncProps = config => {
     if (config.type === 'ReactNode') {
       return config.props && config.props.type === 'function';
-    }
-    if (config.type === 'Mixin') {
+    } else if (config.type === 'Mixin') {
       return config.props && config.props.reactNodeProps && config.props.reactNodeProps.type === 'function';
     }
   };
-  return componentInfo && (componentInfo.props || []).some((item) => isReactNodeFuncProps(item));
+  return componentInfo && (componentInfo.props || []).some(item => isReactNodeFuncProps(item));
 }
diff --git a/packages/rax-simulator-renderer/build.json b/packages/rax-simulator-renderer/build.json
deleted file mode 100644
index 84a86c4e6..000000000
--- a/packages/rax-simulator-renderer/build.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "plugins": [
-    [
-      "build-plugin-rax-component",
-      {
-        "type": "rax",
-        "targets": ["web"]
-      }
-    ],
-    [
-      "build-plugin-component",
-      {
-        "filename": "rax-simulator-renderer",
-        "library": "SimulatorRenderer",
-        "libraryExport": "default",
-        "libraryTarget": "umd"
-      }
-    ],
-    "./build.plugin.js"
-  ]
-}
diff --git a/packages/rax-simulator-renderer/build.plugin.js b/packages/rax-simulator-renderer/build.plugin.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/rax-simulator-renderer/package.json b/packages/rax-simulator-renderer/package.json
deleted file mode 100644
index 3a357390b..000000000
--- a/packages/rax-simulator-renderer/package.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
-  "private": true,
-  "name": "@ali/lowcode-rax-simulator-renderer",
-  "version": "0.8.29",
-  "description": "rax simulator renderer for alibaba lowcode designer",
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "license": "MIT",
-  "files": [],
-  "scripts": {
-    "cloud-build": "build-scripts build --skip-demo",
-    "test": "ava",
-    "test:snapshot": "ava --update-snapshots"
-  },
-  "dependencies": {
-    "@ali/lowcode-designer": "^0.9.23",
-    "@ali/lowcode-react-renderer": "^0.8.12",
-    "@ali/lowcode-types": "^0.8.9",
-    "@ali/lowcode-utils": "^0.8.10",
-    "@ali/recore-rax": "^1.2.4",
-    "@ali/vu-css-style": "^1.0.2",
-    "@recore/obx": "^1.0.8",
-    "@recore/obx-react": "^1.0.7",
-    "classnames": "^2.2.6",
-    "driver-universal": "^3.1.3",
-    "lodash": "^4.17.19",
-    "react": "^16",
-    "react-dom": "^16.7.0"
-  },
-  "devDependencies": {
-    "@alib/build-scripts": "^0.1.18",
-    "@recore/obx": "^1.0.8",
-    "@types/classnames": "^2.2.7",
-    "@types/node": "^13.7.1",
-    "@types/rax": "^1.0.0",
-    "@types/react": "^16",
-    "@types/react-dom": "^16",
-    "build-plugin-component": "^0.2.11"
-  },
-  "peerDependencies": {
-    "rax": "^1.1.0"
-  },
-  "ava": {
-    "compileEnhancements": false,
-    "snapshotDir": "test/fixtures/__snapshots__",
-    "extensions": [
-      "ts"
-    ],
-    "require": [
-      "ts-node/register"
-    ]
-  }
-}
diff --git a/packages/rax-simulator-renderer/src/builtin-components/Leaf/index.tsx b/packages/rax-simulator-renderer/src/builtin-components/Leaf/index.tsx
deleted file mode 100644
index f7fd13c5c..000000000
--- a/packages/rax-simulator-renderer/src/builtin-components/Leaf/index.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import { Component, createElement } from 'rax';
-import findDOMNode from 'rax-find-dom-node';
-import { each, get, omit } from 'lodash';
-import { getView, setNativeNode, createNodeStyleSheet } from '../renderUtils';
-
-import { FaultComponent, HiddenComponent, UnknownComponent } from '../UnusualComponent';
-
-export interface ILeaf {
-  leaf: any;
-}
-export default class Leaf extends Component<ILeaf, {}> {
-  static displayName = 'Leaf';
-
-  state = {
-    hasError: false,
-  };
-
-  willDetach: any[];
-
-  styleSheet: any;
-
-  context: any;
-  refs: any;
-
-  componentWillMount() {
-    const { leaf } = this.props;
-    this.willDetach = [
-      leaf.onPropsChange(() => {
-        // 强制刷新
-        this.setState(this.state);
-      }),
-      leaf.onChildrenChange(() => {
-        // 强制刷新
-        this.setState(this.state);
-      }),
-      leaf.onStatusChange((status: { dropping: boolean }, field: string) => {
-        // console.log({...status}, field)
-        if (status.dropping !== false) {
-          // 当 dropping 为 Insertion 对象时，强制渲染会出错，原因待查
-          return;
-        }
-        if (field === 'dragging' || field === 'dropping' || field === 'pseudo' || field === 'visibility') {
-          // 强制刷新
-          this.setState(this.state);
-        }
-      }),
-    ];
-
-    /**
-     * while props replaced
-     * bind the new event on it
-     */
-    leaf.onPropsReplace(() => {
-      this.willDetach[0]();
-      this.willDetach[0] = leaf.onPropsChange(() => {
-        // 强制刷新
-        this.setState(this.state);
-      });
-    });
-  }
-
-  componentDidMount() {
-    this.modifyDOM();
-  }
-
-  shouldComponentUpdate() {
-    // forceUpdate 的替代方案
-    return true;
-    // const pageCanRefresh = this.leaf.getPage().canRefresh();
-    // if (pageCanRefresh) {
-    //   return pageCanRefresh;
-    // }
-    // const getExtProps = obj => {
-    //   const { leaf, ...props } = obj;
-    //   return props;
-    // };
-    // return !shallowEqual(getExtProps(this.props), getExtProps(nextProps));
-  }
-
-  componentDidUpdate() {
-    this.modifyDOM();
-  }
-
-  componentWillUnmount() {
-    if (this.willDetach) {
-      this.willDetach.forEach((off) => off());
-    }
-    setNativeNode(this.props.leaf, null);
-  }
-
-  componentDidCatch() {
-    this.setState({ hasError: true }, () => {
-      console.log('error');
-    });
-  }
-
-  modifyDOM() {
-    const shell = findDOMNode(this);
-    const { leaf } = this.props;
-    // 与 React 不同，rax 的 findDOMNode 找不到节点时，
-    // shell 会是 <!-- empty -->，而不是 null，
-    // 所以这里进行是否为注释的判断
-    if (shell && shell.nodeType !== window.Node.COMMENT_NODE) {
-      setNativeNode(leaf, shell);
-      if (leaf.getStatus('dragging')) {
-        get(shell, 'classList').add('engine-dragging');
-      } else {
-        get(shell, 'classList').remove('engine-dragging');
-      }
-      each(get(shell, 'classList'), (cls) => {
-        if (cls.substring(0, 8) === '-pseudo-') {
-          get(shell, 'classList').remove(cls);
-        }
-      });
-      const pseudo = leaf.getStatus('pseudo');
-      if (pseudo) {
-        get(shell, 'classList').add(`-pseudo-${pseudo}`);
-      }
-    } else {
-      setNativeNode(leaf, null);
-    }
-  }
-
-  render() {
-    const props = omit(this.props, ['leaf']);
-    const { leaf } = this.props;
-    const componentName = leaf.getComponentName();
-
-    const View = getView(componentName);
-
-    const newProps = {
-      _componentName: componentName,
-    };
-
-    if (!View) {
-      return createElement(UnknownComponent, {
-        // _componentName: componentName,
-        ...newProps,
-      });
-    }
-
-    let staticProps = {
-      ...leaf.getStaticProps(false),
-      ...props,
-      _componentName: componentName,
-      _leaf: leaf,
-      componentId: leaf.getId(),
-    };
-
-    if (!leaf.isVisibleInPane()) {
-      return null;
-    }
-
-    if (!leaf.isVisible()) {
-      return createElement(HiddenComponent, {
-        ...staticProps,
-      });
-    }
-
-    if (this.state.hasError) {
-      return createElement(FaultComponent, {
-        // _componentName: componentName,
-        ...newProps,
-      });
-    }
-
-    if (this.styleSheet) {
-      this.styleSheet.parentNode.removeChild(this.styleSheet);
-    }
-
-    this.styleSheet = createNodeStyleSheet(staticProps);
-
-    if (leaf.ableToModifyChildren()) {
-      const children = leaf
-        .getChildren()
-        .filter((child: any) => child.getComponentName() !== 'Slot')
-        .map((child: any) =>
-          createElement(Leaf, {
-            key: child.getId(),
-            leaf: child,
-          }),
-        );
-      // const insertion = leaf.getStatus('dropping');
-      // InsertionGhost 都是React节点,用Rax渲染会报错，后面这些节点需要通过Rax组件来实现
-      // if (children.length < 1 && insertion && insertion.getIndex() !== null) {
-
-      //   //children = [];
-      //   children = [<InsertionGhost key="insertion" />];
-      // } else if (insertion && insertion.isNearEdge()) {
-      //   if (insertion.isNearAfter()) {
-      //     children.push(<InsertionGhost key="insertion" />);
-      //   } else {
-      //     children.unshift(<InsertionGhost key="insertion" />);
-      //   }
-      // }
-      staticProps = {
-        ...staticProps,
-        ...this.processSlots(this.props.leaf.getChildren()),
-      };
-
-      return createElement(
-        View,
-        {
-          ...staticProps,
-        },
-        children,
-      );
-    }
-
-    return createElement(View, {
-      ...staticProps,
-    });
-  }
-
-  processSlots(children: Rax.RaxNodeArray) {
-    const slots: any = {};
-    children &&
-      children.length &&
-      children.forEach((child: any) => {
-        if (child.getComponentName() === 'Slot') {
-          slots[child.getPropValue('slotName')] = <Leaf key={child.getId()} leaf={child} />;
-        }
-      });
-    return slots;
-  }
-}
diff --git a/packages/rax-simulator-renderer/src/builtin-components/UnusualComponent/index.less b/packages/rax-simulator-renderer/src/builtin-components/UnusualComponent/index.less
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/rax-simulator-renderer/src/builtin-components/UnusualComponent/index.tsx b/packages/rax-simulator-renderer/src/builtin-components/UnusualComponent/index.tsx
deleted file mode 100644
index 6608942c4..000000000
--- a/packages/rax-simulator-renderer/src/builtin-components/UnusualComponent/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Component } from 'rax';
-import lg from '@ali/vu-logger';
-
-import './index.less';
-
-export class UnknownComponent extends Component {
-  props: {
-    _componentName: string;
-  };
-
-  render() {
-    lg.log('ERROR_NO_COMPONENT_VIEW');
-    lg.error('Error component information:', this.props);
-    return <div className="engine-unknow-component">组件 {this.props._componentName} 无视图，请打开控制台排查</div>;
-  }
-}
-
-export class FaultComponent extends Component {
-  props: {
-    _componentName: string;
-  };
-
-  render() {
-    return <div className="engine-fault-component">组件 {this.props._componentName} 渲染错误，请打开控制台排查</div>;
-  }
-}
-
-export class HiddenComponent extends Component {
-  render() {
-    return <div className="engine-hidden-component">在本页面不显示</div>;
-  }
-}
-
-export default { FaultComponent, HiddenComponent, UnknownComponent };
diff --git a/packages/rax-simulator-renderer/src/builtin-components/renderUtils.ts b/packages/rax-simulator-renderer/src/builtin-components/renderUtils.ts
deleted file mode 100644
index 2f7ebadcb..000000000
--- a/packages/rax-simulator-renderer/src/builtin-components/renderUtils.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import isObject from 'lodash/isObject';
-import { toCss } from '@ali/vu-css-style';
-
-const engine = (window as any).VisualEngine;
-const { Trunk, Viewport } = engine;
-
-export const NativeNodeCache: any = {};
-
-function ucfirst(s: string) {
-  return s.charAt(0).toUpperCase() + s.substring(1);
-}
-
-export function shallowEqual(obj: { [key: string]: string }, tObj: { [key: string]: string }) {
-  for (const i in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, i) && obj[i] !== tObj[i]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-export function createNodeStyleSheet(props: any) {
-  if (props && props.fieldId) {
-    let styleProp = props.__style__;
-
-    if (isObject(styleProp)) {
-      styleProp = toCss(styleProp);
-    }
-
-    if (typeof styleProp === 'string') {
-      const s = document.createElement('style');
-      const cssId = '_style_pesudo_' + props.fieldId;
-      const cssClass = '_css_pesudo_' + props.fieldId;
-
-      props.className = cssClass;
-      s.setAttribute('type', 'text/css');
-      s.setAttribute('id', cssId);
-      document.getElementsByTagName('head')[0].appendChild(s);
-
-      s.appendChild(
-        document.createTextNode(
-          styleProp
-            .replace(/(\d+)rpx/g, (a, b) => {
-              return `${b / 2}px`;
-            })
-            .replace(/:root/g, '.' + cssClass),
-        ),
-      );
-      return s;
-    }
-  }
-}
-
-export function setNativeNode(leaf: any, node: Rax.RaxNode) {
-  const id = leaf.getId();
-  if (NativeNodeCache[id] === node) {
-    return;
-  }
-  NativeNodeCache[id] = node;
-  leaf.mountChange();
-}
-
-export function getView(componentName: string) {
-  // let view = new Trunk().getPrototypeView(componentName);
-  let view = Trunk.getPrototypeView(componentName);
-  if (!view) {
-    return null;
-  }
-  const viewport = Viewport.getViewport();
-  if (viewport) {
-    const [mode, device] = viewport.split('-', 2).map(ucfirst);
-    if (view.hasOwnProperty(device)) {
-      view = view[device];
-    }
-
-    if (view.hasOwnProperty(mode)) {
-      view = view[mode];
-    }
-  }
-
-  return view;
-}
diff --git a/packages/rax-simulator-renderer/src/host.ts b/packages/rax-simulator-renderer/src/host.ts
deleted file mode 100644
index c74bbd71d..000000000
--- a/packages/rax-simulator-renderer/src/host.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// NOTE: 仅做类型标注，切勿做其它用途
-import { BuiltinSimulatorHost } from '@ali/lowcode-designer';
-
-export const host: BuiltinSimulatorHost = (window as any).LCSimulatorHost;
diff --git a/packages/rax-simulator-renderer/src/image.d.ts b/packages/rax-simulator-renderer/src/image.d.ts
deleted file mode 100644
index 7f2a09665..000000000
--- a/packages/rax-simulator-renderer/src/image.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'rax-find-dom-node';
diff --git a/packages/rax-simulator-renderer/src/index.ts b/packages/rax-simulator-renderer/src/index.ts
deleted file mode 100644
index 3a8872665..000000000
--- a/packages/rax-simulator-renderer/src/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import renderer from './renderer';
-
-if (typeof window !== 'undefined') {
-  (window as any).SimulatorRenderer = renderer;
-}
-
-export default renderer;
diff --git a/packages/rax-simulator-renderer/src/obx-rax/derivation.ts b/packages/rax-simulator-renderer/src/obx-rax/derivation.ts
deleted file mode 100644
index 58e415cdd..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/derivation.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-import { IObservable, IDepTreeNode, addObserver, removeObserver } from './observable/observable';
-import { globalState } from './ global-state';
-
-export enum DerivationState {
-  // before being run or (outside batch and not being observed)
-  // at this point derivation is not holding any data about dependency tree
-  NOT_TRACKING = -1,
-  // no shallow dependency changed since last computation
-  // won't recalculate derivation
-  UP_TO_DATE = 0,
-  // don't have to recompute on every dependency change, but only when it's needed
-  MYBE_DIRTY = 1,
-  // A shallow dependency has changed since last computation and the derivation
-  // will need to recompute when it's needed next.
-  DIRTY = 2,
-}
-
-export interface IDerivation extends IDepTreeNode {
-  observing: IObservable[];
-  dependenciesState: DerivationState;
-  newObserving?: null | IObservable[];
-  runId?: number; // Id of the current run of a derivation.
-  unboundDepsCount?: number; // amount of dependencies used by the derivation in this run, which has not been bound yet.
-  onBecomeDirty(): void;
-}
-
-export class CaughtException {
-  constructor(public cause: any) {
-    // Empty
-  }
-}
-
-export function isCaughtException(e: any): e is CaughtException {
-  return e instanceof CaughtException;
-}
-
-interface ModifiedValue {
-  ifModified(): void;
-}
-
-export function isModifiedValue(v: any): v is ModifiedValue {
-  return v.ifModified ? true : false;
-}
-
-export function shouldCompute(derivation: IDerivation): boolean {
-  switch (derivation.dependenciesState) {
-    case DerivationState.UP_TO_DATE:
-      return false;
-    case DerivationState.NOT_TRACKING:
-    case DerivationState.DIRTY:
-      return true;
-    case DerivationState.MYBE_DIRTY: {
-      const prevUntracked = untrackedStart();
-      const obs = derivation.observing;
-      const l = obs.length;
-      for (let i = 0; i < l; i++) {
-        const obj = obs[i];
-        if (isModifiedValue(obj)) {
-          obj.ifModified();
-        }
-
-        if ((derivation.dependenciesState as any) === DerivationState.DIRTY) {
-          untrackedEnd(prevUntracked);
-          return true;
-        }
-      }
-      changeDependenciesStateTo0(derivation);
-      untrackedEnd(prevUntracked);
-      return false;
-    }
-  }
-}
-
-export function runDerivedFunction(derivation: IDerivation, f: (...args: any[]) => any, context?: any) {
-  const prevTracking = globalState.trackingDerivation;
-  // pre allocate array allocation + room for variation in deps
-  derivation.newObserving = new Array(derivation.observing.length + 100);
-  derivation.unboundDepsCount = 0;
-  derivation.runId = ++globalState.runId;
-  globalState.trackingDerivation = derivation;
-  let result;
-  try {
-    result = f.call(context);
-  } catch (e) {
-    result = new CaughtException(e);
-  }
-  globalState.trackingDerivation = prevTracking;
-  changeDependenciesStateTo0(derivation);
-  bindDependencies(derivation);
-  return result;
-}
-
-function bindDependencies(derivation: IDerivation) {
-  const prevObserving = derivation.observing;
-  const observing = (derivation.observing = derivation.newObserving!);
-  let lowestNewObservingDerivationState = DerivationState.UP_TO_DATE;
-
-  // Go through all new observables and check diffValue: (this list can contain duplicates):
-  //   0: first occurrence, change to 1 and keep it
-  //   1: extra occurrence, drop it
-  let i0 = 0;
-  let l = derivation.unboundDepsCount!;
-  for (let i = 0; i < l; i++) {
-    const dep = observing[i];
-    if (!dep.diffFlag) {
-      dep.diffFlag = true;
-      if (i0 !== i) {
-        observing[i0] = dep;
-      }
-      i0++;
-    }
-
-    // Upcast is 'safe' here, because if dep is IObservable, `dependenciesState` will be undefined,
-    // not hitting the condition
-    if (((dep as any) as IDerivation).dependenciesState > lowestNewObservingDerivationState) {
-      lowestNewObservingDerivationState = ((dep as any) as IDerivation).dependenciesState;
-    }
-  }
-  observing.length = i0;
-
-  derivation.newObserving = null;
-  // Go through all old observables and check diffValue: (it is unique after last bindDependencies)
-  //   0: it's not in new observables, unobserve it
-  //   1: it keeps being observed, don't want to notify it. change to 0
-  l = prevObserving.length;
-  while (l--) {
-    const dep = prevObserving[l];
-    if (!dep.diffFlag) {
-      removeObserver(dep, derivation);
-    }
-    dep.diffFlag = false;
-  }
-
-  // Go through all new observables and check diffValue: (now it should be unique)
-  //   0: it was set to 0 in last loop. don't need to do anything.
-  //   1: it wasn't observed, let's observe it. set back to 0
-  while (i0--) {
-    const dep = observing[i0];
-    if (dep.diffFlag) {
-      dep.diffFlag = false;
-      addObserver(dep, derivation);
-    }
-  }
-
-  // Some new observed derivations may become stale during this derivation computation
-  // so they have had no chance to propagate staleness (#916)
-  if (lowestNewObservingDerivationState !== DerivationState.UP_TO_DATE) {
-    derivation.dependenciesState = lowestNewObservingDerivationState;
-    derivation.onBecomeDirty();
-  }
-}
-
-export function clearObserving(derivation: IDerivation) {
-  const obs = derivation.observing;
-  derivation.observing = [];
-  let i = obs.length;
-  while (i--) {
-    removeObserver(obs[i], derivation);
-  }
-
-  derivation.dependenciesState = DerivationState.NOT_TRACKING;
-}
-
-export function untracked<T>(action: () => T): T {
-  const prev = untrackedStart();
-  const res = action();
-  untrackedEnd(prev);
-  return res;
-}
-
-export function untrackedStart(): IDerivation | null {
-  const prev = globalState.trackingDerivation;
-  globalState.trackingDerivation = null;
-  return prev;
-}
-
-export function untrackedEnd(prev: IDerivation | null) {
-  globalState.trackingDerivation = prev;
-}
-
-export function changeDependenciesStateTo0(derivation: IDerivation) {
-  if (derivation.dependenciesState === DerivationState.UP_TO_DATE) {
-    return;
-  }
-  derivation.dependenciesState = DerivationState.UP_TO_DATE;
-
-  const obs = derivation.observing;
-  let i = obs.length;
-  while (i--) {
-    obs[i].lowestObserverState = DerivationState.UP_TO_DATE;
-  }
-}
-
-export function setDerivationDirty(derivation: IDerivation) {
-  if (derivation.dependenciesState === DerivationState.UP_TO_DATE) {
-    derivation.onBecomeDirty();
-  }
-  derivation.dependenciesState = DerivationState.DIRTY;
-}
-
-export function setDerivationMybeDirty(derivation: IDerivation) {
-  if (derivation.dependenciesState === DerivationState.UP_TO_DATE) {
-    derivation.onBecomeDirty();
-  }
-  derivation.dependenciesState = DerivationState.MYBE_DIRTY;
-}
-
-export function resetDerivationState(derivation: IDerivation) {
-  derivation.dependenciesState = DerivationState.NOT_TRACKING;
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/global-state.ts b/packages/rax-simulator-renderer/src/obx-rax/global-state.ts
deleted file mode 100644
index 7b6542172..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/global-state.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { IDerivation } from './derivation';
-import { Reaction } from './reaction';
-import { IObservable } from './observable/observable';
-
-export class Globals {
-  /**
-   * Currently running derivation
-   */
-  trackingDerivation: IDerivation | null = null;
-
-  /**
-   * Are we running a computation currently? (not a reaction)
-   */
-  computationDepth = 0;
-
-  /**
-   * Each time a derivation is tracked, it is assigned a unique run-id
-   */
-  runId = 0;
-
-  /**
-   * 'guid' for general purpose. Will be persisted amongst resets.
-   */
-  guid = 0;
-
-  /**
-   * Are we in a batch block? (and how many of them)
-   */
-  inBatch = 0;
-
-  /**
-   * Observables that don't have observers anymore
-   */
-  pendingUnobservations: IObservable[] = [];
-
-  /**
-   * List of scheduled, not yet executed, reactions.
-   */
-  pendingReactions: Reaction[] = [];
-
-  /**
-   * Are we currently processing reactions?
-   */
-  isRunningReactions = false;
-
-  /**
-   * disable dynamic observe
-   */
-  dynamicObserveDisabled = false;
-
-  reset() {
-    this.trackingDerivation = null;
-    this.computationDepth = 0;
-    this.runId = 0;
-    this.guid = 0;
-    this.inBatch = 0;
-    this.pendingUnobservations = [];
-    this.pendingReactions = [];
-    this.isRunningReactions = false;
-    this.dynamicObserveDisabled = false;
-  }
-}
-
-export const globalState: Globals = new Globals();
-
-export function getGlobalState(): Globals {
-  return globalState;
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/next-tick.ts b/packages/rax-simulator-renderer/src/obx-rax/next-tick.ts
deleted file mode 100644
index a5a2f4af9..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/next-tick.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-const callbacks: Array<() => void> = [];
-let pending = false;
-
-function flush() {
-  pending = false;
-  const copies = callbacks.slice(0);
-  callbacks.length = 0;
-  for (const fn of copies) {
-    fn();
-  }
-}
-
-let timerFlush: () => void;
-if (typeof process === 'object' && process.nextTick) {
-  timerFlush = () => process.nextTick(flush);
-} else if (typeof Promise === 'function') {
-  // tslint:disable-line
-  const timer = Promise.resolve(); // tslint:disable-line
-  timerFlush = () => {
-    timer.then(flush);
-    // if (isIOS) setTimeout(noop)
-  };
-} else if (typeof MessageChannel === 'function') {
-  const channel = new MessageChannel();
-  const port = channel.port2;
-  channel.port1.onmessage = flush;
-  timerFlush = () => {
-    port.postMessage(1);
-  };
-} else {
-  timerFlush = () => {
-    setTimeout(flush, 0);
-  };
-}
-
-export function clearTicks() {
-  callbacks.length = 0;
-}
-
-export function nextTick(callback?: () => void): Promise<any> {
-  let _resovle: () => void;
-
-  callbacks.push(() => {
-    callback && callback();
-    _resovle();
-  });
-
-  if (!pending) {
-    pending = true;
-    timerFlush();
-  }
-
-  return new Promise((resolve) => {
-    _resovle = resolve;
-  });
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/observable/compare.ts b/packages/rax-simulator-renderer/src/obx-rax/observable/compare.ts
deleted file mode 100644
index 1b4481a89..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/observable/compare.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { getProxiedValue } from './proxy';
-
-export function is(a: any, b: any) {
-  return getProxiedValue(a) === getProxiedValue(b);
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/observable/observable.ts b/packages/rax-simulator-renderer/src/obx-rax/observable/observable.ts
deleted file mode 100644
index 951f15f4c..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/observable/observable.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import { isObject } from 'lodash/isObject';
-import { nextId } from '../utils';
-import { DerivationState, IDerivation, setDerivationDirty } from '../derivation';
-import { globalState } from '../ global-state';
-import Obx, { hasObx, getObx, injectObx, ObxFlag } from './obx';
-
-export interface IDepTreeNode {
-  id: string;
-  name: string;
-  observing: IObservable[];
-}
-
-export interface IObservable extends IDepTreeNode {
-  diffFlag?: boolean;
-
-  observers: Set<IDerivation>;
-
-  // Used to avoid redundant propagations
-  lowestObserverState: DerivationState;
-  // Used to push itself to global.pendingUnobservations at most once per batch.
-  isPendingUnobservation?: boolean;
-
-  // Id of the derivation *run* that last accessed this observable.
-  lastAccessedBy?: number;
-  isBeingObserved?: boolean;
-  onBecomeUnobserved(): void;
-}
-
-export function addObserver(observable: IObservable, node: IDerivation) {
-  observable.observers.add(node);
-
-  if (observable.lowestObserverState > node.dependenciesState) {
-    observable.lowestObserverState = node.dependenciesState;
-  }
-}
-
-export function removeObserver(observable: IObservable, node: IDerivation) {
-  observable.observers.delete(node);
-  if (observable.observers.size === 0) {
-    // deleting last observer
-    queueForUnobservation(observable);
-  }
-}
-
-export function queueForUnobservation(observable: IObservable) {
-  if (!observable.isPendingUnobservation) {
-    observable.isPendingUnobservation = true;
-    globalState.pendingUnobservations.push(observable);
-  }
-}
-
-export function startBatch() {
-  globalState.inBatch++;
-}
-
-export function endBatch() {
-  if (--globalState.inBatch === 0) {
-    // the batch is actually about to finish, all unobserving should happen here.
-    const list = globalState.pendingUnobservations;
-    for (let i = 0; i < list.length; i++) {
-      const observable = list[i];
-      observable.isPendingUnobservation = false;
-      if (observable.observers.size === 0) {
-        if (observable.isBeingObserved) {
-          // if this observable had reactive observers, trigger the hooks
-          observable.isBeingObserved = false;
-          observable.onBecomeUnobserved();
-        }
-      }
-    }
-    globalState.pendingUnobservations = [];
-  }
-}
-
-export function reportObserved(observable: IObservable): void {
-  const derivation = globalState.trackingDerivation;
-  if (!derivation) {
-    return;
-  }
-
-  if (derivation.runId !== observable.lastAccessedBy) {
-    observable.lastAccessedBy = derivation.runId;
-    derivation.newObserving![derivation.unboundDepsCount!++] = observable;
-    if (!observable.isBeingObserved) {
-      observable.isBeingObserved = true;
-    }
-  }
-}
-
-export function propagateChanged(observable: IObservable, force = false) {
-  if (observable.lowestObserverState === DerivationState.DIRTY && !force) {
-    return;
-  }
-  observable.lowestObserverState = DerivationState.DIRTY;
-  observable.observers.forEach((d) => setDerivationDirty(d));
-}
-
-export function propagateChangeConfirmed(observable: IObservable) {
-  if (observable.lowestObserverState === DerivationState.DIRTY) {
-    return;
-  }
-  observable.lowestObserverState = DerivationState.DIRTY;
-
-  observable.observers.forEach((d) => {
-    if (d.dependenciesState === DerivationState.MYBE_DIRTY) {
-      d.dependenciesState = DerivationState.DIRTY;
-    } else if (d.dependenciesState === DerivationState.UP_TO_DATE) {
-      observable.lowestObserverState = DerivationState.UP_TO_DATE;
-    }
-  });
-}
-
-export function propagateMaybeChanged(observable: IObservable) {
-  if (observable.lowestObserverState !== DerivationState.UP_TO_DATE) {
-    return;
-  }
-  observable.lowestObserverState = DerivationState.MYBE_DIRTY;
-
-  observable.observers.forEach((d) => {
-    if (d.dependenciesState === DerivationState.UP_TO_DATE) {
-      d.dependenciesState = DerivationState.MYBE_DIRTY;
-      d.onBecomeDirty();
-    }
-  });
-}
-
-export function asObservable(thing: any, obxFlag: ObxFlag): Obx | undefined {
-  if (!isObject(thing)) {
-    return;
-  }
-
-  if (hasObx(thing)) {
-    return getObx(thing);
-  }
-
-  if (!Object.isExtensible(thing)) {
-    return;
-  }
-
-  const name = (thing.constructor.name || 'ObservableObject') + '@' + nextId();
-  const ObxContructor = (asObservable as any).getObxContructor(thing);
-  const obx = ObxContructor ? new ObxContructor(name, thing, obxFlag) : null;
-
-  if (obx) {
-    injectObx(thing, obx);
-    return obx;
-  }
-}
-
-(asObservable as any).getObxContructor = () => Obx;
-
-export function observeIterable(items: Iterable<any>, obxFlag: ObxFlag): void {
-  for (const n of items) {
-    asObservable(n, obxFlag);
-  }
-}
-
-export function reportPropValue(propValue: any, propFlag: ObxFlag): void {
-  if (propValue == null) return;
-
-  const x = propFlag > ObxFlag.REF ? asObservable(propValue, propFlag) : getObx(propValue);
-
-  if (x) {
-    reportObserved(x);
-  }
-}
-
-export function reportChildValue(propValue: any, ownerFlag: ObxFlag): void {
-  if (propValue == null) return;
-
-  const x =
-    ownerFlag > ObxFlag.VAL
-      ? asObservable(propValue, ownerFlag === ObxFlag.DEEP ? ObxFlag.DEEP : ObxFlag.VAL)
-      : getObx(propValue);
-
-  if (x) {
-    reportObserved(x);
-  }
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/observable/obx-array.ts b/packages/rax-simulator-renderer/src/obx-rax/observable/obx-array.ts
deleted file mode 100644
index 14641de65..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/observable/obx-array.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import { addHiddenProp } from '../utils';
-import { observeIterable, reportChildValue } from './observable';
-import { supportProxy, isProxied, createProxy, SYMBOL_PROXY, SYMBOL_RAW, getProxiedValue, getRawValue } from './proxy';
-import Obx, { getObx, SYMBOL_OBX, ObxFlag } from './obx';
-import { setPrototypeOf } from '../../utils/set-prototype-of';
-
-export function childFlag(flag: ObxFlag) {
-  return flag === ObxFlag.DEEP ? ObxFlag.DEEP : ObxFlag.VAL;
-}
-
-function isValidArrayIndex(val: any, limit: number = -1): boolean {
-  const n = parseFloat(String(val));
-  return n >= 0 && Math.floor(n) === n && isFinite(val) && (limit < 0 || n < limit);
-}
-
-export default class ObxArray extends Obx<any[]> {
-  constructor(name: string, target: any[], obxFlag: ObxFlag = ObxFlag.DEEP) {
-    super(name, target, obxFlag);
-
-    if (supportProxy) {
-      this.target = createProxy(target, arrayProxyTraps);
-    } else if (obxFlag > ObxFlag.VAL) {
-      observeIterable(target, childFlag(obxFlag));
-    }
-    setPrototypeOf(target, arrayMethods);
-  }
-
-  set(key: PropertyKey, val: any) {
-    const target = this.target;
-    if (isValidArrayIndex(key)) {
-      const index = Number(key);
-      target.length = Math.max(target.length, index);
-      target.splice(index, 1, val);
-      return;
-    }
-    super.set(key, val);
-  }
-
-  del(key: PropertyKey) {
-    if (isValidArrayIndex(key, this.target.length)) {
-      this.target.splice(Number(key), 1);
-      return;
-    }
-    super.del(key);
-  }
-}
-
-// ======= patches ========
-const arrayProto = Array.prototype;
-const arrayMethods = Object.create(arrayProto);
-
-['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
-  const original = (arrayProto as any)[method];
-  addHiddenProp(arrayMethods, method, function mutator(this: any[], ...args: any[]) {
-    const obx = getObx(this) as ObxArray;
-    const proxied = isProxied(this);
-    const length = this.length;
-    // apply to rawTarget avoid to call Proxy.set
-    const result = original.apply(getRawValue(this), args);
-
-    let changed = true;
-    let inserted;
-    switch (method) {
-      case 'push':
-      case 'unshift':
-        inserted = args;
-        changed = inserted.length > 0;
-        break;
-      case 'splice':
-        inserted = args.slice(2);
-        changed = inserted.length > 0 || this.length !== length;
-        break;
-      case 'pop':
-      case 'shift':
-        changed = this.length !== length;
-        break;
-    }
-    if (!proxied && obx.obxFlag > ObxFlag.VAL) {
-      if (inserted && inserted.length > 0) {
-        observeIterable(inserted, childFlag(obx.obxFlag));
-      }
-    }
-
-    if (obx && changed) {
-      obx.reportChange();
-    }
-    return result;
-  });
-});
-
-const arrayProxyTraps: ProxyHandler<any[]> = {
-  has(rawTarget, name: PropertyKey) {
-    if (name === SYMBOL_OBX || name === SYMBOL_RAW) {
-      return true;
-    }
-    return name in rawTarget;
-  },
-  get(rawTarget, name: PropertyKey) {
-    if (name === SYMBOL_RAW) {
-      return rawTarget;
-    }
-    if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in arrayMethods) {
-      return (rawTarget as any)[name];
-    }
-
-    if (isValidArrayIndex(name)) {
-      const v = rawTarget[Number(name)];
-      const obx = getObx(rawTarget);
-      if (obx) {
-        reportChildValue(v, obx.obxFlag);
-      }
-      return getProxiedValue(v);
-    }
-
-    return getProxiedValue((rawTarget as any)[name]);
-  },
-  set(rawTarget, name: PropertyKey, value: any) {
-    if (name === 'length') {
-      rawTarget[name] = value;
-      return true;
-    }
-    if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in arrayMethods) {
-      return false;
-    }
-
-    if (isValidArrayIndex(name)) {
-      const index = Number(name);
-      rawTarget.length = Math.max(rawTarget.length, index);
-      rawTarget.splice(index, 1, value);
-      return true;
-    }
-
-    (rawTarget as any)[name] = value;
-    return true;
-  },
-  deleteProperty(rawTarget, name: PropertyKey) {
-    if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in arrayMethods) {
-      return false;
-    }
-
-    if (isValidArrayIndex(name)) {
-      rawTarget.splice(Number(name), 1);
-      return true;
-    }
-
-    delete (rawTarget as any)[name];
-    return true;
-  },
-  preventExtensions() {
-    return false;
-  },
-};
diff --git a/packages/rax-simulator-renderer/src/obx-rax/observable/obx-instance.ts b/packages/rax-simulator-renderer/src/obx-rax/observable/obx-instance.ts
deleted file mode 100644
index bc5c867fc..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/observable/obx-instance.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { DecoratorTarget } from '../decorators';
-import Obx from './obx';
-
-export default class ObxInstance extends Obx<DecoratorTarget> {
-  set(key: PropertyKey, val: any) {
-    const target = this.target;
-    if (key in target) {
-      (target as any)[key] = val;
-      return;
-    }
-
-    super.set(key, val);
-  }
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/observable/obx-map.ts b/packages/rax-simulator-renderer/src/obx-rax/observable/obx-map.ts
deleted file mode 100644
index edd1d5deb..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/observable/obx-map.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import Obx, { ObxFlag } from './obx';
-import { patchMutator, patchAccessor } from './obx-set';
-import { setPrototypeOf } from '../../utils/set-prototype-of';
-
-type MapType = Map<PropertyKey, any>;
-
-export default class ObxMap extends Obx<MapType> {
-  constructor(name: string, target: MapType, obxFlag: ObxFlag = ObxFlag.DEEP) {
-    super(name, target, obxFlag);
-
-    setPrototypeOf(target, mapMethods);
-  }
-
-  has(key: PropertyKey) {
-    return this.target.has(key);
-  }
-
-  set(key: PropertyKey, val: any) {
-    this.target.set(key, val);
-  }
-
-  get(key: PropertyKey) {
-    return this.target.get(key);
-  }
-
-  del(key: PropertyKey) {
-    this.target.delete(key);
-  }
-}
-
-// ======= Map ========
-const mapProto = Map.prototype;
-const mapMethods = Object.create(mapProto);
-
-patchMutator(['set', 'clear', 'delete'], mapProto, mapMethods);
-
-patchAccessor(['values', 'entries', Symbol.iterator, 'forEach', 'get'], mapProto, mapMethods);
diff --git a/packages/rax-simulator-renderer/src/obx-rax/observable/obx-object.ts b/packages/rax-simulator-renderer/src/obx-rax/observable/obx-object.ts
deleted file mode 100644
index 1ea79ed84..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/observable/obx-object.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { walk } from '../utils';
-import { supportProxy, createProxy, getProxiedValue, SYMBOL_PROXY, SYMBOL_RAW } from './proxy';
-import Obx, { getObx, SYMBOL_OBX, ObxFlag } from './obx';
-import { defineObxProperty, ensureObxProperty } from './obx-property';
-import { hasOwnProperty } from '../../utils/has-own-property';
-
-function propFlag(flag: ObxFlag) {
-  return flag === ObxFlag.DEEP ? ObxFlag.DEEP : flag - 1;
-}
-
-export default class ObxObject extends Obx<object> {
-  constructor(name: string, target: object, obxFlag: ObxFlag = ObxFlag.DEEP) {
-    super(name, target, obxFlag);
-
-    if (supportProxy) {
-      this.target = createProxy(target, objectProxyTraps);
-    } else if (obxFlag > ObxFlag.REF) {
-      walk(target as any, (obj, key, val) => {
-        defineObxProperty(obj, key, val, undefined, propFlag(obxFlag));
-      });
-    }
-  }
-
-  set(key: PropertyKey, val: any) {
-    const target = this.target;
-    if (key in target && !(key in objectProto)) {
-      (target as any)[key] = val;
-      return;
-    }
-
-    super.set(key, val);
-  }
-}
-
-const objectProto = Object.prototype;
-
-const objectProxyTraps: ProxyHandler<any> = {
-  has(rawTarget, name: PropertyKey) {
-    if (name === SYMBOL_OBX || name === SYMBOL_RAW) {
-      return true;
-    }
-    return name in rawTarget;
-  },
-  get(rawTarget, name: PropertyKey) {
-    if (name === SYMBOL_RAW) {
-      return rawTarget;
-    }
-    if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in objectProto) {
-      return rawTarget[name];
-    }
-
-    if (hasOwnProperty(rawTarget, name)) {
-      const obx = getObx(rawTarget);
-      if (obx) {
-        ensureObxProperty(rawTarget, name, propFlag(obx.obxFlag));
-      }
-    }
-
-    return getProxiedValue(rawTarget[name]);
-  },
-  set(rawTarget, name: PropertyKey, value: any) {
-    if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in objectProto) {
-      return false;
-    }
-
-    if (!hasOwnProperty(rawTarget, name)) {
-      const obx = getObx(rawTarget);
-      if (obx) {
-        defineObxProperty(rawTarget, name, value, undefined, propFlag(obx.obxFlag));
-        obx.reportChange();
-        return true;
-      }
-    }
-
-    rawTarget[name] = value;
-    return true;
-  },
-  deleteProperty(rawTarget, name: PropertyKey) {
-    if (name === SYMBOL_OBX || name === SYMBOL_PROXY || !hasOwnProperty(rawTarget, name)) {
-      return false;
-    }
-
-    delete rawTarget[name];
-    const obx = getObx(rawTarget);
-    if (obx) {
-      obx.reportChange();
-    }
-    return true;
-  },
-  preventExtensions() {
-    return false;
-  },
-};
diff --git a/packages/rax-simulator-renderer/src/obx-rax/observable/obx-property.ts b/packages/rax-simulator-renderer/src/obx-rax/observable/obx-property.ts
deleted file mode 100644
index 2920f5268..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/observable/obx-property.ts
+++ /dev/null
@@ -1,212 +0,0 @@
-import { globalState } from '../ global-state';
-import {
-  untrackedStart,
-  untrackedEnd,
-  IDerivation,
-  DerivationState,
-  runDerivedFunction,
-  shouldCompute,
-  isCaughtException,
-  clearObserving,
-  setDerivationDirty,
-} from '../derivation';
-import {
-  IObservable,
-  reportObserved,
-  startBatch,
-  endBatch,
-  propagateChangeConfirmed,
-  propagateMaybeChanged,
-  reportPropValue,
-} from './observable';
-import { nextId } from '../utils';
-import { ObxFlag, SYMBOL_OBX, getObx } from './obx';
-import { getProxiedValue } from './proxy';
-import { is } from './compare';
-import { isPrimitive } from '../utils/is-primitive';
-import { invariant } from '../utils/invariant';
-import { hasOwnProperty } from '../utils/has-own-property';
-
-function getVer(obj: any): number {
-  const obx = getObx(obj);
-  return obx ? obx.localVer : 0;
-}
-
-export function asNewValue(obj: object) {
-  const obx = getObx(obj);
-  if (obx) {
-    obx.localVer = obx.localVer + 1;
-  }
-  return obj;
-}
-
-const DIRTY = Symbol('dirty');
-
-export default class ObxProperty implements IObservable, IDerivation {
-  id = nextId();
-  observing: IObservable[] = [];
-  observers = new Set<IDerivation>();
-  dependenciesState = DerivationState.NOT_TRACKING;
-  lowestObserverState = DerivationState.UP_TO_DATE;
-
-  private isComputing = false;
-  private isRunningSetter = false;
-  private pending = false;
-  private pendingValue: any = null;
-  private objectVer = 0;
-
-  constructor(
-    public name: string,
-    public scope: object | null,
-    private getter?: (...rest: any[]) => any,
-    private setter?: (v: any) => void,
-    private value?: any,
-    private obxFlag: ObxFlag = ObxFlag.DEEP,
-  ) {}
-
-  onBecomeDirty() {
-    propagateMaybeChanged(this);
-  }
-
-  onBecomeUnobserved() {
-    clearObserving(this);
-  }
-
-  ifModified() {
-    if (this.getter && shouldCompute(this)) {
-      startBatch();
-      if (this.computeValue()) {
-        propagateChangeConfirmed(this);
-        this.objectVer = getVer(this.value);
-      }
-      endBatch();
-    } else if (this.pending) {
-      this.pending = false;
-      const oldValue = this.value;
-      this.value = this.pendingValue;
-      if (!this.is(oldValue, this.value)) {
-        propagateChangeConfirmed(this);
-        this.objectVer = getVer(this.value);
-      }
-    }
-  }
-
-  private is(oldValue: any, value: any) {
-    return oldValue !== DIRTY && is(oldValue, value) && (isPrimitive(value) || getVer(value) === this.objectVer);
-  }
-
-  get() {
-    invariant(!this.isComputing, `Cycle detected in computation ${this.name}`, this.getter);
-
-    reportObserved(this);
-
-    this.ifModified();
-    const result = this.value!;
-
-    if (isCaughtException(result)) {
-      throw result.cause;
-    }
-
-    reportPropValue(result, this.obxFlag);
-
-    return getProxiedValue(result);
-  }
-
-  set(value: any) {
-    invariant(!this.isRunningSetter, `The setter of observable value '${this.name}' is trying to update itself.`);
-
-    invariant(Boolean(this.setter || !this.getter), `Cannot assign a new value to readonly value '${this.name}'.`);
-
-    const oldValue = this.pending ? this.pendingValue : this.value;
-
-    if (!isCaughtException(oldValue) && this.is(oldValue, value)) {
-      return;
-    }
-
-    if (!this.setter) {
-      this.pendingValue = value;
-      if (!this.pending) {
-        this.pending = true;
-        propagateMaybeChanged(this);
-      }
-    } else {
-      this.isRunningSetter = true;
-      const prevTracking = untrackedStart();
-      try {
-        this.value = DIRTY;
-        this.setter!.call(this.scope, value);
-      } finally {
-        untrackedEnd(prevTracking);
-      }
-      this.isRunningSetter = false;
-      setDerivationDirty(this);
-    }
-  }
-
-  private computeValue(): boolean {
-    const oldValue = this.value;
-    this.isComputing = true;
-    globalState.computationDepth++;
-    this.value = runDerivedFunction(this, this.getter!, this.scope);
-    globalState.computationDepth--;
-    this.isComputing = false;
-    return isCaughtException(oldValue) || isCaughtException(this.value) || !this.is(oldValue, this.value);
-  }
-}
-
-function isObxProperty(descriptor?: PropertyDescriptor) {
-  if (!descriptor || !descriptor.get) {
-    return false;
-  }
-  return (descriptor.get as any)[SYMBOL_OBX] ? true : false;
-}
-
-export function ensureObxProperty(obj: any, prop: PropertyKey, obxFlag: ObxFlag = ObxFlag.DEEP) {
-  const descriptor = Object.getOwnPropertyDescriptor(obj, prop);
-  if (!descriptor || isObxProperty(descriptor)) {
-    return;
-  }
-  defineObxProperty(obj, prop, undefined, descriptor, obxFlag);
-}
-
-export function defineObxProperty(
-  obj: object,
-  key: PropertyKey,
-  val: any,
-  descriptor?: PropertyDescriptor,
-  obxFlag: ObxFlag = ObxFlag.DEEP,
-): void {
-  if (!descriptor) {
-    descriptor = Object.getOwnPropertyDescriptor(obj, key);
-  }
-  if (descriptor && descriptor.configurable === false) {
-    return;
-  }
-
-  if (val == null && descriptor && hasOwnProperty(descriptor, 'value')) {
-    val = descriptor.value;
-  }
-
-  const getter = descriptor && descriptor.get;
-  const setter = descriptor && descriptor.set;
-  const property = new ObxProperty(String(key), obj, getter, setter, val, obxFlag);
-  const get = () => property.get();
-  (get as any)[SYMBOL_OBX] = property;
-
-  Object.defineProperty(obj, key, {
-    enumerable: true,
-    configurable: true,
-    get,
-    set: (newVal) => property.set(newVal),
-  });
-}
-
-export function getObxProperty(obj: object, key: PropertyKey) {
-  const descriptor = Object.getOwnPropertyDescriptor(obj, key);
-
-  if (!descriptor || !descriptor.get) {
-    return null;
-  }
-
-  return (descriptor.get as any)[SYMBOL_OBX] as ObxProperty;
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/observable/obx-set.ts b/packages/rax-simulator-renderer/src/obx-rax/observable/obx-set.ts
deleted file mode 100644
index ca9821f31..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/observable/obx-set.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { addHiddenProp } from '../utils';
-import Obx, { getObx, ObxFlag } from './obx';
-import { reportChildValue } from './observable';
-import { getProxiedValue } from './proxy';
-import { setPrototypeOf } from '../../utils/set-prototype-of';
-
-type SetType = Set<any> | WeakSet<any>;
-
-export default class ObxSet extends Obx<SetType> {
-  constructor(name: string, target: SetType, obxFlag: ObxFlag = ObxFlag.DEEP) {
-    super(name, target, obxFlag);
-
-    setPrototypeOf(target, target instanceof Set ? setMethods : weaksetMethods);
-  }
-
-  has(key: PropertyKey) {
-    return false;
-  }
-
-  set(key: PropertyKey, val: any) {}
-
-  get(key: PropertyKey) {
-    return undefined;
-  }
-
-  del(key: PropertyKey) {}
-}
-
-function isIterator(v: any): v is Iterator<any> {
-  return v.next ? true : false;
-}
-
-export function patchAccessor(keys: Array<string | symbol>, proto: any, methods: object): void {
-  keys.forEach(method => {
-    const original = proto[method];
-    addHiddenProp(methods, method, function accessor(this: any, ...args: any[]) {
-      const obx = getObx(this);
-      const flag = obx ? obx.obxFlag : ObxFlag.REF;
-      if (method === 'forEach') {
-        const fn = args[0];
-        const thisArg = args[0] || this;
-        args[0] = (v: any, a: any, c: any) => {
-          reportChildValue(v, flag);
-          return fn.call(thisArg, getProxiedValue(v), a, c);
-        };
-        return original.apply(this, args);
-      }
-
-      const result = original.apply(this, args);
-
-      if (method === 'get') {
-        reportChildValue(result, flag);
-        return getProxiedValue(result);
-      }
-
-      if (isIterator(result)) {
-        const originNext = result.next;
-        const isMapIter = String(result) === '[object Map Iterator]';
-        const isEntries = method === 'entries';
-        let keys: string[] | null = null;
-        if (isEntries && !isMapIter) {
-          keys = ['0', '1'];
-        } else if (isMapIter && (isEntries || method === Symbol.iterator)) {
-          keys = ['1'];
-        }
-
-        result.next = function next() {
-          let n = originNext.call(this);
-          if (!n.done) {
-            if (keys) {
-              n.value = createResultProxy(n.value, flag, keys);
-            } else {
-              n = createResultProxy(n, flag);
-            }
-          }
-          return n;
-        };
-      }
-
-      return result;
-    });
-  });
-}
-
-function createResultProxy(entries: any, flag: ObxFlag, keys: any[] = ['value']) {
-  return new Proxy(entries, {
-    get(target, key) {
-      const v = target[key];
-      if (v && keys.includes(key)) {
-        reportChildValue(v, flag);
-      }
-      return getProxiedValue(v);
-    },
-  });
-}
-
-export function patchMutator(keys: Array<string | symbol>, proto: any, methods: object): void {
-  keys.forEach(method => {
-    const original = proto[method];
-    addHiddenProp(methods, method, function mutator(this: any, ...args: any[]) {
-      const size = this.size;
-      const result = original.apply(this, args);
-      const obx = getObx(this);
-      let changed = true;
-      switch (method) {
-        case 'add':
-        case 'clear':
-        case 'delete':
-          changed = this.size !== size;
-          break;
-      }
-      // now: "set" not compare values, default changed
-      if (obx && changed) {
-        obx.reportChange();
-      }
-      return result;
-    });
-  });
-}
-
-// ======= Set ========
-const setProto = Set.prototype;
-const setMethods = Object.create(setProto);
-
-patchMutator(['add', 'clear', 'delete'], setProto, setMethods);
-
-patchAccessor(['values', 'keys', 'entries', 'forEach', Symbol.iterator], setProto, setMethods);
-
-// ======= WeakSet ========
-const weaksetProto = WeakSet.prototype;
-const weaksetMethods = Object.create(weaksetProto);
-
-patchMutator(['add', 'delete', 'clear'], weaksetProto, weaksetMethods);
diff --git a/packages/rax-simulator-renderer/src/obx-rax/observable/obx.ts b/packages/rax-simulator-renderer/src/obx-rax/observable/obx.ts
deleted file mode 100644
index ec5477d53..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/observable/obx.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { walk, addHiddenFinalProp, nextId } from '../utils';
-import { defineObxProperty } from './obx-property';
-import { IObservable, propagateChanged, startBatch, endBatch } from './observable';
-import { IDerivation, DerivationState, clearObserving } from '../derivation';
-import { hasOwnProperty } from '../utils/has-own-property';
-import { splitPath } from '../utils/split-path';
-
-export enum ObxFlag {
-  REF = 0,
-  VAL = 1,
-  SHALLOW = 2,
-  DEEP = 3,
-}
-
-class Obx<T = any[] | object> implements IObservable, IDerivation {
-  id = nextId();
-  localVer = 0;
-  observing: IObservable[] = [];
-  observers = new Set<IDerivation>();
-  dependenciesState = DerivationState.NOT_TRACKING;
-  lowestObserverState = DerivationState.UP_TO_DATE;
-
-  constructor(public name: string, public target: T, public obxFlag: ObxFlag = ObxFlag.DEEP) {}
-
-  onBecomeDirty() {
-    propagateChanged(this);
-  }
-
-  onBecomeUnobserved() {
-    clearObserving(this);
-  }
-
-  reportChange(force = false) {
-    startBatch();
-    this.localVer++;
-    propagateChanged(this, force);
-    endBatch();
-  }
-
-  // TODO: remove this unused function, move to utils $getAsObx
-  getAsObx(path: PropertyKey): Obx<T | any[] | object> | void {
-    if (path === '') {
-      return this;
-    }
-
-    let entry = path;
-    let nestPath = '';
-
-    if (typeof path === 'string') {
-      const pathArray = splitPath(path);
-
-      if (!pathArray) {
-        return this;
-      }
-
-      entry = pathArray[1];
-      nestPath = pathArray[2];
-    }
-
-    if (!entry) {
-      return this.get(nestPath);
-    }
-
-    let ret = this.get(entry);
-
-    if (!hasObx(ret) && nestPath) {
-      ret = this.get(path);
-    }
-
-    const obx = getObx(ret);
-
-    if (obx && nestPath) {
-      return obx.getAsObx(nestPath);
-    }
-
-    return obx;
-  }
-
-  has(key: PropertyKey): boolean {
-    if (key == null || key === '') {
-      return false;
-    }
-
-    return key in this.target;
-  }
-
-  get(key?: PropertyKey): any {
-    if (key == null || key === '') {
-      return this.target;
-    }
-
-    return (this.target as any)[key];
-  }
-
-  set(key: PropertyKey, val: any): void {
-    if (this.obxFlag > ObxFlag.REF) {
-      defineObxProperty(this.target as any, key, val, undefined, this.obxFlag);
-    } else {
-      (this.target as any)[key] = val;
-    }
-
-    this.reportChange();
-  }
-
-  del(key: PropertyKey) {
-    if (!hasOwnProperty(this.target, key)) {
-      return;
-    }
-
-    delete (this.target as any)[key];
-    this.reportChange();
-  }
-
-  extend(properties: object) {
-    startBatch();
-    walk(properties, (_, key, val) => this.set(key, val));
-    endBatch();
-  }
-}
-
-export default Obx;
-
-export const SYMBOL_OBX = Symbol.for('obx');
-export function injectObx(obj: any[] | object, obx: Obx): void {
-  addHiddenFinalProp(obj, SYMBOL_OBX, obx);
-}
-
-export function getObx(obj: any): Obx | undefined {
-  return obj ? (obj as any)[SYMBOL_OBX] : undefined;
-}
-
-export function hasObx(obj: any[] | object): boolean {
-  return hasOwnProperty(obj, SYMBOL_OBX) && (obj as any)[SYMBOL_OBX] instanceof Obx;
-}
-
-export function reportChange(obj: any, force = false) {
-  const obx = getObx(obj);
-  if (obx) {
-    obx.reportChange(force);
-  }
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/observable/proxy.ts b/packages/rax-simulator-renderer/src/obx-rax/observable/proxy.ts
deleted file mode 100644
index 4d5b17773..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/observable/proxy.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { addHiddenFinalProp } from '../utils';
-
-export const SYMBOL_PROXY = Symbol.for('proxy');
-export const SYMBOL_RAW = Symbol.for('raw');
-export interface Proxied<T> {
-  [SYMBOL_PROXY]: T;
-}
-
-export function isProxied<T>(target: T): target is T & Proxied<T> {
-  return SYMBOL_PROXY in target;
-}
-
-export function getProxy<T>(target: T & Proxied<T>) {
-  return target[SYMBOL_PROXY];
-}
-
-export function setProxy(target: object, proxy: object) {
-  addHiddenFinalProp(target, SYMBOL_PROXY, proxy);
-}
-
-export function getProxiedValue(target: any) {
-  return (target && getProxy(target)) || target;
-}
-
-export function getRawValue(target: any) {
-  return (target && target[SYMBOL_RAW]) || target;
-}
-
-export const supportProxy = 'Proxy' in global;
-
-export function createProxy<T extends object>(target: T, taps: ProxyHandler<T>) {
-  if (isProxied(target)) {
-    return getProxy(target);
-  }
-
-  const proxy = new Proxy(target, taps);
-  setProxy(target, proxy);
-
-  return proxy;
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/observer.ts b/packages/rax-simulator-renderer/src/obx-rax/observer.ts
deleted file mode 100644
index 345b9896b..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/observer.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { FunctionComponent, ComponentType } from 'react';
-import { Component } from 'rax';
-import { Reaction } from './reaction';
-import { shallowEqual } from './utils';
-
-const SYMBOL_REACTION = Symbol('__obxReaction');
-const SYMBOL_ISUNMOUNTED = Symbol('__obxIsUnmounted');
-
-/**
- * ReactiveMixin
- */
-function defaultComponentWillUnmount(this: any) {
-  this.render[SYMBOL_REACTION] && this.render[SYMBOL_REACTION].sleep();
-  this[SYMBOL_ISUNMOUNTED] = true;
-}
-
-function defaultShouldComponentUpdate(this: any, nextProps: any, nextState: any) {
-  if (this.state !== nextState) {
-    return true;
-  }
-  return !shallowEqual(this.props, nextProps);
-}
-
-// function shouldConstruct(C: any) {
-//   const prototype = C.prototype;
-//   return !!(prototype && prototype.isReactComponent);
-// }
-
-function shouldConstruct(C: any) {
-  const prototype = C.prototype;
-  return !!(prototype && prototype.constructor);
-}
-
-function isFunctionComponent<T = any>(type: Function): type is FunctionComponent<T> {
-  return !shouldConstruct(type);
-}
-
-export function getReaction(target: Component): Reaction | undefined {
-  return (target.render as any)[SYMBOL_REACTION];
-}
-
-/**
- * Observer function / decorator
- */
-export function observer<T extends ComponentType<any>>(target: T): T {
-  if (!target) {
-    throw new Error('Please pass a valid component to "observer"');
-  }
-  if (typeof target !== 'function') {
-    throw new Error('obx observer: needs to be a react class constructor or stateless function components');
-  }
-
-  let componentClass: any = target;
-
-  if (isFunctionComponent(target)) {
-    componentClass = class extends Component {
-      static displayName = componentClass.displayName || componentClass.name;
-      static contextTypes = componentClass.contextTypes;
-      static propTypes = componentClass.propTypes;
-      static defaultProps = componentClass.defaultProps;
-
-      render() {
-        return target.call(this, this.props, this.context);
-      }
-    };
-  }
-
-  const proto = componentClass.prototype || componentClass;
-  mixinLifecycleEvents(proto);
-  componentClass.isObxReactObserver = true;
-  const baseRender = proto.render;
-  proto.render = function() {
-    return makeComponentReactive.call(this, baseRender);
-  };
-  return componentClass;
-}
-
-function makeComponentReactive(this: any, render: any) {
-  function reactiveRender() {
-    isRenderingPending = false;
-    let exception = undefined;
-    let rendering = undefined;
-    reaction.track(() => {
-      try {
-        rendering = baseRender();
-      } catch (e) {
-        exception = e;
-      }
-    });
-    if (exception) {
-      throw exception;
-    }
-    return rendering || baseRender();
-  }
-
-  // Generate friendly name for debugging
-  const initialName =
-    this.displayName ||
-    this.name ||
-    (this.constructor && (this.constructor.displayName || this.constructor.name)) ||
-    '<component>';
-
-  const rootNodeID = (this._reactInternalFiber && this._reactInternalFiber._debugID) || '*';
-
-  // wire up reactive render
-  const baseRender = render.bind(this);
-  let isRenderingPending = false;
-  const reaction = new Reaction(
-    `${initialName}#${rootNodeID}.render()`,
-    () => {
-      if (!isRenderingPending) {
-        isRenderingPending = true;
-        if (typeof this.componentWillReact === 'function') {
-          this.componentWillReact();
-        }
-        if (this[SYMBOL_ISUNMOUNTED] !== true) {
-          let hasError = true;
-          try {
-            Component.prototype.forceUpdate.call(this);
-            hasError = false;
-          } finally {
-            if (hasError) reaction.sleep();
-          }
-        }
-      }
-    },
-    this.$level || 0,
-  );
-
-  (reactiveRender as any)[SYMBOL_REACTION] = reaction;
-  this.render = reactiveRender;
-  return reactiveRender.call(this);
-}
-
-function mixinLifecycleEvents(target: any) {
-  if (!target.componentWillUnmount) {
-    target.componentWillUnmount = defaultComponentWillUnmount;
-  } else {
-    const originFunc = target.componentWillUnmount;
-    target.componentWillUnmount = function(this: any) {
-      originFunc.call(this);
-      defaultComponentWillUnmount.call(this);
-    };
-  }
-
-  if (!target.shouldComponentUpdate) {
-    target.shouldComponentUpdate = defaultShouldComponentUpdate;
-  }
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/reaction.ts b/packages/rax-simulator-renderer/src/obx-rax/reaction.ts
deleted file mode 100644
index 54c7ed113..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/reaction.ts
+++ /dev/null
@@ -1,252 +0,0 @@
-import {
-  DerivationState,
-  IDerivation,
-  runDerivedFunction,
-  isCaughtException,
-  shouldCompute,
-  clearObserving,
-  CaughtException,
-} from './derivation';
-import { nextTick } from './next-tick';
-import { IObservable, endBatch, startBatch } from './observable/observable';
-import { globalState } from './ global-state';
-import { throttle } from './utils/throttle';
-
-export function nextId() {
-  return (++globalState.guid).toString(36).toLocaleLowerCase();
-}
-
-export class Reaction implements IDerivation {
-  observing: IObservable[] = [];
-  dependenciesState = DerivationState.NOT_TRACKING;
-  id = nextId();
-  scheduled = false;
-  run: () => void;
-  caughtException: any = null;
-
-  private sleeping = false;
-  private running = false;
-
-  constructor(public name: string, private check: () => void, public level: number = 0, throttleWait = 10) {
-    if (throttleWait > 0) {
-      this.run = throttle(this.runReaction.bind(this), throttleWait);
-    } else {
-      this.run = this.runReaction.bind(this);
-    }
-  }
-
-  onBecomeDirty() {
-    this.schedule();
-  }
-
-  schedule() {
-    if (this.scheduled || this.sleeping) {
-      return;
-    }
-    this.scheduled = true;
-    scheduleReaction(this);
-  }
-
-  isDirty(): boolean {
-    return shouldCompute(this);
-  }
-
-  runReaction() {
-    if (this.sleeping || this.running) {
-      return;
-    }
-
-    startBatch();
-    if (shouldCompute(this)) {
-      this.caughtException = null;
-      try {
-        this.check();
-      } catch (e) {
-        this.caughtException = new CaughtException(e);
-      }
-    }
-    endBatch();
-  }
-
-  track(fn: () => void) {
-    startBatch();
-    this.running = true;
-    const result = runDerivedFunction(this, fn);
-    if (isCaughtException(result)) {
-      this.caughtException = result;
-    }
-    this.running = false;
-    if (this.sleeping) {
-      clearObserving(this);
-    }
-    endBatch();
-  }
-
-  sleep() {
-    if (this.sleeping) {
-      return;
-    }
-    this.sleeping = true;
-    if (!this.running) {
-      startBatch();
-      clearObserving(this);
-      endBatch();
-      deScheduleReaction(this);
-    }
-  }
-
-  wakeup(sync = false) {
-    if (this.sleeping) {
-      this.sleeping = false;
-      if (sync) {
-        this.runReaction();
-      } else {
-        this.schedule();
-      }
-    }
-  }
-}
-
-let flushIndex = 0;
-let flushWaiting = false;
-
-function scheduleReaction(reaction: Reaction) {
-  const { pendingReactions, isRunningReactions } = globalState;
-  if (!isRunningReactions) {
-    pendingReactions.push(reaction);
-  } else {
-    let i = pendingReactions.length - 1;
-    //  0  1  2  3  4  5  6  7  8  9
-    //  0, 0, 1, 1, 1, 2, 2, 2, 3, 3
-    //       ^                 ^
-    //   flushIndex = 2        level = 2
-    //   break at: i = 7 or i = 2
-    while (i > flushIndex && pendingReactions[i].level > reaction.level) {
-      i--;
-    }
-    pendingReactions.splice(i + 1, 0, reaction);
-  }
-
-  runReactions();
-}
-
-function deScheduleReaction(reaction: Reaction) {
-  const { pendingReactions, isRunningReactions } = globalState;
-  if (!isRunningReactions) {
-    const i = pendingReactions.indexOf(reaction);
-    if (i > -1) {
-      pendingReactions.splice(i, 1);
-    }
-  }
-}
-
-export function runReactions() {
-  // queue the flush
-  if (!flushWaiting) {
-    flushWaiting = true;
-    nextTick(flushReactions);
-  }
-}
-
-const MAX_REACTION_ITERATIONS = 100;
-
-function flushReactions() {
-  globalState.isRunningReactions = true;
-  const allReactions = globalState.pendingReactions;
-  let pendingLength = 0;
-  let iterations = 0;
-
-  // low level run first
-  // sort as:
-  // 0, 0, 0, 1, 1, 1, 2, 2, 3, 4, 5, 5, 5
-  allReactions.sort((a, b) => a.level - b.level);
-
-  while (allReactions.length > pendingLength) {
-    pendingLength = allReactions.length;
-    if (++iterations === MAX_REACTION_ITERATIONS) {
-      // tslint:disable-next-line
-      console.error(
-        `Reaction doesn't converge to a stable state after ${MAX_REACTION_ITERATIONS} iterations.` +
-          ` Probably there is a cycle in the reactive function: ${allReactions[0]}`,
-      );
-      break;
-    }
-    for (; flushIndex < pendingLength; flushIndex++) {
-      allReactions[flushIndex].scheduled = false;
-      allReactions[flushIndex].run();
-    }
-  }
-
-  flushIndex = 0;
-  flushWaiting = false;
-  allReactions.length = 0;
-  globalState.isRunningReactions = false;
-}
-
-export function clearReactions() {
-  const { pendingReactions } = globalState;
-  let i = pendingReactions.length;
-  while (i--) {
-    pendingReactions[i].sleep();
-  }
-}
-
-export interface Disposer {
-  (): void;
-  name?: string;
-  $obx: Reaction;
-}
-export interface AutorunOptions {
-  throttle?: number;
-  sync?: boolean;
-  level?: number;
-  name?: string;
-  runFirstNow?: boolean;
-}
-export interface RunContext {
-  dispose: Disposer;
-  firstRun: boolean;
-}
-export type Action = (this: RunContext, context: RunContext) => any;
-
-export function autorun(action: Action, options: number | true | AutorunOptions = {}): Disposer {
-  if (typeof options === 'number') {
-    options = { throttle: options };
-  } else if (options === true) {
-    options = { sync: true };
-  }
-  const name: string = options.name || (action as any).name || 'Autorun@' + nextId();
-
-  const reaction = new Reaction(
-    name,
-    function(this: Reaction) {
-      this.track(reactionRunner);
-    },
-    options.level || 0,
-    options.throttle || 0,
-  );
-
-  const dispose = () => {
-    reaction.sleep();
-  };
-
-  dispose.$obx = reaction;
-
-  let firstRun = true;
-  function reactionRunner() {
-    const ctx: RunContext = {
-      firstRun,
-      dispose,
-    };
-    action.call(ctx, ctx);
-    firstRun = false;
-  }
-
-  if (options.sync || options.runFirstNow) {
-    reaction.runReaction();
-  } else {
-    reaction.schedule();
-  }
-
-  return dispose;
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/utils.ts b/packages/rax-simulator-renderer/src/obx-rax/utils.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/rax-simulator-renderer/src/obx-rax/utils/has-own-property.ts b/packages/rax-simulator-renderer/src/obx-rax/utils/has-own-property.ts
deleted file mode 100644
index f0b34e5d7..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/utils/has-own-property.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const prototypeHasOwnProperty = Object.prototype.hasOwnProperty;
-
-export function hasOwnProperty(obj: any, key: string | number | symbol): boolean {
-  return obj && prototypeHasOwnProperty.call(obj, key);
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/utils/index.ts b/packages/rax-simulator-renderer/src/obx-rax/utils/index.ts
deleted file mode 100644
index bdb320735..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/utils/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './shallow-equal';
-export * from './has-own-property';
-export * from './throttle';
-export * from './next-id';
-export * from './is-primitive';
-export * from './invariant';
-export * from './splitPath';
diff --git a/packages/rax-simulator-renderer/src/obx-rax/utils/invariant.ts b/packages/rax-simulator-renderer/src/obx-rax/utils/invariant.ts
deleted file mode 100644
index 09780d00f..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/utils/invariant.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function invariant(check: any, message: string, thing?: any) {
-  if (!check) {
-    throw new Error('[recore] Invariant failed: ' + message + (thing ? ` in '${thing}'` : ''));
-  }
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/utils/is-primitive.ts b/packages/rax-simulator-renderer/src/obx-rax/utils/is-primitive.ts
deleted file mode 100644
index 8e4b685a7..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/utils/is-primitive.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export function isPrimitive(obj: any): boolean {
-  // null | undefined
-  if (obj == null) {
-    return true;
-  }
-  const t = typeof obj;
-  return t === 'boolean' || t === 'number' || t === 'string' || t === 'symbol';
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/utils/next-id.ts b/packages/rax-simulator-renderer/src/obx-rax/utils/next-id.ts
deleted file mode 100644
index 9ab6b836a..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/utils/next-id.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { globalState } from '../ global-state';
-export function nextId() {
-  return (++globalState.guid).toString(36).toLocaleLowerCase();
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/utils/shallow-equal.ts b/packages/rax-simulator-renderer/src/obx-rax/utils/shallow-equal.ts
deleted file mode 100644
index 6dc85c1c2..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/utils/shallow-equal.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { prototypeHasOwnProperty } from './has-own-property';
-
-export function shallowEqual(objA: any, objB: any): boolean {
-  if (objA === objB) {
-    return true;
-  }
-
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-
-  // Test for A's keys different from B.
-  const bHasOwnProperty = prototypeHasOwnProperty.bind(objB);
-  for (let i = 0; i < keysA.length; i++) {
-    if (!bHasOwnProperty(keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {
-      return false;
-    }
-  }
-
-  return true;
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/utils/split-path.ts b/packages/rax-simulator-renderer/src/obx-rax/utils/split-path.ts
deleted file mode 100644
index a4c5b5018..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/utils/split-path.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-const RE_PATH = /^([^/]*)(?:\/(.*))?$/;
-const RE_PATH_REVERSE = /^(?:(.*)\/)?([^/]+)$/;
-export function splitPath(path: string, reverse = false) {
-  return reverse ? RE_PATH_REVERSE.exec(path) : RE_PATH.exec(path);
-}
diff --git a/packages/rax-simulator-renderer/src/obx-rax/utils/throttle.ts b/packages/rax-simulator-renderer/src/obx-rax/utils/throttle.ts
deleted file mode 100644
index ac486f03e..000000000
--- a/packages/rax-simulator-renderer/src/obx-rax/utils/throttle.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-const useRAF = typeof requestAnimationFrame === 'function';
-
-export function throttle(func: Function, wait: number) {
-  let lastArgs: any;
-  let lastThis: any;
-  let result: any;
-  let timerId: number | undefined;
-  let lastCalled: number | undefined;
-  let lastInvoked = 0;
-
-  function invoke(time: number) {
-    const args = lastArgs;
-    const thisArg = lastThis;
-
-    lastArgs = undefined;
-    lastThis = undefined;
-    lastInvoked = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-
-  function startTimer(pendingFunc: any, wait: number): number {
-    if (useRAF) {
-      return requestAnimationFrame(pendingFunc);
-    }
-    return setTimeout(pendingFunc, wait) as any;
-  }
-
-  function leadingEdge(time: number) {
-    lastInvoked = time;
-    timerId = startTimer(timerExpired, wait);
-    return invoke(time);
-  }
-
-  function shouldInvoke(time: number) {
-    const timeSinceLastCalled = time - lastCalled!;
-    const timeSinceLastInvoked = time - lastInvoked;
-
-    return (
-      lastCalled === undefined || timeSinceLastCalled >= wait || timeSinceLastCalled < 0 || timeSinceLastInvoked >= wait
-    );
-  }
-
-  function remainingWait(time: number) {
-    const timeSinceLastCalled = time - lastCalled!;
-    const timeSinceLastInvoked = time - lastInvoked;
-
-    return Math.min(wait - timeSinceLastCalled, wait - timeSinceLastInvoked);
-  }
-
-  function timerExpired() {
-    const time = Date.now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-
-    timerId = startTimer(timerExpired, remainingWait(time));
-  }
-
-  function trailingEdge(time: number) {
-    timerId = undefined;
-
-    if (lastArgs) {
-      return invoke(time);
-    }
-
-    lastArgs = undefined;
-    lastThis = undefined;
-    return result;
-  }
-
-  function debounced(this: any, ...args: any[]) {
-    const time = Date.now();
-    const isInvoking = shouldInvoke(time);
-
-    lastArgs = args;
-    lastThis = this;
-    lastCalled = time;
-
-    if (isInvoking) {
-      if (timerId === undefined) {
-        return leadingEdge(lastCalled);
-      }
-
-      timerId = startTimer(timerExpired, wait);
-      return invoke(lastCalled);
-    }
-
-    if (timerId === undefined) {
-      timerId = startTimer(timerExpired, wait);
-    }
-
-    return result;
-  }
-
-  return debounced;
-}
diff --git a/packages/rax-simulator-renderer/src/renderer-view.tsx b/packages/rax-simulator-renderer/src/renderer-view.tsx
deleted file mode 100644
index e838eccb7..000000000
--- a/packages/rax-simulator-renderer/src/renderer-view.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { Fragment, Component, createElement } from 'rax';
-// import { observer } from './obx-rax/observer';
-import RaxEngine from '../../rax-render/src/index';
-import { SimulatorRenderer } from './renderer';
-import { host } from './host';
-
-import './renderer.less';
-
-// patch cloneElement avoid lost keyProps
-const originCloneElement = (window as any).Rax.cloneElement;
-(window as any).Rax.cloneElement = (child: any, { _leaf, ...props }: any = {}, ...rest: any[]) => {
-  if (child.ref && props.ref) {
-    const dRef = props.ref;
-    const cRef = child.ref;
-    props.ref = (x: any) => {
-      if (cRef) {
-        if (typeof cRef === 'function') {
-          cRef(x);
-        } else {
-          try {
-            cRef.current = x;
-          } catch (e) {}
-        }
-      }
-      if (dRef) {
-        if (typeof dRef === 'function') {
-          dRef(x);
-        } else {
-          try {
-            dRef.current = x;
-          } catch (e) {}
-        }
-      }
-    };
-  }
-  return originCloneElement(child, props, ...rest);
-};
-
-export default class SimulatorRendererView extends Component<{ renderer: SimulatorRenderer }> {
-  render() {
-    const { renderer } = this.props;
-    return (
-      <Layout renderer={renderer}>
-        <Renderer renderer={renderer} />
-      </Layout>
-    );
-  }
-}
-
-function ucfirst(s: string) {
-  return s.charAt(0).toUpperCase() + s.substring(1);
-}
-function getDeviceView(view: any, device: string, mode: string) {
-  if (!view || typeof view === 'string') {
-    return view;
-  }
-
-  // compatible vision Mobile | Preview
-  device = ucfirst(device);
-  if (device === 'Mobile' && view.hasOwnProperty(device)) {
-    view = view[device];
-  }
-  mode = ucfirst(mode);
-  if (mode === 'Preview' && view.hasOwnProperty(mode)) {
-    view = view[mode];
-  }
-  return view;
-}
-
-// @observer
-class Layout extends Component<{ renderer: SimulatorRenderer }> {
-  shouldComponentUpdate() {
-    return false;
-  }
-  render() {
-    const { renderer, children } = this.props;
-    const layout = renderer.layout;
-
-    if (layout) {
-      const { Component, props } = layout;
-      return <Component props={props}>{children}</Component>;
-    }
-
-    return <Fragment>{children}</Fragment>;
-  }
-}
-
-// @observer
-class Renderer extends Component<{ renderer: SimulatorRenderer }> {
-  constructor(props: any) {
-    super(props);
-    this.props.renderer.onReRender(() => {
-      this.forceUpdate();
-    });
-  }
-  shouldComponentUpdate() {
-    return false;
-  }
-  render() {
-    const { renderer } = this.props;
-    const { device, designMode } = renderer;
-    console.info(renderer.schema);
-
-    return (
-      <RaxEngine
-        schema={renderer.schema}
-        components={renderer.components}
-        context={renderer.context}
-        designMode={renderer.designMode}
-        suspended={renderer.suspended}
-        self={renderer.scope}
-        onCompGetRef={(schema: any, ref: ReactInstance | null) => {
-          renderer.mountInstance(schema.id, ref);
-        }}
-        customCreateElement={(Component: any, props: any, children: any) => {
-          const { __id, __desingMode, ...viewProps } = props;
-          viewProps.componentId = __id;
-          const leaf = host.document.getNode(__id);
-          viewProps._leaf = leaf;
-          viewProps._componentName = leaf?.componentName;
-
-          // if (viewProps._componentName === 'Menu') {
-          //   Object.assign(viewProps, {
-          //     _componentName: 'Menu',
-          //     className: '_css_pesudo_menu_kbrzyh0f',
-          //     context: { VE: (window as any).VisualEngine },
-          //     direction: undefined,
-          //     events: { ignored: true },
-          //     fieldId: 'menu_kbrzyh0f',
-          //     footer: '',
-          //     header: '',
-          //     mode: 'inline',
-          //     onItemClick: { ignored: true },
-          //     onSelect: { ignored: true },
-          //     popupAlign: 'follow',
-          //     selectMode: false,
-          //     triggerType: 'click',
-          //   });
-          //   console.info('menuprops', viewProps);
-          // }
-
-          return createElement(
-            getDeviceView(Component, device, designMode),
-            viewProps,
-            leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : null,
-          );
-        }}
-      />
-    );
-  }
-}
diff --git a/packages/rax-simulator-renderer/src/renderer.less b/packages/rax-simulator-renderer/src/renderer.less
deleted file mode 100644
index 5bfd64d7c..000000000
--- a/packages/rax-simulator-renderer/src/renderer.less
+++ /dev/null
@@ -1,111 +0,0 @@
-body, html {
-  display: block;
-  background: white;
-  padding: 0;
-  margin: 0;
-}
-html.engine-design-mode {
-  padding-bottom: 30px;
-}
-
-html.engine-cursor-move, html.engine-cursor-move * {
-  cursor: grabbing !important
-}
-
-html.engine-cursor-copy, html.engine-cursor-copy * {
-  cursor: copy !important
-}
-
-html.engine-cursor-ew-resize, html.engine-cursor-ew-resize * {
-  cursor: ew-resize !important
-}
-
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
-}
-
-.lc-container {
-  &:empty {
-    background: #f2f3f5;
-    color: #a7b1bd;
-    outline: 1px dashed rgba(31, 56, 88, 0.2);
-    outline-offset: -1px !important;
-    height: 66px;
-    max-height: 100%;
-    min-width: 140px;
-    text-align: center;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    &:before {
-      content: '\62D6\62FD\7EC4\4EF6\6216\6A21\677F\5230\8FD9\91CC';
-      font-size: 14px;
-      z-index: 1;
-      width: 100%;
-      white-space: nowrap;
-    }
-  }
-}
-
-.engine-empty {
-  background: #f2f3f5;
-  color: #a7b1bd;
-  outline: 1px dashed rgba(31, 56, 88, 0.2);
-  outline-offset: -1px !important;
-  height: 66px;
-  max-height: 100%;
-  min-width: 140px;
-  text-align: center;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-}
-
-.engine-empty:before {
-  content: '\62D6\62FD\7EC4\4EF6\6216\6A21\677F\5230\8FD9\91CC';
-  font-size: 14px;
-  z-index: 1;
-  width: 100%;
-  white-space: nowrap;
-}
-
-body.engine-document {
-  &:after, &:before {
-    content: "";
-    display: table;
-  }
-  &:after {
-    clear: both;
-  }
-
-  /*
-  .next-input-group,
-  .next-checkbox-group,.next-date-picker,.next-input,.next-month-picker,
-  .next-number-picker,.next-radio-group,.next-range,.next-range-picker,
-  .next-rating,.next-select,.next-switch,.next-time-picker,.next-upload,
-  .next-year-picker,
-  .next-breadcrumb-item,.next-calendar-header,.next-calendar-table {
-    pointer-events: none !important;
-  }*/
-}
-
-.engine-live-editing {
-  cursor: text;
-  outline: none;
-  box-shadow: 0 0 0px 2px rgb(102, 188, 92);
-  user-select: text;
-}
-
-#app {
-  height: 100vh;
-}
-
-.luna-page{
-  height: 100%;
-}
diff --git a/packages/rax-simulator-renderer/src/renderer.ts b/packages/rax-simulator-renderer/src/renderer.ts
deleted file mode 100644
index 29dfe625e..000000000
--- a/packages/rax-simulator-renderer/src/renderer.ts
+++ /dev/null
@@ -1,423 +0,0 @@
-import { BuiltinSimulatorRenderer, NodeInstance, Component } from '@ali/lowcode-designer';
-import { shared, render, createElement } from 'rax';
-import DriverUniversal from 'driver-universal';
-import { computed, obx } from '@recore/obx';
-import { RootSchema, NpmInfo, ComponentSchema } from '@ali/lowcode-types';
-import { Asset, isReactComponent, isESModule, setNativeSelection, cursor, isElement } from '@ali/lowcode-utils';
-
-import SimulatorRendererView from './renderer-view';
-import RaxEngine from '../../rax-render/src/index';
-import { getClientRects } from './utils/get-client-rects';
-import loader from './utils/loader';
-
-import Leaf from './builtin-components/Leaf';
-
-import { host } from './host';
-import { EventEmitter } from 'events';
-
-const { Instance } = shared;
-
-export interface LibraryMap {
-  [key: string]: string;
-}
-
-const SYMBOL_VNID = Symbol('_LCNodeId');
-
-function accessLibrary(library: string | object) {
-  if (typeof library !== 'string') {
-    return library;
-  }
-
-  return (window as any)[library];
-}
-
-export class SimulatorRenderer implements BuiltinSimulatorRenderer {
-  readonly isSimulatorRenderer = true;
-  private dispose?: () => void;
-
-  private instancesMap = new Map<string, any[]>();
-  @obx.ref private _schema?: RootSchema;
-  @computed get schema(): any {
-    return this._schema;
-  }
-  private _libraryMap: { [key: string]: string } = {};
-  private buildComponents() {
-    this._components = buildComponents(this._libraryMap, this._componentsMap);
-  }
-  @obx.ref private _components: any = {};
-  @computed get components(): object {
-    // 根据 device 选择不同组件，进行响应式
-    // 更好的做法是，根据 device 选择加载不同的组件资源，甚至是 simulatorUrl
-    return this._components;
-  }
-
-  @obx.ref private _designMode = 'design';
-  @computed get designMode(): any {
-    return this._designMode;
-  }
-
-  @obx.ref private _componentsMap = {};
-  @computed get componentsMap(): any {
-    return this._componentsMap;
-  }
-
-  @obx.ref private _device = 'default';
-  @computed get device() {
-    return this._device;
-  }
-
-  // context from: utils、constants、history、location、match
-  @obx.ref private _appContext = {};
-  @computed get context(): any {
-    return this._appContext;
-  }
-
-  @computed get suspended(): any {
-    return false;
-  }
-  @computed get scope(): any {
-    return null;
-  }
-
-  @computed get layout(): any {
-    // TODO: parse layout Component
-    return null;
-  }
-  private emitter = new EventEmitter();
-
-  constructor() {
-    if (!host) {
-      return;
-    }
-
-    this.dispose = host.connect(this as any, () => {
-      // sync layout config
-
-      // sync schema
-      this._schema = host.document.export(1);
-
-      // todo: split with others, not all should recompute
-      if (this._libraryMap !== host.libraryMap || this._componentsMap !== host.designer.componentsMap) {
-        this._libraryMap = host.libraryMap || {};
-        this._componentsMap = host.designer.componentsMap;
-        this.buildComponents();
-      }
-
-      // sync designMode
-      this._designMode = host.designMode;
-
-      // sync suspended
-
-      // sync scope
-
-      // sync device
-      this._device = host.device;
-
-      this.emitter.emit('rerender');
-    });
-    host.componentsConsumer.consume(async (componentsAsset) => {
-      if (componentsAsset) {
-        await this.load(componentsAsset);
-        this.buildComponents();
-      }
-    });
-    host.injectionConsumer.consume((data) => {
-      // sync utils, i18n, contants,... config
-      this._appContext = {
-        utils: {},
-        constants: {
-          name: 'demo',
-        },
-      };
-    });
-  }
-
-  getClosestNodeInstance(from: any, nodeId?: string): NodeInstance<any> | null {
-    const node = getClosestNodeInstance(from, nodeId);
-    if (node) {
-      node.nodeId = (node as any).props?.componentId;
-    }
-
-    return node;
-  }
-
-  getComponentInstances(id: string): any[] | null {
-    return this.instancesMap.get(id) || null;
-  }
-
-  onReRender(fn: () => void) {
-    this.emitter.on('rerender', fn);
-    return () => {
-      this.emitter.removeListener('renderer', fn);
-    };
-  }
-
-  getComponent(componentName: string) {
-    const paths = componentName.split('.');
-    const subs: string[] = [];
-
-    while (true) {
-      const component = this._components[componentName];
-      if (component) {
-        return getSubComponent(component, subs);
-      }
-
-      const sub = paths.pop();
-      if (!sub) {
-        return null;
-      }
-      subs.unshift(sub);
-      componentName = paths.join('.');
-    }
-
-    // return null;
-  }
-
-  createComponent(schema: ComponentSchema): Component | null {
-    return null;
-  }
-
-  setNativeSelection(enableFlag: boolean) {
-    setNativeSelection(enableFlag);
-  }
-  setDraggingState(state: boolean) {
-    cursor.setDragging(state);
-  }
-
-  setCopyState(state: boolean) {
-    cursor.setCopy(state);
-  }
-  clearState() {
-    cursor.release();
-  }
-
-  findDOMNodes(instance: any): Array<Element | Text> | null {
-    return [RaxEngine.findDOMNode(instance)];
-  }
-
-  /**
-   * 加载资源
-   */
-  load(asset: Asset): Promise<any> {
-    return loader.load(asset);
-  }
-
-  // private instancesMap = new Map<string, any[]>();
-  private unmountIntance(id: string, instance: any) {
-    const instances = this.instancesMap.get(id);
-    if (instances) {
-      const i = instances.indexOf(instance);
-      if (i > -1) {
-        instances.splice(i, 1);
-        host.setInstance(id, instances);
-      }
-    }
-  }
-  mountInstance(id: string, instance: any | null) {
-    const instancesMap = this.instancesMap;
-    if (instance == null) {
-      let instances = this.instancesMap.get(id);
-      if (instances) {
-        instances = instances.filter(checkInstanceMounted);
-        if (instances.length > 0) {
-          instancesMap.set(id, instances);
-          host.setInstance(id, instances);
-        } else {
-          instancesMap.delete(id);
-          host.setInstance(id, null);
-        }
-      }
-      return;
-    }
-    const unmountIntance = this.unmountIntance.bind(this);
-    const origId = (instance as any)[SYMBOL_VNID];
-    if (origId && origId !== id) {
-      // 另外一个节点的 instance 在此被复用了，需要从原来地方卸载
-      unmountIntance(origId, instance);
-    }
-    if (isElement(instance)) {
-      // cacheReactKey(instance);
-    } else if (origId !== id) {
-      // 涵盖 origId == null || origId !== id 的情况
-      let origUnmount: any = instance.componentWillUnmount;
-      if (origUnmount && origUnmount.origUnmount) {
-        origUnmount = origUnmount.origUnmount;
-      }
-      // hack! delete instance from map
-      const newUnmount = function(this: any) {
-        unmountIntance(id, instance);
-        origUnmount && origUnmount.call(this);
-      };
-      (newUnmount as any).origUnmount = origUnmount;
-      instance.componentWillUnmount = newUnmount;
-    }
-
-    (instance as any)[SYMBOL_VNID] = id;
-    let instances = this.instancesMap.get(id);
-    if (instances) {
-      const l = instances.length;
-      instances = instances.filter(checkInstanceMounted);
-      let updated = instances.length !== l;
-      if (!instances.includes(instance)) {
-        instances.push(instance);
-        updated = true;
-      }
-      if (!updated) {
-        return;
-      }
-    } else {
-      instances = [instance];
-    }
-    instancesMap.set(id, instances);
-    host.setInstance(id, instances);
-  }
-
-  getClientRects(element: Element | Text) {
-    return getClientRects(element);
-  }
-
-  private _running = false;
-
-  run() {
-    if (this._running) {
-      return;
-    }
-    this._running = true;
-    const containerId = 'app';
-    let container = document.getElementById(containerId);
-    if (!container) {
-      container = document.createElement('div');
-      document.body.appendChild(container);
-      container.id = containerId;
-    }
-    // ==== compatiable vision
-    document.documentElement.classList.add('engine-page');
-    document.body.classList.add('engine-document'); // important! Stylesheet.invoke depends
-
-    render(createElement(SimulatorRendererView, { renderer: this }), document.getElementById('app'), {
-      driver: DriverUniversal,
-    });
-    host.document.setRendererReady(this);
-  }
-}
-
-function getSubComponent(library: any, paths: string[]) {
-  const l = paths.length;
-  if (l < 1 || !library) {
-    return library;
-  }
-  let i = 0;
-  let component: any;
-  while (i < l) {
-    const key = paths[i]!;
-    let ex: any;
-    try {
-      component = library[key];
-    } catch (e) {
-      ex = e;
-      component = null;
-    }
-    if (i === 0 && component == null && key === 'default') {
-      if (ex) {
-        return l === 1 ? library : null;
-      }
-      component = library;
-    } else if (component == null) {
-      return null;
-    }
-    library = component;
-    i++;
-  }
-  return component;
-}
-
-function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmInfo) {
-  if (!npm) {
-    return accessLibrary(componentName);
-  }
-  // libraryName the key access to global
-  // export { exportName } from xxx exportName === global.libraryName.exportName
-  // export exportName from xxx   exportName === global.libraryName.default || global.libraryName
-  // export { exportName as componentName } from package
-  // if exportName == null exportName === componentName;
-  // const componentName = exportName.subName, if exportName empty subName donot use
-  const exportName = npm.exportName || npm.componentName || componentName;
-  const libraryName = libraryMap[npm.package] || exportName;
-  const library = accessLibrary(libraryName);
-  const paths = npm.exportName && npm.subName ? npm.subName.split('.') : [];
-  if (npm.destructuring) {
-    paths.unshift(exportName);
-  } else if (isESModule(library)) {
-    paths.unshift('default');
-  }
-  return getSubComponent(library, paths);
-}
-
-const builtinComponents = {
-  // Slot,
-  Leaf,
-};
-
-function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo }) {
-  const components: any = {
-    ...builtinComponents,
-  };
-  Object.keys(componentsMap).forEach((componentName) => {
-    let component = componentsMap[componentName];
-    if (isReactComponent(component)) {
-      components[componentName] = component;
-    } else {
-      component = findComponent(libraryMap, componentName, component);
-      if (component) {
-        components[componentName] = component;
-      }
-    }
-  });
-  return components;
-}
-
-function getClosestNodeInstance(from: any, specId?: string): NodeInstance<any> | null {
-  const el: any = from;
-  if (el) {
-    // if (isElement(el)) {
-    //   el = cacheReactKey(el);
-    // } else {
-    //   return getNodeInstance(el, specId);
-    // }
-    return getNodeInstance(el);
-  }
-  return null;
-}
-
-function matcher(parent: any) {
-  return parent.__isReactiveComponent;
-}
-
-function getNodeInstance(dom: HTMLElement): NodeInstance<any> | null {
-  const INTERNAL = '_internal';
-  let instance = Instance.get(dom);
-  let parent;
-  while (instance && instance[INTERNAL]) {
-    if (matcher(instance)) {
-      parent = instance;
-      break;
-    }
-    instance = instance[INTERNAL].__parentInstance;
-  }
-  return parent;
-  // const instance = fiberNode.stateNode;
-  // if (instance) {
-  //   console.log(instance);
-  // }
-  // return getNodeInstance(fiberNode.return);
-  // return instance;
-}
-
-function checkInstanceMounted(instance: any): boolean {
-  if (isElement(instance)) {
-    return instance.parentElement != null;
-  }
-  return true;
-}
-
-export default new SimulatorRenderer();
diff --git a/packages/rax-simulator-renderer/src/utils/create-defer.ts b/packages/rax-simulator-renderer/src/utils/create-defer.ts
deleted file mode 100644
index e7997365a..000000000
--- a/packages/rax-simulator-renderer/src/utils/create-defer.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export interface Defer<T = any> {
-  resolve(value?: T | PromiseLike<T>): void;
-  reject(reason?: any): void;
-  promise(): Promise<T>;
-}
-
-export function createDefer<T = any>(): Defer<T> {
-  const r: any = {};
-  const promise = new Promise<T>((resolve, reject) => {
-    r.resolve = resolve;
-    r.reject = reject;
-  });
-
-  r.promise = () => promise;
-
-  return r;
-}
diff --git a/packages/rax-simulator-renderer/src/utils/get-client-rects.ts b/packages/rax-simulator-renderer/src/utils/get-client-rects.ts
deleted file mode 100644
index f514c0a39..000000000
--- a/packages/rax-simulator-renderer/src/utils/get-client-rects.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { isElement } from '@ali/lowcode-utils';
-
-// a range for test TextNode clientRect
-const cycleRange = document.createRange();
-
-export function getClientRects(node: Element | Text) {
-  if (isElement(node)) {
-    return [node.getBoundingClientRect()];
-  }
-
-  cycleRange.selectNode(node);
-  return Array.from(cycleRange.getClientRects());
-}
diff --git a/packages/rax-simulator-renderer/src/utils/get-closest-node-instance.ts b/packages/rax-simulator-renderer/src/utils/get-closest-node-instance.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/rax-simulator-renderer/src/utils/get-device-view.ts b/packages/rax-simulator-renderer/src/utils/get-device-view.ts
deleted file mode 100644
index 900556259..000000000
--- a/packages/rax-simulator-renderer/src/utils/get-device-view.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-function ucfirst(s: string) {
-  return s.charAt(0).toUpperCase() + s.substring(1);
-}
-function getDeviceView(view: any, device: string, mode: string) {
-  if (!view || typeof view === 'string') {
-    return view;
-  }
-
-  // compatible vision Mobile | Preview
-  device = ucfirst(device);
-  if (device === 'Mobile' && view.hasOwnProperty(device)) {
-    view = view[device];
-  }
-  mode = ucfirst(mode);
-  if (mode === 'Preview' && view.hasOwnProperty(mode)) {
-    view = view[mode];
-  }
-  return view;
-}
-
-export default {
-  getDeviceView,
-};
diff --git a/packages/rax-simulator-renderer/src/utils/loader.ts b/packages/rax-simulator-renderer/src/utils/loader.ts
deleted file mode 100644
index 3bba55ba1..000000000
--- a/packages/rax-simulator-renderer/src/utils/loader.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { load, evaluate } from './script';
-import StylePoint from './style';
-import {
-  Asset,
-  AssetLevel,
-  AssetLevels,
-  AssetType,
-  AssetList,
-  isAssetBundle,
-  isAssetItem,
-  assetItem,
-  AssetItem,
-  isCSSUrl,
-} from '@ali/lowcode-utils';
-
-function parseAssetList(scripts: any, styles: any, assets: AssetList, level?: AssetLevel) {
-  for (const asset of assets) {
-    parseAsset(scripts, styles, asset, level);
-  }
-}
-
-function parseAsset(scripts: any, styles: any, asset: Asset | undefined | null, level?: AssetLevel) {
-  if (!asset) {
-    return;
-  }
-  if (Array.isArray(asset)) {
-    return parseAssetList(scripts, styles, asset, level);
-  }
-
-  if (isAssetBundle(asset)) {
-    if (asset.assets) {
-      if (Array.isArray(asset.assets)) {
-        parseAssetList(scripts, styles, asset.assets, asset.level || level);
-      } else {
-        parseAsset(scripts, styles, asset.assets, asset.level || level);
-      }
-      return;
-    }
-    return;
-  }
-
-  if (!isAssetItem(asset)) {
-    asset = assetItem(isCSSUrl(asset) ? AssetType.CSSUrl : AssetType.JSUrl, asset, level)!;
-  }
-
-  let lv = asset.level || level;
-
-  if (!lv || AssetLevel[lv] == null) {
-    lv = AssetLevel.App;
-  }
-
-  asset.level = lv;
-  if (asset.type === AssetType.CSSUrl || asset.type == AssetType.CSSText) {
-    styles[lv].push(asset);
-  } else {
-    scripts[lv].push(asset);
-  }
-}
-
-export class AssetLoader {
-  async load(asset: Asset) {
-    const styles: any = {};
-    const scripts: any = {};
-    AssetLevels.forEach(lv => {
-      styles[lv] = [];
-      scripts[lv] = [];
-    });
-    parseAsset(scripts, styles, asset);
-    const styleQueue: AssetItem[] = styles[AssetLevel.Environment].concat(
-      styles[AssetLevel.Library],
-      styles[AssetLevel.Theme],
-      styles[AssetLevel.Runtime],
-      styles[AssetLevel.App],
-    );
-    const scriptQueue: AssetItem[] = scripts[AssetLevel.Environment].concat(
-      scripts[AssetLevel.Library],
-      scripts[AssetLevel.Theme],
-      scripts[AssetLevel.Runtime],
-      scripts[AssetLevel.App],
-    );
-    await Promise.all(
-      styleQueue.map(({ content, level, type, id }) => this.loadStyle(content, level!, type === AssetType.CSSUrl, id)),
-    );
-    await Promise.all(scriptQueue.map(({ content, type }) => this.loadScript(content, type === AssetType.JSUrl)));
-  }
-
-  private stylePoints = new Map<string, StylePoint>();
-  private loadStyle(content: string | undefined | null, level: AssetLevel, isUrl?: boolean, id?: string) {
-    if (!content) {
-      return;
-    }
-    let point: StylePoint | undefined;
-    if (id) {
-      point = this.stylePoints.get(id);
-      if (!point) {
-        point = new StylePoint(level, id);
-        this.stylePoints.set(id, point);
-      }
-    } else {
-      point = new StylePoint(level);
-    }
-    return isUrl ? point.applyUrl(content) : point.applyText(content);
-  }
-
-  private loadScript(content: string | undefined | null, isUrl?: boolean) {
-    if (!content) {
-      return;
-    }
-    return isUrl ? load(content) : evaluate(content);
-  }
-}
-
-export default new AssetLoader();
diff --git a/packages/rax-simulator-renderer/src/utils/script.ts b/packages/rax-simulator-renderer/src/utils/script.ts
deleted file mode 100644
index 81841ff6d..000000000
--- a/packages/rax-simulator-renderer/src/utils/script.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { createDefer } from './create-defer';
-
-export function evaluate(script: string) {
-  const scriptEl = document.createElement('script');
-  scriptEl.text = script;
-  document.head.appendChild(scriptEl);
-  document.head.removeChild(scriptEl);
-}
-
-export function load(url: string) {
-  const node: any = document.createElement('script');
-
-  // node.setAttribute('crossorigin', 'anonymous');
-
-  node.onload = onload;
-  node.onerror = onload;
-
-  const i = createDefer();
-
-  function onload(e: any) {
-    node.onload = null;
-    node.onerror = null;
-    if (e.type === 'load') {
-      i.resolve();
-    } else {
-      i.reject();
-    }
-    // document.head.removeChild(node);
-    // node = null;
-  }
-
-  // node.async = true;
-  node.src = url;
-
-  document.head.appendChild(node);
-
-  return i.promise();
-}
-
-export function evaluateExpression(expr: string) {
-  // eslint-disable-next-line no-new-func
-  const fn = new Function(expr);
-  return fn();
-}
-
-export function newFunction(args: string, code: string) {
-  try {
-    // eslint-disable-next-line no-new-func
-    return new Function(args, code);
-  } catch (e) {
-    console.warn('Caught error, Cant init func');
-    return null;
-  }
-}
diff --git a/packages/rax-simulator-renderer/src/utils/style.ts b/packages/rax-simulator-renderer/src/utils/style.ts
deleted file mode 100644
index 74f4eddd4..000000000
--- a/packages/rax-simulator-renderer/src/utils/style.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { createDefer } from './create-defer';
-
-export default class StylePoint {
-  private lastContent: string | undefined;
-  private lastUrl: string | undefined;
-  private placeholder: Element | Text;
-
-  constructor(readonly level: number, readonly id?: string) {
-    let placeholder: any;
-    if (id) {
-      placeholder = document.head.querySelector(`style[data-id="${id}"]`);
-    }
-    if (!placeholder) {
-      placeholder = document.createTextNode('');
-      const meta = document.head.querySelector(`meta[level="${level}"]`);
-      if (meta) {
-        document.head.insertBefore(placeholder, meta);
-      } else {
-        document.head.appendChild(placeholder);
-      }
-    }
-    this.placeholder = placeholder;
-  }
-
-  applyText(content: string) {
-    if (this.lastContent === content) {
-      return;
-    }
-    this.lastContent = content;
-    this.lastUrl = undefined;
-    const element = document.createElement('style');
-    element.setAttribute('type', 'text/css');
-    if (this.id) {
-      element.setAttribute('data-id', this.id);
-    }
-    element.appendChild(document.createTextNode(content));
-    document.head.insertBefore(element, this.placeholder.parentNode === document.head ? this.placeholder.nextSibling : null);
-    document.head.removeChild(this.placeholder);
-    this.placeholder = element;
-  }
-
-  applyUrl(url: string) {
-    if (this.lastUrl === url) {
-      return;
-    }
-    this.lastContent = undefined;
-    this.lastUrl = url;
-    const element = document.createElement('link');
-    element.onload = onload;
-    element.onerror = onload;
-
-    const i = createDefer();
-    function onload(e: any) {
-      element.onload = null;
-      element.onerror = null;
-      if (e.type === 'load') {
-        i.resolve();
-      } else {
-        i.reject();
-      }
-    }
-
-    element.href = url;
-    element.rel = 'stylesheet';
-    if (this.id) {
-      element.setAttribute('data-id', this.id);
-    }
-    document.head.insertBefore(element, this.placeholder.parentNode === document.head ? this.placeholder.nextSibling : null);
-    document.head.removeChild(this.placeholder);
-    this.placeholder = element;
-    return i.promise();
-  }
-}
diff --git a/packages/react-renderer/src/engine/index.jsx b/packages/react-renderer/src/engine/index.jsx
index 7afef11c6..244430e1a 100644
--- a/packages/react-renderer/src/engine/index.jsx
+++ b/packages/react-renderer/src/engine/index.jsx
@@ -2,8 +2,6 @@ import React, { Component, PureComponent, createElement as reactCreateElement }
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import Debug from 'debug';
-import { isEmpty } from '@ali/b3-one/lib/obj';
-import Div from '@ali/iceluna-comp-div';
 import AppContext from '../context/appContext';
 import { isFileSchema, goldlog } from '../utils';
 import PageEngine from './pageEngine';
@@ -11,7 +9,9 @@ import ComponentEngine from './compEngine';
 import BlockEngine from './blockEngine';
 import AddonEngine from './addonEngine';
 import TempEngine from './tempEngine';
+import { isEmpty } from '@ali/b3-one/lib/obj';
 import BaseEngine from './base';
+import Div from '@ali/iceluna-comp-div';
 
 window.React = React;
 window.ReactDom = ReactDOM;
@@ -47,7 +47,6 @@ function isReactClass(obj) {
 
 export default class Engine extends PureComponent {
   static dislayName = 'engine';
-
   static propTypes = {
     appHelper: PropTypes.object,
     components: PropTypes.object,
@@ -58,7 +57,6 @@ export default class Engine extends PureComponent {
     onCompGetCtx: PropTypes.func,
     customCreateElement: PropTypes.func,
   };
-
   static defaultProps = {
     appHelper: null,
     components: {},
@@ -118,10 +116,12 @@ export default class Engine extends PureComponent {
       return;
     }
     Component.patchedCatch = true;
-    Component.getDerivedStateFromError = (error) => ({ engineRenderError: true, error });
+    Component.getDerivedStateFromError = (error) => {
+      return { engineRenderError: true, error };
+    };
     const engine = this;
     const originRender = Component.prototype.render;
-    Component.prototype.render = function() {
+    Component.prototype.render = function () {
       if (this.state && this.state.engineRenderError) {
         this.state.engineRenderError = false;
         return engine.createElement(engine.getFaultComponent(), {
@@ -132,7 +132,7 @@ export default class Engine extends PureComponent {
       return originRender.call(this);
     };
     const originShouldComponentUpdate = Component.prototype.shouldComponentUpdate;
-    Component.prototype.shouldComponentUpdate = function(nextProps, nextState) {
+    Component.prototype.shouldComponentUpdate = function (nextProps, nextState) {
       if (nextState && nextState.engineRenderError) {
         return true;
       }
@@ -145,19 +145,15 @@ export default class Engine extends PureComponent {
     this.patchDidCatch(Component);
     return (this.props.customCreateElement || reactCreateElement)(Component, props, children);
   }
-
   getNotFoundComponent() {
     return this.props.notFoundComponent || NotFoundComponent;
   }
-
   getFaultComponent() {
     return this.props.faultComponent || FaultComponent;
   }
 
   render() {
-    const {
- schema, designMode, appHelper, components, customCreateElement
-} = this.props;
+    const { schema, designMode, appHelper, components, customCreateElement } = this.props;
     if (isEmpty(schema)) {
       return null;
     }
diff --git a/packages/react-renderer/src/engine/pageEngine.jsx b/packages/react-renderer/src/engine/pageEngine.jsx
index 05a7b083b..2ddccecf9 100644
--- a/packages/react-renderer/src/engine/pageEngine.jsx
+++ b/packages/react-renderer/src/engine/pageEngine.jsx
@@ -7,22 +7,19 @@ import '@alifd/next/lib/loading/style';
 import AppContext from '../context/appContext';
 import BaseEngine from './base';
 import { isSchema, getFileCssName } from '../utils';
-
 const debug = Debug('engine:page');
 
 export default class PageEngine extends BaseEngine {
   static dislayName = 'page-engine';
-
   static propTypes = {
     __schema: PropTypes.object,
   };
-
   static defaultProps = {
     __schema: {},
   };
 
   static getDerivedStateFromProps(props, state) {
-    debug('page.getDerivedStateFromProps');
+    debug(`page.getDerivedStateFromProps`);
     const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps;
     if (func) {
       return func(props, state);
@@ -47,22 +44,18 @@ export default class PageEngine extends BaseEngine {
     super.getSnapshotBeforeUpdate(...arguments);
     debug(`page.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`);
   }
-
   async componentDidMount() {
     super.componentDidMount(...arguments);
     debug(`page.componentDidMount - ${this.props.__schema.fileName}`);
   }
-
   async componentDidUpdate() {
     super.componentDidUpdate(...arguments);
     debug(`page.componentDidUpdate - ${this.props.__schema.fileName}`);
   }
-
   async componentWillUnmount() {
     super.componentWillUnmount(...arguments);
     debug(`page.componentWillUnmount - ${this.props.__schema.fileName}`);
   }
-
   async componentDidCatch() {
     await super.componentDidCatch(...arguments);
     debug(`page.componentDidCatch - ${this.props.__schema.fileName}`);
@@ -80,9 +73,7 @@ export default class PageEngine extends BaseEngine {
     this.__render();
 
     const props = this.__parseData(__schema.props);
-    const {
- id, className, style, autoLoading, defaultHeight = 300, loading
-} = props;
+    const { id, className, style, autoLoading, defaultHeight = 300, loading } = props;
 
     const { Page } = __components;
     if (Page) {
diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx
index 248589170..c878cac76 100644
--- a/packages/react-simulator-renderer/src/renderer-view.tsx
+++ b/packages/react-simulator-renderer/src/renderer-view.tsx
@@ -1,5 +1,5 @@
 import LowCodeRenderer from '@ali/lowcode-react-renderer';
-// import { isObject } from 'lodash';
+import { isObject } from 'lodash';
 import { ReactInstance, Fragment, Component, createElement } from 'react';
 import { observer } from '@recore/obx-react';
 import { SimulatorRenderer } from './renderer';
diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts
index c0425b375..dd578ce4b 100644
--- a/packages/react-simulator-renderer/src/renderer.ts
+++ b/packages/react-simulator-renderer/src/renderer.ts
@@ -87,11 +87,11 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
   @computed get context(): any {
     return this._appContext;
   }
-  @obx.ref private _designMode = 'design';
+  @obx.ref private _designMode: string = 'design';
   @computed get designMode(): any {
     return this._designMode;
   }
-  @obx.ref private _device = 'default';
+  @obx.ref private _device: string = 'default';
   @computed get device() {
     return this._device;
   }
@@ -224,7 +224,7 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
         return {};
       }
 
-      const result = { ...propsSchema };
+      const result = {...propsSchema};
       const reg = /^(?:this\.props|props)\.(\S+)$/;
       Object.keys(propsSchema).map((key: string) => {
         if (propsSchema[key].type === 'JSExpression') {
@@ -250,8 +250,8 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
       let props = processPropsSchema(schema.props, propsMap);
       props = host.document.designer.transformProps(props, node, TransformStage.Init);
       props = host.document.designer.transformProps(props, node, TransformStage.Render);
-      return createElement(Com, { ...props, _leaf }, children);
-    };
+      return createElement(Com, {...props, _leaf}, children);
+    }
 
     const renderer = this;
     class Com extends React.Component {
@@ -259,7 +259,7 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
         const componentsMap = renderer.componentsMap;
         let children = null;
         if (_schema.children && Array.isArray(_schema.children)) {
-          children = _schema.children?.map((item: any) => getElement(componentsMap, item, this.props));
+          children = _schema.children?.map((item:any) => getElement(componentsMap, item, this.props));
         }
         return createElement(React.Fragment, {}, children);
       }
@@ -386,12 +386,9 @@ const builtinComponents = {
   Leaf,
 };
 
-function buildComponents(
-  libraryMap: LibraryMap,
-  componentsMap: { [componentName: string]: NpmInfo | ComponentType<any> },
-) {
+function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo | ComponentType<any> }) {
   const components: any = {
-    ...builtinComponents,
+    ...builtinComponents
   };
   Object.keys(componentsMap).forEach((componentName) => {
     let component = componentsMap[componentName];
diff --git a/scripts/start.sh b/scripts/start.sh
index 251a119df..388716ab7 100755
--- a/scripts/start.sh
+++ b/scripts/start.sh
@@ -1,6 +1,5 @@
 #!/usr/bin/env bash
 
 # FIXME! do not run build
-lerna exec --scope @ali/lowcode-rax-renderer -- npm run build
 lerna exec --scope @ali/lowcode-react-renderer -- npm run build
 lerna exec --scope @ali/lowcode-demo -- npm start