@jsenv/core 27.0.0-alpha.12 → 27.0.0-alpha.13

package/src/build/build_urls_generator.js

@@ -4,23 +4,21 @@ import { memoizeByUrl } from "@jsenv/utils/memoize/memoize_by_url.js"
 
 export const createBuilUrlsGenerator = ({ buildDirectoryUrl }) => {
   const cache = {}
-  const generate = memoizeByUrl((url, urlInfo, parentUrlInfo) => {
-    const directoryPath = determineDirectoryPath(urlInfo, parentUrlInfo)
+  const generate = memoizeByUrl((url, { urlInfo, parentUrlInfo }) => {
+    const directoryPath = determineDirectoryPath({
+      urlInfo,
+      parentUrlInfo,
+    })
     let names = cache[directoryPath]
     if (!names) {
       names = []
       cache[directoryPath] = names
     }
-
-    let name = urlToFilename(url)
-    const { searchParams } = new URL(url)
-    if (
-      searchParams.has("css_module") ||
-      searchParams.has("json_module") ||
-      searchParams.has("text_module")
-    ) {
-      name = `${name}.js`
-    }
+    const urlObject = new URL(url)
+    let { search, hash } = urlObject
+    let name = urlInfo
+      ? urlInfo.filename || urlToFilename(url)
+      : urlToFilename(url)
     const [basename, extension] = splitFileExtension(name)
     let nameCandidate = name
     let integer = 1
@@ -33,7 +31,7 @@ export const createBuilUrlsGenerator = ({ buildDirectoryUrl }) => {
       integer++
       nameCandidate = `${basename}${integer}${extension}`
     }
-    return `${buildDirectoryUrl}${directoryPath}${nameCandidate}`
+    return `${buildDirectoryUrl}${directoryPath}${nameCandidate}${search}${hash}`
   })
 
   return {
@@ -49,12 +47,17 @@ const splitFileExtension = (filename) => {
   return [filename.slice(0, dotLastIndex), filename.slice(dotLastIndex)]
 }
 
-const determineDirectoryPath = (urlInfo, parentUrlInfo) => {
+const determineDirectoryPath = ({ urlInfo, parentUrlInfo }) => {
   if (urlInfo.isInline) {
-    const parentDirectoryPath = determineDirectoryPath(parentUrlInfo)
+    const parentDirectoryPath = determineDirectoryPath({
+      urlInfo: parentUrlInfo,
+    })
     return parentDirectoryPath
   }
-  if (urlInfo.data.isEntryPoint) {
+  if (urlInfo.data.isEntryPoint || urlInfo.data.isWebWorkerEntryPoint) {
+    return ""
+  }
+  if (urlInfo.type === "importmap") {
     return ""
   }
   if (urlInfo.type === "html") {
@@ -64,10 +67,10 @@ const determineDirectoryPath = (urlInfo, parentUrlInfo) => {
     return "css/"
   }
   if (urlInfo.type === "js_module" || urlInfo.type === "js_classic") {
-    if (urlInfo.subtype === "service_worker") {
-      return ""
-    }
     return "js/"
   }
-  return "assets/"
+  if (urlInfo.type === "json") {
+    return "json/"
+  }
+  return "other/"
 }

package/src/build/graph_utils.js

@@ -0,0 +1,31 @@
+export const GRAPH = {
+  map: (graph, callback) => {
+    return Object.keys(graph.urlInfos).map((url) => {
+      return callback(graph.urlInfos[url])
+    })
+  },
+
+  forEach: (graph, callback) => {
+    Object.keys(graph.urlInfos).forEach((url) => {
+      callback(graph.urlInfos[url], url)
+    })
+  },
+
+  filter: (graph, callback) => {
+    const urlInfos = []
+    Object.keys(graph.urlInfos).forEach((url) => {
+      const urlInfo = graph.urlInfos[url]
+      if (callback(urlInfo)) {
+        urlInfos.push(urlInfo)
+      }
+    })
+    return urlInfos
+  },
+
+  find: (graph, callback) => {
+    const urlFound = Object.keys(graph.urlInfos).find((url) => {
+      return callback(graph.urlInfos[url])
+    })
+    return graph.urlInfos[urlFound]
+  },
+}

package/src/build/{inject_version_mappings.js → inject_global_version_mappings.js}

@@ -8,11 +8,27 @@ import {
 } from "@jsenv/utils/html_ast/html_ast.js"
 import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
 
-export const injectVersionMappings = async ({
-  urlInfo,
-  kitchen,
+import { GRAPH } from "./graph_utils.js"
+
+export const injectGlobalVersionMapping = async ({
+  finalGraphKitchen,
+  finalGraph,
   versionMappings,
 }) => {
+  await Promise.all(
+    GRAPH.map(finalGraph, async (urlInfo) => {
+      if (urlInfo.data.isEntryPoint || urlInfo.data.isWebWorkerEntryPoint) {
+        await injectVersionMappings({
+          urlInfo,
+          kitchen: finalGraphKitchen,
+          versionMappings,
+        })
+      }
+    }),
+  )
+}
+
+const injectVersionMappings = async ({ urlInfo, kitchen, versionMappings }) => {
   const injector = injectors[urlInfo.type]
   if (injector) {
     const { content, sourcemap } = injector(urlInfo, { versionMappings })
@@ -23,6 +39,12 @@ export const injectVersionMappings = async ({
   }
 }
 
+const jsInjector = (urlInfo, { versionMappings }) => {
+  const magicSource = createMagicSource(urlInfo.content)
+  magicSource.prepend(generateClientCodeForVersionMappings(versionMappings))
+  return magicSource.toContentAndSourcemap()
+}
+
 const injectors = {
   html: (urlInfo, { versionMappings }) => {
     // ideally we would inject an importmap but browser support is too low
@@ -40,24 +62,19 @@ const injectors = {
       }),
     )
     return {
-      content: stringifyHtmlAst(htmlAst, {
-        removeOriginalPositionAttributes: true,
-      }),
+      content: stringifyHtmlAst(htmlAst),
     }
   },
-  js_module: (urlInfo, { versionMappings }) => {
-    const magicSource = createMagicSource(urlInfo.content)
-    magicSource.prepend(generateClientCodeForVersionMappings(versionMappings))
-    return magicSource.toContentAndSourcemap()
-  },
+  js_classic: jsInjector,
+  js_module: jsInjector,
 }
 
 const generateClientCodeForVersionMappings = (versionMappings) => {
   return `
-var __versionMappings__ = ${JSON.stringify(versionMappings, null, "  ")}
-var __envGlobal__ = typeof self === 'undefined' ? global : self
+var __versionMappings__ = ${JSON.stringify(versionMappings, null, "  ")};
+var __envGlobal__ = typeof self === 'undefined' ? global : self;
 __envGlobal__.__v__ = function (specifier) {
   return __versionMappings__[specifier] || specifier
-}
+};
 `
 }

package/src/build/inject_service_worker_urls.js

@@ -1,21 +1,75 @@
 import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+import { createVersionGenerator } from "@jsenv/utils/versioning/version_generator.js"
+
+import { GRAPH } from "./graph_utils.js"
 
 export const injectServiceWorkerUrls = async ({
-  urlInfo,
-  kitchen,
-  serviceWorkerUrls,
+  finalGraph,
+  finalGraphKitchen,
+  lineBreakNormalization,
 }) => {
-  const magicSource = createMagicSource(urlInfo.content)
-  const urlsWithoutSelf = {
-    ...serviceWorkerUrls,
+  const serviceWorkerEntryUrlInfos = GRAPH.filter(
+    finalGraph,
+    (finalUrlInfo) => {
+      return (
+        finalUrlInfo.subtype === "service_worker" &&
+        finalUrlInfo.data.isWebWorkerEntryPoint
+      )
+    },
+  )
+  if (serviceWorkerEntryUrlInfos.length === 0) {
+    return
   }
-  delete urlsWithoutSelf[urlInfo.data.buildRelativeUrl]
-  magicSource.prepend(generateClientCode(urlsWithoutSelf))
-  const { content, sourcemap } = magicSource.toContentAndSourcemap()
-  await kitchen.urlInfoTransformer.applyFinalTransformations(urlInfo, {
-    content,
-    sourcemap,
+  const serviceWorkerUrls = {}
+  GRAPH.forEach(finalGraph, (urlInfo) => {
+    if (urlInfo.isInline || urlInfo.external) {
+      return
+    }
+    if (!urlInfo.url.startsWith("file:")) {
+      return
+    }
+    if (urlInfo.data.buildUrlIsVersioned) {
+      serviceWorkerUrls[urlInfo.data.buildUrlSpecifier] = {
+        versioned: true,
+      }
+      return
+    }
+    if (!urlInfo.data.version) {
+      // when url is not versioned we compute a "version" for that url anyway
+      // so that service worker source still changes and navigator
+      // detect there is a change
+      const versionGenerator = createVersionGenerator()
+      versionGenerator.augmentWithContent({
+        content: urlInfo.content,
+        contentType: urlInfo.contentType,
+        lineBreakNormalization,
+      })
+      const version = versionGenerator.generate()
+      urlInfo.data.version = version
+    }
+    serviceWorkerUrls[urlInfo.data.buildUrlSpecifier] = {
+      versioned: false,
+      version: urlInfo.data.version,
+    }
   })
+  await Promise.all(
+    serviceWorkerEntryUrlInfos.map(async (serviceWorkerEntryUrlInfo) => {
+      const magicSource = createMagicSource(serviceWorkerEntryUrlInfo.content)
+      const urlsWithoutSelf = {
+        ...serviceWorkerUrls,
+      }
+      delete urlsWithoutSelf[serviceWorkerEntryUrlInfo.data.buildUrlSpecifier]
+      magicSource.prepend(generateClientCode(urlsWithoutSelf))
+      const { content, sourcemap } = magicSource.toContentAndSourcemap()
+      await finalGraphKitchen.urlInfoTransformer.applyFinalTransformations(
+        serviceWorkerEntryUrlInfo,
+        {
+          content,
+          sourcemap,
+        },
+      )
+    }),
+  )
 }
 
 const generateClientCode = (serviceWorkerUrls) => {

package/src/build/resync_ressource_hints.js

@@ -0,0 +1,83 @@
+import {
+  parseHtmlString,
+  visitHtmlAst,
+  stringifyHtmlAst,
+  getHtmlNodeAttributeByName,
+  assignHtmlNodeAttributes,
+  removeHtmlNode,
+} from "@jsenv/utils/html_ast/html_ast.js"
+
+import { GRAPH } from "./graph_utils.js"
+
+// update ressource hint that where targeting a file that has changed during build
+// (happens for import assertions and file modified by "?as_js_classic")
+export const resyncRessourceHints = async ({
+  finalGraphKitchen,
+  finalGraph,
+  buildUrls,
+  buildUrlRedirections,
+}) => {
+  const ressourceHintActions = []
+  GRAPH.forEach(finalGraph, (urlInfo) => {
+    if (urlInfo.type !== "html") {
+      return
+    }
+    ressourceHintActions.push(async () => {
+      const htmlAst = parseHtmlString(urlInfo.content, {
+        storeOriginalPositions: false,
+      })
+      const visitLinkWithHref = (linkNode, hrefAttribute) => {
+        const href = hrefAttribute.value
+        if (!href || href.startsWith("data:")) {
+          return
+        }
+        const buildUrl = buildUrls[href]
+        const urlInfo = finalGraph.getUrlInfo(buildUrl)
+        if (!urlInfo) {
+          return
+        }
+        if (urlInfo.dependents.size === 0) {
+          removeHtmlNode(linkNode)
+          return
+        }
+        const buildUrlRedirected = buildUrlRedirections[buildUrl]
+        if (buildUrlRedirected) {
+          const urlInfoRedirected = finalGraph.getUrlInfo(buildUrlRedirected)
+          hrefAttribute.value = urlInfoRedirected.data.buildUrlSpecifier
+
+          if (
+            urlInfo.type === "js_module" &&
+            urlInfoRedirected.type === "js_classic"
+          ) {
+            const relAttribute = getHtmlNodeAttributeByName(linkNode, "rel")
+            if (relAttribute && relAttribute.value === "modulepreload") {
+              assignHtmlNodeAttributes(linkNode, {
+                rel: "preload",
+                as: "script",
+              })
+            }
+          }
+        }
+      }
+      visitHtmlAst(htmlAst, (node) => {
+        if (node.nodeName !== "link") {
+          return
+        }
+        const hrefAttribute = getHtmlNodeAttributeByName(node, "href")
+        if (!hrefAttribute) {
+          return
+        }
+        visitLinkWithHref(node, hrefAttribute)
+      })
+      await finalGraphKitchen.urlInfoTransformer.applyFinalTransformations(
+        urlInfo,
+        {
+          content: stringifyHtmlAst(htmlAst),
+        },
+      )
+    })
+  })
+  await Promise.all(
+    ressourceHintActions.map((ressourceHintAction) => ressourceHintAction()),
+  )
+}

package/src/dev/plugins/autoreload/babel_plugin_metadata_import_meta_hot.js

@@ -64,7 +64,7 @@ const collectImportMetaProperties = (programPath) => {
               )
             }
             return {
-              specifierPath: firstArgPath.get(index),
+              specifierPath: firstArgPath.get(String(index)),
             }
           })
           return

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

@@ -40,7 +40,9 @@ export const createImportMetaHot = (importMetaUrl) => {
         })
         return
       }
-      throw new Error(`invalid call to hot.accept()`)
+      throw new Error(
+        `invalid call to import.meta.hot.accept(), received ${firstArg}`,
+      )
     },
     dispose: (callback) => {
       addUrlMeta(url, {

package/src/dev/plugins/autoreload/html_hot_dependencies.js

@@ -53,7 +53,7 @@ export const collectHotDataFromHtmlAst = (htmlAst) => {
       })
       visitUrlSpecifierAttribute({
         node,
-        attributeName: "content-href",
+        attributeName: "generated-from-href",
         hotAccepted,
       })
     }
@@ -65,7 +65,7 @@ export const collectHotDataFromHtmlAst = (htmlAst) => {
       })
       visitUrlSpecifierAttribute({
         node,
-        attributeName: "content-src",
+        attributeName: "generated-from-src",
         hotAccepted,
       })
     }

package/src/dev/plugins/autoreload/jsenv_plugin_autoreload.js

@@ -1,7 +1,6 @@
 import { urlToRelativeUrl } from "@jsenv/filesystem"
 import { createCallbackList } from "@jsenv/abort"
 
-import { injectQueryParams } from "@jsenv/utils/urls/url_utils.js"
 import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
 import {
   parseHtmlString,
@@ -19,37 +18,31 @@ export const jsenvPluginAutoreload = ({
   rootDirectoryUrl,
   urlGraph,
   autoreloadPatterns,
+  cooldownBetweenFileEvents,
 }) => {
   return [
+    jsenvPluginHmr(),
     jsenvPluginHot(),
     jsenvPluginHotSSE({
       rootDirectoryUrl,
       urlGraph,
       autoreloadPatterns,
+      cooldownBetweenFileEvents,
     }),
   ]
 }
 
-const jsenvPluginHot = () => {
-  const eventSourceClientFileUrl = new URL(
-    "./client/event_source_client.js",
-    import.meta.url,
-  ).href
-  const importMetaHotClientFileUrl = new URL(
-    "./client/import_meta_hot.js",
-    import.meta.url,
-  ).href
-
+const jsenvPluginHmr = () => {
   return {
-    name: "jsenv:hot",
+    name: "jsenv:hmr",
     appliesDuring: { dev: true },
-    normalize: ({ url, data }) => {
-      const urlObject = new URL(url)
+    normalizeUrl: (reference) => {
+      const urlObject = new URL(reference.url)
       if (!urlObject.searchParams.has("hmr")) {
-        data.hmr = false
+        reference.data.hmr = false
         return null
       }
-      data.hmr = true
+      reference.data.hmr = true
       // "hmr" search param goal is to mark url as enabling hmr:
       // this goal is achieved when we reach this part of the code
       // We get rid of this params so that urlGraph and other parts of the code
@@ -58,36 +51,54 @@ const jsenvPluginHot = () => {
       urlObject.searchParams.delete("v")
       return urlObject.href
     },
-    transformReferencedUrl: ({ parentUrl, url, data }, { urlGraph }) => {
-      const parentUrlInfo = urlGraph.getUrlInfo(parentUrl)
+    transformUrlSearchParams: (reference, context) => {
+      const parentUrlInfo = context.urlGraph.getUrlInfo(reference.parentUrl)
       if (!parentUrlInfo || !parentUrlInfo.data.hmr) {
         return null
       }
-      if (!data.hmrTimestamp) {
+      const urlInfo = context.urlGraph.getUrlInfo(reference.url)
+      if (!urlInfo.data.hmrTimestamp) {
         return null
       }
-      return injectQueryParams(url, {
+      return {
         hmr: "",
-        v: data.hmrTimestamp,
-      })
+        v: urlInfo.data.hmrTimestamp,
+      }
     },
-    transform: {
-      html: ({ data, content }, { referenceUtils }) => {
-        const htmlAst = parseHtmlString(content)
+  }
+}
+
+const jsenvPluginHot = () => {
+  const eventSourceClientFileUrl = new URL(
+    "./client/event_source_client.js",
+    import.meta.url,
+  ).href
+  const importMetaHotClientFileUrl = new URL(
+    "./client/import_meta_hot.js",
+    import.meta.url,
+  ).href
+
+  return {
+    name: "jsenv:hot",
+    appliesDuring: { dev: true },
+    transformUrlContent: {
+      html: (htmlUrlInfo, context) => {
+        const htmlAst = parseHtmlString(htmlUrlInfo.content)
         const { hotReferences } = collectHotDataFromHtmlAst(htmlAst)
-        data.hotDecline = false
-        data.hotAcceptSelf = false
-        data.hotAcceptDependencies = hotReferences.map(
+        htmlUrlInfo.data.hotDecline = false
+        htmlUrlInfo.data.hotAcceptSelf = false
+        htmlUrlInfo.data.hotAcceptDependencies = hotReferences.map(
           ({ type, specifier }) => {
-            const [reference] = referenceUtils.inject({
+            const [reference] = context.referenceUtils.found({
               type,
               specifier,
             })
             return reference.url
           },
         )
-        const [eventSourceClientReference] = referenceUtils.inject({
+        const [eventSourceClientReference] = context.referenceUtils.inject({
           type: "script_src",
+          expectedType: "js_module",
           specifier: eventSourceClientFileUrl,
         })
         injectScriptAsEarlyAsPossible(
@@ -104,20 +115,15 @@ const jsenvPluginHot = () => {
           content: htmlModified,
         }
       },
-      css: ({ data }) => {
-        data.hotDecline = false
-        data.hotAcceptSelf = false
-        data.hotAcceptDependencies = []
+      css: (cssUrlInfo) => {
+        cssUrlInfo.data.hotDecline = false
+        cssUrlInfo.data.hotAcceptSelf = false
+        cssUrlInfo.data.hotAcceptDependencies = []
       },
-      js_module: async (
-        { url, generatedUrl, data, content },
-        { referenceUtils },
-      ) => {
+      js_module: async (urlInfo, context) => {
         const { metadata } = await applyBabelPlugins({
           babelPlugins: [babelPluginMetadataImportMetaHot],
-          url,
-          generatedUrl,
-          content,
+          urlInfo,
         })
         const {
           importMetaHotDetected,
@@ -125,9 +131,9 @@ const jsenvPluginHot = () => {
           hotAcceptSelf,
           hotAcceptDependencies,
         } = metadata
-        data.hotDecline = hotDecline
-        data.hotAcceptSelf = hotAcceptSelf
-        data.hotAcceptDependencies = hotAcceptDependencies
+        urlInfo.data.hotDecline = hotDecline
+        urlInfo.data.hotAcceptSelf = hotAcceptSelf
+        urlInfo.data.hotAcceptDependencies = hotAcceptDependencies
         if (!importMetaHotDetected) {
           return null
         }
@@ -135,12 +141,14 @@ const jsenvPluginHot = () => {
         // better sourcemap than doing the equivalent with babel
         // I suspect it's because I was doing injectAstAfterImport(programPath, ast.program.body[0])
         // which is likely not well supported by babel
-        const [importMetaHotClientFileReference] = referenceUtils.inject({
-          parentUrl: url,
-          type: "js_import_export",
-          specifier: importMetaHotClientFileUrl,
-        })
-        const magicSource = createMagicSource(content)
+        const [importMetaHotClientFileReference] =
+          context.referenceUtils.inject({
+            parentUrl: urlInfo.url,
+            type: "js_import_export",
+            expectedType: "js_module",
+            specifier: importMetaHotClientFileUrl,
+          })
+        const magicSource = createMagicSource(urlInfo.content)
         magicSource.prepend(
           `import { createImportMetaHot } from ${importMetaHotClientFileReference.generatedSpecifier}
 import.meta.hot = createImportMetaHot(import.meta.url)
@@ -156,6 +164,7 @@ const jsenvPluginHotSSE = ({
   rootDirectoryUrl,
   urlGraph,
   autoreloadPatterns,
+  cooldownBetweenFileEvents,
 }) => {
   const hotUpdateCallbackList = createCallbackList()
   const notifyDeclined = ({ cause, reason, declinedBy }) => {
@@ -274,6 +283,8 @@ const jsenvPluginHotSSE = ({
   const sseService = createSSEService({
     rootDirectoryUrl,
     autoreloadPatterns,
+    hotUpdateCallbackList,
+    cooldownBetweenFileEvents,
     onFileChange: ({ relativeUrl, event }) => {
       const url = new URL(relativeUrl, rootDirectoryUrl).href
       const urlInfo = urlGraph.urlInfos[url]
@@ -297,7 +308,6 @@ const jsenvPluginHotSSE = ({
         })
       }
     },
-    hotUpdateCallbackList,
   })
   urlGraph.prunedCallbackList.add(({ prunedUrlInfos, firstUrlInfo }) => {
     prunedUrlInfos.forEach((prunedUrlInfo) => {

package/src/dev/plugins/autoreload/sse_service.js

@@ -10,6 +10,7 @@ export const createSSEService = ({
   autoreloadPatterns,
   onFileChange,
   hotUpdateCallbackList,
+  cooldownBetweenFileEvents = 0,
 }) => {
   const destroyCallbackList = createCallbackListNotifiedOnce()
   const projectFileModified = createCallbackList()
@@ -111,9 +112,11 @@ export const createSSEService = ({
             }
           },
         )
-        const stopWatching = watchProjectFiles(({ relativeUrl, event }) => {
-          onFileChange({ relativeUrl, event })
-        })
+        const stopWatching = watchProjectFiles(
+          cooldownBetweenFileEvents
+            ? guardTooFastSecondCall(onFileChange, cooldownBetweenFileEvents)
+            : onFileChange,
+        )
         return () => {
           removeHotUpdateCallback()
           stopWatching()
@@ -147,3 +150,20 @@ export const createSSEService = ({
     },
   }
 }
+
+const guardTooFastSecondCall = (callback, cooldownBetweenFileEvents = 40) => {
+  const previousCallMsMap = new Map()
+  return ({ relativeUrl, event }) => {
+    const previousCallMs = previousCallMsMap.get(relativeUrl)
+    const nowMs = Date.now()
+    if (previousCallMs) {
+      const msEllapsed = nowMs - previousCallMs
+      if (msEllapsed < cooldownBetweenFileEvents) {
+        previousCallMsMap.delete(relativeUrl)
+        return
+      }
+    }
+    previousCallMsMap.set(relativeUrl, nowMs)
+    callback({ relativeUrl, event })
+  }
+}

package/src/dev/plugins/explorer/jsenv_plugin_explorer.js

@@ -1,8 +1,8 @@
 import { readFileSync } from "node:fs"
-import { urlToContentType } from "@jsenv/server"
 import { collectFiles, normalizeStructuredMetaMap } from "@jsenv/filesystem"
 
 import { DataUrl } from "@jsenv/utils/urls/data_url.js"
+import { CONTENT_TYPE } from "@jsenv/utils/content_type/content_type.js"
 
 export const jsenvPluginExplorer = ({ groups }) => {
   const htmlClientFileUrl = new URL("./client/explorer.html", import.meta.url)
@@ -43,7 +43,7 @@ export const jsenvPluginExplorer = ({ groups }) => {
       html = html.replace(
         "FAVICON_HREF",
         DataUrl.stringify({
-          contentType: urlToContentType(faviconClientFileUrl),
+          contentType: CONTENT_TYPE.fromUrlExtension(faviconClientFileUrl),
           base64Flag: true,
           data: readFileSync(new URL(faviconClientFileUrl)).toString("base64"),
         }),