Merge pull request #236 from mjancarik/module-support

feat: 🎸 Added support for loading 'module' assets

Author: mjancarik

packages/cli/src/templates/head.ejs

@@ -17,10 +17,10 @@
 
   <%if (asset.type==='script' ) { %>
     <%if (typeof asset.source==='string' ) { %>
-      <script src='<%= asset.source %>' defer='true' data-name="<%= asset.name %>"></script>
+      <script src='<%= asset.source %>' <%- asset.module ? 'type="module"' : 'defer="true"' %> data-name="<%= asset.name %>"></script>
     <% } %>
     <%if (typeof asset.source==='object' ) { %>
-      <script src='<%= asset.source.es13 %>' defer='true' data-name="<%= asset.name %>"></script>
+      <script src='<%= asset.source.es13 %>' <%- asset.module ? 'type="module"' : 'defer="true"' %> data-name="<%= asset.name %>"></script>
     <% } %>
   <% } %>
 
@@ -36,4 +36,4 @@
       </script>
     <% } %>
   <% } %>
-<% }); %>
+<% }); %>

packages/core/types.d.ts

@@ -1,6 +1,7 @@
 export interface BaseWidgetAsset {
   type: 'stylesheet' | 'script' | 'inlineStyle';
   optional?: boolean;
+  module?: boolean;
   test?: string;
   attr?: Record<string, string | boolean>;
 }

packages/integration/src/__tests__/indexSpec.js

@@ -1,4 +1,5 @@
 import {
+  isLoadedSymbol,
   loadAssets,
   loadJsonAssets,
   loadScriptAssets,
@@ -222,6 +223,30 @@ describe('Merkur component', () => {
     fakeAssetListeners = {};
     assetLoadingDeferreds = {};
 
+    // Add module script test assets
+    assetsDictionary['module.js'] = {
+      name: 'module.js',
+      type: 'script',
+      module: true,
+      source: 'http://localhost:4444/static/es13/module.123456.js',
+    };
+    assetsDictionary['inline-module.js'] = {
+      name: 'inline-module.js',
+      type: 'inlineScript',
+      module: true,
+      source: 'console.log("Hello from module!");',
+    };
+    assetsDictionary['module-with-attr.js'] = {
+      name: 'module-with-attr.js',
+      type: 'script',
+      module: true,
+      source: 'http://localhost:4444/static/es13/module-attr.123456.js',
+      attr: {
+        crossorigin: 'anonymous',
+        defer: true, // This should be overridden
+      },
+    };
+
     jest.spyOn(console, 'warn').mockImplementation(() => {});
     jest
       .spyOn(document, 'createElement')
@@ -558,6 +583,96 @@ describe('Merkur component', () => {
         }),
       ]);
     });
