fix(sdk): allow create script to change attrs (#2682)

Co-authored-by: ScriptedAlchemy <[email protected]>

Author: ScriptedAlchemy

.changeset/chilled-dolls-arrive.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/sdk': patch
+---
+
+allow createScript to change script attributes

.changeset/nine-years-brake.md

@@ -0,0 +1,7 @@
+---
+'@module-federation/nextjs-mf': patch
+'@module-federation/runtime': patch
+'@module-federation/sdk': patch
+---
+
+connect attrs to create script hook

apps/website-new/docs/en/plugin/dev/index.mdx

@@ -496,6 +496,7 @@ function createScript(args: CreateScriptOptions): HTMLScriptElement | {script?:
 
 type CreateScriptOptions = {
   url: string;
+  attrs?: Record<string, any>;
 };
 ```
 
@@ -508,11 +509,13 @@ import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtim
 const changeScriptAttributePlugin: () => FederationRuntimePlugin = function () {
   return {
     name: 'change-script-attribute',
-    createScript({ url }) {
+    createScript({ url, attrs }) {
       if (url === testRemoteEntry) {
         let script = document.createElement('script');
         script.src = testRemoteEntry;
-        script.setAttribute('loader-hooks', 'isTrue');
+        // can modify the attrs object
+        attrs['loader-hooks'] = 'isTrue';
+        // or add them to the script
         script.setAttribute('crossorigin', 'anonymous');
         return script;
       }

apps/website-new/docs/zh/plugin/dev/index.mdx

@@ -496,6 +496,7 @@ function createScript(args: CreateScriptOptions): HTMLScriptElement | {script?:
 
 type CreateScriptOptions = {
   url: string;
+  attrs?: Record<string, any>;
 };
 ```
 

packages/nextjs-mf/src/plugins/container/runtimePlugin.ts

@@ -2,6 +2,19 @@ import { FederationRuntimePlugin } from '@module-federation/runtime/types';
 export default function (): FederationRuntimePlugin {
   return {
     name: 'next-internal-plugin',
+    //@ts-ignore
+    createScript({ url, attrs }) {
+      if (typeof window !== 'undefined') {
+        const script = document.createElement('script');
+        script.src = url;
+        script.async = true;
+        //@ts-ignore
+        delete attrs.crossorigin;
+
+        return { script, timeout: 8000 };
+      }
+      return undefined;
+    },
     errorLoadRemote({ id, error, from, origin }) {
       console.error(id, 'offline');
       const pg = function () {
@@ -81,9 +94,6 @@ export default function (): FederationRuntimePlugin {
       remote.entry = `${remote?.entry}?t=${Date.now()}`;
       return args;
     },
-    createScript({ url }) {
-      return;
-    },
     afterResolve(args) {
       return args;
     },

packages/runtime/src/core.ts

@@ -89,6 +89,7 @@ export class FederationHost {
       [
         {
           url: string;
+          attrs?: Record<string, any>;
         },
       ],
       CreateScriptHookReturn

packages/runtime/src/module/index.ts

@@ -32,8 +32,11 @@ class Module {
     const remoteEntryExports = await getRemoteEntry({
       remoteInfo: this.remoteInfo,
       remoteEntryExports: this.remoteEntryExports,
-      createScriptHook: (url: string) => {
-        const res = this.host.loaderHook.lifecycle.createScript.emit({ url });
+      createScriptHook: (url: string, attrs: any) => {
+        const res = this.host.loaderHook.lifecycle.createScript.emit({
+          url,
+          attrs,
+        });
 
         if (!res) return;
 

packages/runtime/src/utils/load.ts

@@ -42,7 +42,10 @@ export async function loadEntryScript({
   name: string;
   globalName: string;
   entry: string;
-  createScriptHook?: (url: string) => CreateScriptHookReturn;
+  createScriptHook?: (
+    url: string,
+    attrs?: Record<string, any> | undefined,
+  ) => CreateScriptHookReturn;
 }): Promise<RemoteEntryExports> {
   const { entryExports: remoteEntryExports } = getRemoteEntryExports(
     name,
@@ -117,7 +120,10 @@ export async function getRemoteEntry({
 }: {
   remoteInfo: RemoteInfo;
   remoteEntryExports?: RemoteEntryExports | undefined;
-  createScriptHook?: (url: string) => CreateScriptHookReturn;
+  createScriptHook?: (
+    url: string,
+    attrs?: Record<string, any> | undefined,
+  ) => CreateScriptHookReturn;
 }): Promise<RemoteEntryExports | void> {
   const { entry, name, type, entryGlobalName } = remoteInfo;
   const uniqueKey = getRemoteEntryUniqueKey(remoteInfo);

packages/sdk/src/dom.ts

@@ -32,7 +32,10 @@ export function createScript(info: {
   cb?: (value: void | PromiseLike<void>) => void;
   attrs?: Record<string, any>;
   needDeleteScript?: boolean;
-  createScriptHook?: (url: string) => CreateScriptHookReturn;
+  createScriptHook?: (
+    url: string,
+    attrs?: Record<string, any> | undefined,
+  ) => CreateScriptHookReturn;
 }): { script: HTMLScriptElement; needAttach: boolean } {
   // Retrieve the existing script element by its src attribute
   let script: HTMLScriptElement | null = null;
@@ -55,7 +58,7 @@ export function createScript(info: {
     script.type = 'text/javascript';
     script.src = info.url;
     if (info.createScriptHook) {
-      const createScriptRes = info.createScriptHook(info.url);
+      const createScriptRes = info.createScriptHook(info.url, info.attrs);
 
       if (createScriptRes instanceof HTMLScriptElement) {
         script = createScriptRes;
@@ -202,7 +205,10 @@ export function loadScript(
   url: string,
   info: {
     attrs?: Record<string, any>;
-    createScriptHook?: (url: string) => CreateScriptHookReturn;
+    createScriptHook?: (
+      url: string,
+      attrs?: Record<string, any> | undefined,
+    ) => CreateScriptHookReturn;
   },
 ) {
   const { attrs = {}, createScriptHook } = info;