@merkur/integration 0.38.0 → 0.40.0

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://merkur.js.org/docs/getting-started" title="Getting started">
-    <img src="https://raw.githubusercontent.com/mjancarik/merkur/master/images/merkur-illustration.png" width="100px" height="100px" alt="Merkur illustration"/>
+    <img src="https://raw.githubusercontent.com/mjancarik/merkur/master/images/merkur-logo.png" width="100px" height="100px" alt="Merkur illustration"/>
   </a>
 </p>
 

package/lib/index.cjs

@@ -3,86 +3,68 @@
 let _isES9Supported;
 let _isES11Supported;
 let _isES13Supported;
-
+let _isES15Supported;
 function isES9Supported() {
   if (_isES9Supported === undefined) {
-    _isES9Supported =
-      exported.test(
-        'return (() => { const o = { t: 1 }; return { ...o }; })() && (async () => ({}))()',
-      ) && !!Object.values;
+    _isES9Supported = exported.test('return (() => { const o = { t: 1 }; return { ...o }; })() && (async () => ({}))()') && !!Object.values;
   }
-
   return _isES9Supported;
 }
-
 function isES11Supported() {
   if (_isES11Supported === undefined) {
-    _isES11Supported =
-      exported.test(
-        'return (() => { const o = { t: { q: true } }; return o?.t?.q && (o?.a?.q ?? true); })()',
-      ) &&
-      exported.test('return typeof Promise.allSettled === "function"') &&
-      exported.test('return typeof globalThis !== "undefined"') &&
-      exported.test('return typeof 9007199254740991n === "bigint"');
+    _isES11Supported = exported.test('return (() => { const o = { t: { q: true } }; return o?.t?.q && (o?.a?.q ?? true); })()') && exported.test('return typeof Promise.allSettled === "function"') && exported.test('return typeof globalThis !== "undefined"') && exported.test('return typeof 9007199254740991n === "bigint"');
   }
-
   return _isES11Supported;
 }
-
 function isES13Supported() {
   if (_isES13Supported === undefined) {
-    _isES13Supported =
-      exported.test('return [1,1].findLast(e => e === 1)') &&
-      exported.test('return Object.hasOwn({a:1}, "a")');
+    _isES13Supported = exported.test('return [1,1].findLast(e => e === 1)') && exported.test('return Object.hasOwn({a:1}, "a")');
   }
-
   return _isES13Supported;
 }
-
+function isES15Supported() {
+  if (_isES15Supported === undefined) {
+    _isES15Supported = exported.test('return typeof Promise.withResolvers === "function"') && exported.test('return typeof Object.groupBy === "function"');
+  }
+  return _isES15Supported;
+}
 function test(snippet) {
   try {
     const fn = new Function(snippet);
     const result = fn();
-
     return !!result;
   } catch (e) {
     return false;
   }
 }
-
 const exported = {
   isES9Supported,
   isES11Supported,
   isES13Supported,
-  test,
+  isES15Supported,
+  test
 };
 
 const isLoadedSymbol = Symbol.for('isLoaded');
 const loadingPromiseSymbol = Symbol.for('loadingPromise');
-
 function _attachElementToAsset(asset, element) {
   return {
     ...asset,
-    element,
+    element
   };
 }
-
 function _handleAssetError({
   asset,
-  message = `Error loading asset ${asset.source}.`,
+  message = `Error loading asset ${asset.source}.`
 }) {
   if (asset.optional) {
     console.warn(message);
-
     return _attachElementToAsset(asset, null);
   }
-
   const error = new Error(message);
   error.asset = asset;
-
   throw error;
 }
