feat(sdk): enable trusted type functionality (#2974)

Co-authored-by: Ethan Atlakson <[email protected]>
Co-authored-by: Zack Jackson <[email protected]>

Author: 3 people

.changeset/mean-geckos-help.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/sdk': patch
+---
+
+dont set script.src if it is set by createScriptHook

packages/sdk/__tests__/dom.spec.ts

@@ -126,6 +126,7 @@ describe('createScript', () => {
 
     it('should set section attributes on the script element', () => {
       const url = 'https://example.com/script.js';
+      const scriptHookUrl = 'https://example.com/hook-script.js';
       const cb = jest.fn();
       const attrs = {
         async: true,
@@ -138,14 +139,15 @@ describe('createScript', () => {
         attrs,
         createScriptHook: (url) => {
           const scriptEle = document.createElement('script');
-          scriptEle.src = url;
+          scriptEle.src = scriptHookUrl;
           scriptEle.crossOrigin = 'use-credentials';
           scriptEle.async = false;
           return scriptEle;
         },
       });
 
       // if user return element by createScriptHook, it will not add default attrs
+      expect(script.src).toBe(scriptHookUrl);
       expect(script.async).toBe(false);
       expect(script.crossOrigin).toBe('use-credentials');
       expect(script.getAttribute('data-test')).toBe(null);
@@ -223,7 +225,7 @@ describe('createLink', () => {
       },
     });
 
-    // if user return element by createScriptHook, it will not add default attrs
+    // if user return element by createLinkHook, it will not add default attrs
     expect(link.rel).toBe('');
     expect(link.crossOrigin).toBe('use-credentials');
     expect(link.getAttribute('as')).toBe(null);

packages/sdk/src/dom.ts

@@ -50,7 +50,6 @@ export function createScript(info: {
     const attrs = info.attrs;
     script = document.createElement('script');
     script.type = attrs?.['type'] === 'module' ? 'module' : 'text/javascript';
-    script.src = info.url;
     let createScriptRes: CreateScriptHookReturnDom = undefined;
     if (info.createScriptHook) {
       createScriptRes = info.createScriptHook(info.url, info.attrs);
@@ -66,6 +65,9 @@ export function createScript(info: {
         }
       }
     }
+    if (!script.src) {
+      script.src = info.url;
+    }
     if (attrs && !createScriptRes) {
       Object.keys(attrs).forEach((name) => {
         if (script) {