feat: support runtime.url to load multi type resource (#767)

* feat: support runtime.url to load multi type resource

* chore: optimize code

* fix: check value before compare

* fix: css

* fix: refactor fetchScripts for improved runtime asset handling

Author: ClarkXia

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 See [https://github.com/ice-lab/icestark/releases](https://github.com/ice-lab/icestark/releases) for what has changed in each version of icestark.
 
+# 2.8.3
+
+- [feat] support `runtime.url` as an array for loading multiple types of resources.
+- [fix] refactor fetchScripts for improved runtime asset handling.
+
 # 2.8.2
 
 - [fix] fix the issue that the UMD library is overwritten by undefined value.

packages/icestark/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/stark",
-  "version": "2.8.2",
+  "version": "2.8.3",
   "description": "Icestark is a JavaScript library for multiple projects, Ice workbench solution.",
   "scripts": {
     "build": "rm -rf lib && tsc",

packages/icestark/src/AppRoute.tsx

@@ -86,7 +86,7 @@ export default class AppRoute extends React.Component<AppRouteProps, AppRouteSta
     };
     const { loadScriptMode, runtime } = props;
 
-    if (loadScriptMode !== 'fetch' && runtime) {
+    if (loadScriptMode && loadScriptMode !== 'fetch' && runtime) {
       console.error('[icestark] runtime option can only be used when loadScriptMode is set to "fetch"');
     }
   }

packages/icestark/src/apps.ts

@@ -1,6 +1,6 @@
 import Sandbox, { SandboxConstructor, SandboxProps } from '@ice/sandbox';
 import isEmpty from 'lodash.isempty';
-import { NOT_LOADED, NOT_MOUNTED, LOADING_ASSETS, UNMOUNTED, LOAD_ERROR, MOUNTED } from './util/constant';
+import { NOT_LOADED, NOT_MOUNTED, LOADING_ASSETS, UNMOUNTED, LOAD_ERROR, MOUNTED, IS_CSS_REGEX } from './util/constant';
 import findActivePathCurry, { ActivePath, PathOption, formatPath } from './util/checkActive';
 import {
   createSandbox,
@@ -44,7 +44,7 @@ export interface ModuleLifeCycle {
 }
 
 export interface RuntimeConfig {
-  url: string;
+  url: string | string[];
   library: string;
   version: string;
 }
@@ -214,21 +214,57 @@ export async function loadAppModule(appConfig: AppConfig) {
       // Not to handle script element temporarily.
       break;
     case 'fetch': {
-      await loadAndAppendCssAssets(appAssets.cssList, {
-        cacheCss,
-        fetch,
-      });
+      const runtimeCssList = [];
+      const runtimeJsList = [];
       // Filter and map runtime libraries that haven't been registered in window
       const runtimeLibs = runtime?.filter((config) => {
         return config.version && config.library && !window[`${config.library}@${config.version}`];
-      }).map((config) => ({
-        content: config.url,
-        type: AssetTypeEnum.RUNTIME,
-        library: config.library,
-        version: config.version,
-      })) || [];
+      }).map((config) => {
+        // Handle both string and array URL formats
+        const urls = Array.isArray(config.url) ? config.url : [config.url];
+        // Separate CSS and JS URLs
+        const jsUrls = [];
+        urls.forEach((configUrl) => {
+          if (IS_CSS_REGEX.test(configUrl)) {
+            runtimeCssList.push({
+              content: configUrl,
+              type: AssetTypeEnum.EXTERNAL,
+            });
+          } else {
+            jsUrls.push(configUrl);
+          }
+        });
+        if (jsUrls.length === 0) {
+          return null;
+        }
+        // Use the last JS URL as the main runtime JS
+        const mainJs = jsUrls[jsUrls.length - 1];
+        const restJs = jsUrls.slice(0, -1);
+        restJs.forEach((configUrl) => {
+          runtimeJsList.push({
+            content: configUrl,
+            type: AssetTypeEnum.EXTERNAL,
+          });
+        });
+
+        return {
+          content: mainJs,
+          type: AssetTypeEnum.RUNTIME,
+          library: config.library,
+          version: config.version,
+        };
+      }).filter(Boolean) || [];
+
+      await loadAndAppendCssAssets([
+        ...runtimeCssList,
+        ...appAssets.cssList,
+      ], {
+        cacheCss,
+        fetch,
+      });
 
       lifecycle = await loadScriptByFetch([
+        ...runtimeJsList,
         ...runtimeLibs,
         ...appAssets.jsList,
       ], appSandbox, fetch);

packages/icestark/src/util/handleAssets.ts

@@ -310,37 +310,68 @@ export function getUrlAssets(urls: string | string[]) {
   return { jsList, cssList };
 }
 
-export function fetchScripts(jsList: Asset[], fetch: Fetch = defaultFetch): Promise<string[]> {
-  return Promise.all(jsList.map((asset) => {
-    const { type, content, library, version } = asset;
+export async function fetchScripts(jsList: Asset[], fetch: Fetch = defaultFetch): Promise<string[]> {
+  let jsBeforeRuntime = '';
+  let jsAfterRuntime = '';
+
+  jsList.forEach((asset) => {
+    if (asset.type === AssetTypeEnum.RUNTIME) {
+      const { library, version } = asset;
+      const globalLib = `window['${library}']`;
+      const backupLib = `window['__${library}__']`;
+      const versionedLib = `window['${library}@${version}']`;
+      jsBeforeRuntime = `${jsBeforeRuntime}if (${globalLib}) {${backupLib} = ${globalLib};}\n`;
+      jsAfterRuntime = `${jsAfterRuntime}${versionedLib} = ${globalLib}; if (${backupLib}) {${globalLib} = ${backupLib};${backupLib} = undefined;}\n`;
+    }
+  });
+
+  const result = await Promise.all(jsList.map(async (asset) => {
+    const { type, content } = asset;
     if (type === AssetTypeEnum.INLINE) {
-      return content;
+      return {
+        type,
+        content,
+      };
     } else {
       const cacheKey = `${content}${type === AssetTypeEnum.RUNTIME ? '?runtime' : ''}`;
       // content will script url when type is AssetTypeEnum.EXTERNAL
       // eslint-disable-next-line no-return-assign
-      return cachedScriptsContent[cacheKey]
+      return {
+        type,
+        content: cachedScriptsContent[cacheKey]
         /**
         * If code is being evaluated as a string with `eval` or via `new Function`，then the source origin
         * will be the page's origin. As a result, `//# sourceURL` appends to the generated code.
         * See https://sourcemaps.info/spec.html
         */
-        || (cachedScriptsContent[cacheKey] = fetch(content)
+        || (cachedScriptsContent[cacheKey] = await fetch(content)
           .then((res) => res.text())
-          .then((text) => {
-            if (type === AssetTypeEnum.RUNTIME && version && library) {
-              const globalLib = `window['${library}']`;
-              const backupLib = `window['__${library}__']`;
-              const versionedLib = `window['${library}@${version}']`;
-              return `;if (${globalLib}) {${backupLib} = ${globalLib};}
-${text}; ${versionedLib} = ${globalLib}; if (${backupLib}) {${globalLib} = ${backupLib};${backupLib} = undefined;}`;
-            }
-            return text;
-          })
           .then((res) => `${res} \n //# sourceURL=${content}`)
-        );
+        ),
+      };
     }
   }));
+  const scriptTexts = [];
+  let hasInsertedBeforeRuntime = false;
+
+  for (let i = 0; i < result.length; i++) {
+    const { type, content } = result[i];
+
+    // Insert jsBeforeRuntime before the first runtime script
+    if (type === AssetTypeEnum.RUNTIME && !hasInsertedBeforeRuntime) {
+      scriptTexts.push(jsBeforeRuntime);
+      hasInsertedBeforeRuntime = true;
+    }
+    // Add the script content
+    scriptTexts.push(content);
+
+    // Insert jsAfterRuntime after the runtime script
+    if (type === AssetTypeEnum.RUNTIME && result[i + 1]?.type !== AssetTypeEnum.RUNTIME) {
+      scriptTexts.push(jsAfterRuntime);
+    }
+  }
+
+  return scriptTexts;
 }
 
 // for prefetch