From 2a491ae0df8ed81e9970992178e0da753e60baf7 Mon Sep 17 00:00:00 2001
From: "zude.hzd" <zude.hzd@alibaba-inc.com>
Date: Thu, 29 Oct 2020 21:38:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=BC=82=E6=AD=A5=E7=B1=BB=E5=9E=8Blibrary?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../designer/src/builtin-simulator/host.ts    | 12 +++++++++++-
 .../react-simulator-renderer/src/renderer.ts  | 11 ++++++++---
 packages/utils/src/asset.ts                   | 19 +++++++++++++++++++
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts
index 4679b3338..6f17c201d 100644
--- a/packages/designer/src/builtin-simulator/host.ts
+++ b/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
   }
 
diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts
index fface745a..936a010cb 100644
--- a/packages/react-simulator-renderer/src/renderer.ts
+++ b/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) {
diff --git a/packages/utils/src/asset.ts b/packages/utils/src/asset.ts
index 6534372cd..85328952b 100644
--- a/packages/utils/src/asset.ts
+++ b/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;
+        });
+      }
+    });
+  }
 }