@jsenv/core 39.0.4 → 39.1.0

package/src/plugins/autoreload/client/autoreload.js

@@ -1,10 +1,8 @@
-import { urlHotMetas } from "../../import_meta_hot/client/import_meta_hot.js";
-import { compareTwoUrlPaths } from "./url_helpers.js";
 import {
-  reloadHtmlPage,
-  reloadJsImport,
-  getDOMNodesUsingUrl,
-} from "./reload.js";
+  parseSrcSet,
+  stringifySrcSet,
+} from "@jsenv/ast/src/html/html_src_set.js";
+import { urlHotMetas } from "../../import_meta_hot/client/import_meta_hot.js";
 
 export const initAutoreload = ({ mainFilePath }) => {
   let debug = false;
@@ -229,3 +227,154 @@ This could be due to syntax errors or importing non-existent modules (see errors
     },
   });
 };
+
+const reloadHtmlPage = () => {
+  window.location.reload(true);
+};
+// This function can consider everything as hot reloadable:
+// - no need to check [hot-accept]and [hot-decline] attributes for instance
+// This is because if something should full reload, we receive "full_reload"
+// from server and this function is not called
+const getDOMNodesUsingUrl = (urlToReload) => {
+  const nodes = [];
+  const shouldReloadUrl = (urlCandidate) => {
+    return compareTwoUrlPaths(urlCandidate, urlToReload);
+  };
+  const visitNodeAttributeAsUrl = (node, attributeName) => {
+    let attribute = node[attributeName];
+    if (!attribute) {
+      return;
+    }
+    if (SVGAnimatedString && attribute instanceof SVGAnimatedString) {
+      attribute = attribute.animVal;
+    }
+    if (!shouldReloadUrl(attribute)) {
+      return;
+    }
+    nodes.push({
+      node,
+      reload: (hot) => {
+        if (node.nodeName === "SCRIPT") {
+          const copy = document.createElement("script");
+          Array.from(node.attributes).forEach((attribute) => {
+            copy.setAttribute(attribute.nodeName, attribute.nodeValue);
+          });
+          copy.src = injectQuery(node.src, { hot });
+          if (node.parentNode) {
+            node.parentNode.replaceChild(copy, node);
+          } else {
+            document.body.appendChild(copy);
+          }
+        } else {
+          node[attributeName] = injectQuery(attribute, { hot });
+        }
+      },
+    });
+  };
+  Array.from(document.querySelectorAll(`link[rel="stylesheet"]`)).forEach(
+    (link) => {
+      visitNodeAttributeAsUrl(link, "href");
+    },
+  );
+  Array.from(document.querySelectorAll(`link[rel="icon"]`)).forEach((link) => {
+    visitNodeAttributeAsUrl(link, "href");
+  });
+  Array.from(document.querySelectorAll("script")).forEach((script) => {
+    visitNodeAttributeAsUrl(script, "src");
+    const inlinedFromSrc = script.getAttribute("inlined-from-src");
+    if (inlinedFromSrc) {
+      const inlinedFromUrl = new URL(inlinedFromSrc, window.location.origin)
+        .href;
+      if (shouldReloadUrl(inlinedFromUrl)) {
+        nodes.push({
+          node: script,
+          reload: () =>
+            window.__supervisor__.reloadSupervisedScript(inlinedFromSrc),
+        });
+      }
+    }
+  });
+  // There is no real need to update a.href because the resource will be fetched when clicked.
+  // But in a scenario where the resource was already visited and is in browser cache, adding
+  // the dynamic query param ensure the cache is invalidated
+  Array.from(document.querySelectorAll("a")).forEach((a) => {
+    visitNodeAttributeAsUrl(a, "href");
+  });
+  // About iframes:
+  // - By default iframe itself and everything inside trigger a parent page full-reload
+  // - Adding [hot-accept] on the iframe means parent page won't reload when iframe full/hot reload
+  //   In that case and if there is code in the iframe and parent doing post message communication:
+  //   you must put import.meta.hot.decline() for code involved in communication.
+  //   (both in parent and iframe)
+  Array.from(document.querySelectorAll("img")).forEach((img) => {
+    visitNodeAttributeAsUrl(img, "src");
+    const srcset = img.srcset;
+    if (srcset) {
+      nodes.push({
+        node: img,
+        reload: (hot) => {
+          const srcCandidates = parseSrcSet(srcset);
+          srcCandidates.forEach((srcCandidate) => {
+            const url = new URL(
+              srcCandidate.specifier,
+              `${window.location.href}`,
+            );
+            if (shouldReloadUrl(url)) {
+              srcCandidate.specifier = injectQuery(url, { hot });
+            }
+          });
+          img.srcset = stringifySrcSet(srcCandidates);
+        },
+      });
+    }
+  });
+  Array.from(document.querySelectorAll("source")).forEach((source) => {
+    visitNodeAttributeAsUrl(source, "src");
+  });
+  // svg image tag
+  Array.from(document.querySelectorAll("image")).forEach((image) => {
+    visitNodeAttributeAsUrl(image, "href");
+  });
+  // svg use
+  Array.from(document.querySelectorAll("use")).forEach((use) => {
+    visitNodeAttributeAsUrl(use, "href");
+  });
+  return nodes;
+};
+const reloadJsImport = async (url, hot) => {
+  const urlWithHotSearchParam = injectQuery(url, { hot });
+  const namespace = await import(urlWithHotSearchParam);
+  return namespace;
+};
+// const reloadAllCss = () => {
+//   const links = Array.from(document.getElementsByTagName("link"));
+//   links.forEach((link) => {
+//     if (link.rel === "stylesheet") {
+//       link.href = injectQuery(link.href, { hot: Date.now() });
+//     }
+//   });
+// };
+
+const compareTwoUrlPaths = (url, otherUrl) => {
+  if (url === otherUrl) {
+    return true;
+  }
+  const urlObject = new URL(url);
+  const otherUrlObject = new URL(otherUrl);
+  if (urlObject.origin !== otherUrlObject.origin) {
+    return false;
+  }
+  if (urlObject.pathname !== otherUrlObject.pathname) {
+    return false;
+  }
+  return true;
+};
+
+const injectQuery = (url, query) => {
+  const urlObject = new URL(url);
+  const { searchParams } = urlObject;
+  Object.keys(query).forEach((key) => {
+    searchParams.set(key, query[key]);
+  });
+  return String(urlObject);
+};