-
 function _addListenersToAssetElement(asset, element, resolve, reject) {
   element.addEventListener('load', () => {
     resolve(_attachElementToAsset(asset, element));
@@ -93,116 +75,94 @@ function _addListenersToAssetElement(asset, element, resolve, reject) {
     if (element.parentNode) {
       element.remove();
     }
-
     try {
-      resolve(_handleAssetError({ asset }));
+      resolve(_handleAssetError({
+        asset
+      }));
     } catch (error) {
       reject(error);
     }
   });
 }
-
 function _loadStyle(asset, root) {
   if (asset.type === 'inlineStyle') {
     const style = document.createElement('style');
+    style.dataset.merkurAssetName = asset.name;
     style.innerHTML = asset.source;
     root.appendChild(style);
-
     return _attachElementToAsset(asset, style);
   }
-
   const link = document.createElement('link');
-
   link[loadingPromiseSymbol] = new Promise((resolve, reject) => {
     _addListenersToAssetElement(asset, link, resolve, reject);
     link.rel = 'stylesheet';
+    link.dataset.merkurAssetName = asset.name;
     link.href = asset.source;
-
     root.appendChild(link);
   });
-
   return link[loadingPromiseSymbol];
 }
-
 async function loadStyleAssets(assets, root = document.head) {
   const styleElements = Array.from(root.querySelectorAll('style'));
-
-  return Promise.all(
-    assets.map((asset) => {
-      if (
-        !['stylesheet', 'inlineStyle'].includes(asset.type) ||
-        !asset.source
-      ) {
-        return _attachElementToAsset(asset, null);
-      }
-
-      if (asset.type === 'stylesheet') {
-        const link = root.querySelector(`link[href='${asset.source}']`);
-
-        if (link) {
-          if (link[loadingPromiseSymbol]) {
-            return link[loadingPromiseSymbol];
-          }
-
-          return _attachElementToAsset(asset, link);
+  return Promise.all(assets.map(asset => {
+    if (!['stylesheet', 'inlineStyle'].includes(asset.type) || !asset.source) {
+      return _attachElementToAsset(asset, null);
+    }
+    if (asset.type === 'stylesheet') {
+      const link = root.querySelector(`link[href='${asset.source}']`);
+      if (link) {
+        if (link[loadingPromiseSymbol]) {
+          return link[loadingPromiseSymbol];
         }
+        return _attachElementToAsset(asset, link);
       }
-
-      if (asset.type === 'inlineStyle') {
-        const inlineStyle = styleElements.find(
-          (element) => element.innerHTML === asset.source,
-        );
-
-        if (inlineStyle) {
-          return _attachElementToAsset(asset, inlineStyle);
-        }
+    }
+    if (asset.type === 'inlineStyle') {
+      const inlineStyle = styleElements.find(element => element.innerHTML === asset.source);
+      if (inlineStyle) {
+        return _attachElementToAsset(asset, inlineStyle);
       }
-
-      return _loadStyle(asset, root);
-    }),
-  );
+    }
+    return _loadStyle(asset, root);
+  }));
 }
-
 function _findScriptElement(scriptElements, asset) {
   if (asset.type === 'json') {
-    return scriptElements.find(
-      (element) => element.dataset.src === asset.source,
-    );
+    return scriptElements.find(element => element.dataset.src === asset.source);
   }
-
   if (!['script', 'inlineScript', 'inlineJson'].includes(asset.type)) {
     return null;
   }
-
   const attributeKey = asset.type === 'script' ? 'src' : 'textContent';
-  const source =
-    asset.type === 'inlineJson' ? JSON.stringify(asset.source) : asset.source;
-
-  return (
-    scriptElements.find((element) => element[attributeKey] === source) || null
-  );
+  const source = asset.type === 'inlineJson' ? JSON.stringify(asset.source) : asset.source;
+  return scriptElements.find(element => element[attributeKey] === source) || null;
 }
-
 function _loadScript(asset, root) {
   const script = document.createElement('script');
+  script.dataset.merkurAssetName = asset.name;
 
+  // Set script type to module if specified
+  if (asset.module) {
+    script.type = 'module';
+  }
   if (asset.type === 'inlineScript') {
     script.textContent = asset.source;
     root.appendChild(script);
-
     return _attachElementToAsset(asset, script);
   }
-
   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;
-
-    const { attr } = asset;
+    const {
+      attr
+    } = asset;
     if (attr && Object.keys(attr).length) {
       for (const name in attr) {
         const value = attr[name];
-
         if (typeof value === 'boolean') {
           if (value) {
             script.setAttribute(name, '');
@@ -214,86 +174,73 @@ function _loadScript(asset, root) {
         }
       }
     }
-
     root.appendChild(script);
   });
-
   return script[loadingPromiseSymbol];
 }
-
 async function loadScriptAssets(assets, root = document.head) {
   const scriptElements = Array.from(root.querySelectorAll('script'));
+  return Promise.all(assets.map(asset => {
+    if (!['script', 'inlineScript'].includes(asset.type) || !asset.source) {
+      return _attachElementToAsset(asset, null);
+    }
 
-  return Promise.all(
-    assets.map((asset) => {
-      if (!['script', 'inlineScript'].includes(asset.type) || !asset.source) {
-        return _attachElementToAsset(asset, null);
-      }
-
-      const { source } = asset;
-      const _asset = Object.assign({}, asset);
-
-      if (source === Object(source)) {
-        if (source.es13 && exported.isES13Supported()) {
-          _asset.source = source.es13;
-        } else if (source.es11 && exported.isES11Supported()) {
-          _asset.source = source.es11;
-        } else if (source.es9 && exported.isES9Supported()) {
-          _asset.source = source.es9;
-        } else {
-          _asset.source = null;
-        }
-
-        if (!_asset.source) {
-          return _handleAssetError({
-            asset: _asset,
-            message: `Asset '${_asset.name}' is missing ES variant and could not be loaded.`,
-          });
+    // 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);
+    if (source === Object(source)) {
+      if (source.es13 && exported.isES13Supported()) {
+        _asset.source = source.es13;
+      } else if (source.es11 && exported.isES11Supported()) {
+        _asset.source = source.es11;
+      } else if (source.es9 && exported.isES9Supported()) {
+        _asset.source = source.es9;
+      } else {
+        _asset.source = null;
       }
-
-      if (_asset.test && exported.test(_asset.test)) {
-        return _attachElementToAsset(
-          _asset,
-          _findScriptElement(scriptElements, _asset),
-        );
+      if (!_asset.source) {
+        return _handleAssetError({
+          asset: _asset,
+          message: `Asset '${_asset.name}' is missing ES variant and could not be loaded.`
+        });
       }
-
-      const script = _findScriptElement(scriptElements, _asset);
-
-      if (script && _asset.type === 'script') {
-        if (script[loadingPromiseSymbol]) {
-          return script[loadingPromiseSymbol];
-        }
-
-        if (script[isLoadedSymbol]) {
-          return _attachElementToAsset(_asset, script);
-        }
-
-        return new Promise((resolve, reject) =>
-          _addListenersToAssetElement(_asset, script, resolve, reject),
-        );
-      } else if (script && _asset.type === 'inlineScript') {
+    }
+    if (_asset.test && exported.test(_asset.test)) {
+      return _attachElementToAsset(_asset, _findScriptElement(scriptElements, _asset));
+    }
+    const script = _findScriptElement(scriptElements, _asset);
+    if (script && _asset.type === 'script') {
+      if (script[loadingPromiseSymbol]) {
+        return script[loadingPromiseSymbol];
+      }
+      if (script[isLoadedSymbol]) {
         return _attachElementToAsset(_asset, script);
       }
-
-      return _loadScript(_asset, root);
-    }),
-  );
+      return new Promise((resolve, reject) => _addListenersToAssetElement(_asset, script, resolve, reject));
+    } else if (script && _asset.type === 'inlineScript') {
+      return _attachElementToAsset(_asset, script);
+    }
+    return _loadScript(_asset, root);
+  }));
 }
-
 async function _fetchData(source) {
   const response = await fetch(source);
-
   if (!response.ok) {
-    throw new Error(
-      `Failed to fetch from '${source}' with status ${response.status} ${response.statusText}.`,
-    );
+    throw new Error(`Failed to fetch from '${source}' with status ${response.status} ${response.statusText}.`);
   }
-
   return response.text();
 }
-
 function _removeElementAfterTimeout(element, timeout) {
   if (timeout) {
     setTimeout(() => {
@@ -303,23 +250,19 @@ function _removeElementAfterTimeout(element, timeout) {
     }, timeout);
   }
 }
-
 function _loadJsonAsset(asset, root) {
   const script = document.createElement('script');
+  script.dataset.merkurAssetName = asset.name;
   script.type = 'application/json';
-
   if (asset.type === 'inlineJson') {
     script.textContent = JSON.stringify(asset.source);
     root.appendChild(script);
     _removeElementAfterTimeout(script, asset.ttl);
-
     return _attachElementToAsset(asset, script);
   }
-
   script[loadingPromiseSymbol] = new Promise((resolve, reject) => {
     script.dataset.src = asset.source;
     root.appendChild(script);
-
     (async () => {
       try {
         const textContent = await _fetchData(asset.source);
@@ -329,57 +272,41 @@ function _loadJsonAsset(asset, root) {
         resolve(_attachElementToAsset(asset, script));
       } catch (error) {
         script.remove();
-
         try {
-          resolve(
-            _handleAssetError({
-              asset,
-              message: `Error loading JSON asset '${asset.name}': ${error.message}`,
-            }),
-          );
+          resolve(_handleAssetError({
+            asset,
+            message: `Error loading JSON asset '${asset.name}': ${error.message}`
+          }));
         } catch (error) {
           reject(error);
         }
       }
     })();
   });
-
   return script[loadingPromiseSymbol];
 }
-
 async function loadJsonAssets(assets, root = document.head) {
-  const scriptElements = Array.from(
-    root.querySelectorAll('script[type="application/json"]'),
-  );
-
-  return Promise.all(
-    assets.map((asset) => {
-      if (!['json', 'inlineJson'].includes(asset.type) || !asset.source) {
-        return _attachElementToAsset(asset, null);
+  const scriptElements = Array.from(root.querySelectorAll('script[type="application/json"]'));
+  return Promise.all(assets.map(asset => {
+    if (!['json', 'inlineJson'].includes(asset.type) || !asset.source) {
+      return _attachElementToAsset(asset, null);
+    }
+    const script = _findScriptElement(scriptElements, asset);
+    if (script) {
+      if (script[loadingPromiseSymbol]) {
+        return script[loadingPromiseSymbol];
       }
-
-      const script = _findScriptElement(scriptElements, asset);
-
-      if (script) {
-        if (script[loadingPromiseSymbol]) {
-          return script[loadingPromiseSymbol];
-        }
-
-        if (script.textContent) {
-          return _attachElementToAsset(asset, script);
-        }
-
-        return _handleAssetError({
-          asset,
-          message: `JSON asset '${asset.name}' is missing textContent and could not be loaded.`,
-        });
+      if (script.textContent) {
+        return _attachElementToAsset(asset, script);
       }
-
-      return _loadJsonAsset(asset, root);
-    }),
-  );
+      return _handleAssetError({
+        asset,
+        message: `JSON asset '${asset.name}' is missing textContent and could not be loaded.`
+      });
+    }
+    return _loadJsonAsset(asset, root);
+  }));
 }
-
 function _mergeResults(results) {
   return results.reduce((acc, results) => {
     results.forEach((result, index) => {
@@ -389,18 +316,11 @@ function _mergeResults(results) {
         acc[index] = result;
       }
     });
-
     return acc;
   }, []);
 }
-
 async function loadAssets(assets, root) {
-  const results = await Promise.all([
-    loadScriptAssets(assets, root),
-    loadStyleAssets(assets, root),
-    loadJsonAssets(assets, root),
-  ]);
-
+  const results = await Promise.all([loadScriptAssets(assets, root), loadStyleAssets(assets, root), loadJsonAssets(assets, root)]);
   return _mergeResults(results);
 }
 

package/lib/index.es9.cjs

@@ -3,6 +3,7 @@
 let _isES9Supported;
 let _isES11Supported;
 let _isES13Supported;
+let _isES15Supported;
 function isES9Supported() {
   if (_isES9Supported === undefined) {
     _isES9Supported = exported.test('return (() => { const o = { t: 1 }; return { ...o }; })() && (async () => ({}))()') && !!Object.values;
@@ -21,6 +22,12 @@ function isES13Supported() {
   }
   return _isES13Supported;
 }
+function isES15Supported() {
+  if (_isES15Supported === undefined) {
+    _isES15Supported = exported.test('return typeof Promise.withResolvers === "function"') && exported.test('return typeof Object.groupBy === "function"');
+  }
+  return _isES15Supported;
+}
 function test(snippet) {
   try {
     const fn = new Function(snippet);
@@ -34,6 +41,7 @@ const exported = {
   isES9Supported,
   isES11Supported,
   isES13Supported,
+  isES15Supported,
   test
 };
 const isLoadedSymbol = Symbol.for('isLoaded');
@@ -78,6 +86,7 @@ function _addListenersToAssetElement(asset, element, resolve, reject) {
 function _loadStyle(asset, root) {
   if (asset.type === 'inlineStyle') {
     const style = document.createElement('style');
+    style.dataset.merkurAssetName = asset.name;
     style.innerHTML = asset.source;
     root.appendChild(style);
     return _attachElementToAsset(asset, style);
@@ -86,6 +95,7 @@ function _loadStyle(asset, root) {
   link[loadingPromiseSymbol] = new Promise((resolve, reject) => {
     _addListenersToAssetElement(asset, link, resolve, reject);
     link.rel = 'stylesheet';
+    link.dataset.merkurAssetName = asset.name;
     link.href = asset.source;
     root.appendChild(link);
   });
@@ -128,13 +138,22 @@ function _findScriptElement(scriptElements, asset) {
 }
 function _loadScript(asset, root) {
   const script = document.createElement('script');
+  script.dataset.merkurAssetName = asset.name;
+
+  // Set script type to module if specified
+  if (asset.module) {
+    script.type = 'module';
+  }
   if (asset.type === 'inlineScript') {
     script.textContent = asset.source;
     root.appendChild(script);
     return _attachElementToAsset(asset, script);
   }
   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;
     const {
@@ -164,6 +183,17 @@ async function loadScriptAssets(assets, root = document.head) {
     if (!['script', 'inlineScript'].includes(asset.type) || !asset.source) {
       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;
@@ -221,6 +251,7 @@ function _removeElementAfterTimeout(element, timeout) {
 }
 function _loadJsonAsset(asset, root) {
   const script = document.createElement('script');
+  script.dataset.merkurAssetName = asset.name;
   script.type = 'application/json';
   if (asset.type === 'inlineJson') {
     script.textContent = JSON.stringify(asset.source);