feat: support runtime.url to load multi type resource

Author: ClarkXia

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 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.
+
 # 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/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([
+        ...appAssets.cssList || [],
+        ...runtimeCssList,
+      ], {
+        cacheCss,
+        fetch,
+      });
 
       lifecycle = await loadScriptByFetch([
+        ...runtimeJsList,
         ...runtimeLibs,
         ...appAssets.jsList,
       ], appSandbox, fetch);