feat: rax render

packages/demo/public/index.html

@@ -16,7 +16,7 @@
     <script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
     <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css" />
     <script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/rax@1.1.3/dist/rax.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rax@1.1.3/dist/rax.js"></script>
     <link rel="stylesheet" href="/css/editor-preset-vision.css" />
     <script>
       window.pageConfig = {

packages/demo/public/rax.json

@@ -4,7 +4,7 @@
   "props": {},
   "children": [
     {
-      "componentName": "View",
+      "componentName": "Container",
       "props": {},
       "children": [
         {

packages/demo/public/raxAssets.json

@@ -1,83 +1,367 @@
 {
-  "version": "1.0.0",
+  "externals": [
-  "externals": [],
+    {
-  "componentDependencies": [{
+      "urls": ["//g.alicdn.com/platform/c/react/16.5.2/react.min.js"],
-    "prototypeConfigsUrl": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.4/proto.c0b2ef2.js"],
+      "library": "React",
-    "prototypeViewsUrl": null,
+      "name": "react",
-    "alias": "",
+      "version": "16.5.2"
-    "library": "AliVcDiv",
+    },
-    "urls": [
+    {
-      "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.4/view.c0b2ef2.css",
+      "urls": ["//g.alicdn.com/platform/c/react-dom/16.5.2/react-dom.min.js"],
-      "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.4/view.c0b2ef2.js"
+      "library": "ReactDOM",
+      "name": "react-dom",
+      "version": "16.12.0"
+    },
+    {
+      "urls": ["//g.alicdn.com/platform/c/prop-types/15.6.2/prop-types.js"],
+      "library": "PropTypes",
+      "name": "prop-types",
+      "version": "15.6.2"
+    },
+    { "library": "ReactRouter", "name": "react-router" },
+    { "library": "ReactRouterDOM", "name": "react-router-dom" },
+    { "library": "Babel", "name": "babel-standalone" },
+    { "library": "Recore", "name": "@ali/recore" },
+    {
+      "urls": ["https://g.alicdn.com/code/lib/moment.js/2.24.0/moment-with-locales.min.js"],
+      "library": "moment",
+      "name": "moment",
+      "version": "2.24.0"
+    },
+    { "library": "VisualEngine", "name": "engine" },
+    { "library": "VisualEngine", "name": "visualengine" },
+    { "library": "VisualEngine", "name": "@ali/visualengine" },
+    { "library": "VisualEngineUtils", "name": "engine-utils" },
+    { "library": "VisualEngineUtils", "name": "@ali/visualengine-utils" },
+    { "library": "VisualEngine.ui.Popup", "name": "@ali/ve-popups" },
+    { "library": "VisualEngineUtils.FieldControl", "name": "@ali/ve-field" },
+    { "library": "VisualEngineUtils.BoolControl", "name": "@ali/ve-bool-control" },
+    { "library": "VisualEngineUtils.ChoiceControl", "name": "@ali/ve-choice-control" },
+    { "library": "VisualEngineUtils.ColorControl", "name": "@ali/ve-color-control" },
+    { "library": "VisualEngineUtils.DateControl", "name": "@ali/ve-date-control" },
+    { "library": "VisualEngineUtils.I18nControl", "name": "@ali/ve-i18n-control" },
+    { "library": "VisualEngineUtils.NumberControl", "name": "@ali/ve-number-control" },
+    { "library": "VisualEngineUtils.SelectControl", "name": "@ali/ve-select-control" },
+    { "library": "VisualEngineUtils.SortableControl", "name": "@ali/ve-sortable" },
+    { "library": "VisualEngineUtils.TextControl", "name": "@ali/ve-text-control" },
+    { "library": "VisualEngineUtils.ImageControl", "name": "@ali/ve-image-control" },
+    { "library": "VisualEngineUtils.SearchControl", "name": "@ali/ve-search-control" },
+    { "library": "VisualEngineUtils.BoolSetter", "name": "@ali/vs-bool" },
+    { "library": "VisualEngineUtils.ChoiceSetter", "name": "@ali/vs-choice" },
+    { "library": "VisualEngineUtils.CodeSetter", "name": "@ali/vs-code" },
+    { "library": "VisualEngineUtils.ColorSetter", "name": "@ali/vs-color" },
+    { "library": "VisualEngineUtils.DateSetter", "name": "@ali/vs-date" },
+    { "library": "VisualEngineUtils.I18nSetter", "name": "@ali/vs-i18n" },
+    { "library": "VisualEngineUtils.JsonSetter", "name": "@ali/vs-json" },
+    { "library": "VisualEngineUtils.ListSetter", "name": "@ali/vs-list" },
+    { "library": "VisualEngineUtils.NumberSetter", "name": "@ali/vs-number" },
+    { "library": "VisualEngineUtils.OptionsSetter", "name": "@ali/vs-options" },
+    { "library": "VisualEngineUtils.SelectSetter", "name": "@ali/vs-select" },
+    { "library": "VisualEngineUtils.TextSetter", "name": "@ali/vs-text" },
+    { "library": "VisualEngineUtils.ValidationSetter", "name": "@ali/vs-validation" },
+    { "library": "VisualEngineUtils.ImageSetter", "name": "@ali/vs-image" },
+    { "library": "VisualEngineUtils.StyleSetter", "name": "@ali/vs-style" },
+    { "library": "VisualEngineUtils.EventSetter", "name": "@ali/vs-event" },
+    { "library": "RenderEngine", "name": "@ali/render-engine" },
+    { "library": "Highcharts", "name": "highcharts" },
+    { "library": "Object", "name": "highcharts-more" },
+    { "library": "Highcharts && window.Highcharts.map", "name": "highcharts/highmaps" },
+    { "library": "jQuery", "name": "$" },
+    { "library": "jQuery", "name": "jquery" },
+    { "library": "_", "name": "lodash" },
+    { "library": "nattyFetch", "name": "natty-fetch" },
+    { "library": "nattyFetch", "name": "natty-fetch/dist/natty-fetch.pc" },
+    { "library": "nattyFetch", "name": "natty-fetch/dist/natty-fetch" },
+    { "library": "nattyStorage", "name": "natty-storage" },
+    { "library": "Rax", "name": "rax" },
+    {
+      "urls": ["https://g.alicdn.com/ib-fe/ib-vendor/mx/gl.js"],
+      "library": "mapboxgl",
+      "name": "@ali/ib-mapbox",
+      "version": "1.0.0"
+    }
   ],
+  "appKey": "template_deep_mobile",
+  "systemType": "",
+  "componentDependencies": [
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": {
+        "default": [
+          "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-rax-page/4.0.4/proto.c94ee38.css",
+          "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-rax-page/4.0.4/proto.bf61331.js"
+        ]
+      },
+      "prototypeConfigsUrl": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-rax-page/4.0.4/proto.c94ee38.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-rax-page/4.0.4/proto.bf61331.js"
+      ],
+      "alias": "",
+      "urls": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-rax-page/4.0.4/view.5030228.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-rax-page/4.0.4/view.6186d2f.js"
+      ],
+      "library": "AliVcRaxPage",
+      "components": null,
+      "packageName": "@ali/vc-rax-page",
+      "version": "4.0.4"
+    },
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": {
+        "default": [
+          "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile-open-button/1.0.5/proto.798dd4e.css",
+          "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile-open-button/1.0.5/proto.78c100c.js"
+        ]
+      },
+      "prototypeConfigsUrl": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile-open-button/1.0.5/proto.798dd4e.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile-open-button/1.0.5/proto.78c100c.js"
+      ],
+      "alias": "",
+      "urls": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile-open-button/1.0.5/view.23d106a.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile-open-button/1.0.5/view.314cec4.js"
+      ],
+      "library": "AliVcDeepMobileOpenButton",
+      "components": null,
+      "packageName": "@ali/vc-deep-mobile-open-button",
+      "version": "1.0.5"
+    },
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": {
+        "default": [
+          "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/proto.bb4ec38.css",
+          "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/proto.ed31eab.js"
+        ]
+      },
+      "prototypeConfigsUrl": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/proto.bb4ec38.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/proto.ed31eab.js"
+      ],
+      "alias": "",
+      "urls": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/view.f2b6dde.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/view.46f546f.js",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/view.mobile.f2b6dde.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/view.mobile.6b901e9.js"
+      ],
+      "library": "AliVcDeepMobile",
       "components": null,
       "packageName": "@ali/vc-deep-mobile",
