@merkur/integration 0.37.0 → 0.38.0

package/lib/index.es9.cjs

@@ -36,87 +36,138 @@ const exported = {
   isES13Supported,
   test
 };
-function _loadScript(asset, root) {
-  return new Promise((resolve, reject) => {
-    const scriptElement = root.querySelector(`script[src='${asset.source}']`);
-    if (scriptElement) {
-      if (!asset.test || exported.test(asset.test)) {
-        resolve();
-      }
-      scriptElement.addEventListener('load', resolve);
-      scriptElement.addEventListener('error', asset.optional ? resolve : reject);
-      return;
+const isLoadedSymbol = Symbol.for('isLoaded');
+const loadingPromiseSymbol = Symbol.for('loadingPromise');
+function _attachElementToAsset(asset, element) {
+  return {
+    ...asset,
+    element
+  };
+}
+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;
+}
+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');
-    if (asset.type === 'script') {
-      script.defer = true;
-      script.onload = resolve;
-      script.onerror = error => {
-        script.remove();
-        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);
-            }
-          } else {
-            script.setAttribute(name, value);
-          }
-        }
-      }
-    } else {
-      script.text = asset.source;
-      resolve();
+    try {
+      resolve(_handleAssetError({
+        asset
+      }));
+    } catch (error) {
+      reject(error);
     }
-    root.appendChild(script);
   });
 }
 function _loadStyle(asset, root) {
-  return new Promise((resolve, reject) => {
+  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 = 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();
+      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);
+      }
+    }
+    return _loadStyle(asset, root);
+  }));
 }
-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;
+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.removeAttribute(name);
+          }
+        } else {
+          script.setAttribute(name, value);
+        }
+      }
     }
