@jsenv/core 39.0.5 → 39.1.0

package/src/plugins/ribbon/jsenv_plugin_ribbon.js

@@ -1,9 +1,4 @@
-import {
-  parseHtml,
-  stringifyHtmlAst,
-  createHtmlNode,
-  injectHtmlNodeAsEarlyAsPossible,
-} from "@jsenv/ast";
+import { parseHtml, injectJsenvScript, stringifyHtmlAst } from "@jsenv/ast";
 import { URL_META } from "@jsenv/url-meta";
 import { asUrlWithoutSearch } from "@jsenv/urls";
 
@@ -47,27 +42,22 @@ export const jsenvPluginRibbon = ({
           url: urlInfo.url,
         });
         const ribbonClientFileReference = urlInfo.dependencies.inject({
-          type: "script",
+          type: "js_import",
           subtype: "js_module",
           expectedType: "js_module",
           specifier: ribbonClientFileUrl.href,
         });
-        const paramsJson = JSON.stringify(
-          { text: urlInfo.context.dev ? "DEV" : "BUILD" },
-          null,
-          "  ",
-        );
-        injectHtmlNodeAsEarlyAsPossible(
-          htmlAst,
-          createHtmlNode({
-            tagName: "script",
-            type: "module",
-            textContent: `import { injectRibbon } from "${ribbonClientFileReference.generatedSpecifier}";
-
-injectRibbon(${paramsJson});`,
-          }),
-          "jsenv:ribbon",
-        );
+        injectJsenvScript(htmlAst, {
+          type: "module",
+          src: ribbonClientFileReference.generatedSpecifier,
+          initCall: {
+            callee: "injectRibbon",
+            params: {
+              text: urlInfo.context.dev ? "DEV" : "BUILD",
+            },
+          },
+          pluginName: "jsenv:ribbon",
+        });
         return stringifyHtmlAst(htmlAst);
       },
     },

package/src/plugins/server_events/jsenv_plugin_server_events_client_injection.js

@@ -3,6 +3,8 @@
  * to provide "serverEvents" used by other plugins
  */
 
+import { parseHtml, injectJsenvScript, stringifyHtmlAst } from "@jsenv/ast";
+
 const serverEventsClientFileUrl = new URL(
   "./client/server_events_client.js",
   import.meta.url,
@@ -13,20 +15,22 @@ export const jsenvPluginServerEventsClientInjection = ({ logs = true }) => {
     name: "jsenv:server_events_client_injection",
     appliesDuring: "*",
     transformUrlContent: {
-      html: () => {
-        return {
-          scriptInjections: [
-            {
-              src: serverEventsClientFileUrl,
-              setup: {
-                name: "window.__server_events__.setup",
-                param: {
-                  logs,
-                },
-              },
+      html: (urlInfo) => {
+        const htmlAst = parseHtml({
+          html: urlInfo.content,
+          url: urlInfo.url,
+        });
+        injectJsenvScript(htmlAst, {
+          src: serverEventsClientFileUrl,
+          initCall: {
+            callee: "window.__server_events__.setup",
+            params: {
+              logs,
             },
-          ],
-        };
+          },
+          pluginName: "jsenv:server_events_client_injection",
+        });
+        return stringifyHtmlAst(htmlAst);
       },
     },
   };

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

@@ -1,136 +0,0 @@
-import {
-  parseSrcSet,
-  stringifySrcSet,
-} from "@jsenv/ast/src/html/html_src_set.js";
-
-import { injectQuery, compareTwoUrlPaths } from "./url_helpers.js";
-
-export 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
-export 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;
-};
-
-export const reloadJsImport = async (url, hot) => {
-  const urlWithHotSearchParam = injectQuery(url, { hot });
-  const namespace = await import(urlWithHotSearchParam);
-  return namespace;
-};
-
-export const reloadAllCss = () => {
-  const links = Array.from(document.getElementsByTagName("link"));
-  links.forEach((link) => {
-    if (link.rel === "stylesheet") {
-      link.href = injectQuery(link.href, { hot: Date.now() });
-    }
-  });
-};

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

@@ -1,23 +0,0 @@
-export 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;
-};
-
-export 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);
-};