-    "version": "1.0.1"
+      "version": "2.0.1-beta.5"
-  }],
-  "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",
+      "prototypeViewsUrl": null,
-      "package": "rax-text",
+      "prototypeUrls": {
-      "version": "1.19.18",
+        "default": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-component/1.1.1/proto.55a6360.js"]
-      "urls": ["https://cdn.jsdelivr.net/npm/rax-text@1.3.1/build/index.js"],
+      },
-      "library": "Text"
+      "prototypeConfigsUrl": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-component/1.1.1/proto.55a6360.js"
+      ],
+      "alias": "",
+      "urls": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-component/1.1.1/view.0e43387.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-component/1.1.1/view.4ea485d.js"
+      ],
+      "library": "AliVcComponent",
+      "components": null,
+      "packageName": "@ali/vc-component",
+      "version": "1.1.1"
+    },
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": {
+        "default": [
+          "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-block-wrapper/1.0.6/proto.1cca36a.css",
+          "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-block-wrapper/1.0.6/proto.a3ca779.js"
+        ]
+      },
+      "prototypeConfigsUrl": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-block-wrapper/1.0.6/proto.1cca36a.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-block-wrapper/1.0.6/proto.a3ca779.js"
+      ],
+      "alias": "",
+      "urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-block-wrapper/1.0.6/view.54ba1c5.js"],
+      "library": "AliVcBlockWrapper",
+      "components": null,
+      "packageName": "@ali/vc-block-wrapper",
+      "version": "1.0.6"
     }
   ],