+
+    it('should create module script elements with type="module"', async () => {
+      const scriptsPromise = loadScriptAssets([assetsDictionary['module.js']]);
+
+      expect(scriptsPromise).toBeInstanceOf(Promise);
+      expect(document.createElement).toHaveBeenCalledTimes(1);
+      expect(document.head.appendChild).toHaveBeenCalledTimes(1);
+
+      resolveFakeAssets();
+      const sources = await scriptsPromise;
+
+      expect(fakeAssetObjects[0].type).toBe('module');
+      expect(fakeAssetObjects[0].defer).toBeUndefined(); // defer should not be set for modules
+      expect(sources).toStrictEqual([
+        getAssetWithElement('module.js', fakeAssetObjects[0]),
+      ]);
+    });
+
+    it('should create inline module script elements with type="module"', async () => {
+      const scriptsPromise = loadScriptAssets([
+        assetsDictionary['inline-module.js'],
+      ]);
+
+      expect(scriptsPromise).toBeInstanceOf(Promise);
+      expect(document.createElement).toHaveBeenCalledTimes(1);
+      expect(document.head.appendChild).toHaveBeenCalledTimes(1);
+
+      const sources = await scriptsPromise;
+
+      expect(fakeAssetObjects[0].type).toBe('module');
+      expect(fakeAssetObjects[0].textContent).toBe(
+        'console.log("Hello from module!");',
+      );
+      expect(sources).toStrictEqual([
+        getAssetWithElement('inline-module.js', fakeAssetObjects[0]),
+      ]);
+    });
+
+    it('should handle module scripts with custom attributes correctly', async () => {
+      const scriptsPromise = loadScriptAssets([
+        assetsDictionary['module-with-attr.js'],
+      ]);
+
+      expect(document.createElement).toHaveBeenCalledTimes(1);
+      expect(document.head.appendChild).toHaveBeenCalledTimes(1);
+
+      resolveFakeAssets();
+      const sources = await scriptsPromise;
+
+      expect(fakeAssetObjects[0].type).toBe('module');
+      expect(fakeAssetObjects[0].defer).toBeUndefined(); // defer should be overridden for modules
+      expect(fakeAssetObjects[0].crossorigin).toBe('anonymous'); // custom attributes should be preserved
+      expect(sources).toStrictEqual([
+        getAssetWithElement('module-with-attr.js', fakeAssetObjects[0], {
+          attr: {
+            crossorigin: 'anonymous',
+            defer: false, // defer should be overridden for modules
+          },
+        }),
+      ]);
+    });
+
+    it('should return a promise that rejects when a module script fails to load', async () => {
+      expect.assertions(3);
+      const scriptsPromise = loadScriptAssets([assetsDictionary['module.js']]);
+
+      expect(document.createElement).toHaveBeenCalledTimes(1);
+
+      rejectFakeAssets();
+
+      try {
+        await scriptsPromise;
+      } catch (error) {
+        expect(fakeAssetObjects[0].remove).toHaveBeenCalledTimes(1);
+        expect(error).toBeInstanceOf(Error);
+      }
+    });
+
+    it('should resolve if a module script (not created by loadScriptAssets) is already present in the DOM', async () => {
+      const script = fakeAssetObjectGenerator('script');
+      script.src = assetsDictionary['module.js'].source;
+      script.type = 'module';
+      script[isLoadedSymbol] = true; // Mark as already loaded
+
+      const scriptsPromise = loadScriptAssets([assetsDictionary['module.js']]);
+      const sources = await scriptsPromise;
+
+      expect(document.createElement).toHaveBeenCalledTimes(0);
+      expect(sources).toStrictEqual([getAssetWithElement('module.js', script)]);
+    });
   });
 
   describe('loadJsonAssets() function', () => {
@@ -1004,5 +1119,40 @@ describe('Merkur component', () => {
 
       expect(console.warn).not.toHaveBeenCalled();
     });
+
+    it('should load module scripts correctly', async () => {
+      const assetsPromise = loadAssets([
+        assetsDictionary['module.js'],
+        assetsDictionary['inline-module.js'],
+        assetsDictionary['module-with-attr.js'],
+      ]);
+
+      resolveFakeAssets();
+      const sources = await assetsPromise;
+
+      expect(document.createElement).toHaveBeenCalledTimes(3);
+      expect(sources).toStrictEqual([
+        getAssetWithElement('module.js', fakeAssetObjects[0]),
+        getAssetWithElement('inline-module.js', fakeAssetObjects[1]),
+        getAssetWithElement('module-with-attr.js', fakeAssetObjects[2], {
+          attr: {
+            crossorigin: 'anonymous',
+            defer: false, // defer should be overridden for modules
+          },
+        }),
+      ]);
+
+      // Check that all scripts have the correct type
+      expect(fakeAssetObjects[0].type).toBe('module');
+      expect(fakeAssetObjects[1].type).toBe('module');
+      expect(fakeAssetObjects[2].type).toBe('module');
+
+      // Check that defer is not set for module scripts
+      expect(fakeAssetObjects[0].defer).toBeUndefined();
+      expect(fakeAssetObjects[1].defer).toBeUndefined();
+      expect(fakeAssetObjects[2].defer).toBeUndefined();
+
+      expect(console.warn).not.toHaveBeenCalled();
+    });
   });
 });

packages/integration/src/index.js

@@ -129,6 +129,11 @@ function _findScriptElement(scriptElements, asset) {
 function _loadScript(asset, root) {
   const script = document.createElement('script');
 
+  // Set script type to module if specified
+  if (asset.module) {
+    script.type = 'module';
+  }
+
   if (asset.type === 'inlineScript') {
     script.textContent = asset.source;
     root.appendChild(script);
@@ -137,7 +142,10 @@ function _loadScript(asset, root) {
   }
 
   script[loadingPromiseSymbol] = new Promise((resolve, reject) => {
-    script.defer = true;
+    // Don't set defer for module scripts as it can interfere with module loading
+    if (!asset.module) {
+      script.defer = true;
+    }
     _addListenersToAssetElement(asset, script, resolve, reject);
     script.src = asset.source;
 
@@ -173,6 +181,11 @@ async function loadScriptAssets(assets, root = document.head) {
         return _attachElementToAsset(asset, null);
       }
 
+      // Module scripts should not use defer attribute as it can cause issues
+      if (asset.module && asset.attr && asset.attr.defer !== false) {
+        asset = { ...asset, attr: { ...asset.attr, defer: false } };
+      }
+
       const { source } = asset;
       const _asset = Object.assign({}, asset);