Merge branch 'feat/load-async-library' into 'release/1.0.0'

Code review title: feat: 新增支持异步类型library
Code review Link: https://code.aone.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/codereview/4007546

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

@@ -209,11 +209,14 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     return {};
   });
 
+  readonly asycnLibraryMap: { [key: string]: {} } = {};
+
   readonly libraryMap: { [key: string]: string } = {};
 
   private _iframe?: HTMLIFrameElement;
 
   async mountContentFrame(iframe: HTMLIFrameElement | null) {
+
     if (!iframe || this._iframe === iframe) {
       return;
     }
@@ -226,6 +229,9 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     if (library) {
       library.forEach((item) => {
         this.libraryMap[item.package] = item.library;
+        if (item.async) {
+          this.asycnLibraryMap[item.package] = item;
+        }
         if (item.urls) {
           libraryAsset.push(item.urls);
         }
@@ -254,7 +260,9 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     // wait 准备 iframe 内容、依赖库注入
     const renderer = await createSimulator(this, iframe, vendors);
 
-    // TODO: !!! thinkof reload onload
+    // 加载异步Library
+    await renderer.loadAsyncLibrary(this.asycnLibraryMap);
+    // TODO: !!! thinkof reload onloa
 
     // wait 业务组件被第一次消费，否则会渲染出错
     await this.componentsConsumer.waitFirstConsume();
@@ -274,6 +282,8 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     hotkey.mount(this._contentWindow);
     focusTracker.mount(this._contentWindow);
     clipboard.injectCopyPaster(this._contentDocument);
+
+
     // TODO: dispose the bindings
   }
 

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

@@ -36,15 +36,13 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
 
     this.dispose = host.connect(this, () => {
       // 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();
+        // this.buildComponents();
       }
 
       // sync designMode
@@ -57,6 +55,7 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
       // sync device
       this._device = host.device;
     });
+
     host.componentsConsumer.consume(async (componentsAsset) => {
       if (componentsAsset) {
         await this.load(componentsAsset);
@@ -142,6 +141,12 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
     return loader.load(asset);
   }
 
+  async loadAsyncLibrary(asycnLibraryMap) {
+    const promise = await loader.loadAsyncLibrary(asycnLibraryMap);
+    this.buildComponents();
+    return promise;
+  }
+
   private instancesMap = new Map<string, ReactInstance[]>();
 
   private unmountIntance(id: string, instance: ReactInstance) {

packages/utils/src/asset.ts

@@ -271,4 +271,23 @@ export class AssetLoader {
     }
     return isUrl ? load(content) : evaluate(content);
   }
+
+  private async loadAsyncLibrary(asyncLibraryMap) {
+    const promiseList = []; const libraryKeyList = [];
+    for (const key in asyncLibraryMap) {
+      // 需要异步加载
+      if (asyncLibraryMap[key].async) {
+        promiseList.push(window[asyncLibraryMap[key].library]);
+        libraryKeyList.push(asyncLibraryMap[key].library);
+      }
+    }
+    await Promise.all(promiseList).then((mods) => {
+      if (mods.length > 0) {
+        mods.map((item, index) => {
+          window[libraryKeyList[index]] = item;
+          return item;
+        });
+      }
+    });
+  }
 }