feat(sdk): script timeout (#2433)

ScriptedAlchemy · web-flow · commit 103b2b8a5fa7 · 2024-05-17T15:24:40.000-07:00
Co-authored-by: ScriptedAlchemy &lt;zackaryjackson@bytedance.com&gt;
diff --git a/.changeset/selfish-trainers-repeat.md b/.changeset/selfish-trainers-repeat.md
@@ -0,0 +1,6 @@
+---
+'@module-federation/runtime': patch
+'@module-federation/sdk': patch
+---
+
+Script timeout options for createScript hook
diff --git a/apps/manifest-demo/3008-webpack-host/@mf-types/index.d.ts b/apps/manifest-demo/3008-webpack-host/@mf-types/index.d.ts
@@ -0,0 +1,27 @@
+import type { PackageType as PackageType_0,RemoteKeys as RemoteKeys_0 } from './js-entry-provider/apis.d.ts';
+import type { PackageType as PackageType_1,RemoteKeys as RemoteKeys_1 } from './manifest-provider/apis.d.ts';
+    declare module "@module-federation/runtime" {
+      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1;
+      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
+T extends RemoteKeys_1 ? PackageType_1<T> :
+Y ;
+      export function loadRemote<T extends RemoteKeys,Y>(packageName: T): Promise<PackageType<T, Y>>;
+      export function loadRemote<T extends string,Y>(packageName: T): Promise<PackageType<T, Y>>;
+    }
+declare module "@module-federation/enhanced/runtime" {
+      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1;
+      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
+T extends RemoteKeys_1 ? PackageType_1<T> :
+Y ;
+      export function loadRemote<T extends RemoteKeys,Y>(packageName: T): Promise<PackageType<T, Y>>;
+      export function loadRemote<T extends string,Y>(packageName: T): Promise<PackageType<T, Y>>;
+    }
+declare module "@module-federation/runtime-tools" {
+      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1;
+      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
+T extends RemoteKeys_1 ? PackageType_1<T> :
+Y ;
+      export function loadRemote<T extends RemoteKeys,Y>(packageName: T): Promise<PackageType<T, Y>>;
+      export function loadRemote<T extends string,Y>(packageName: T): Promise<PackageType<T, Y>>;
+    }
+    
diff --git a/apps/manifest-demo/3008-webpack-host/@mf-types/js-entry-provider/Component.d.ts b/apps/manifest-demo/3008-webpack-host/@mf-types/js-entry-provider/Component.d.ts
@@ -0,0 +1,2 @@
+export * from './compiled-types/apps/manifest-demo/3012-rspack-js-entry-provider/src/App';
+export { default } from './compiled-types/apps/manifest-demo/3012-rspack-js-entry-provider/src/App';
diff --git a/apps/manifest-demo/3008-webpack-host/@mf-types/js-entry-provider/apis.d.ts b/apps/manifest-demo/3008-webpack-host/@mf-types/js-entry-provider/apis.d.ts
@@ -0,0 +1,3 @@
+
+    export type RemoteKeys = 'js-entry-provider/Component';
+    type PackageType<T> = T extends 'js-entry-provider/Component' ? typeof import('js-entry-provider/Component') :any;
diff --git a/apps/manifest-demo/3008-webpack-host/@mf-types/js-entry-provider/compiled-types/apps/manifest-demo/3012-rspack-js-entry-provider/src/App.d.ts b/apps/manifest-demo/3008-webpack-host/@mf-types/js-entry-provider/compiled-types/apps/manifest-demo/3012-rspack-js-entry-provider/src/App.d.ts
@@ -0,0 +1,2 @@
+export default App;
+declare function App(): import("react/jsx-runtime").JSX.Element;
diff --git a/apps/manifest-demo/3008-webpack-host/@mf-types/js-entry-provider/compiled-types/apps/manifest-demo/3012-rspack-js-entry-provider/src/asyncFile.d.ts b/apps/manifest-demo/3008-webpack-host/@mf-types/js-entry-provider/compiled-types/apps/manifest-demo/3012-rspack-js-entry-provider/src/asyncFile.d.ts
@@ -0,0 +1,2 @@
+declare const _default: "async file";
+export default _default;
diff --git a/apps/manifest-demo/3008-webpack-host/@mf-types/manifest-provider/Component.d.ts b/apps/manifest-demo/3008-webpack-host/@mf-types/manifest-provider/Component.d.ts
@@ -0,0 +1,2 @@
+export * from './compiled-types/apps/manifest-demo/3011-rspack-manifest-provider/src/App';
+export { default } from './compiled-types/apps/manifest-demo/3011-rspack-manifest-provider/src/App';
diff --git a/apps/manifest-demo/3008-webpack-host/@mf-types/manifest-provider/apis.d.ts b/apps/manifest-demo/3008-webpack-host/@mf-types/manifest-provider/apis.d.ts
@@ -0,0 +1,3 @@
+
+    export type RemoteKeys = 'manifest-provider/Component';
+    type PackageType<T> = T extends 'manifest-provider/Component' ? typeof import('manifest-provider/Component') :any;
diff --git a/apps/manifest-demo/3008-webpack-host/@mf-types/manifest-provider/compiled-types/apps/manifest-demo/3011-rspack-manifest-provider/src/App.d.ts b/apps/manifest-demo/3008-webpack-host/@mf-types/manifest-provider/compiled-types/apps/manifest-demo/3011-rspack-manifest-provider/src/App.d.ts
@@ -0,0 +1,2 @@
+export default App;
+declare function App(): import("react/jsx-runtime").JSX.Element;
diff --git a/apps/manifest-demo/3008-webpack-host/@mf-types/manifest-provider/compiled-types/apps/manifest-demo/3011-rspack-manifest-provider/src/asyncFile.d.ts b/apps/manifest-demo/3008-webpack-host/@mf-types/manifest-provider/compiled-types/apps/manifest-demo/3011-rspack-manifest-provider/src/asyncFile.d.ts
@@ -0,0 +1,2 @@
+declare const _default: "async file";
+export default _default;
diff --git a/apps/website-new/docs/en/plugin/dev/index.mdx b/apps/website-new/docs/en/plugin/dev/index.mdx
@@ -492,7 +492,7 @@ interface PreloadAssets {
 - Type
 
 ```typescript
-function createScript(args: CreateScriptOptions): HTMLScriptElement | void;
+function createScript(args: CreateScriptOptions): HTMLScriptElement | {script?: HTMLScriptElement, timeout?: number } | void;
 
 type CreateScriptOptions = {
   url: string;
@@ -520,5 +520,26 @@ const changeScriptAttributePlugin: () => FederationRuntimePlugin = function () {
   };
 };
 ```
-import { resolve } from "path"
+
+- Example with script timeout
+
+```typescript
+import { init } from '@module-federation/enhanced/runtime';
+import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';
+
+const changeScriptAttributePlugin: () => FederationRuntimePlugin = function () {
+  return {
+    name: 'change-script-attribute',
+    createScript({ url }) {
+      if (url === testRemoteEntry) {
+        let script = document.createElement('script');
+        script.src = testRemoteEntry;
+        script.setAttribute('loader-hooks', 'isTrue');
+        script.setAttribute('crossorigin', 'anonymous');
+        return { script, timeout: 1000 }
+      }
+    },
+  };
+};
+```
 
diff --git a/apps/website-new/docs/zh/plugin/dev/index.mdx b/apps/website-new/docs/zh/plugin/dev/index.mdx
@@ -491,8 +491,8 @@ interface PreloadAssets {
 
 - 类型
 
-```ts
-function createScript(args: CreateScriptOptions): HTMLScriptElement | void;
+```typescript
+function createScript(args: CreateScriptOptions): HTMLScriptElement | {script?: HTMLScriptElement, timeout?: number } | void;
 
 type CreateScriptOptions = {
   url: string;
@@ -501,7 +501,7 @@ type CreateScriptOptions = {
 
 - 示例
 
-```ts
+```typescript
 import { init } from '@module-federation/enhanced/runtime';
 import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';
 
@@ -520,3 +520,25 @@ const changeScriptAttributePlugin: () => FederationRuntimePlugin = function () {
   };
 };
 ```
+
+- 示例带有脚本超时
+
+```typescript
+import { init } from '@module-federation/enhanced/runtime';
+import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';
+
+const changeScriptAttributePlugin: () => FederationRuntimePlugin = function () {
+  return {
+    name: 'change-script-attribute',
+    createScript({ url }) {
+      if (url === testRemoteEntry) {
+        let script = document.createElement('script');
+        script.src = testRemoteEntry;
+        script.setAttribute('loader-hooks', 'isTrue');
+        script.setAttribute('crossorigin', 'anonymous');
+        return { script, timeout: 1000 }
+      }
+    },
+  };
+};
+```
diff --git a/packages/runtime/src/core.ts b/packages/runtime/src/core.ts
@@ -1,3 +1,4 @@
+import type { CreateScriptHookReturn } from '@module-federation/sdk';
 import {
   Options,
   PreloadRemoteArgs,
@@ -90,7 +91,7 @@ export class FederationHost {
           url: string;
         },
       ],
-      HTMLScriptElement | void
+      CreateScriptHookReturn
     >(),
     createLink: new SyncHook<
       [
diff --git a/packages/runtime/src/module/index.ts b/packages/runtime/src/module/index.ts
@@ -34,13 +34,22 @@ class Module {
       remoteEntryExports: this.remoteEntryExports,
       createScriptHook: (url: string) => {
         const res = this.host.loaderHook.lifecycle.createScript.emit({ url });
+
+        if (!res) return;
+
         if (typeof document === 'undefined') {
           //todo: needs real fix
           return res as HTMLScriptElement;
         }
+
         if (res instanceof HTMLScriptElement) {
           return res;
         }
+
+        if ('script' in res || 'timeout' in res) {
+          return res;
+        }
+
         return;
       },
     });
diff --git a/packages/runtime/src/utils/load.ts b/packages/runtime/src/utils/load.ts
@@ -2,6 +2,7 @@ import {
   composeKeyWithSeparator,
   loadScript,
   loadScriptNode,
+  CreateScriptHookReturn,
 } from '@module-federation/sdk';
 import { assert } from '../utils/logger';
 import { getRemoteEntryExports, globalLoading } from '../global';
@@ -41,7 +42,7 @@ export async function loadEntryScript({
   name: string;
   globalName: string;
   entry: string;
-  createScriptHook?: (url: string) => HTMLScriptElement | void;
+  createScriptHook?: (url: string) => CreateScriptHookReturn;
 }): Promise<RemoteEntryExports> {
   const { entryExports: remoteEntryExports } = getRemoteEntryExports(
     name,
@@ -116,7 +117,7 @@ export async function getRemoteEntry({
 }: {
   remoteInfo: RemoteInfo;
   remoteEntryExports?: RemoteEntryExports | undefined;
-  createScriptHook?: (url: string) => HTMLScriptElement | void;
+  createScriptHook?: (url: string) => CreateScriptHookReturn;
 }): Promise<RemoteEntryExports | void> {
   const { entry, name, type, entryGlobalName } = remoteInfo;
   const uniqueKey = getRemoteEntryUniqueKey(remoteInfo);
diff --git a/packages/runtime/src/utils/preload.ts b/packages/runtime/src/utils/preload.ts
@@ -84,9 +84,21 @@ export function preloadAssets(
             const res = host.loaderHook.lifecycle.createScript.emit({
               url,
             });
+            if (!res) return;
+
+            if (typeof document === 'undefined') {
+              //todo: needs real fix
+              return res as HTMLScriptElement;
+            }
+
             if (res instanceof HTMLScriptElement) {
               return res;
             }
+
+            if ('script' in res || 'timeout' in res) {
+              return res;
+            }
+
             return;
           },
         });
@@ -98,9 +110,21 @@ export function preloadAssets(
             const res = host.loaderHook.lifecycle.createScript.emit({
               url,
             });
+            if (!res) return;
+
+            if (typeof document === 'undefined') {
+              //todo: needs real fix
+              return res as HTMLScriptElement;
+            }
+
             if (res instanceof HTMLScriptElement) {
               return res;
             }
+
+            if ('script' in res || 'timeout' in res) {
+              return res;
+            }
+
             return;
           },
         });
diff --git a/packages/sdk/__tests__/dom.spec.ts b/packages/sdk/__tests__/dom.spec.ts
diff --git a/packages/sdk/src/dom.ts b/packages/sdk/src/dom.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from './compiled-types/apps/manifest-demo/3012-rspack-js-entry-provider/src/App';`
	`2`	`+export { default } from './compiled-types/apps/manifest-demo/3012-rspack-js-entry-provider/src/App';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+`
	`2`	`+ export type RemoteKeys = 'js-entry-provider/Component';`
	`3`	`+ type PackageType<T> = T extends 'js-entry-provider/Component' ? typeof import('js-entry-provider/Component') :any;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export default App;`
	`2`	`+declare function App(): import("react/jsx-runtime").JSX.Element;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+declare const _default: "async file";`
	`2`	`+export default _default;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+`
	`2`	`+ export type RemoteKeys = 'manifest-provider/Component';`
	`3`	`+ type PackageType<T> = T extends 'manifest-provider/Component' ? typeof import('manifest-provider/Component') :any;`