@jsenv/core 35.0.5 → 36.0.1

package/src/plugins/reference_analysis/html/jsenv_plugin_html_reference_analysis.js

@@ -0,0 +1,429 @@
+import {
+  parseHtmlString,
+  visitHtmlNodes,
+  getHtmlNodeText,
+  setHtmlNodeText,
+  removeHtmlNodeText,
+  getHtmlNodeAttribute,
+  getHtmlNodePosition,
+  setHtmlNodeAttributes,
+  getHtmlNodeAttributePosition,
+  analyzeScriptNode,
+  parseSrcSet,
+  stringifyHtmlAst,
+} from "@jsenv/ast";
+import { generateInlineContentUrl } from "@jsenv/urls";
+import { CONTENT_TYPE } from "@jsenv/utils/src/content_type/content_type.js";
+
+export const jsenvPluginHtmlReferenceAnalysis = ({
+  inlineContent,
+  inlineConvertedScript,
+}) => {
+  return {
+    name: "jsenv:html_reference_analysis",
+    appliesDuring: "*",
+    transformUrlContent: {
+      html: (urlInfo, context) =>
+        parseAndTransformHtmlReferences(urlInfo, context, {
+          inlineContent,
+          inlineConvertedScript,
+        }),
+    },
+  };
+};
+
+const parseAndTransformHtmlReferences = async (
+  urlInfo,
+  context,
+  { inlineContent, inlineConvertedScript },
+) => {
+  const url = urlInfo.originalUrl;
+  const content = urlInfo.content;
+  const htmlAst = parseHtmlString(content);
+
+  const mutations = [];
+  const actions = [];
+  const finalizeCallbacks = [];
+
+  const createExternalReference = (
+    node,
+    attributeName,
+    attributeValue,
+    { type, subtype, expectedType },
+  ) => {
+    let position;
+    if (getHtmlNodeAttribute(node, "jsenv-cooked-by")) {
+      // when generated from inline content,
+      // line, column is not "src" nor "inlined-from-src" but "original-position"
+      position = getHtmlNodePosition(node);
+    } else {
+      position = getHtmlNodeAttributePosition(node, attributeName);
+    }
+    const {
+      line,
+      column,
+      // originalLine, originalColumn
+    } = position;
+    const debug = getHtmlNodeAttribute(node, "jsenv-debug") !== undefined;
+
+    const { crossorigin, integrity } = readFetchMetas(node);
+    const isResourceHint = [
+      "preconnect",
+      "dns-prefetch",
+      "prefetch",
+      "preload",
+      "modulepreload",
+    ].includes(subtype);
+    const [reference] = context.referenceUtils.found({
+      type,
+      subtype,
+      expectedType,
+      specifier: attributeValue,
+      specifierLine: line,
+      specifierColumn: column,
+      isResourceHint,
+      crossorigin,
+      integrity,
+      debug,
+    });
+    actions.push(async () => {
+      await context.referenceUtils.readGeneratedSpecifier(reference);
+      mutations.push(() => {
+        setHtmlNodeAttributes(node, {
+          [attributeName]: reference.generatedSpecifier,
+        });
+      });
+    });
+  };
+  const visitHref = (node, referenceProps) => {
+    const href = getHtmlNodeAttribute(node, "href");
+    if (href) {
+      return createExternalReference(node, "href", href, referenceProps);
+    }
+    const inlinedFromHref = getHtmlNodeAttribute(node, "inlined-from-href");
+    if (inlinedFromHref) {
+      return createExternalReference(
+        node,
+        "inlined-from-href",
+        new URL(inlinedFromHref, url).href,
+        referenceProps,
+      );
+    }
+    return null;
+  };
+  const visitSrc = (node, referenceProps) => {
+    const src = getHtmlNodeAttribute(node, "src");
+    if (src) {
+      return createExternalReference(node, "src", src, referenceProps);
+    }
+    const inlinedFromSrc = getHtmlNodeAttribute(node, "inlined-from-src");
+    if (inlinedFromSrc) {
+      return createExternalReference(
+        node,
+        "inlined-from-src",
+        new URL(inlinedFromSrc, url).href,
+        referenceProps,
+      );
+    }
+    return null;
+  };
+  const visitSrcset = (node, referenceProps) => {
+    const srcset = getHtmlNodeAttribute(node, "srcset");
+    if (srcset) {
+      const srcCandidates = parseSrcSet(srcset);
+      return srcCandidates.map((srcCandidate) => {
+        return createExternalReference(
+          node,
+          "srcset",
+          srcCandidate.specifier,
+          referenceProps,
+        );
+      });
+    }
+    return null;
+  };
+
+  const createInlineReference = (
+    node,
+    inlineContent,
+    { extension, type, expectedType, contentType },
+  ) => {
+    const hotAccept = getHtmlNodeAttribute(node, "hot-accept") !== undefined;
+    const { line, column, lineEnd, columnEnd, isOriginal } =
+      getHtmlNodePosition(node, { preferOriginal: true });
+    const inlineContentUrl = generateInlineContentUrl({
+      url: urlInfo.url,
+      extension,
+      line,
+      column,
+      lineEnd,
+      columnEnd,
+    });
+    const debug = getHtmlNodeAttribute(node, "jsenv-debug") !== undefined;
+    const [inlineReference, inlineUrlInfo] = context.referenceUtils.foundInline(
+      {
+        node,
+        type,
+        expectedType,
+        isOriginalPosition: isOriginal,
+        // we remove 1 to the line because imagine the following html:
+        // <style>body { color: red; }</style>
+        // -> content starts same line as <style> (same for <script>)
+        specifierLine: line - 1,
+        specifierColumn: column,
+        specifier: inlineContentUrl,
+        contentType,
+        content: inlineContent,
+        debug,
+      },
+    );
+    actions.push(async () => {
+      await cookInlineContent({
+        context,
+        inlineContentUrlInfo: inlineUrlInfo,
+        inlineContentReference: inlineReference,
+      });
+      mutations.push(() => {
+        if (hotAccept) {
+          removeHtmlNodeText(node);
+          setHtmlNodeAttributes(node, {
+            "jsenv-cooked-by": "jsenv:html_inline_content_analysis",
+          });
+        } else {
+          setHtmlNodeText(node, inlineUrlInfo.content, {
+            indentation: false, // indentation would decrease stack trace precision
+          });
+          setHtmlNodeAttributes(node, {
+            "jsenv-cooked-by": "jsenv:html_inline_content_analysis",
+          });
+        }
+      });
+    });
+
+    return inlineReference;
+  };
+  const visitTextContent = (
+    node,
+    { extension, type, expectedType, contentType },
+  ) => {
+    const inlineContent = getHtmlNodeText(node);
+    if (!inlineContent) {
+      return null;
+    }
+    return createInlineReference(node, inlineContent, {
+      extension,
+      type,
+      expectedType,
+      contentType,
+    });
+  };
+
+  visitHtmlNodes(htmlAst, {
+    link: (linkNode) => {
+      const rel = getHtmlNodeAttribute(linkNode, "rel");
+      const type = getHtmlNodeAttribute(linkNode, "type");
+      const ref = visitHref(linkNode, {
+        type: "link_href",
+        subtype: rel,
+        // https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#including_a_mime_type
+        expectedContentType: type,
+      });
+      if (ref) {
+        finalizeCallbacks.push(() => {
+          ref.expectedType = decideLinkExpectedType(ref, context);
+        });
+      }
+    },
+    style: inlineContent
+      ? (styleNode) => {
+          visitTextContent(styleNode, {
+            extension: ".css",
+            type: "style",
+            expectedType: "css",
+            contentType: "text/css",
+          });
+        }
+      : null,
+    script: (scriptNode) => {
+      // during build the importmap is inlined
+      // and shoud not be considered as a dependency anymore
+      if (
+        getHtmlNodeAttribute(scriptNode, "jsenv-inlined-by") ===
+        "jsenv:importmap"
+      ) {
+        return;
+      }
+
+      const { type, contentType, extension } = analyzeScriptNode(scriptNode);
+      // ignore <script type="whatever">foobar</script>
+      // per HTML spec https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type
+      if (type !== "text") {
+        const externalRef = visitSrc(scriptNode, {
+          type: "script",
+          subtype: type,
+          expectedType: type,
+        });
+        if (externalRef) {
+          return;
+        }
+      }
+
+      // now visit the content, if any
+      if (!inlineContent) {
+        return;
+      }
+      // If the inline script was already handled by an other plugin, ignore it
+      // - we want to preserve inline scripts generated by html supervisor during dev
+      // - we want to avoid cooking twice a script during build
+      if (
+        !inlineConvertedScript &&
+        getHtmlNodeAttribute(scriptNode, "jsenv-injected-by") ===
+          "jsenv:js_module_fallback"
+      ) {
+        return;
+      }
+
+      const inlineRef = visitTextContent(scriptNode, {
+        extension: extension || CONTENT_TYPE.asFileExtension(contentType),
+        type: "script",
+        expectedType: type,
+        contentType,
+      });
+      if (inlineRef && extension) {
+        // 1. <script type="jsx"> becomes <script>
+        // 2. <script type="module/jsx"> becomes <script type="module">
+        mutations.push(() => {
+          setHtmlNodeAttributes(scriptNode, {
+            type: type === "js_module" ? "module" : undefined,
+          });
+        });
+      }
+    },
+    a: (aNode) => {
+      visitHref(aNode, {
+        type: "a_href",
+      });
+    },
+    iframe: (iframeNode) => {
+      visitSrc(iframeNode, {
+        type: "iframe_src",
+      });
+    },
+    img: (imgNode) => {
+      visitSrc(imgNode, {
+        type: "img_src",
+      });
+      visitSrcset(imgNode, {
+        type: "img_srcset",
+      });
+    },
+    source: (sourceNode) => {
+      visitSrc(sourceNode, {
+        type: "source_src",
+      });
+      visitSrcset(sourceNode, {
+        type: "source_srcset",
+      });
+    },
+    // svg <image> tag
+    image: (imageNode) => {
+      visitHref(imageNode, {
+        type: "image_href",
+      });
+    },
+    use: (useNode) => {
+      visitHref(useNode, {
+        type: "use_href",
+      });
+    },
+  });
+  finalizeCallbacks.forEach((finalizeCallback) => {
+    finalizeCallback();
+  });
+
+  if (actions.length > 0) {
+    await Promise.all(actions.map((action) => action()));
+  }
+  if (mutations.length === 0) {
+    return null;
+  }
+  mutations.forEach((mutation) => mutation());
+  return stringifyHtmlAst(htmlAst);
+};
+
+const cookInlineContent = async ({
+  context,
+  inlineContentUrlInfo,
+  inlineContentReference,
+}) => {
+  try {
+    await context.cook(inlineContentUrlInfo, {
+      reference: inlineContentReference,
+    });
+  } catch (e) {
+    if (e.code === "PARSE_ERROR") {
+      // When something like <style> or <script> contains syntax error
+      // the HTML in itself it still valid
+      // keep the syntax error and continue with the HTML
+      const messageStart =
+        inlineContentUrlInfo.type === "css"
+          ? `Syntax error on css declared inside <style>`
+          : `Syntax error on js declared inside <script>`;
+
+      context.logger.error(`${messageStart}: ${e.cause.reasonCode}
+${e.traceMessage}`);
+    } else {
+      throw e;
+    }
+  }
+};
+
+const crossOriginCompatibleTagNames = ["script", "link", "img", "source"];
+const integrityCompatibleTagNames = ["script", "link", "img", "source"];
+const readFetchMetas = (node) => {
+  const meta = {};
+  if (crossOriginCompatibleTagNames.includes(node.nodeName)) {
+    const crossorigin = getHtmlNodeAttribute(node, "crossorigin") !== undefined;
+    meta.crossorigin = crossorigin;
+  }
+  if (integrityCompatibleTagNames.includes(node.nodeName)) {
+    const integrity = getHtmlNodeAttribute(node, "integrity");
+    meta.integrity = integrity;
+  }
+  return meta;
+};
+
+const decideLinkExpectedType = (linkReference, context) => {
+  const rel = getHtmlNodeAttribute(linkReference.node, "rel");
+  if (rel === "webmanifest") {
+    return "webmanifest";
+  }
+  if (rel === "modulepreload") {
+    return "js_module";
+  }
+  if (rel === "stylesheet") {
+    return "css";
+  }
+  if (rel === "preload") {
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#what_types_of_content_can_be_preloaded
+    const as = getHtmlNodeAttribute(linkReference.node, "as");
+    if (as === "document") {
+      return "html";
+    }
+    if (as === "style") {
+      return "css";
+    }
+    if (as === "script") {
+      const firstScriptOnThisUrl = context.referenceUtils.find(
+        (refCandidate) =>
+          refCandidate.url === linkReference.url &&
+          refCandidate.type === "script",
+      );
+      if (firstScriptOnThisUrl) {
+        return firstScriptOnThisUrl.expectedType;
+      }
+      return undefined;
+    }
+  }
+  return undefined;
+};

