joint source editor

packages/plugin-source-editor/src/index.tsx

@@ -57,7 +57,7 @@ export default class SourceEditor extends Component<{
     tabKey: TAB_KEY.JS_TAB,
   };
 
-  componentWillMount() {
+  async componentWillMount() {
     const { editor } = this.props;
     editor.on('leftPanel.show', (key: String) => {
       if (key === 'sourceEditor' && !this.monocoEditer) {
@@ -79,44 +79,41 @@ export default class SourceEditor extends Component<{
       this.openPluginPannel();
     })
 
-
-
-    editor.once('designer.mount', (designer: Designer) => {
-      // let schema = designer.project.getSchema();
-      // mock data
-      let schema = {
-        componentTree: [
-          {
-            state: {
-              // 初始state：        选填 对象类型/变量表达式
-              btnText: 'submit', // 默认数据值：              选填 变量表达式
+    const designer = await editor.onceGot(Designer);
+    // let schema = designer.project.getSchema();
+    // mock data
+    let schema = {
+      componentTree: [
+        {
+          state: {
+            // 初始state：        选填 对象类型/变量表达式
+            btnText: 'submit', // 默认数据值：              选填 变量表达式
+          },
+          css: 'body {font-size: 12px;} .botton{widht:100px;color:#ff00ff}', //css样式描述：      选填
+          lifeCycles: {
+            //生命周期:          选填 对象类型
+            didMount: {
+              type: 'JSExpression',
+              value: "function() {\n \t\tconsole.log('did mount');\n\t}",
             },
-            css: 'body {font-size: 12px;} .botton{widht:100px;color:#ff00ff}', //css样式描述：      选填
-            lifeCycles: {
-              //生命周期:          选填 对象类型
-              didMount: {
-                type: 'JSExpression',
-                value: "function() {\n \t\tconsole.log('did mount');\n\t}",
-              },
-              willUnmount: {
-                type: 'JSExpression',
-                value: "function() {\n \t\tconsole.log('will umount');\n\t}",
-              },
-            },
-            methods: {
-              //自定义方法对象：     选填 对象类型
-              getData: {
-                //自定义方法：                  选填 函数类型
-                type: 'JSExpression',
-                value: "function() {\n \t\tconsole.log('testFunc');\n \t}",
-              },
+            willUnmount: {
+              type: 'JSExpression',
+              value: "function() {\n \t\tconsole.log('will umount');\n\t}",
             },
           },
-        ],
-      };
+          methods: {
+            //自定义方法对象：     选填 对象类型
+            getData: {
+              //自定义方法：                  选填 函数类型
+              type: 'JSExpression',
+              value: "function() {\n \t\tconsole.log('testFunc');\n \t}",
+            },
+          },
+        },
+      ],
+    };
 
-      this.initCode(schema);
-    });
+    this.initCode(schema);
   }
 
   openPluginPannel = () => {

packages/vision-polyfill/src/demo/index.ts

@@ -3,7 +3,6 @@ import { createElement } from 'react';
 import { Button } from '@alifd/next';
 import Engine, { Panes } from '@ali/visualengine';
 import getTrunkPane from '@ali/ve-trunk-pane';
-import SourceEditor from '@ali/lowcode-plugin-source-editor';
 import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
 import loadUrls from './loader';
 import { upgradeAssetsBundle } from './upgrade-assets';
@@ -16,20 +15,6 @@ skeleton.add({
   type: 'Widget',
   content: EventBindDialog,
 });
-skeleton.add({
-  name: 'sourceEditor',
-  type: 'PanelDock',
-  props: {
-    align: 'top',
-    icon: 'code',
-    description: '组件库',
-  },
-  panelProps: {
-    width: 500
-    // area: 'leftFixedArea'
-  },
-  content: SourceEditor,
-});
 skeleton.add({
   area: 'leftArea',
   name: 'icon1',

packages/vision-polyfill/src/editor.ts

@@ -9,6 +9,7 @@ import { Skeleton } from './skeleton/skeleton';
 
 
 import Preview from '@ali/lowcode-plugin-sample-preview';
+import SourceEditor from '@ali/lowcode-plugin-source-editor';
 
 registerSetters();
 
@@ -53,3 +54,18 @@ skeleton.add({
   },
   content: Preview,
 });
+
+skeleton.add({
+  name: 'sourceEditor',
+  type: 'PanelDock',
+  props: {
+    align: 'top',
+    icon: 'code',
+    description: '组件库',
+  },
+  panelProps: {
+    width: 500
+    // area: 'leftFixedArea'
+  },
+  content: SourceEditor,
+});