@merkur/integration 0.37.0 → 0.38.0

package/lib/index.cjs

@@ -57,165 +57,357 @@ const exported = {
   test,
 };
 
-function _loadScript(asset, root) {
-  return new Promise((resolve, reject) => {
-    const scriptElement = root.querySelector(`script[src='${asset.source}']`);
+const isLoadedSymbol = Symbol.for('isLoaded');
+const loadingPromiseSymbol = Symbol.for('loadingPromise');
+
+function _attachElementToAsset(asset, element) {
+  return {
+    ...asset,
+    element,
+  };
+}
 
-    if (scriptElement) {
-      if (!asset.test || exported.test(asset.test)) {
-        resolve();
-      }
+function _handleAssetError({
+  asset,
+  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;
+}
 
-      scriptElement.addEventListener('load', resolve);
-      scriptElement.addEventListener(
-        'error',
-        asset.optional ? resolve : reject,
-      );
-      return;
+function _addListenersToAssetElement(asset, element, resolve, reject) {
+  element.addEventListener('load', () => {
+    resolve(_attachElementToAsset(asset, element));
+    element[isLoadedSymbol] = true;
+    delete element[loadingPromiseSymbol];
+  });
+  element.addEventListener('error', () => {
+    if (element.parentNode) {
+      element.remove();
     }
 
-    const script = document.createElement('script');
+    try {
+      resolve(_handleAssetError({ asset }));
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
 
-    if (asset.type === 'script') {
-      script.defer = true;
-      script.onload = resolve;
-      script.onerror = (error) => {
-        script.remove();
+function _loadStyle(asset, root) {
+  if (asset.type === 'inlineStyle') {
+    const style = document.createElement('style');
+    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.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];
+          }
 
-        asset.optional ? resolve(error) : reject(error);
-      };
-      script.src = asset.source;
-
-      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, '');
-            } else {
-              script.removeAttribute(name);
-            }
+          return _attachElementToAsset(asset, link);
+        }
+      }
+
+      if (asset.type === 'inlineStyle') {
+        const inlineStyle = styleElements.find(
+          (element) => element.innerHTML === asset.source,
+        );
+
+        if (inlineStyle) {
+          return _attachElementToAsset(asset, inlineStyle);
+        }
+      }
+
+      return _loadStyle(asset, root);
+    }),
+  );
+}
+
+function _findScriptElement(scriptElements, asset) {
+  if (asset.type === 'json') {
+    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
+  );
+}
+
+function _loadScript(asset, root) {
+  const script = document.createElement('script');
+
+  if (asset.type === 'inlineScript') {
+    script.textContent = asset.source;
+    root.appendChild(script);
+
+    return _attachElementToAsset(asset, script);
+  }
+
+  script[loadingPromiseSymbol] = new Promise((resolve, reject) => {
+    script.defer = true;
+    _addListenersToAssetElement(asset, script, resolve, reject);
+    script.src = asset.source;
+
+    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, '');
           } else {
-            script.setAttribute(name, value);
+            script.removeAttribute(name);
           }
+        } else {
+          script.setAttribute(name, value);
         }
       }
-    } else {
-      script.text = asset.source;
-      resolve();
     }
 
     root.appendChild(script);
   });
-}
 
-function _loadStyle(asset, root) {
-  return new Promise((resolve, reject) => {
-    if (asset.type === 'stylesheet') {
-      const link = document.createElement('link');
-      link.onload = resolve;
-      link.onerror = reject;
-      link.rel = 'stylesheet';
-      link.href = asset.source;
-
-      root.appendChild(link);
-    } else {
-      const style = document.createElement('style');
-      style.innerHTML = asset.source;
-
-      root.appendChild(style);
-      resolve();
-    }
-  });
+  return script[loadingPromiseSymbol];
 }
 