package/src/plugins/reference_analysis/inline_content.js

@@ -0,0 +1,7 @@
+/* eslint-env browser,node */
+
+const globalObject = typeof self === "object" ? self : process;
+globalObject.__InlineContent__ = function (content, { type = "text/plain" }) {
+  this.text = content;
+  this.type = type;
+};

package/src/plugins/reference_analysis/js/jsenv_plugin_js_reference_analysis.js

@@ -0,0 +1,161 @@
+import { createMagicSource } from "@jsenv/sourcemap";
+import { parseJsUrls } from "@jsenv/ast";
+import { generateInlineContentUrl } from "@jsenv/urls";
+import { JS_QUOTES } from "@jsenv/utils/src/string/js_quotes.js";
+import { CONTENT_TYPE } from "@jsenv/utils/src/content_type/content_type.js";
+
+import { isWebWorkerUrlInfo } from "@jsenv/core/src/kitchen/web_workers.js";
+
+export const jsenvPluginJsReferenceAnalysis = ({
+  inlineContent,
+  allowEscapeForVersioning,
+}) => {
+  return [
+    {
+      name: "jsenv:js_reference_analysis",
+      appliesDuring: "*",
+      transformUrlContent: {
+        js_classic: (urlInfo, context) =>
+          parseAndTransformJsReferences(urlInfo, context, {
+            inlineContent,
+            allowEscapeForVersioning,
+          }),
+        js_module: (urlInfo, context) =>
+          parseAndTransformJsReferences(urlInfo, context, {
+            inlineContent,
+            allowEscapeForVersioning,
+          }),
+      },
+    },
+  ];
+};
+
+const parseAndTransformJsReferences = async (
+  urlInfo,
+  context,
+  { inlineContent, allowEscapeForVersioning },
+) => {
+  const magicSource = createMagicSource(urlInfo.content);
+  const parallelActions = [];
+  const sequentialActions = [];
+
+  const onInlineReference = (inlineReferenceInfo) => {
+    const inlineUrl = generateInlineContentUrl({
+      url: urlInfo.url,
+      extension: CONTENT_TYPE.asFileExtension(inlineReferenceInfo.contentType),
+      line: inlineReferenceInfo.line,
+      column: inlineReferenceInfo.column,
+      lineEnd: inlineReferenceInfo.lineEnd,
+      columnEnd: inlineReferenceInfo.columnEnd,
+    });
+    let { quote } = inlineReferenceInfo;
+    if (
+      quote === "`" &&
+      !context.isSupportedOnCurrentClients("template_literals")
+    ) {
+      // if quote is "`" and template literals are not supported
+      // we'll use a regular string (single or double quote)
+      // when rendering the string
+      quote = JS_QUOTES.pickBest(inlineReferenceInfo.content);
+    }
+    const [inlineReference, inlineUrlInfo] = context.referenceUtils.foundInline(
+      {
+        type: "js_inline_content",
+        subtype: inlineReferenceInfo.type, // "new_blob_first_arg", "new_inline_content_first_arg", "json_parse_first_arg"
+        isOriginalPosition: urlInfo.content === urlInfo.originalContent,
+        specifierLine: inlineReferenceInfo.line,
+        specifierColumn: inlineReferenceInfo.column,
+        specifier: inlineUrl,
+        contentType: inlineReferenceInfo.contentType,
+        content: inlineReferenceInfo.content,
+      },
+    );
+    inlineUrlInfo.jsQuote = quote;
+    inlineReference.escape = (value) =>
+      JS_QUOTES.escapeSpecialChars(value.slice(1, -1), { quote });
+
+    sequentialActions.push(async () => {
+      await context.cook(inlineUrlInfo, { reference: inlineReference });
+      const replacement = JS_QUOTES.escapeSpecialChars(inlineUrlInfo.content, {
+        quote,
+        allowEscapeForVersioning,
+      });
+      magicSource.replace({
+        start: inlineReferenceInfo.start,
+        end: inlineReferenceInfo.end,
+        replacement,
+      });
+    });
+  };
+  const onExternalReference = (externalReferenceInfo) => {
+    if (
+      externalReferenceInfo.subtype === "import_static" ||
+      externalReferenceInfo.subtype === "import_dynamic"
+    ) {
+      urlInfo.data.usesImport = true;
+    }
+    const [reference] = context.referenceUtils.found({
+      node: externalReferenceInfo.node,
+      type: externalReferenceInfo.type,
+      subtype: externalReferenceInfo.subtype,
+      expectedType: externalReferenceInfo.expectedType,
+      expectedSubtype: externalReferenceInfo.expectedSubtype || urlInfo.subtype,
+      specifier: externalReferenceInfo.specifier,
+      specifierStart: externalReferenceInfo.start,
+      specifierEnd: externalReferenceInfo.end,
+      specifierLine: externalReferenceInfo.line,
+      specifierColumn: externalReferenceInfo.column,
+      data: externalReferenceInfo.data,
+      baseUrl: {
+        "StringLiteral": externalReferenceInfo.baseUrl,
+        "window.location": urlInfo.url,
+        "window.origin": context.rootDirectoryUrl,
+        "import.meta.url": urlInfo.url,
+        "context.meta.url": urlInfo.url,
+        "document.currentScript.src": urlInfo.url,
+      }[externalReferenceInfo.baseUrlType],
+      assert: externalReferenceInfo.assert,
+      assertNode: externalReferenceInfo.assertNode,
+      typePropertyNode: externalReferenceInfo.typePropertyNode,
+    });
+    parallelActions.push(async () => {
+      const replacement = await context.referenceUtils.readGeneratedSpecifier(
+        reference,
+      );
+      magicSource.replace({
+        start: externalReferenceInfo.start,
+        end: externalReferenceInfo.end,
+        replacement,
+      });
+      if (reference.mutation) {
+        reference.mutation(magicSource);
+      }
+    });
+  };
+  const jsReferenceInfos = await parseJsUrls({
+    js: urlInfo.content,
+    url: urlInfo.originalUrl,
+    isJsModule: urlInfo.type === "js_module",
+    isWebWorker: isWebWorkerUrlInfo(urlInfo),
+    inlineContent,
+  });
+  for (const jsReferenceInfo of jsReferenceInfos) {
+    if (jsReferenceInfo.isInline) {
+      onInlineReference(jsReferenceInfo);
+    } else {
+      onExternalReference(jsReferenceInfo);
+    }
+  }
+  if (parallelActions.length > 0) {
+    await Promise.all(parallelActions.map((action) => action()));
+  }
+  if (sequentialActions.length > 0) {
+    await sequentialActions.reduce(async (previous, action) => {
+      await previous;
+      await action();
+    }, Promise.resolve());
+  }
+
+  const { content, sourcemap } = magicSource.toContentAndSourcemap();
+  return { content, sourcemap };
+};