web/apps/labelstudio/src/utils/scripts.js - develop - vshmidt/label-studio

web/apps/labelstudio/src/utils/scripts.js
137 строк4 KB
Raul Martin
refactor: echo 27: Introducing biome (#5759)
29 апр 2024, 11:39
29 апр 2024, 11:392660ec9
const loadedScripts = new Set();

/**
 * Check wether it's a real script tag or not
 * @param {HTMLScriptElement} script
 */
const isScriptTag = (script) => {
  return [null, undefined, "", "text/javascript"].includes(script.type);
};

/**
 * Create a blob url from inline script
 * @param {String} scriptContent
 */
const createScriptLink = (scriptContent) => {
  const blob = new Blob([scriptContent], { type: "text/javascript" });
  return URL.createObjectURL(blob).toString();
};

export const isScriptValid = (scriptTag, forceUpdate) => {
  // Check wether the tag is a real script or not
  if (!isScriptTag(scriptTag)) {
    return false;
  }

  // Skip loading already existing scripts
  if (scriptTag.dataset.alwaysReload === undefined) {
    if (forceUpdate !== true && loadedScripts.has(scriptTag.outerHTML)) {
      return false;
    }
  }

  // Skip if the script is not attached to DOM
  if (!scriptTag.parentNode) {
    return false;
  }

  return true;
};

export const clearScriptsCache = () => {
  loadedScripts.clear();
};

/**
 * @param {HTMLScriptElement} targetScript
 * @param {HTMLScriptElement} sourceScript
 */
const swapScripts = (targetScript, sourceScript) => {
  return new Promise((resolve) => {
    /**@type {HTMLScriptElement} */
    const newScript = document.createElement("script");

    sourceScript = sourceScript ?? targetScript;

    // Use existing src or create url from script content
    // This is necessary for onload event to work properly
    const src = sourceScript.src || createScriptLink(sourceScript.text);

    // Remember the script to prevent loading it more than once
    loadedScripts.add(sourceScript.outerHTML);

    // We respect async attribute, so we only wait for script to load
    // when it's explicitly no async attribute
    if (!sourceScript.async) {
      const onScriptLoaded = ({ type }) => {
        newScript.removeEventListener("load", onScriptLoaded);
        newScript.removeEventListener("error", onScriptLoaded);
        resolve(type === "error" ? false : newScript);
      };

      newScript.addEventListener("load", onScriptLoaded);
      newScript.addEventListener("error", onScriptLoaded);
    } else {
      resolve();
    }

    if (sourceScript.dataset.alwaysReload !== undefined) {
      newScript.dataset.alwaysReload = "";
    }

    if (sourceScript.id) newScript.id = sourceScript.id;
    if (sourceScript.className) newScript.className = sourceScript.className;

    newScript.dataset.replaced = "true";
    newScript.async = sourceScript.async;
    newScript.defer = sourceScript.defer;
    newScript.type = "text/javascript";
    newScript.src = src;

    targetScript.parentNode.insertBefore(newScript, targetScript);
    targetScript.remove();
  });
};

/**
 * @param {HTMLScriptElement} scriptTag
 * @param {Function} onReplace
 */
export const replaceScript = async (scriptTag, { sourceScript, forceUpdate = false } = {}) => {
  sourceScript = sourceScript ?? scriptTag;

  if (!isScriptValid(scriptTag, forceUpdate)) return;
  if (sourceScript !== scriptTag && !isScriptValid(sourceScript, forceUpdate)) return;

  return swapScripts(scriptTag, sourceScript);
};

const scriptIterator = function* (scripts) {
  while (scripts.length) {
    const nextScript = scripts.shift();
    yield replaceScript(nextScript).then((result) => {
      return result;
    });
  }
};

/**
 * Re-inserts script tags inside a given element
 * Only scripts with src or with empty type, or with
 * type text/javascript will be processed
 * @param {HTMLElement} root
 */
export const reInsertScripts = async (root) => {
  const scripts = root.querySelectorAll("script");

  if (!scripts.length) return [];

  const iterarot = scriptIterator(Array.from(scripts));
  const result = [];

  for await (const script of iterarot) {
    result.push(script);
  }

  return result;
};