@jsenv/core 37.1.4 → 38.0.0

package/src/kitchen/url_graph/url_graph.js

@@ -56,7 +56,10 @@ export const createUrlGraph = ({
       addUrlInfo(referencedUrlInfo);
       urlInfoCreatedEventEmitter.emit(referencedUrlInfo);
     }
-    if (referencedUrlInfo.searchParams.size > 0 && !kitchen.context.shape) {
+    if (
+      referencedUrlInfo.searchParams.size > 0 &&
+      kitchen.context.buildStep !== "shape"
+    ) {
       // A resource is represented by a url.
       // Variations of a resource are represented by url search params
       // Each representation of the resource is given a dedicated url info
@@ -187,6 +190,8 @@ const createUrlInfo = (url, context) => {
     referenceToOthersSet: new Set(),
     referenceFromOthersSet: new Set(),
     firstReference: null, // first reference from an other url to this one
+    lastReference: null,
+    remapReference: null, // used solely during build for rollup
     implicitUrlSet: new Set(),
     searchParamVariantSet: new Set(),
 
@@ -197,7 +202,6 @@ const createUrlInfo = (url, context) => {
     contentType: "", // "text/html", "text/css", "text/javascript", "application/json", ...
     url: null,
     originalUrl: undefined,
-    filename: "",
     isEntryPoint: false,
     originalContent: undefined,
     originalContentAst: undefined,
@@ -211,6 +215,8 @@ const createUrlInfo = (url, context) => {
 
     generatedUrl: null,
     sourcemapGeneratedUrl: null,
+    filenameHint: "",
+    dirnameHint: "",
     injected: false,
 
     isInline: false,
@@ -238,16 +244,20 @@ const createUrlInfo = (url, context) => {
       if (referenceFromOther.urlInfo !== urlInfo) {
         continue;
       }
-      if (referenceFromOther.isWeak) {
+      if (referenceFromOther.ownerUrlInfo.isRoot) {
+        return true;
+      }
+      const ref = referenceFromOther.original || referenceFromOther;
+      if (ref.isWeak) {
         // weak reference don't count as using the url
         continue;
       }
-      if (referenceFromOther.gotInlined()) {
+      if (ref.gotInlined()) {
         // the url info was inlined, an other reference is required
         // to consider the non-inlined urlInfo as used
         continue;
       }
-      return referenceFromOther.ownerUrlInfo.isUsed();
+      return ref.ownerUrlInfo.isUsed();
     }
     // nothing uses this url anymore
     // - versioning update inline content
@@ -328,7 +338,7 @@ const createUrlInfo = (url, context) => {
       data: { ...reference.data },
       specifier: newSpecifier,
       isWeak: true,
-      isInline: false,
+      isInline: reference.isInline,
       original: reference.original || reference,
       prev: reference,
       // urlInfo: null,

package/src/kitchen/url_graph/url_info_transformations.js

@@ -15,19 +15,29 @@ import {
 export const createUrlInfoTransformer = ({
   logger,
   sourcemaps,
+  sourcemapsComment,
+  sourcemapsSources,
   sourcemapsSourcesProtocol,
   sourcemapsSourcesContent,
-  sourcemapsSourcesRelative,
   outDirectoryUrl,
   supervisor,
 }) => {
-  if (sourcemapsSourcesProtocol === undefined) {
-    sourcemapsSourcesProtocol = "file:///";
-  }
   if (sourcemapsSourcesContent === undefined) {
     sourcemapsSourcesContent = true;
   }
 
+  const formatSourcemapSource =
+    typeof sourcemapsSources === "function"
+      ? (source, urlInfo) => {
+          return sourcemapsSources(source, urlInfo);
+        }
+      : sourcemapsSources === "relative"
+      ? (source, urlInfo) => {
+          const sourceRelative = urlToRelativeUrl(source, urlInfo.url);
+          return sourceRelative || ".";
+        }
+      : null;
+
   const normalizeSourcemap = (urlInfo, sourcemap) => {
     let { sources } = sourcemap;
     if (sources) {
@@ -76,6 +86,21 @@ export const createUrlInfoTransformer = ({
     urlInfo.sourcemapIsWrong = null;
   };
 
+  const setContentProperties = (
+    urlInfo,
+    { content, contentAst, contentEtag, contentLength },
+  ) => {
+    if (content === urlInfo.content) {
+      return false;
+    }
+    urlInfo.contentAst = contentAst;
+    urlInfo.contentEtag = contentEtag;
+    urlInfo.contentLength = contentLength;
+    urlInfo.content = content;
+    defineGettersOnPropertiesDerivedFromContent(urlInfo);
+    return true;
+  };
+
   const setContent = async (
     urlInfo,
     content,
@@ -96,14 +121,22 @@ export const createUrlInfoTransformer = ({
     }
     defineGettersOnPropertiesDerivedFromOriginalContent(urlInfo);
 
-    urlInfo.contentAst = contentAst;
-    urlInfo.contentEtag = contentEtag;
-    urlInfo.contentLength = contentLength;
-    urlInfo.content = content;
-    defineGettersOnPropertiesDerivedFromContent(urlInfo);
-
+    let may = mayHaveSourcemap(urlInfo);
+    let shouldHandle = shouldHandleSourcemap(urlInfo);
+    if (may && !shouldHandle) {
+      content = SOURCEMAP.removeComment({
+        contentType: urlInfo.contentType,
+        content,
+      });
+    }
+    setContentProperties(urlInfo, {
+      content,
+      contentAst,
+      contentEtag,
+      contentLength,
+    });
     urlInfo.sourcemap = sourcemap;
-    if (!shouldHandleSourcemap(urlInfo)) {
+    if (!may || !shouldHandle) {
       return;
     }
     // sourcemap is a special kind of reference:
@@ -176,18 +209,22 @@ export const createUrlInfoTransformer = ({
     if (contentType) {
       urlInfo.contentType = contentType;
     }
-    const contentModified = content && content !== urlInfo.content;
-    if (contentModified) {
-      urlInfo.contentAst = contentAst;
-      urlInfo.contentEtag = contentEtag;
-      urlInfo.contentLength = contentLength;
-      urlInfo.content = content;
-      defineGettersOnPropertiesDerivedFromContent(urlInfo);
-    }
-    if (sourcemap && shouldHandleSourcemap(urlInfo)) {
+    const contentModified = setContentProperties(urlInfo, {
+      content,
+      contentAst,
+      contentEtag,
+      contentLength,
+    });
+
+    if (
+      sourcemap &&
+      mayHaveSourcemap(urlInfo) &&
+      shouldHandleSourcemap(urlInfo)
+    ) {
       const sourcemapNormalized = normalizeSourcemap(urlInfo, sourcemap);
+      let currentSourcemap = urlInfo.sourcemap;
       const finalSourcemap = composeTwoSourcemaps(
-        urlInfo.sourcemap,
+        currentSourcemap,
         sourcemapNormalized,
       );
       const finalSourcemapNormalized = normalizeSourcemap(
@@ -259,7 +296,10 @@ export const createUrlInfoTransformer = ({
     }
   };
 
-  const applySourcemapOnContent = (urlInfo) => {
+  const applySourcemapOnContent = (
+    urlInfo,
+    formatSource = formatSourcemapSource,
+  ) => {
     if (!urlInfo.sourcemap || !shouldHandleSourcemap(urlInfo)) {
       return;
     }
@@ -291,40 +331,54 @@ export const createUrlInfoTransformer = ({
       });
     }
     const sourcemapUrlInfo = sourcemapReference.urlInfo;
-
-    const sourcemap = urlInfo.sourcemap;
-    if (sourcemapsSourcesRelative) {
-      sourcemap.sources = sourcemap.sources.map((source) => {
-        const sourceRelative = urlToRelativeUrl(source, urlInfo.url);
-        return sourceRelative || ".";
-      });
-    }
-    if (sourcemapsSourcesProtocol !== "file:///") {
-      sourcemap.sources = sourcemap.sources.map((source) => {
-        if (source.startsWith("file:///")) {
-          return `${sourcemapsSourcesProtocol}${source.slice(
-            "file:///".length,
-          )}`;
+    // It's possible urlInfo content to be modified after being finalized
+    // In that case we'll recompose sourcemaps (and re-append it to file content)
+    // Recomposition is done on urlInfo.sourcemap and must be done with absolute urls inside .sources
+    // (so we can detect if sources are identical)
+    // For this reason we must not mutate urlInfo.sourcemap.sources
+    const sourcemapGenerated = {
+      ...urlInfo.sourcemap,
+      sources: urlInfo.sourcemap.sources.map((source) => {
+        const sourceFormatted = formatSource
+          ? formatSource(source, urlInfo)
+          : source;
+        if (sourcemapsSourcesProtocol) {
+          if (sourceFormatted.startsWith("file:///")) {
+            return `${sourcemapsSourcesProtocol}${sourceFormatted.slice(
+              "file:///".length,
+            )}`;
+          }
         }
-        return source;
-      });
-    }
+        return sourceFormatted;
+      }),
+    };
+    sourcemapUrlInfo.type = "sourcemap";
     sourcemapUrlInfo.contentType = "application/json";
-    sourcemapUrlInfo.content = JSON.stringify(sourcemap, null, "  ");
+    setContentProperties(sourcemapUrlInfo, {
+      content: JSON.stringify(sourcemapGenerated, null, "  "),
+    });
 
     if (!urlInfo.sourcemapIsWrong) {
       if (sourcemaps === "inline") {
         sourcemapReference.generatedSpecifier =
-          generateSourcemapDataUrl(sourcemap);
+          generateSourcemapDataUrl(sourcemapGenerated);
       }
-      if (sourcemaps === "file" || sourcemaps === "inline") {
-        urlInfo.content = SOURCEMAP.writeComment({
-          contentType: urlInfo.contentType,
-          content: urlInfo.content,
-          specifier:
-            sourcemaps === "file" && sourcemapsSourcesRelative
-              ? urlToRelativeUrl(sourcemapReference.url, urlInfo.url)
-              : sourcemapReference.generatedSpecifier,
+      if (shouldUpdateSourcemapComment(urlInfo, sourcemaps)) {
+        let specifier;
+        if (sourcemaps === "file" && sourcemapsComment === "relative") {
+          specifier = urlToRelativeUrl(
+            sourcemapReference.generatedUrl,
+            urlInfo.generatedUrl,
+          );
+        } else {
+          specifier = sourcemapReference.generatedSpecifier;
+        }
+        setContentProperties(urlInfo, {
+          content: SOURCEMAP.writeComment({
+            contentType: urlInfo.contentType,
+            content: urlInfo.content,
+            specifier,
+          }),
         });
       }
     }
@@ -342,10 +396,31 @@ export const createUrlInfoTransformer = ({
     resetContent,
     setContent,
     applyTransformations,
+    applySourcemapOnContent,
     endTransformations,
   };
 };
 
+const shouldUpdateSourcemapComment = (urlInfo, sourcemaps) => {
+  if (urlInfo.context.buildStep === "shape") {
+    return false;
+  }
+  if (sourcemaps === "file" || sourcemaps === "inline") {
+    return true;
+  }
+  return false;
+};
+
+const mayHaveSourcemap = (urlInfo) => {
+  if (urlInfo.url.startsWith("data:")) {
+    return false;
+  }
+  if (!SOURCEMAP.enabledOnContentType(urlInfo.contentType)) {
+    return false;
+  }
+  return true;
+};
+
 const shouldHandleSourcemap = (urlInfo) => {
   const { sourcemaps } = urlInfo.context;
   if (
@@ -355,11 +430,5 @@ const shouldHandleSourcemap = (urlInfo) => {
   ) {
     return false;
   }
-  if (urlInfo.url.startsWith("data:")) {
-    return false;
-  }
-  if (!SOURCEMAP.enabledOnContentType(urlInfo.contentType)) {
-    return false;
-  }
   return true;
 };

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

@@ -6,6 +6,7 @@ import {
   getDOMNodesUsingUrl,
 } from "./reload.js";
 
+let debug = false;
 const reloader = {
   urlHotMetas,
   status: {
@@ -34,7 +35,9 @@ const reloader = {
     value: [],
     onchange: () => {},
     add: (reloadMessage) => {
-      // console.debug("received reload message", reloadMessage);
+      if (debug) {
+        console.debug("received reload message", reloadMessage);
+      }
       reloader.changes.value.push(reloadMessage);
       reloader.changes.onchange();
       if (reloader.autoreload.enabled) {
@@ -127,11 +130,12 @@ const dequeue = async () => {
   }
 };
 
-const applyHotReload = async ({ cause, hot, hotInstructions }) => {
+const applyHotReload = async ({ cause, hotInstructions }) => {
   await hotInstructions.reduce(
     async (previous, { type, boundary, acceptedBy }) => {
       await previous;
 
+      const hot = Date.now();
       const urlToFetch = new URL(boundary, `${window.location.origin}/`).href;
       const urlHotMeta = urlHotMetas[urlToFetch];
       // there is no url hot meta when:

package/src/plugins/autoreload/jsenv_plugin_autoreload_server.js

@@ -39,7 +39,12 @@ export const jsenvPluginAutoreloadServer = ({
             const instructions = [];
             for (const referenceFromOther of urlInfo.referenceFromOthersSet) {
               if (referenceFromOther.isImplicit && referenceFromOther.isWeak) {
-                continue;
+                if (!referenceFromOther.original) {
+                  continue;
+                }
+                if (referenceFromOther.original.isWeak) {
+                  continue;
+                }
               }
               const urlInfoReferencingThisOne = referenceFromOther.ownerUrlInfo;
               if (urlInfoReferencingThisOne.data.hotDecline) {
@@ -148,7 +153,6 @@ export const jsenvPluginAutoreloadServer = ({
                   cause: `${relativeUrl} ${event}`,
                   type: "hot",
                   typeReason: hotUpdate.reason,
-                  hot: changedUrlInfo.modifiedTimestamp,
                   hotInstructions: instructions,
                 };
               }
@@ -207,7 +211,6 @@ export const jsenvPluginAutoreloadServer = ({
                   cause,
                   type: "hot",
                   typeReason: ownerHotUpdate.reason,
-                  hot: prunedUrlInfo.prunedTimestamp,
                   hotInstructions: [pruneInstruction],
                 };
               }
@@ -220,20 +223,21 @@ export const jsenvPluginAutoreloadServer = ({
 
         clientFileChangeEventEmitter.on(({ url, event }) => {
           const changedUrlInfo = serverEventInfo.kitchen.graph.getUrlInfo(url);
-          if (changedUrlInfo) {
-            delayAction({
-              type: "change",
-              changedUrlInfo,
-              event,
-            });
-            for (const searchParamVariant of changedUrlInfo.searchParamVariantSet) {
-              delayAction({
-                type: "change",
-                changedUrlInfo: searchParamVariant,
-                event,
-              });
-            }
+          if (!changedUrlInfo) {
+            return;
           }
+          delayAction({
+            type: "change",
+            changedUrlInfo,
+            event,
+          });
+          // for (const searchParamVariant of changedUrlInfo.searchParamVariantSet) {
+          //   delayAction({
+          //     type: "change",
+          //     changedUrlInfo: searchParamVariant,
+          //     event,
+          //   });
+          // }
         });
         clientFileDereferencedEventEmitter.on(
           (prunedUrlInfo, lastReferenceFromOther) => {

package/src/plugins/autoreload/jsenv_plugin_hot_search_param.js

@@ -53,7 +53,7 @@ export const jsenvPluginHotSearchParam = () => {
       // that could prevent re-execution of js code
       // In order to achieve this, this plugin inject ?hot=timestamp
       // - The browser will likely not have it in cache
-      //   and refetch lastest version from server + re-execute it
+      //   and refetch latest version from server + re-execute it
       // - If the browser have it in cache, he will not get it from server
       // We use the latest timestamp to ensure it's fresh
       // The dereferencedTimestamp is needed because when a js module is re-referenced

package/src/plugins/cache_control/jsenv_plugin_cache_control.js

@@ -8,8 +8,8 @@ export const jsenvPluginCacheControl = ({
     augmentResponse: ({ reference }) => {
       if (
         versionedUrls &&
-        reference.searchParams.has("v") &&
-        !reference.searchParams.has("hot")
+        reference.generatedSearchParams.has("v") &&
+        !reference.generatedSearchParams.has("hot")
       ) {
         return {
           headers: {

package/src/plugins/clean_html/jsenv_plugin_clean_html.js

@@ -0,0 +1,16 @@
+import { parseHtmlString, stringifyHtmlAst } from "@jsenv/ast";
+
+export const jsenvPluginCleanHTML = () => {
+  return {
+    name: "jsenv:cleanup_html_during_dev",
+    appliesDuring: "dev",
+    finalizeUrlContent: {
+      html: (urlInfo) => {
+        const htmlAst = parseHtmlString(urlInfo.content);
+        return stringifyHtmlAst(htmlAst, {
+          cleanupPositionAttributes: true,
+        });
+      },
+    },
+  };
+};

package/src/plugins/importmap/jsenv_plugin_importmap.js

@@ -22,7 +22,6 @@ import {
   composeTwoImportMaps,
   normalizeImportMap,
 } from "@jsenv/importmap";
-import { generateInlineContentUrl } from "@jsenv/urls";
 import {
   parseHtmlString,
   stringifyHtmlAst,
@@ -33,6 +32,7 @@ import {
   getHtmlNodeText,
   setHtmlNodeText,
   removeHtmlNode,
+  getUrlForContentInsideHtml,
 } from "@jsenv/ast";
 
 export const jsenvPluginImportmap = () => {
@@ -107,17 +107,11 @@ export const jsenvPluginImportmap = () => {
           return null;
         }
         const handleInlineImportmap = async (importmap, htmlNodeText) => {
-          const { line, column, lineEnd, columnEnd, isOriginal } =
-            getHtmlNodePosition(importmap, {
-              preferOriginal: true,
-            });
-          const inlineImportmapUrl = generateInlineContentUrl({
-            url: htmlUrlInfo.url,
-            extension: ".importmap",
-            line,
-            column,
-            lineEnd,
-            columnEnd,
+          const { line, column, isOriginal } = getHtmlNodePosition(importmap, {
+            preferOriginal: true,
+          });
+          const inlineImportmapUrl = getUrlForContentInsideHtml(importmap, {
+            htmlUrl: htmlUrlInfo.url,
           });
           const inlineImportmapReference = htmlUrlInfo.dependencies.foundInline(
             {
@@ -156,17 +150,11 @@ export const jsenvPluginImportmap = () => {
               break;
             }
           }
-          const { line, column, lineEnd, columnEnd, isOriginal } =
-            getHtmlNodePosition(importmap, {
-              preferOriginal: true,
-            });
-          const importmapInlineUrl = generateInlineContentUrl({
-            url: htmlUrlInfo.url,
-            extension: ".importmap",
-            line,
-            column,
-            lineEnd,
-            columnEnd,
+          const { line, column, isOriginal } = getHtmlNodePosition(importmap, {
+            preferOriginal: true,
+          });
+          const importmapInlineUrl = getUrlForContentInsideHtml(importmap, {
+            htmlUrl: htmlUrlInfo.url,
           });
           const importmapReferenceInlined = importmapReference.inline({
             line: line - 1,

package/src/plugins/inlining/jsenv_plugin_inlining_as_data_url.js

@@ -17,6 +17,21 @@ export const jsenvPluginInliningAsDataUrl = () => {
       if (!reference.searchParams.has("inline")) {
         return null;
       }
+      if (reference.isInline) {
+        // happens when inlining file content into js
+        // (for instance import "style.css" with { type: "css" } )
+        // In that case the code generated look as follow
+        // new InlineContent(/* content of style.css */, { type: "text/css", inlinedFromUrl: "style.css" }).
+        // and during code analysis an inline reference is generated
+        // with the url "style.css?inline"
+        return null;
+      }
+      // when search param is injected, it will be removed later
+      // by "getWithoutSearchParam". We don't want to redirect again
+      // (would create infinite recursion)
+      if (reference.prev && reference.prev.searchParams.has("inline")) {
+        return null;
+      }
       if (reference.type === "sourcemap_comment") {
         return null;
       }
@@ -39,7 +54,7 @@ export const jsenvPluginInliningAsDataUrl = () => {
       }
       const specifierWithBase64Param = injectQueryParamsIntoSpecifier(
         reference.specifier,
-        { as_base_64: "", inline: undefined },
+        { as_base_64: "" },
       );
       const referenceInlined = reference.inline({
         line: reference.line,

package/src/plugins/inlining/jsenv_plugin_inlining_into_html.js

@@ -8,8 +8,8 @@ import {
   setHtmlNodeAttributes,
   setHtmlNodeText,
   getHtmlNodePosition,
+  getUrlForContentInsideHtml,
 } from "@jsenv/ast";
-import { generateInlineContentUrl, urlToExtension } from "@jsenv/urls";
 
 export const jsenvPluginInliningIntoHtml = () => {
   return {
@@ -21,7 +21,7 @@ export const jsenvPluginInliningIntoHtml = () => {
         const mutations = [];
         const actions = [];
 
-        const onStyleSheet = (linkNode, { href }) => {
+        const onLinkRelStyleSheet = (linkNode, { href }) => {
           let linkReference = null;
           for (const referenceToOther of urlInfo.referenceToOthersSet) {
             if (
@@ -36,17 +36,12 @@ export const jsenvPluginInliningIntoHtml = () => {
           if (!linkReference.searchParams.has("inline")) {
             return;
           }
-          const { line, column, lineEnd, columnEnd, isOriginal } =
-            getHtmlNodePosition(linkNode, {
-              preferOriginal: true,
-            });
-          const linkInlineUrl = generateInlineContentUrl({
+          const { line, column, isOriginal } = getHtmlNodePosition(linkNode, {
+            preferOriginal: true,
+          });
+          const linkInlineUrl = getUrlForContentInsideHtml(linkNode, {
+            htmlUrl: urlInfo.url,
             url: linkReference.url,
-            extension: urlToExtension(linkReference.url),
-            line,
-            column,
-            lineEnd,
-            columnEnd,
           });
           const linkReferenceInlined = linkReference.inline({
             line: line - 1,
@@ -62,7 +57,7 @@ export const jsenvPluginInliningIntoHtml = () => {
             await linkUrlInfoInlined.cook();
             mutations.push(() => {
               setHtmlNodeAttributes(linkNode, {
-                "inlined-from-href": href,
+                "inlined-from-href": linkReference.url,
                 "href": undefined,
                 "rel": undefined,
                 "type": undefined,
@@ -93,17 +88,12 @@ export const jsenvPluginInliningIntoHtml = () => {
           if (!scriptReference.searchParams.has("inline")) {
             return;
           }
-          const { line, column, lineEnd, columnEnd, isOriginal } =
-            getHtmlNodePosition(scriptNode, {
-              preferOriginal: true,
-            });
-          const scriptInlineUrl = generateInlineContentUrl({
+          const { line, column, isOriginal } = getHtmlNodePosition(scriptNode, {
+            preferOriginal: true,
+          });
+          const scriptInlineUrl = getUrlForContentInsideHtml(scriptNode, {
+            htmlUrl: urlInfo.url,
             url: scriptReference.url,
-            extension: urlToExtension(scriptReference.url),
-            line,
-            column,
-            lineEnd,
-            columnEnd,
           });
           const scriptReferenceInlined = scriptReference.inline({
             line: line - 1,
@@ -142,7 +132,7 @@ export const jsenvPluginInliningIntoHtml = () => {
             if (!href) {
               return;
             }
-            onStyleSheet(linkNode, { href });
+            onLinkRelStyleSheet(linkNode, { href });
           },
           script: (scriptNode) => {
             const { type } = analyzeScriptNode(scriptNode);