-  "components": [{
+  "utilsDependencies": [
-    "componentName": "Page",
+    {
-    "title": "页面",
+      "prototypeViewsUrl": null,
-    "configure": {
+      "prototypeUrls": null,
-      "events": {
+      "prototypeConfigsUrl": null,
-        "supportedLifecycles": [{
+      "alias": "",
-          "description": "初始化时",
+      "urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-toolkit/1.0.8/main.e3b517b.js"],
-          "name": "constructor"
+      "library": "AliVuToolkit",
-        }, {
+      "components": null,
-          "description": "装载后",
+      "packageName": "@ali/vu-toolkit",
-          "name": "componentDidMount"
+      "version": "1.0.8"
-        }, {
-          "description": "更新时",
-          "name": "componentDidMount"
-        }, {
-          "description": "卸载时",
-          "name": "componentWillUnmount"
-        }]
     },
-      "component": {
+    {
-        "isContainer": true
+      "prototypeViewsUrl": null,
-      }
+      "prototypeUrls": null,
-    }
+      "prototypeConfigsUrl": null,
-  },{
+      "alias": "",
-    "componentName": "View",
+      "urls": [
-    "npm": {
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-fusion-miniapp/2.0.0/main.a9303b0.css",
-      "package": "rax-view",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-fusion-miniapp/2.0.0/main.0a9dcbf.js"
-      "destructuring": true,
+      ],
-      "exportName": "View"
+      "library": "AliVuFusionMiniapp",
+      "components": null,
+      "packageName": "@ali/vu-fusion-miniapp",
+      "version": "2.0.0"
     },
-    "title": "视图",
+    {
-    "configure": {
+      "prototypeViewsUrl": null,
-      "component": {
+      "prototypeUrls": null,
-        "isContainer": true
+      "prototypeConfigsUrl": null,
-      }
+      "alias": "",
-    }
+      "urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-legao-builtin/1.4.0-beta.5/main.ce04344.js"],
-  },{
+      "library": "AliVuLegaoBuiltin",
-    "componentName": "Text",
+      "components": null,
-    "npm": {
+      "packageName": "@ali/vu-legao-builtin",
-      "package": "rax-text",
+      "version": "1.4.0-beta.5"
-      "destructuring": true,
-      "exportName": "Text"
     },
-    "title": "文本",
+    {
-    "configure": {
+      "prototypeViewsUrl": null,
-      "component": {
+      "prototypeUrls": null,
-        "isContainer": true
+      "prototypeConfigsUrl": null,
+      "alias": "",
+      "urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-dataSource/1.0.4/main.f11b596.js"],
+      "library": "AliVuDataSource",
+      "components": null,
+      "packageName": "@ali/vu-dataSource",
+      "version": "1.0.4"
+    },
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": null,
+      "prototypeConfigsUrl": null,
+      "alias": "",
+      "urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-formatter/2.0.0/main.60e759a.js"],
+      "library": "AliVuFormatter",
+      "components": null,
+      "packageName": "@ali/vu-formatter",
+      "version": "2.0.0"
+    },
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": null,
+      "prototypeConfigsUrl": null,
+      "alias": "",
+      "urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-router-miniapp/0.1.1/main.3d126aa.js"],
+      "library": "AliVuRouterMiniapp",
+      "components": null,
+      "packageName": "@ali/vu-router-miniapp",
+      "version": "0.1.1"
+    },
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": null,
+      "prototypeConfigsUrl": null,
+      "alias": "universal",
+      "urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/deep-mobile-universal-api/1.1.2/main.0cfe8ef.js"],
+      "library": "AliDeepMobileUniversalApi",
+      "components": null,
+      "packageName": "@ali/deep-mobile-universal-api",
+      "version": "1.1.2"
+    },
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": null,
+      "prototypeConfigsUrl": null,
+      "alias": "",
+      "urls": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-router/1.2.1/main.5a856a4.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-router/1.2.1/main.e896278.js"
+      ],
+      "library": "AliVuRouter",
+      "components": null,
+      "packageName": "@ali/vu-router",
+      "version": "1.2.1"
+    },
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": null,
+      "prototypeConfigsUrl": null,
+      "alias": "",
+      "urls": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-router-spa/1.3.13/main.bc8c738.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-router-spa/1.3.13/main.1cff595.js"
+      ],
+      "library": "AliVuRouterSpa",
+      "components": null,
+      "packageName": "@ali/vu-router-spa",
+      "version": "1.3.13"
+    },
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": null,
+      "prototypeConfigsUrl": null,
+      "alias": "",
+      "urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-spm/1.1.11/main.2f6a6e1.js"],
+      "library": "AliVuSpm",
+      "components": null,
+      "packageName": "@ali/vu-spm",
+      "version": "1.1.11"
+    },
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": null,
+      "prototypeConfigsUrl": null,
+      "alias": "",
+      "urls": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-switch-schema/1.0.7/main.1d9ec8c.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-switch-schema/1.0.7/main.0e44788.js"
+      ],
+      "library": "AliVuSwitchSchema",
+      "components": null,
+      "packageName": "@ali/vu-switch-schema",
+      "version": "1.0.7"
     }
