fix: automatically switch to fetch mode when runtime is set (#768)

* fix: automatically switch to fetch mode when runtime is set

* fix: improve runtime asset handling when runtime is loaded

* fix: optimize log

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.4
+
+- [fix] automatically switch to "fetch" mode when runtime is set.
+- [fix] improve runtime asset handling when runtime is loaded.
+
 # 2.8.3
 
 - [feat] support `runtime.url` as an array for loading multiple types of resources.

packages/icestark/package.json

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

packages/icestark/src/AppRoute.tsx

@@ -86,8 +86,12 @@ export default class AppRoute extends React.Component<AppRouteProps, AppRouteSta
     };
     const { loadScriptMode, runtime } = props;
 
-    if (loadScriptMode && loadScriptMode !== 'fetch' && runtime) {
-      console.error('[icestark] runtime option can only be used when loadScriptMode is set to "fetch"');
+    if (runtime) {
+      if (loadScriptMode && loadScriptMode !== 'fetch') {
+        console.error('[icestark] runtime option can only be used when loadScriptMode is set to "fetch"');
+      } else if (!loadScriptMode) {
+        console.log('[icestark] Runtime option detected but loadScriptMode not set - automatically switching to "fetch" mode');
+      }
     }
   }
 

packages/icestark/src/apps.ts

@@ -218,7 +218,7 @@ export async function loadAppModule(appConfig: AppConfig) {
       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}`];
+        return config.version && config.library;
       }).map((config) => {
         // Handle both string and array URL formats
         const urls = Array.isArray(config.url) ? config.url : [config.url];
@@ -250,6 +250,7 @@ export async function loadAppModule(appConfig: AppConfig) {
         return {
           content: mainJs,
           type: AssetTypeEnum.RUNTIME,
+          loaded: Boolean(config.version && config.library && window[`${config.library}@${config.version}`]),
           library: config.library,
           version: config.version,
         };
@@ -374,14 +375,14 @@ function mergeThenUpdateAppConfig(name: string, configuration?: StartConfigurati
     return;
   }
 
-  const { umd, sandbox } = appConfig;
+  const { umd, sandbox, runtime } = appConfig;
 
   // Generate appSandbox
   const appSandbox = createSandbox(sandbox) as Sandbox;
 
   // Merge loadScriptMode
   const sandboxEnabled = sandbox && !appSandbox.sandboxDisabled;
-  const loadScriptMode = appConfig.loadScriptMode ?? (umd || sandboxEnabled ? 'fetch' : 'script');
+  const loadScriptMode = appConfig.loadScriptMode ?? (umd || sandboxEnabled || (runtime && runtime.length > 0) ? 'fetch' : 'script');
 
   // Merge global configuration
   const cfgs = {

packages/icestark/src/util/handleAssets.ts

@@ -33,6 +33,7 @@ export enum AssetCommentEnum {
 
 export interface Asset {
   module?: boolean;
+  loaded?: boolean;
   type: AssetTypeEnum;
   /** Only used when type is AssetTypeEnum.RUNTIME */
   library?: string;
@@ -313,19 +314,20 @@ export function getUrlAssets(urls: string | string[]) {
 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 backupCode = `if (${globalLib}) {${backupLib} = ${globalLib};}\n`;
+      const restoreCode = `if (${backupLib}) {${globalLib} = ${backupLib};${backupLib} = undefined;}\n`;
+      jsBeforeRuntime = `${jsBeforeRuntime}${backupCode}${asset.loaded ? `${globalLib} = ${versionedLib};` : ''}`;
+      jsAfterRuntime = `${jsAfterRuntime}${asset.loaded ? '' : `${versionedLib} = ${globalLib};`}${restoreCode}`;
     }
   });
 
-  const result = await Promise.all(jsList.map(async (asset) => {
+  const result = await Promise.all(jsList.filter((asset) => !asset.loaded).map(async (asset) => {
     const { type, content } = asset;
     if (type === AssetTypeEnum.INLINE) {
       return {