-function loadStyleAssets(assets, root = document.head) {
-  const styleElements = root.querySelectorAll('style');
-  const stylesToRender = assets.filter(
-    (asset) =>
-      asset.source &&
-      ((asset.type === 'stylesheet' &&
-        !root.querySelector(`link[href='${asset.source}']`)) ||
-        (asset.type === 'inlineStyle' &&
-          Array.from(styleElements).reduce((acc, cur) => {
-            if (cur.innerHTML === asset.source) {
-              return false;
-            }
-
-            return acc;
-          }, true))),
-  );
+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);
+      }
+
+      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.`,
+          });
+        }
+      }
+
+      if (_asset.test && exported.test(_asset.test)) {
+        return _attachElementToAsset(
+          _asset,
+          _findScriptElement(scriptElements, _asset),
+        );
+      }
 
-  return Promise.all(stylesToRender.map((asset) => _loadStyle(asset, root)));
+      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') {
+        return _attachElementToAsset(_asset, script);
+      }
+
+      return _loadScript(_asset, root);
+    }),
+  );
 }
 
-async function loadScriptAssets(assets, root = document.head) {
-  const scriptElements = root.querySelectorAll('script');
-  const scriptsToRender = assets.reduce((scripts, asset) => {
-    const { source } = asset;
-    const _asset = Object.assign({}, asset);
+async function _fetchData(source) {
+  const response = await fetch(source);
 
-    if (_asset.type !== 'script' && _asset.type !== 'inlineScript') {
-      return scripts;
-    }
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch from '${source}' with status ${response.status} ${response.statusText}.`,
+    );
+  }
+
+  return response.text();
+}
 
-    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;
+function _removeElementAfterTimeout(element, timeout) {
+  if (timeout) {
+    setTimeout(() => {
+      if (element.parentNode) {
+        element.remove();
       }
+    }, timeout);
+  }
+}
+
+function _loadJsonAsset(asset, root) {
+  const script = document.createElement('script');
+  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);
+  }
 
-      if (!_asset.source) {
-        const message = `Asset '${_asset.name}' is missing ES variant and could not be loaded.`;
+  script[loadingPromiseSymbol] = new Promise((resolve, reject) => {
+    script.dataset.src = asset.source;
+    root.appendChild(script);
 
-        if (!_asset.optional) {
-          const error = new Error(message);
-          error.asset = _asset;
+    (async () => {
+      try {
+        const textContent = await _fetchData(asset.source);
+        script.textContent = textContent;
+        delete script[loadingPromiseSymbol];
+        _removeElementAfterTimeout(script, asset.ttl);
+        resolve(_attachElementToAsset(asset, script));
+      } catch (error) {
+        script.remove();
 
-          throw error;
+        try {
+          resolve(
+            _handleAssetError({
+              asset,
+              message: `Error loading JSON asset '${asset.name}': ${error.message}`,
+            }),
+          );
+        } catch (error) {
+          reject(error);
         }
+      }
+    })();
+  });
 
-        console.warn(message);
-        return scripts;
+  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);
       }
-    }
 
-    if (
-      Array.from(scriptElements).reduce((acc, cur) => {
-        if (cur.text === _asset.source) {
-          return true;
+      const script = _findScriptElement(scriptElements, asset);
+
+      if (script) {
+        if (script[loadingPromiseSymbol]) {
+          return script[loadingPromiseSymbol];
         }
 
-        return acc;
-      }, false) ||
-      (_asset.test ? exported.test(_asset.test) : false)
-    ) {
-      return scripts;
-    }
+        if (script.textContent) {
+          return _attachElementToAsset(asset, script);
+        }
 
-    scripts.push(_asset);
+        return _handleAssetError({
+          asset,
+          message: `JSON asset '${asset.name}' is missing textContent and could not be loaded.`,
+        });
+      }
 
-    return scripts;
-  }, []);
+      return _loadJsonAsset(asset, root);
+    }),
+  );
+}
+
+function _mergeResults(results) {
+  return results.reduce((acc, results) => {
+    results.forEach((result, index) => {
+      if (!acc[index]) {
+        acc[index] = result;
+      } else if (result.element) {
+        acc[index] = result;
+      }
+    });
 
-  return Promise.all(scriptsToRender.map((asset) => _loadScript(asset, root)));
+    return acc;
+  }, []);
 }
 
-function loadAssets(assets, root) {
-  return Promise.all([
+async function loadAssets(assets, root) {
+  const results = await Promise.all([
     loadScriptAssets(assets, root),
     loadStyleAssets(assets, root),
+    loadJsonAssets(assets, root),
   ]);
+
+  return _mergeResults(results);
 }
 
+exports.isLoadedSymbol = isLoadedSymbol;
 exports.loadAssets = loadAssets;
+exports.loadJsonAssets = loadJsonAssets;
 exports.loadScriptAssets = loadScriptAssets;
 exports.loadStyleAssets = loadStyleAssets;
+exports.loadingPromiseSymbol = loadingPromiseSymbol;
 exports.testScript = exported;