+  ],
+  "otherDependencies": [
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": null,
+      "prototypeConfigsUrl": null,
+      "alias": "",
+      "urls": [
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vp-rax-vision-page/2.0.3/main.a344c97.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vp-rax-vision-page/2.0.3/main.1b46312.js"
+      ],
+      "library": "AliVpRaxVisionPage",
+      "components": null,
+      "packageName": "@ali/vp-rax-vision-page",
+      "version": "2.0.3"
+    },
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": null,
+      "prototypeConfigsUrl": null,
+      "alias": "",
+      "urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vm-router/1.0.8/main.fd43d18.js"],
+      "library": "AliVmRouter",
+      "components": null,
+      "packageName": "@ali/vm-router",
+      "version": "1.0.8"
+    },
+    {
+      "prototypeViewsUrl": null,
+      "prototypeUrls": null,
+      "prototypeConfigsUrl": null,
+      "alias": "",
+      "urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vm-schema-nav/1.0.0/main.427ff0d.js"],
+      "library": "AliVmSchemaNav",
+      "components": null,
+      "packageName": "@ali/vm-schema-nav",
+      "version": "1.0.0"
     }
-  }]
+  ],
+  "lowCodeDependencies": []
 }

packages/demo/src/vision/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { createElement } from 'react';
 import { Button } from '@alifd/next';
-import Engine, { Panes, Prototype } from '@ali/visualengine';
+import Engine, { Panes, Prototype, Editor } from '@ali/visualengine';
 import { ActionUtil as actionUtil } from '@ali/visualengine-utils';
 import getTrunkPane from '@ali/ve-trunk-pane';
 import DatapoolPane from '@ali/ve-datapool-pane';
@@ -102,8 +102,8 @@ 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('./raxAssets.json');
-  const legaoAssets = await editor.utils.get('./legao-assets.json');
+  // const legaoAssets = await editor.utils.get('./legao-assets.json');
 
   const assets = upgradeAssetsBundle(legaoAssets);
 
@@ -145,9 +145,12 @@ async function loadAssets() {
 }
 
 async function loadSchema() {
-  // const schema = await editor.utils.get('./rax.json');
+  const schema = await editor.utils.get('./rax.json');
-  const schema = await editor.utils.get('./schema.json');
+  // const schema = await editor.utils.get('./schema.json');
   editor.set('schema', schema);
+  editor.set('renderEnv', 'rax');
+  editor.set('clientTypes', ['mobile']);
+
 }
 
 // demo
