fix(sdk): the returned properties are used by default when create script and create link hook (#2608)

Author: zhoushaw

.changeset/strange-bottles-confess.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/sdk': patch
+---
+
+fix: The returned properties are used by default when create script and create link hook

packages/sdk/__tests__/dom.spec.ts

@@ -123,6 +123,32 @@ describe('createScript', () => {
 
       expect(clearTimeout).toHaveBeenCalled();
     });
+
+    it('should set section attributes on the script element', () => {
+      const url = 'https://example.com/script.js';
+      const cb = jest.fn();
+      const attrs = {
+        async: true,
+        'data-test': 'test',
+        crossOrigin: 'anonymous',
+      };
+      const { script } = createScript({
+        url,
+        cb,
+        attrs,
+        createScriptHook: (url) => {
+          const scriptEle = document.createElement('script');
+          scriptEle.src = url;
+          scriptEle.crossOrigin = 'use-credentials';
+          scriptEle.async = false;
+          return scriptEle;
+        },
+      });
+
+      expect(script.async).toBe(true);
+      expect(script.crossOrigin).toBe('use-credentials');
+      expect(script.getAttribute('data-test')).toBe('test');
+    });
   });
 });
 
@@ -175,6 +201,33 @@ describe('createLink', () => {
     expect(link.getAttribute('data-test')).toBe('test');
   });
 
+  it('should set section attributes on the link element', () => {
+    const url = 'https://example.com/script.js';
+    const cb = jest.fn();
+    const attrs = {
+      rel: 'preload',
+      as: 'script',
+      'data-test': 'test',
+      crossOrigin: 'anonymous',
+    };
+    const { link } = createLink({
+      url,
+      cb,
+      attrs,
+      createLinkHook: (url) => {
+        const linkEle = document.createElement('link');
+        linkEle.href = url;
+        linkEle.crossOrigin = 'use-credentials';
+        return linkEle;
+      },
+    });
+
+    expect(link.rel).toBe('preload');
+    expect(link.crossOrigin).toBe('use-credentials');
+    expect(link.getAttribute('as')).toBe('script');
+    expect(link.getAttribute('data-test')).toBe('test');
+  });
+
   it('should call the callback when the link loads', () => {
     const url = 'https://example.com/script.js';
     const cb = jest.fn();

packages/sdk/src/dom.ts

@@ -71,7 +71,8 @@ export function createScript(info: {
         if (script) {
           if (name === 'async' || name === 'defer') {
             script[name] = attrs[name];
-          } else {
+            // Attributes that do not exist are considered overridden
+          } else if (!script.getAttribute(name)) {
             script.setAttribute(name, attrs[name]);
           }
         }
@@ -160,7 +161,7 @@ export function createLink(info: {
     const attrs = info.attrs;
     if (attrs) {
       Object.keys(attrs).forEach((name) => {
-        if (link) {
+        if (link && !link.getAttribute(name)) {
           link.setAttribute(name, attrs[name]);
         }
       });