-    return acc;
-  }, true)));
-  return Promise.all(stylesToRender.map(asset => _loadStyle(asset, root)));
+    root.appendChild(script);
+  });
+  return script[loadingPromiseSymbol];
 }
 async function loadScriptAssets(assets, root = document.head) {
-  const scriptElements = root.querySelectorAll('script');
-  const scriptsToRender = assets.reduce((scripts, asset) => {
+  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 (_asset.type !== 'script' && _asset.type !== 'inlineScript') {
-      return scripts;
-    }
     if (source === Object(source)) {
       if (source.es13 && exported.isES13Supported()) {
         _asset.source = source.es13;
@@ -128,33 +179,122 @@ async function loadScriptAssets(assets, root = document.head) {
         _asset.source = null;
       }
       if (!_asset.source) {
-        const message = `Asset '${_asset.name}' is missing ES variant and could not be loaded.`;
-        if (!_asset.optional) {
-          const error = new Error(message);
-          error.asset = _asset;
-          throw error;
+        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));
+    }
+    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 _fetchData(source) {
+  const response = await fetch(source);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch from '${source}' with status ${response.status} ${response.statusText}.`);
+  }
+  return response.text();
+}
+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);
+  }
+  script[loadingPromiseSymbol] = new Promise((resolve, reject) => {
+    script.dataset.src = asset.source;
+    root.appendChild(script);
+    (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();
+        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];
+      }
+      if (script.textContent) {
+        return _attachElementToAsset(asset, script);
       }
-      return acc;
-    }, false) || (_asset.test ? exported.test(_asset.test) : false)) {
-      return scripts;
+      return _handleAssetError({
+        asset,
+        message: `JSON asset '${asset.name}' is missing textContent and could not be loaded.`
+      });
     }
-    scripts.push(_asset);
-    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 acc;
   }, []);
-  return Promise.all(scriptsToRender.map(asset => _loadScript(asset, root)));
 }
-function loadAssets(assets, root) {
-  return Promise.all([loadScriptAssets(assets, root), loadStyleAssets(assets, root)]);
+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;

package/lib/index.es9.mjs

@@ -34,87 +34,138 @@ const exported = {
   isES13Supported,
   test
 };
-function _loadScript(asset, root) {
-  return new Promise((resolve, reject) => {
-    const scriptElement = root.querySelector(`script[src='${asset.source}']`);
-    if (scriptElement) {
-      if (!asset.test || exported.test(asset.test)) {
-        resolve();
-      }
-      scriptElement.addEventListener('load', resolve);
-      scriptElement.addEventListener('error', asset.optional ? resolve : reject);
-      return;
+const isLoadedSymbol = Symbol.for('isLoaded');
+const loadingPromiseSymbol = Symbol.for('loadingPromise');
+function _attachElementToAsset(asset, element) {
+  return {
+    ...asset,
+    element
+  };
+}
+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;
+}
+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');
-    if (asset.type === 'script') {
-      script.defer = true;
-      script.onload = resolve;
-      script.onerror = error => {
-        script.remove();
-        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);
-            }
-          } else {
-            script.setAttribute(name, value);
-          }
-        }
-      }
-    } else {
-      script.text = asset.source;
-      resolve();
+    try {
+      resolve(_handleAssetError({
+        asset
+      }));
+    } catch (error) {
+      reject(error);
     }
-    root.appendChild(script);
   });
 }
 function _loadStyle(asset, root) {
-  return new Promise((resolve, reject) => {
+  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 = 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();
+      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);
+      }
+    }
+    return _loadStyle(asset, root);
+  }));
 }
-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;
+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.removeAttribute(name);
+          }
+        } else {
+          script.setAttribute(name, value);
+        }
+      }
     }
-    return acc;
-  }, true)));
-  return Promise.all(stylesToRender.map(asset => _loadStyle(asset, root)));
+    root.appendChild(script);
+  });
+  return script[loadingPromiseSymbol];
 }
 async function loadScriptAssets(assets, root = document.head) {
-  const scriptElements = root.querySelectorAll('script');
-  const scriptsToRender = assets.reduce((scripts, asset) => {
+  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 (_asset.type !== 'script' && _asset.type !== 'inlineScript') {
-      return scripts;
-    }
     if (source === Object(source)) {
       if (source.es13 && exported.isES13Supported()) {
         _asset.source = source.es13;
@@ -126,30 +177,116 @@ async function loadScriptAssets(assets, root = document.head) {
         _asset.source = null;
       }
       if (!_asset.source) {
-        const message = `Asset '${_asset.name}' is missing ES variant and could not be loaded.`;
-        if (!_asset.optional) {
-          const error = new Error(message);
-          error.asset = _asset;
-          throw error;
+        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));
+    }
+    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 _fetchData(source) {
+  const response = await fetch(source);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch from '${source}' with status ${response.status} ${response.statusText}.`);
+  }
+  return response.text();
+}
+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);
+  }
+  script[loadingPromiseSymbol] = new Promise((resolve, reject) => {
+    script.dataset.src = asset.source;
+    root.appendChild(script);
+    (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();
+        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];
+      }
+      if (script.textContent) {
+        return _attachElementToAsset(asset, script);
       }
-      return acc;
-    }, false) || (_asset.test ? exported.test(_asset.test) : false)) {
-      return scripts;
+      return _handleAssetError({
+        asset,
+        message: `JSON asset '${asset.name}' is missing textContent and could not be loaded.`
+      });
     }
-    scripts.push(_asset);
-    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 acc;
   }, []);
-  return Promise.all(scriptsToRender.map(asset => _loadScript(asset, root)));
 }
-function loadAssets(assets, root) {
-  return Promise.all([loadScriptAssets(assets, root), loadStyleAssets(assets, root)]);
+async function loadAssets(assets, root) {
+  const results = await Promise.all([loadScriptAssets(assets, root), loadStyleAssets(assets, root), loadJsonAssets(assets, root)]);
+  return _mergeResults(results);
 }
-export { loadAssets, loadScriptAssets, loadStyleAssets, exported as testScript };
+export { isLoadedSymbol, loadAssets, loadJsonAssets, loadScriptAssets, loadStyleAssets, loadingPromiseSymbol, exported as testScript };