@@ -515,5 +518,7 @@ async function init() {
   initDemoPanes();
   // initHistoryPane();
   Engine.init();
+  // Engine.Env.set('renderEnv', 'rax');
+
 }
 init();

packages/rax-provider/package.json

@@ -12,12 +12,15 @@
   "scripts": {
     "start": "build-scripts start"
   },
+  "peerDependencies": {
+    "prop-types": "^15.7.2",
+    "rax": "^1.1.0"
+  },
   "license": "MIT",
   "dependencies": {
     "@ali/lowcode-runtime": "^0.8.16",
     "driver-universal": "^3.1.3",
     "history": "^4.10.1",
-    "rax": "1.1.2",
     "rax-use-router": "^3.0.0"
   },
   "devDependencies": {

packages/rax-render/src/engine/base.jsx

@@ -207,6 +207,7 @@ export default class BaseEngine extends Component {
   // parentInfo 父组件的信息，包含schema和Comp
   // idx 若为循环渲染的循环Index
   __createVirtualDom = (schema, self, parentInfo, idx) => {
+
     if (!schema) return null;
     // rax text prop 兼容处理
     if (schema.componentName === 'Text') {
@@ -243,7 +244,7 @@ export default class BaseEngine extends Component {
       return schema;
     }
     if (!isSchema(schema)) return null;
-    let Comp = components[schema.componentName] || View;
+    let Comp = components[schema.componentName] || engine.getNotFoundComponent();
 
     if (schema.loop !== undefined) {
       return this.__createLoopVirtualDom(
@@ -367,9 +368,9 @@ export default class BaseEngine extends Component {
       if (OVERLAY_LIST.includes(schema.componentName)) {
         const { ref, ...overlayProps } = otherProps;
         return (
-          <Div ref={ref} __designMode={engine.props.designMode}>
+          <div ref={ref} __designMode={engine.props.designMode}>
             {renderComp({ ...props, ...overlayProps })}
-          </Div>
+          </div>
         );
       }
       // 虚拟dom显示

packages/rax-render/src/engine/index.jsx

@@ -11,6 +11,7 @@ import ComponentEngine from './compEngine';
 import BlockEngine from './blockEngine';
 import TempEngine from './tempEngine';
 import BaseEngine from './base';
+import compWrapper from '../hoc/compWrapper';
 
 const debug = Debug('engine:entry');
 const ENGINE_COMPS = {
@@ -24,14 +25,14 @@ class FaultComponent extends Component {
   render() {
     // FIXME: errorlog
     console.error('render error', this.props);
-    return <Div>RenderError</Div>;
+    return <div>RenderError</div>;
   }
 }
 
 class NotFoundComponent extends Component {
   render() {
     console.error('component not found', this.props);
-    return <Div {...this.props} />;
+    return <div {...this.props} />;
   }
 }
 

packages/rax-render/src/hoc/compFactory.js

@@ -1,4 +1,4 @@
-import { Component, createElement } from 'rax';
+import { Component, createElement, forwardRef } from 'rax';
 import PropTypes from 'prop-types';
 import AppHelper from '../utils/appHelper';
 import { forEach, isFileSchema } from '../utils';
@@ -62,7 +62,7 @@ export default function compFactory(schema, components = {}, componentsMap = {},
     }
   }
 
-  const ResComp = React.forwardRef((props, ref) => <LNCompView {...props} forwardedRef={ref} />);
+  const ResComp = forwardRef((props, ref) => <LNCompView {...props} forwardedRef={ref} />);
   forEach(schema.static, (val, key) => {
     ResComp[key] = val;
   });

packages/rax-render/src/hoc/compWrapper.js

@@ -1,17 +1,28 @@
-import { createElement, Component } from 'rax';
+import { Component, createElement, forwardRef } from 'rax';
-
-export default function (Comp) {
-  class CompWrapper extends Component {
-    constructor(props, context) {
-      super(props, context);
-    }
 
+function enhanced(Comp) {
+  class WrappedComponent extends Component {
     render() {
-      return createElement(Comp, {
+      const { forwardedRef, ...rest} = this.props;
-        ...this.props,
+      console.log('forwardedRef', forwardedRef)
-      });
+      return <Comp { ...rest } ref={forwardedRef}></Comp>
     }
   }
 
-  return CompWrapper;
+  function forwardedRef(props, ref) {
-}
+    return createElement(
+      WrappedComponent,
+      {
+        ...props,
+        forwardedRef: ref
+      }
+    )
+  }
+
+  forwardedRef.displayName = Comp.displayName;
+
+  return forwardRef(forwardedRef);
+
+};
+
+export default enhanced;

packages/rax-render/src/utils/index.js

@@ -268,7 +268,7 @@ export function generateI18n(locale = 'zh-CN', messages = {}) {
  * @param {*} Comp 需要判断的组件
  */
 export function acceptsRef(Comp) {
-  return !!Comp;
+  return true;
 }
 
 /**

packages/rax-simulator-renderer/package.json

@@ -23,6 +23,7 @@
     "@recore/obx-react": "^1.0.7",
     "classnames": "^2.2.6",
     "driver-universal": "^3.1.3",
+    "rax-find-dom-node": "^1.0.0",
     "lodash": "^4.17.19",
     "react": "^16",
     "react-dom": "^16.7.0"

packages/rax-simulator-renderer/src/renderer-view.tsx

@@ -1,6 +1,6 @@
 import { Fragment, Component, createElement } from 'rax';
 // import { observer } from './obx-rax/observer';
-import RaxEngine from '../../rax-render/src/index';
+import LowCodeRenderer from '../../rax-render/src/index';
 import { SimulatorRenderer } from './renderer';
 import { host } from './host';
 
@@ -99,17 +99,16 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
   render() {
     const { renderer } = this.props;
     const { device, designMode } = renderer;
-    console.info(renderer.schema);
 
     return (
-      <RaxEngine
+      <LowCodeRenderer
         schema={renderer.schema}
         components={renderer.components}
         context={renderer.context}
         designMode={renderer.designMode}
         suspended={renderer.suspended}
         self={renderer.scope}
-        onCompGetRef={(schema: any, ref: ReactInstance | null) => {
+        onCompGetRef={(schema: any, ref: any) => {
           renderer.mountInstance(schema.id, ref);
         }}
         customCreateElement={(Component: any, props: any, children: any) => {
@@ -123,7 +122,7 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
           //   Object.assign(viewProps, {
           //     _componentName: 'Menu',
           //     className: '_css_pesudo_menu_kbrzyh0f',
-          //     context: { VE: (window as any).VisualEngine },
+          //     context: { VE: (window as any).VisualLowCodeRenderer },
           //     direction: undefined,
           //     events: { ignored: true },
           //     fieldId: 'menu_kbrzyh0f',

packages/rax-simulator-renderer/src/renderer.ts

@@ -1,12 +1,12 @@
 import { BuiltinSimulatorRenderer, NodeInstance, Component } from '@ali/lowcode-designer';
-import { shared, render, createElement } from 'rax';
+import { shared, render as raxRender, 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 { raxFindDOMNodes } from './utils/find-dom-nodes';
 import { getClientRects } from './utils/get-client-rects';
 import loader from './utils/loader';
 
@@ -192,7 +192,7 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
   }
 
   findDOMNodes(instance: any): Array<Element | Text> | null {
-    return [RaxEngine.findDOMNode(instance)];
+    return [raxFindDOMNodes(instance)];
   }
 
   /**
@@ -294,7 +294,7 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
     document.documentElement.classList.add('engine-page');
     document.body.classList.add('engine-document'); // important! Stylesheet.invoke depends
 
-    render(createElement(SimulatorRendererView, { renderer: this }), document.getElementById('app'), {
+    raxRender(createElement(SimulatorRendererView, { renderer: this }), container, {
       driver: DriverUniversal,
     });
     host.document.setRendererReady(this);

packages/react-renderer/package.json

@@ -39,8 +39,6 @@
     "localforage": "^1.7.3",
     "lodash": "^4.17.11",
     "moment": "^2.24.0",
-    "rax": "^1.1.1",
-    "rax-find-dom-node": "^1.0.1",
     "react-is": "^16.10.1",
     "serialize-javascript": "^1.7.0",
     "socket.io-client": "^2.2.0",

packages/utils/src/is-element.ts

@@ -1,3 +1,4 @@
 export function isElement(node: any): node is Element {
+  if (!node) return false;
   return node.nodeType === Node.ELEMENT_NODE;
 }