@jsenv/core 36.3.1 → 37.0.1

package/src/plugins/inlining/jsenv_plugin_inlining_as_data_url.js

@@ -1,58 +1,78 @@
-import { DATA_URL } from "@jsenv/urls";
+import { DATA_URL, injectQueryParamsIntoSpecifier } from "@jsenv/urls";
 
 export const jsenvPluginInliningAsDataUrl = () => {
   return {
     name: "jsenv:inlining_as_data_url",
     appliesDuring: "*",
-    formatReference: {
-      // if the referenced url is a worker we could use
-      // https://www.oreilly.com/library/view/web-workers/9781449322120/ch04.html
-      // but maybe we should rather use ?object_url
-      // or people could do this:
-      // import workerText from './worker.js?text'
-      // const blob = new Blob(workerText, { type: 'text/javascript' })
-      // window.URL.createObjectURL(blob)
-      // in any case the recommended way is to use an url
-      // to benefit from shared worker and reuse worker between tabs
-      "*": (reference, context) => {
-        if (
-          !reference.original ||
-          !reference.original.searchParams.has("inline")
-        ) {
-          return null;
-        }
-        // <link rel="stylesheet"> and <script> can be inlined in the html
-        if (
-          reference.type === "link_href" &&
-          reference.subtype === "stylesheet"
-        ) {
-          return null;
-        }
-        if (reference.type === "script") {
-          return null;
-        }
-        return (async () => {
-          const urlInfo = context.urlGraph.getUrlInfo(reference.url);
-          await context.cook(urlInfo, { reference });
-          const contentAsBase64 = Buffer.from(urlInfo.content).toString(
-            "base64",
-          );
-          let specifier = DATA_URL.stringify({
-            mediaType: urlInfo.contentType,
-            base64Flag: true,
-            data: contentAsBase64,
-          });
-          context.referenceUtils.becomesInline(reference, {
-            line: reference.line,
-            column: reference.column,
-            isOriginal: reference.isOriginal,
-            specifier,
-            content: contentAsBase64,
-            contentType: urlInfo.contentType,
-          });
-          return specifier;
-        })();
-      },
+    // if the referenced url is a worker we could use
+    // https://www.oreilly.com/library/view/web-workers/9781449322120/ch04.html
+    // but maybe we should rather use ?object_url
+    // or people could do this:
+    // import workerText from './worker.js?text'
+    // const blob = new Blob(workerText, { type: 'text/javascript' })
+    // window.URL.createObjectURL(blob)
+    // in any case the recommended way is to use an url
+    // to benefit from shared worker and reuse worker between tabs
+    formatReference: (reference) => {
+      if (!reference.searchParams.has("inline")) {
+        return null;
+      }
+      if (reference.type === "sourcemap_comment") {
+        return null;
+      }
+      // <link rel="stylesheet"> and <script> can be inlined in the html
+      if (
+        reference.type === "link_href" &&
+        reference.subtype === "stylesheet"
+      ) {
+        return null;
+      }
+      if (
+        reference.original &&
+        reference.original.type === "link_href" &&
+        reference.original.subtype === "stylesheet"
+      ) {
+        return null;
+      }
+      if (reference.type === "script") {
+        return null;
+      }
+      const specifierWithBase64Param = injectQueryParamsIntoSpecifier(
+        reference.specifier,
+        { as_base_64: "", inline: undefined },
+      );
+      const referenceInlined = reference.inline({
+        line: reference.line,
+        column: reference.column,
+        isOriginal: reference.isOriginal,
+        specifier: specifierWithBase64Param,
+      });
+      const urlInfoInlined = referenceInlined.urlInfo;
+      return (async () => {
+        await urlInfoInlined.cook();
+        const base64Url = DATA_URL.stringify({
+          mediaType: urlInfoInlined.contentType,
+          base64Flag: true,
+          data: urlInfoInlined.content,
+        });
+        return base64Url;
+      })();
+    },
+    fetchUrlContent: async (urlInfo) => {
+      const withoutBase64ParamUrlInfo =
+        urlInfo.getWithoutSearchParam("as_base_64");
+      if (!withoutBase64ParamUrlInfo) {
+        return null;
+      }
+      await withoutBase64ParamUrlInfo.cook();
+      const contentAsBase64 = Buffer.from(
+        withoutBase64ParamUrlInfo.content,
+      ).toString("base64");
+      return {
+        originalContent: withoutBase64ParamUrlInfo.originalContent,
+        content: contentAsBase64,
+        contentType: withoutBase64ParamUrlInfo.contentType,
+      };
     },
   };
 };

package/src/plugins/inlining/jsenv_plugin_inlining_into_html.js

@@ -9,46 +9,57 @@ import {
   setHtmlNodeText,
   getHtmlNodePosition,
 } from "@jsenv/ast";
+import { generateInlineContentUrl, urlToExtension } from "@jsenv/urls";
 
 export const jsenvPluginInliningIntoHtml = () => {
   return {
     name: "jsenv:inlining_into_html",
     appliesDuring: "*",
     transformUrlContent: {
-      html: async (urlInfo, context) => {
+      html: async (urlInfo) => {
         const htmlAst = parseHtmlString(urlInfo.content);
         const mutations = [];
         const actions = [];
 
         const onStyleSheet = (linkNode, { href }) => {
-          const linkReference = context.referenceUtils.find(
-            (ref) =>
-              ref.generatedSpecifier === href &&
-              ref.type === "link_href" &&
-              ref.subtype === "stylesheet",
-          );
-          if (
-            !linkReference.original ||
-            !linkReference.original.searchParams.has("inline")
-          ) {
+          let linkReference = null;
+          for (const referenceToOther of urlInfo.referenceToOthersSet) {
+            if (
+              referenceToOther.generatedSpecifier === href &&
+              referenceToOther.type === "link_href" &&
+              referenceToOther.subtype === "stylesheet"
+            ) {
+              linkReference = referenceToOther;
+              break;
+            }
+          }
+          if (!linkReference.searchParams.has("inline")) {
             return;
           }
-          const linkUrlInfo = context.urlGraph.getUrlInfo(linkReference.url);
-          actions.push(async () => {
-            await context.cook(linkUrlInfo, {
-              reference: linkReference,
-            });
-            const { line, column, isOriginal } = getHtmlNodePosition(linkNode, {
+          const { line, column, lineEnd, columnEnd, isOriginal } =
+            getHtmlNodePosition(linkNode, {
               preferOriginal: true,
             });
-            context.referenceUtils.becomesInline(linkReference, {
-              line: line - 1,
-              column,
-              isOriginal,
-              specifier: linkReference.generatedSpecifier,
-              content: linkUrlInfo.content,
-              contentType: linkUrlInfo.contentType,
-            });
+          const linkInlineUrl = generateInlineContentUrl({
+            url: linkReference.url,
+            extension: urlToExtension(linkReference.url),
+            line,
+            column,
+            lineEnd,
+            columnEnd,
+          });
+          const linkReferenceInlined = linkReference.inline({
+            line: line - 1,
+            column,
+            isOriginal,
+            specifier: linkInlineUrl,
+            type: "style",
+            expectedType: linkReference.expectedType,
+          });
+          const linkUrlInfoInlined = linkReferenceInlined.urlInfo;
+
+          actions.push(async () => {
+            await linkUrlInfoInlined.cook();
             mutations.push(() => {
               setHtmlNodeAttributes(linkNode, {
                 "inlined-from-href": href,
@@ -62,43 +73,50 @@ export const jsenvPluginInliningIntoHtml = () => {
               });
               linkNode.nodeName = "style";
               linkNode.tagName = "style";
-              setHtmlNodeText(linkNode, linkUrlInfo.content, {
+              setHtmlNodeText(linkNode, linkUrlInfoInlined.content, {
                 indentation: "auto",
               });
             });
           });
         };
         const onScriptWithSrc = (scriptNode, { src }) => {
-          const scriptReference = context.referenceUtils.find(
-            (ref) => ref.generatedSpecifier === src && ref.type === "script",
-          );
-          if (
-            !scriptReference.original ||
-            !scriptReference.original.searchParams.has("inline")
-          ) {
+          let scriptReference;
+          for (const dependencyReference of urlInfo.referenceToOthersSet) {
+            if (
+              dependencyReference.generatedSpecifier === src &&
+              dependencyReference.type === "script"
+            ) {
+              scriptReference = dependencyReference;
+              break;
+            }
+          }
+          if (!scriptReference.searchParams.has("inline")) {
             return;
           }
-          const scriptUrlInfo = context.urlGraph.getUrlInfo(
-            scriptReference.url,
-          );
-          actions.push(async () => {
-            await context.cook(scriptUrlInfo, {
-              reference: scriptReference,
-            });
-            const { line, column, isOriginal } = getHtmlNodePosition(
-              scriptNode,
-              {
-                preferOriginal: true,
-              },
-            );
-            context.referenceUtils.becomesInline(scriptReference, {
-              line: line - 1,
-              column,
-              isOriginal,
-              specifier: scriptReference.generatedSpecifier,
-              content: scriptUrlInfo.content,
-              contentType: scriptUrlInfo.contentType,
+          const { line, column, lineEnd, columnEnd, isOriginal } =
+            getHtmlNodePosition(scriptNode, {
+              preferOriginal: true,
             });
+          const scriptInlineUrl = generateInlineContentUrl({
+            url: scriptReference.url,
+            extension: urlToExtension(scriptReference.url),
+            line,
+            column,
+            lineEnd,
+            columnEnd,
+          });
+          const scriptReferenceInlined = scriptReference.inline({
+            line: line - 1,
+            column,
+            isOriginal,
+            specifier: scriptInlineUrl,
+            type: scriptReference.type,
+            subtype: scriptReference.subtype,
+            expectedType: scriptReference.expectedType,
+          });
+          const scriptUrlInfoInlined = scriptReferenceInlined.urlInfo;
+          actions.push(async () => {
+            await scriptUrlInfoInlined.cook();
             mutations.push(() => {
               setHtmlNodeAttributes(scriptNode, {
                 "inlined-from-src": src,
@@ -107,7 +125,7 @@ export const jsenvPluginInliningIntoHtml = () => {
                 "integrity": undefined,
                 "jsenv-inlined-by": "jsenv:inlining_into_html",
               });
-              setHtmlNodeText(scriptNode, scriptUrlInfo.content, {
+              setHtmlNodeText(scriptNode, scriptUrlInfoInlined.content, {
                 indentation: "auto",
               });
             });

package/src/plugins/plugin_controller.js

@@ -1,4 +1,10 @@
 import { performance } from "node:perf_hooks";
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  injectHtmlNodeAsEarlyAsPossible,
+  createHtmlNode,
+} from "@jsenv/ast";
 
 const HOOK_NAMES = [
   "init",
@@ -134,7 +140,7 @@ export const createPluginController = (kitchenContext) => {
   let lastPluginUsed = null;
   let currentPlugin = null;
   let currentHookName = null;
-  const callHook = (hook, info, context) => {
+  const callHook = (hook, info) => {
     const hookFn = getHookFunction(hook, info);
     if (!hookFn) {
       return null;
@@ -146,21 +152,17 @@ export const createPluginController = (kitchenContext) => {
     lastPluginUsed = hook.plugin;
     currentPlugin = hook.plugin;
     currentHookName = hook.name;
-    let valueReturned = hookFn(info, context);
+    let valueReturned = hookFn(info);
     currentPlugin = null;
     currentHookName = null;
     if (info.timing) {
       info.timing[`${hook.name}-${hook.plugin.name.replace("jsenv:", "")}`] =
         performance.now() - startTimestamp;
     }
-    valueReturned = assertAndNormalizeReturnValue(
-      hook.name,
-      valueReturned,
-      info,
-    );
+    valueReturned = assertAndNormalizeReturnValue(hook, valueReturned, info);
     return valueReturned;
   };
-  const callAsyncHook = async (hook, info, context) => {
+  const callAsyncHook = async (hook, info) => {
     const hookFn = getHookFunction(hook, info);
     if (!hookFn) {
       return null;
@@ -173,38 +175,37 @@ export const createPluginController = (kitchenContext) => {
     lastPluginUsed = hook.plugin;
     currentPlugin = hook.plugin;
     currentHookName = hook.name;
-    let valueReturned = await hookFn(info, context);
+    let valueReturned = await hookFn(info);
     currentPlugin = null;
     currentHookName = null;
     if (info.timing) {
       info.timing[`${hook.name}-${hook.plugin.name.replace("jsenv:", "")}`] =
         performance.now() - startTimestamp;
     }
-    valueReturned = assertAndNormalizeReturnValue(
-      hook.name,
-      valueReturned,
-      info,
-    );
+    valueReturned = assertAndNormalizeReturnValue(hook, valueReturned, info);
     return valueReturned;
   };
 
-  const callHooks = (hookName, info, context, callback) => {
+  const callHooks = (hookName, info, callback) => {
     const hooks = hookGroups[hookName];
     if (hooks) {
+      const setHookParams = (firstArg = info) => {
+        info = firstArg;
+      };
       for (const hook of hooks) {
-        const returnValue = callHook(hook, info, context);
+        const returnValue = callHook(hook, info);
         if (returnValue && callback) {
-          callback(returnValue, hook.plugin);
+          callback(returnValue, hook.plugin, setHookParams);
         }
       }
     }
   };
-  const callAsyncHooks = async (hookName, info, context, callback) => {
+  const callAsyncHooks = async (hookName, info, callback) => {
     const hooks = hookGroups[hookName];
     if (hooks) {
       await hooks.reduce(async (previous, hook) => {
         await previous;
-        const returnValue = await callAsyncHook(hook, info, context);
+        const returnValue = await callAsyncHook(hook, info);
         if (returnValue && callback) {
           await callback(returnValue, hook.plugin);
         }
@@ -212,11 +213,11 @@ export const createPluginController = (kitchenContext) => {
     }
   };
 
-  const callHooksUntil = (hookName, info, context) => {
+  const callHooksUntil = (hookName, info) => {
     const hooks = hookGroups[hookName];
     if (hooks) {
       for (const hook of hooks) {
-        const returnValue = callHook(hook, info, context);
+        const returnValue = callHook(hook, info);
         if (returnValue) {
           return returnValue;
         }
@@ -224,7 +225,7 @@ export const createPluginController = (kitchenContext) => {
     }
     return null;
   };
-  const callAsyncHooksUntil = (hookName, info, context) => {
+  const callAsyncHooksUntil = (hookName, info) => {
     const hooks = hookGroups[hookName];
     if (!hooks) {
       return null;
@@ -238,7 +239,7 @@ export const createPluginController = (kitchenContext) => {
           return resolve();
         }
         const hook = hooks[index];
-        const returnValue = callAsyncHook(hook, info, context);
+        const returnValue = callAsyncHook(hook, info);
         return Promise.resolve(returnValue).then((output) => {
           if (output) {
             return resolve(output);
@@ -285,16 +286,20 @@ const getHookFunction = (
   return hookValue;
 };
 
-const assertAndNormalizeReturnValue = (hookName, returnValue, info) => {
+const assertAndNormalizeReturnValue = (hook, returnValue, info) => {
   // all hooks are allowed to return null/undefined as a signal of "I don't do anything"
   if (returnValue === null || returnValue === undefined) {
     return returnValue;
   }
   for (const returnValueAssertion of returnValueAssertions) {
-    if (!returnValueAssertion.appliesTo.includes(hookName)) {
+    if (!returnValueAssertion.appliesTo.includes(hook.name)) {
       continue;
     }
-    const assertionResult = returnValueAssertion.assertion(returnValue, info);
+    const assertionResult = returnValueAssertion.assertion(
+      returnValue,
+      info,
+      hook,
+    );
     if (assertionResult !== undefined) {
       // normalization
       returnValue = assertionResult;
@@ -328,7 +333,7 @@ const returnValueAssertions = [
       "finalizeUrlContent",
       "optimizeUrlContent",
     ],
-    assertion: (valueReturned, urlInfo) => {
+    assertion: (valueReturned, urlInfo, hook) => {
       if (typeof valueReturned === "string" || Buffer.isBuffer(valueReturned)) {
         return { content: valueReturned };
       }
@@ -337,6 +342,12 @@ const returnValueAssertions = [
         if (urlInfo.url.startsWith("ignore:")) {
           return undefined;
         }
+        if (urlInfo.type === "html") {
+          const { scriptInjections } = valueReturned;
+          if (scriptInjections) {
+            return applyScriptInjections(urlInfo, scriptInjections, hook);
+          }
+        }
         if (typeof content !== "string" && !Buffer.isBuffer(content) && !body) {
           throw new Error(
             `Unexpected "content" returned by plugin: it must be a string or a buffer; got ${content}`,
@@ -350,3 +361,57 @@ const returnValueAssertions = [
     },
   },
 ];
+
+const applyScriptInjections = (htmlUrlInfo, scriptInjections, hook) => {
+  const htmlAst = parseHtmlString(htmlUrlInfo.content);
+
+  scriptInjections.reverse().forEach((scriptInjection) => {
+    const { setup } = scriptInjection;
+    if (setup) {
+      const setupGlobalName = setup.name;
+      const setupParamSource = stringifyParams(setup.param, "  ");
+      const inlineJs = `${setupGlobalName}({${setupParamSource}})`;
+      injectHtmlNodeAsEarlyAsPossible(
+        htmlAst,
+        createHtmlNode({
+          tagName: "script",
+          textContent: inlineJs,
+        }),
+        hook.plugin.name,
+      );
+    }
+    const scriptReference = htmlUrlInfo.dependencies.inject({
+      type: "script",
+      subtype: scriptInjection.type === "module" ? "js_module" : "js_classic",
+      expectedType:
+        scriptInjection.type === "module" ? "js_module" : "js_classic",
+      specifier: scriptInjection.src,
+    });
+    injectHtmlNodeAsEarlyAsPossible(
+      htmlAst,
+      createHtmlNode({
+        tagName: "script",
+        ...(scriptInjection.type === "module" ? { type: "module" } : {}),
+        src: scriptReference.generatedSpecifier,
+      }),
+      hook.plugin.name,
+    );
+  });
+  const htmlModified = stringifyHtmlAst(htmlAst);
+  return {
+    content: htmlModified,
+  };
+};
+
+const stringifyParams = (params, prefix = "") => {
+  const source = JSON.stringify(params, null, prefix);
+  if (prefix.length) {
+    // remove leading "{\n"
+    // remove leading prefix
+    // remove trailing "\n}"
+    return source.slice(2 + prefix.length, -2);
+  }
+  // remove leading "{"
+  // remove trailing "}"
+  return source.slice(1, -1);
+};

package/src/plugins/protocol_file/jsenv_plugin_protocol_file.js

@@ -84,7 +84,7 @@ export const jsenvPluginProtocolFile = ({
             magicDirectoryIndex,
             magicExtensions: getExtensionsToTry(
               magicExtensions,
-              reference.parentUrl,
+              reference.ownerUrlInfo.url,
             ),
           });
           if (filesystemResolution.stat) {
@@ -117,13 +117,12 @@ export const jsenvPluginProtocolFile = ({
       name: "jsenv:fs_resolution",
       appliesDuring: "*",
       resolveReference: {
-        filesystem: (reference, context) => {
-          const { parentUrl } = reference;
-          const parentUrlInfo = context.urlGraph.getUrlInfo(parentUrl);
+        filesystem: (reference) => {
+          const ownerUrlInfo = reference.ownerUrlInfo;
           const baseUrl =
-            parentUrlInfo && parentUrlInfo.type === "directory"
-              ? ensurePathnameTrailingSlash(parentUrl)
-              : parentUrl;
+            ownerUrlInfo && ownerUrlInfo.type === "directory"
+              ? ensurePathnameTrailingSlash(ownerUrlInfo.url)
+              : ownerUrlInfo.url;
           return new URL(reference.specifier, baseUrl).href;
         },
       },
@@ -141,14 +140,15 @@ export const jsenvPluginProtocolFile = ({
         }
         return null;
       },
-      formatReference: (reference, context) => {
+      formatReference: (reference) => {
         if (!reference.generatedUrl.startsWith("file:")) {
           return null;
         }
-        if (urlIsInsideOf(reference.generatedUrl, context.rootDirectoryUrl)) {
+        const { rootDirectoryUrl } = reference.ownerUrlInfo.context;
+        if (urlIsInsideOf(reference.generatedUrl, rootDirectoryUrl)) {
           return `/${urlToRelativeUrl(
             reference.generatedUrl,
-            context.rootDirectoryUrl,
+            rootDirectoryUrl,
           )}`;
         }
         return `/@fs/${reference.generatedUrl.slice("file:///".length)}`;
@@ -157,19 +157,16 @@ export const jsenvPluginProtocolFile = ({
     {
       name: "jsenv:file_url_fetching",
       appliesDuring: "*",
-      fetchUrlContent: (urlInfo, context) => {
+      fetchUrlContent: (urlInfo) => {
         if (!urlInfo.url.startsWith("file:")) {
           return null;
         }
         const urlObject = new URL(urlInfo.url);
-        if (context.reference.leadsToADirectory) {
+        if (urlInfo.firstReference.leadsToADirectory) {
           const directoryEntries = readdirSync(urlObject);
           let filename;
-          if (context.reference.type === "filesystem") {
-            const parentUrlInfo = context.urlGraph.getUrlInfo(
-              context.reference.parentUrl,
-            );
-            filename = `${parentUrlInfo.filename}${context.reference.specifier}/`;
+          if (urlInfo.firstReference.type === "filesystem") {
+            filename = `${urlInfo.firstReference.ownerUrlInfo.filename}${urlInfo.firstReference.specifier}/`;
           } else {
             filename = `${urlToFilename(urlInfo.url)}/`;
           }
@@ -182,10 +179,11 @@ export const jsenvPluginProtocolFile = ({
         }
         const fileBuffer = readFileSync(urlObject);
         const contentType = CONTENT_TYPE.fromUrlExtension(urlInfo.url);
+        const content = CONTENT_TYPE.isTextual(contentType)
+          ? String(fileBuffer)
+          : fileBuffer;
         return {
-          content: CONTENT_TYPE.isTextual(contentType)
-            ? String(fileBuffer)
-            : fileBuffer,
+          content,
           contentType,
         };
       },

package/src/plugins/reference_analysis/css/jsenv_plugin_css_reference_analysis.js

@@ -15,7 +15,7 @@ export const jsenvPluginCssReferenceAnalysis = () => {
   };
 };
 
-const parseAndTransformCssUrls = async (urlInfo, context) => {
+const parseAndTransformCssUrls = async (urlInfo) => {
   const cssUrls = await parseCssUrls({
     css: urlInfo.content,
     url: urlInfo.originalUrl,
@@ -23,7 +23,7 @@ const parseAndTransformCssUrls = async (urlInfo, context) => {
   const actions = [];
   const magicSource = createMagicSource(urlInfo.content);
   for (const cssUrl of cssUrls) {
-    const [reference] = context.referenceUtils.found({
+    const reference = urlInfo.dependencies.found({
       type: cssUrl.type,
       specifier: cssUrl.specifier,
       specifierStart: cssUrl.start,
@@ -32,9 +32,8 @@ const parseAndTransformCssUrls = async (urlInfo, context) => {
       specifierColumn: cssUrl.column,
     });
     actions.push(async () => {
-      const replacement = await context.referenceUtils.readGeneratedSpecifier(
-        reference,
-      );
+      await reference.readGeneratedSpecifier();
+      const replacement = reference.generatedSpecifier;
       magicSource.replace({
         start: cssUrl.start,
         end: cssUrl.end,