package/src/plugins/autoreload/jsenv_plugin_autoreload_client.js

@@ -1,9 +1,4 @@
-import {
-  parseHtml,
-  stringifyHtmlAst,
-  injectHtmlNodeAsEarlyAsPossible,
-  createHtmlNode,
-} from "@jsenv/ast";
+import { parseHtml, injectJsenvScript, stringifyHtmlAst } from "@jsenv/ast";
 
 export const jsenvPluginAutoreloadClient = () => {
   const autoreloadClientFileUrl = new URL(
@@ -21,29 +16,22 @@ export const jsenvPluginAutoreloadClient = () => {
           url: htmlUrlInfo.url,
         });
         const autoreloadClientReference = htmlUrlInfo.dependencies.inject({
-          type: "script",
+          type: "js_import",
           subtype: "js_module",
           expectedType: "js_module",
           specifier: autoreloadClientFileUrl,
         });
-        const paramsJson = JSON.stringify(
-          {
-            mainFilePath: `/${htmlUrlInfo.kitchen.context.mainFilePath}`,
+        injectJsenvScript(htmlAst, {
+          type: "module",
+          src: autoreloadClientReference.generatedSpecifier,
+          initCall: {
+            callee: "initAutoreload",
+            params: {
+              mainFilePath: `/${htmlUrlInfo.kitchen.context.mainFilePath}`,
+            },
           },
-          null,
-          "  ",
-        );
-        injectHtmlNodeAsEarlyAsPossible(
-          htmlAst,
-          createHtmlNode({
-            tagName: "script",
-            type: "module",
-            textContent: `import { initAutoreload } from "${autoreloadClientReference.generatedSpecifier}";
-
-initAutoreload(${paramsJson});`,
-          }),
-          "jsenv:autoreload_client",
-        );
+          pluginName: "jsenv:autoreload_client",
+        });
         const htmlModified = stringifyHtmlAst(htmlAst);
         return {
           content: htmlModified,

package/src/plugins/clean_html/jsenv_plugin_clean_html.js

@@ -10,9 +10,10 @@ export const jsenvPluginCleanHTML = () => {
           html: urlInfo.content,
           url: urlInfo.url,
         });
-        return stringifyHtmlAst(htmlAst, {
+        const htmlClean = stringifyHtmlAst(htmlAst, {
           cleanupPositionAttributes: true,
         });
+        return htmlClean;
       },
     },
   };

package/src/plugins/html_syntax_error_fallback/jsenv_plugin_html_syntax_error_fallback.js

@@ -0,0 +1,93 @@
+import { readFileSync } from "node:fs";
+import { urlToRelativeUrl } from "@jsenv/urls";
+import { parseHtml } from "@jsenv/ast";
+
+import { generateContentFrame } from "@jsenv/humanize";
+
+export const jsenvPluginHtmlSyntaxErrorFallback = () => {
+  const htmlSyntaxErrorFileUrl = new URL(
+    "./client/html_syntax_error.html",
+    import.meta.url,
+  );
+
+  return {
+    mustStayFirst: true,
+    name: "jsenv:html_syntax_error_fallback",
+    appliesDuring: "dev",
+    transformUrlContent: {
+      html: (urlInfo) => {
+        try {
+          parseHtml({
+            html: urlInfo.content,
+            url: urlInfo.url,
+          });
+          return null;
+        } catch (e) {
+          if (e.code !== "PARSE_ERROR") {
+            return null;
+          }
+          const line = e.line;
+          const column = e.column;
+          const htmlErrorContentFrame = generateContentFrame({
+            content: urlInfo.content,
+            line,
+            column,
+          });
+          urlInfo.kitchen.context.logger
+            .error(`Error while handling ${urlInfo.context.request ? urlInfo.context.request.url : urlInfo.url}:
+${e.reasonCode}
+${urlInfo.url}:${line}:${column}
+${htmlErrorContentFrame}`);
+          const html = generateHtmlForSyntaxError(e, {
+            htmlUrl: urlInfo.url,
+            rootDirectoryUrl: urlInfo.context.rootDirectoryUrl,
+            htmlErrorContentFrame,
+            htmlSyntaxErrorFileUrl,
+          });
+          return html;
+        }
+      },
+    },
+  };
+};
+
+const generateHtmlForSyntaxError = (
+  htmlSyntaxError,
+  { htmlUrl, rootDirectoryUrl, htmlErrorContentFrame, htmlSyntaxErrorFileUrl },
+) => {
+  const htmlForSyntaxError = String(readFileSync(htmlSyntaxErrorFileUrl));
+  const htmlRelativeUrl = urlToRelativeUrl(htmlUrl, rootDirectoryUrl);
+  const { line, column } = htmlSyntaxError;
+  const urlWithLineAndColumn = `${htmlUrl}:${line}:${column}`;
+  const replacers = {
+    fileRelativeUrl: htmlRelativeUrl,
+    reasonCode: htmlSyntaxError.reasonCode,
+    errorLinkHref: `javascript:window.fetch('/__open_in_editor__/${encodeURIComponent(
+      urlWithLineAndColumn,
+    )}')`,
+    errorLinkText: `${htmlRelativeUrl}:${line}:${column}`,
+    syntaxError: escapeHtml(htmlErrorContentFrame),
+  };
+  const html = replacePlaceholders(htmlForSyntaxError, replacers);
+  return html;
+};
+const escapeHtml = (string) => {
+  return string
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+};
+const replacePlaceholders = (html, replacers) => {
+  return html.replace(/\$\{(\w+)\}/g, (match, name) => {
+    const replacer = replacers[name];
+    if (replacer === undefined) {
+      return match;
+    }
+    if (typeof replacer === "function") {
+      return replacer();
+    }
+    return replacer;
+  });
+};

package/src/plugins/injections/internal/inject_globals.js

@@ -1,10 +1,5 @@
 import { createMagicSource } from "@jsenv/sourcemap";
-import {
-  parseHtml,
-  injectHtmlNodeAsEarlyAsPossible,
-  createHtmlNode,
-  stringifyHtmlAst,
-} from "@jsenv/ast";
+import { parseHtml, injectJsenvScript, stringifyHtmlAst } from "@jsenv/ast";
 
 export const injectGlobals = (content, globals, urlInfo) => {
   if (urlInfo.type === "html") {
@@ -28,14 +23,10 @@ const globalInjectorOnHtml = (content, globals, urlInfo) => {
   const clientCode = generateClientCodeForGlobals(globals, {
     isWebWorker: false,
   });
-  injectHtmlNodeAsEarlyAsPossible(
-    htmlAst,
-    createHtmlNode({
-      tagName: "script",
-      textContent: clientCode,
-    }),
-    "jsenv:inject_globals",
-  );
+  injectJsenvScript(htmlAst, {
+    content: clientCode,
+    pluginName: "jsenv:inject_globals",
+  });
   return stringifyHtmlAst(htmlAst);
 };
 

package/src/plugins/plugin_controller.js

@@ -1,10 +1,4 @@
 import { performance } from "node:perf_hooks";
-import {
-  parseHtml,
-  stringifyHtmlAst,
-  injectHtmlNodeAsEarlyAsPossible,
-  createHtmlNode,
-} from "@jsenv/ast";
 
 const HOOK_NAMES = [
   "init",
@@ -81,7 +75,8 @@ export const createPluginController = (
         key === "name" ||
         key === "appliesDuring" ||
         key === "init" ||
-        key === "serverEvents"
+        key === "serverEvents" ||
+        key === "mustStayFirst"
       ) {
         continue;
       }
@@ -100,7 +95,15 @@ export const createPluginController = (
           value: hookValue,
         };
         if (position === "start") {
-          group.unshift(hook);
+          let i = 0;
+          while (i < group.length) {
+            const before = group[i];
+            if (!before.plugin.mustStayFirst) {
+              break;
+            }
+            i++;
+          }
+          group.splice(i, 0, hook);
         } else {
           group.push(hook);
         }
@@ -225,11 +228,11 @@ export const createPluginController = (
       }
     }
   };
-  const callAsyncHooks = async (hookName, info, callback) => {
+  const callAsyncHooks = async (hookName, info, callback, options) => {
     const hooks = hookGroups[hookName];
     if (hooks) {
       for (const hook of hooks) {
-        const returnValue = await callAsyncHook(hook, info);
+        const returnValue = await callAsyncHook(hook, info, options);
         if (returnValue && callback) {
           await callback(returnValue, hook.plugin);
         }
@@ -249,7 +252,7 @@ export const createPluginController = (
     }
     return null;
   };
-  const callAsyncHooksUntil = (hookName, info) => {
+  const callAsyncHooksUntil = async (hookName, info, options) => {
     const hooks = hookGroups[hookName];
     if (!hooks) {
       return null;
@@ -257,22 +260,23 @@ export const createPluginController = (
     if (hooks.length === 0) {
       return null;
     }
-    return new Promise((resolve, reject) => {
-      const visit = (index) => {
-        if (index >= hooks.length) {
-          return resolve();
-        }
-        const hook = hooks[index];
-        const returnValue = callAsyncHook(hook, info);
-        return Promise.resolve(returnValue).then((output) => {
-          if (output) {
-            return resolve(output);
-          }
-          return visit(index + 1);
-        }, reject);
-      };
-      visit(0);
-    });
+    let result;
+    let index = 0;
+    const visit = async () => {
+      if (index >= hooks.length) {
+        return;
+      }
+      const hook = hooks[index];
+      const returnValue = await callAsyncHook(hook, info, options);
+      if (returnValue) {
+        result = returnValue;
+        return;
+      }
+      index++;
+      await visit();
+    };
+    await visit(0);
+    return result;
   };
 
   return {
@@ -320,11 +324,7 @@ const assertAndNormalizeReturnValue = (hook, returnValue, info) => {
     if (!returnValueAssertion.appliesTo.includes(hook.name)) {
       continue;
     }
-    const assertionResult = returnValueAssertion.assertion(
-      returnValue,
-      info,
-      hook,
-    );
+    const assertionResult = returnValueAssertion.assertion(returnValue, info);
     if (assertionResult !== undefined) {
       // normalization
       returnValue = assertionResult;
@@ -358,7 +358,7 @@ const returnValueAssertions = [
       "finalizeUrlContent",
       "optimizeUrlContent",
     ],
-    assertion: (valueReturned, urlInfo, hook) => {
+    assertion: (valueReturned, urlInfo) => {
       if (typeof valueReturned === "string" || Buffer.isBuffer(valueReturned)) {
         return { content: valueReturned };
       }
@@ -367,12 +367,6 @@ 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}`,
@@ -386,60 +380,3 @@ const returnValueAssertions = [
     },
   },
 ];
-
-const applyScriptInjections = (htmlUrlInfo, scriptInjections, hook) => {
-  const htmlAst = parseHtml({
-    html: htmlUrlInfo.content,
-    url: htmlUrlInfo.url,
-  });
-
-  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/reference_analysis/html/jsenv_plugin_html_reference_analysis.js

@@ -1,6 +1,3 @@
-import { readFileSync } from "node:fs";
-import { urlToRelativeUrl } from "@jsenv/urls";
-import { generateContentFrame } from "@jsenv/humanize";
 import {
   parseHtml,
   visitHtmlNodes,
@@ -23,11 +20,6 @@ import {
   normalizeImportMap,
 } from "@jsenv/importmap";
 
-const htmlSyntaxErrorFileUrl = new URL(
-  "./html_syntax_error.html",
-  import.meta.url,
-);
-
 export const jsenvPluginHtmlReferenceAnalysis = ({
   inlineContent,
   inlineConvertedScript,
@@ -135,41 +127,10 @@ export const jsenvPluginHtmlReferenceAnalysis = ({
       },
       html: async (urlInfo) => {
         let importmapFound = false;
-
-        let htmlAst;
-        try {
-          htmlAst = parseHtml({
-            html: urlInfo.content,
-            url: urlInfo.url,
-          });
-        } catch (e) {
-          if (e.code === "PARSE_ERROR") {
-            const line = e.line;
-            const column = e.column;
-            const htmlErrorContentFrame = generateContentFrame({
-              content: urlInfo.content,
-              line,
-              column,
-            });
-            urlInfo.kitchen.context.logger
-              .error(`Error while handling ${urlInfo.context.request ? urlInfo.context.request.url : urlInfo.url}:
-${e.reasonCode}
-${urlInfo.url}:${line}:${column}
-${htmlErrorContentFrame}`);
-            const html = generateHtmlForSyntaxError(e, {
-              htmlUrl: urlInfo.url,
-              rootDirectoryUrl: urlInfo.context.rootDirectoryUrl,
-              htmlErrorContentFrame,
-            });
-            htmlAst = parseHtml({
-              html,
-              url: htmlSyntaxErrorFileUrl,
-            });
-          } else {
-            throw e;
-          }
-        }
-
+        const htmlAst = parseHtml({
+          html: urlInfo.content,
+          url: urlInfo.url,
+        });
         const importmapLoaded = startLoadingImportmap(urlInfo);
 
         try {
@@ -621,47 +582,6 @@ const visitNonIgnoredHtmlNode = (htmlAst, visitors) => {
   visitHtmlNodes(htmlAst, visitorsInstrumented);
 };
 
-const generateHtmlForSyntaxError = (
-  htmlSyntaxError,
-  { htmlUrl, rootDirectoryUrl, htmlErrorContentFrame },
-) => {
-  const htmlForSyntaxError = String(readFileSync(htmlSyntaxErrorFileUrl));
-  const htmlRelativeUrl = urlToRelativeUrl(htmlUrl, rootDirectoryUrl);
-  const { line, column } = htmlSyntaxError;
-  const urlWithLineAndColumn = `${htmlUrl}:${line}:${column}`;
-  const replacers = {
-    fileRelativeUrl: htmlRelativeUrl,
-    reasonCode: htmlSyntaxError.reasonCode,
-    errorLinkHref: `javascript:window.fetch('/__open_in_editor__/${encodeURIComponent(
-      urlWithLineAndColumn,
-    )}')`,
-    errorLinkText: `${htmlRelativeUrl}:${line}:${column}`,
-    syntaxError: escapeHtml(htmlErrorContentFrame),
-  };
-  const html = replacePlaceholders(htmlForSyntaxError, replacers);
-  return html;
-};
-const escapeHtml = (string) => {
-  return string
-    .replace(/&/g, "&")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#039;");
-};
-const replacePlaceholders = (html, replacers) => {
-  return html.replace(/\$\{(\w+)\}/g, (match, name) => {
-    const replacer = replacers[name];
-    if (replacer === undefined) {
-      return match;
-    }
-    if (typeof replacer === "function") {
-      return replacer();
-    }
-    return replacer;
-  });
-};
-
 const crossOriginCompatibleTagNames = ["script", "link", "img", "source"];
 const integrityCompatibleTagNames = ["script", "link", "img", "source"];
 const readFetchMetas = (node) => {