Merge branch 'feat/async-export-package' into 'develop'

Code review title: feat: 资产包支持一个package从另外一个package异步导出
Code review description: 资产包支持一个package从另外一个package异步导出
Code review Link: https://code.aone.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/codereview/8153374

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

@@ -69,7 +69,7 @@ import { Project } from '../project';
 import { Scroller } from '../designer/scroller';
 import { isElementNode, isDOMNodeVisible } from '../utils/misc';
 
-export interface LibraryItem extends Package{
+export interface LibraryItem extends Package {
   package: string;
   library: string;
   urls?: Asset;
@@ -342,9 +342,11 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     const _library = library || (this.get('library') as LibraryItem[]);
     const libraryAsset: AssetList = [];
     const libraryExportList: string[] = [];
+    const functionCallLibraryExportList: string[] = [];
 
     if (_library && _library.length) {
       _library.forEach((item) => {
+        const { exportMode, exportSourceLibrary } = item;
         this.libraryMap[item.package] = item.library;
         if (item.async) {
           this.asyncLibraryMap[item.package] = item;
@@ -354,6 +356,11 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
             `Object.defineProperty(window,'${item.exportName}',{get:()=>window.${item.library}});`,
           );
         }
+        if (exportMode === 'functionCall' && exportSourceLibrary) {
+          functionCallLibraryExportList.push(
+            `window["${item.library}"] = window["${exportSourceLibrary}"]("${item.library}", "${item.package}");`,
+          );
+        }
         if (item.editUrls) {
           libraryAsset.push(item.editUrls);
         } else if (item.urls) {
@@ -362,7 +369,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
       });
     }
     libraryAsset.unshift(assetItem(AssetType.JSText, libraryExportList.join('')));
-
+    libraryAsset.push(assetItem(AssetType.JSText, functionCallLibraryExportList.join('')));
     return libraryAsset;
   }
 
@@ -386,7 +393,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
       // required & use once
       assetBundle(
         this.get('environment') ||
-          (this.renderEnv === 'rax' ? defaultRaxEnvironment : defaultEnvironment),
+        (this.renderEnv === 'rax' ? defaultRaxEnvironment : defaultEnvironment),
         AssetLevel.Environment,
       ),
       // required & use once
@@ -399,7 +406,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
       // required & use once
       assetBundle(
         this.get('simulatorUrl') ||
-          (this.renderEnv === 'rax' ? defaultRaxSimulatorUrl : defaultSimulatorUrl),
+        (this.renderEnv === 'rax' ? defaultRaxSimulatorUrl : defaultSimulatorUrl),
         AssetLevel.Runtime,
       ),
     ];
@@ -418,6 +425,9 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     if (Object.keys(this.asyncLibraryMap).length > 0) {
       // 加载异步Library
       await renderer.loadAsyncLibrary(this.asyncLibraryMap);
+      Object.keys(this.asyncLibraryMap).forEach(key => {
+        delete this.asyncLibraryMap[key];
+      });
     }
 
     // step 5 ready & render
@@ -437,7 +447,14 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
 
   async setupComponents(library) {
     const libraryAsset: AssetList = this.buildLibrary(library);
-    await this.renderer.load(libraryAsset);
+    await this.renderer?.load(libraryAsset);
+    if (Object.keys(this.asyncLibraryMap).length > 0) {
+      // 加载异步Library
+      await this.renderer?.loadAsyncLibrary(this.asyncLibraryMap);
+      Object.keys(this.asyncLibraryMap).forEach(key => {
+        delete this.asyncLibraryMap[key];
+      });
+    }
   }
 
   setupEvents() {
@@ -1605,4 +1622,4 @@ function getMatched(elements: Array<Element | Text>, selector: string): Element
     }
   }
   return firstQueried;
-}
+}

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

@@ -11,6 +11,7 @@ export interface BuiltinSimulatorRenderer {
   setNativeSelection(enableFlag: boolean): void;
   setDraggingState(state: boolean): void;
   setCopyState(state: boolean): void;
+  loadAsyncLibrary(asyncMap: { [index: string]: any }): void;
   clearState(): void;
   run(): void;
 }

packages/types/src/assets.ts

@@ -8,7 +8,9 @@ export interface Package { // 应该被编辑器默认加载，定义组件大
   urls?: string[] | any; // 组件渲染态视图打包后的 CDN url 列表，包含 js 和 css
   editUrls?: string[] | any; // 组件编辑态视图打包后的 CDN url 列表，包含 js 和 css
   library: string; // 作为全局变量引用时的名称，和webpack output.library字段含义一样，用来定义全局变量名
-  async?: boolean,
+  async?: boolean;
+  exportMode?: string;
+  exportSourceLibrary?: any;
   exportName?: string;
 }
 

packages/utils/src/asset.ts

@@ -320,21 +320,25 @@ export class AssetLoader {
   }
 
   private async loadAsyncLibrary(asyncLibraryMap) {
-    const promiseList = []; const libraryKeyList = [];
+    const promiseList = [];
+    const libraryKeyList = [];
+    const pkgs = [];
     for (const key in asyncLibraryMap) {
       // 需要异步加载
       if (asyncLibraryMap[key].async) {
         promiseList.push(window[asyncLibraryMap[key].library]);
         libraryKeyList.push(asyncLibraryMap[key].library);
+        pkgs.push(asyncLibraryMap[key]);
       }
     }
     await Promise.all(promiseList).then((mods) => {
       if (mods.length > 0) {
         mods.map((item, index) => {
-          window[libraryKeyList[index]] = item;
+          const { exportMode, exportSourceLibrary, library } = pkgs[index];
+          window[libraryKeyList[index]] = exportMode === 'functionCall' && (exportSourceLibrary == null || exportSourceLibrary === library) ? item() : item;
           return item;
         });
       }
     });
   }
-}
+}