@jsenv/core 27.0.0-alpha.3 → 27.0.0-alpha.30

package/src/omega/server/file_service.js

@@ -42,15 +42,11 @@ export const createFileService = ({
     const { runtimeName, runtimeVersion } = parseUserAgentHeader(
       request.headers["user-agent"],
     )
-    const runtimeSupport = {
-      [runtimeName]: runtimeVersion,
-    }
-    const reference = kitchen.createReference({
+    const [reference, urlInfo] = kitchen.prepareEntryPoint({
       parentUrl: inferParentFromRequest(request, rootDirectoryUrl),
       type: "entry_point",
       specifier: request.ressource,
     })
-    const requestedUrlInfo = kitchen.resolveReference(reference)
     const referenceFromGraph = urlGraph.inferReference(
       reference.url,
       reference.parentUrl,
@@ -58,11 +54,13 @@ export const createFileService = ({
     try {
       await kitchen.cook({
         reference: referenceFromGraph || reference,
-        urlInfo: requestedUrlInfo,
+        urlInfo,
         outDirectoryUrl: `${rootDirectoryUrl}.jsenv/${scenario}/${runtimeName}@${runtimeVersion}/`,
-        runtimeSupport,
+        clientRuntimeCompat: {
+          [runtimeName]: runtimeVersion,
+        },
       })
-      const { response, contentType, content } = requestedUrlInfo
+      const { response, contentType, content } = urlInfo
       if (response) {
         return response
       }
@@ -86,11 +84,11 @@ export const createFileService = ({
           statusText: e.reason,
           statusMessage: e.message,
           headers: {
-            "content-type": requestedUrlInfo.contentType,
-            "content-length": Buffer.byteLength(requestedUrlInfo.content),
+            "content-type": urlInfo.contentType,
+            "content-length": Buffer.byteLength(urlInfo.content),
             "cache-control": "no-store",
           },
-          body: requestedUrlInfo.content,
+          body: urlInfo.content,
         }
       }
       if (code === "EISDIR") {

package/src/omega/url_graph/url_graph_load.js

@@ -5,23 +5,24 @@ export const loadUrlGraph = async ({
   kitchen,
   startLoading,
   outDirectoryUrl,
-  runtimeSupport,
+  clientRuntimeCompat,
 }) => {
   if (outDirectoryUrl) {
     await ensureEmptyDirectory(outDirectoryUrl)
   }
   const promises = []
+  const promiseMap = new Map()
   const cook = ({ urlInfo, ...rest }) => {
-    const promiseFromData = urlInfo.data.promise
+    const promiseFromData = promiseMap.get(urlInfo)
     if (promiseFromData) return promiseFromData
     const promise = _cook({
       urlInfo,
       outDirectoryUrl,
-      runtimeSupport,
+      clientRuntimeCompat,
       ...rest,
     })
     promises.push(promise)
-    urlInfo.data.promise = promise
+    promiseMap.set(urlInfo, promise)
     return promise
   }
   const _cook = async ({ urlInfo, ...rest }) => {
@@ -32,26 +33,31 @@ export const loadUrlGraph = async ({
     })
     const { references } = urlInfo
     references.forEach((reference) => {
+      // we use reference.generatedUrl to mimic what a browser would do:
+      // do a fetch to the specifier as found in the file
+      const referencedUrlInfo = urlGraph.reuseOrCreateUrlInfo(
+        reference.generatedUrl,
+      )
       cook({
         reference,
-        urlInfo: urlGraph.getUrlInfo(reference.url),
+        urlInfo: referencedUrlInfo,
       })
     })
   }
   startLoading(
     ({ trace, parentUrl = kitchen.rootDirectoryUrl, type, specifier }) => {
-      const entryReference = kitchen.createReference({
+      const [entryReference, entryUrlInfo] = kitchen.prepareEntryPoint({
         trace,
         parentUrl,
         type,
         specifier,
       })
-      const entryUrlInfo = kitchen.resolveReference(entryReference)
       entryUrlInfo.data.isEntryPoint = true
       cook({
         reference: entryReference,
         urlInfo: entryUrlInfo,
       })
+      return [entryReference, entryUrlInfo]
     },
   )
 
@@ -65,4 +71,5 @@ export const loadUrlGraph = async ({
     await waitAll()
   }
   await waitAll()
+  promiseMap.clear()
 }

package/src/omega/url_graph/url_graph_report.js

@@ -22,7 +22,7 @@ const createUrlGraphReport = (urlGraph) => {
     html: 0,
     css: 0,
     js: 0,
-    assets: 0,
+    other: 0,
     sourcemaps: 0,
     total: 0,
   }
@@ -31,7 +31,7 @@ const createUrlGraphReport = (urlGraph) => {
     css: 0,
     js: 0,
     sourcemaps: 0,
-    assets: 0,
+    other: 0,
     total: 0,
   }
   Object.keys(urlInfos).forEach((url) => {
@@ -39,8 +39,10 @@ const createUrlGraphReport = (urlGraph) => {
       return
     }
     const urlInfo = urlInfos[url]
-    // ignore inline files, they are already taken into account in the file where they appear
-    if (urlInfo.isInline) {
+    // ignore:
+    // - inline files: they are already taken into account in the file where they appear
+    // - external files: we don't know their content
+    if (urlInfo.isInline || urlInfo.external) {
       return
     }
     // file loaded via import assertion are already inside the graph
@@ -49,9 +51,9 @@ const createUrlGraphReport = (urlGraph) => {
     // and only the js module remain (likely bundled)
     const urlObject = new URL(urlInfo.url)
     if (
-      urlObject.searchParams.has("json_module") ||
-      urlObject.searchParams.has("css_module") ||
-      urlObject.searchParams.has("text_module")
+      urlObject.searchParams.has("as_json_module") ||
+      urlObject.searchParams.has("as_css_module") ||
+      urlObject.searchParams.has("as_text_module")
     ) {
       return
     }
@@ -79,8 +81,8 @@ const createUrlGraphReport = (urlGraph) => {
       sizeGroups.js += urlContentSize
       return
     }
-    countGroups.assets++
-    sizeGroups.assets += urlContentSize
+    countGroups.other++
+    sizeGroups.other += urlContentSize
     return
   })
   return {
@@ -88,7 +90,7 @@ const createUrlGraphReport = (urlGraph) => {
     css: { count: countGroups.css, size: sizeGroups.css },
     js: { count: countGroups.js, size: sizeGroups.js },
     sourcemaps: { count: countGroups.sourcemaps, size: sizeGroups.sourcemaps },
-    assets: { count: countGroups.assets, size: sizeGroups.assets },
+    other: { count: countGroups.other, size: sizeGroups.other },
     total: { count: countGroups.total, size: sizeGroups.total },
   }
 }
@@ -106,10 +108,10 @@ const determineCategory = (urlInfo) => {
   if (urlInfo.type === "js_module" || urlInfo.type === "js_classic") {
     return "js"
   }
-  return "assets"
+  return "other"
 }
 
-const createRepartitionMessage = ({ html, css, js, assets }) => {
+const createRepartitionMessage = ({ html, css, js, other }) => {
   const parts = []
   if (html.count) {
     parts.push(
@@ -139,10 +141,10 @@ const createRepartitionMessage = ({ html, css, js, assets }) => {
   //     } (${byteAsFileSize(sourcemaps.size)})`,
   //   )
   // }
-  if (assets.count) {
+  if (other.count) {
     parts.push(
-      `${ANSI.color(`assets:`, ANSI.GREY)} ${assets.count} (${byteAsFileSize(
-        assets.size,
+      `${ANSI.color(`other:`, ANSI.GREY)} ${other.count} (${byteAsFileSize(
+        other.size,
       )})`,
     )
   }

package/src/omega/url_graph.js

@@ -4,7 +4,16 @@ import { urlToRelativeUrl } from "@jsenv/filesystem"
 export const createUrlGraph = () => {
   const urlInfos = {}
   const getUrlInfo = (url) => urlInfos[url]
-  const deleteUrlInfo = (url) => delete urlInfos[url]
+  const deleteUrlInfo = (url) => {
+    const urlInfo = urlInfos[url]
+    if (urlInfo) {
+      delete urlInfos[url]
+      if (urlInfo.sourcemapReference) {
+        deleteUrlInfo(urlInfo.sourcemapReference.url)
+      }
+    }
+  }
+
   const reuseOrCreateUrlInfo = (url) => {
     const existingUrlInfo = urlInfos[url]
     if (existingUrlInfo) return existingUrlInfo
@@ -44,9 +53,19 @@ export const createUrlGraph = () => {
   const updateReferences = (urlInfo, references) => {
     const dependencyUrls = []
     references.forEach((reference) => {
-      if (!dependencyUrls.includes(reference.url)) {
-        dependencyUrls.push(reference.url)
+      if (reference.isRessourceHint) {
+        // ressource hint are a special kind of reference.
+        // They are a sort of weak reference to an url.
+        // We ignore them so that url referenced only by ressource hints
+        // have url.dependents.size === 0 and can be considered as not used
+        // It means html won't consider url referenced solely
+        // by <link> as dependency and it's fine
+        return
+      }
+      if (dependencyUrls.includes(reference.url)) {
+        return
       }
+      dependencyUrls.push(reference.url)
     })
     pruneDependencies(
       urlInfo,
@@ -115,18 +134,21 @@ export const createUrlGraph = () => {
 const createUrlInfo = (url) => {
   return {
     data: {}, // plugins can put whatever they want here
+    references: [],
+    dependencies: new Set(),
+    dependents: new Set(),
+    type: undefined, // "html", "css", "js_classic", "js_module", "importmap", "json", "webmanifest", ...
+    subtype: undefined, // "worker", "service_worker", "shared_worker" for js, otherwise undefined
+    contentType: "", // "text/html", "text/css", "text/javascript", "application/json", ...
     url,
+    filename: "",
     generatedUrl: null,
     isInline: false,
     inlineUrlSite: null,
-    contentType: "",
-    originalContent: "",
-    content: "",
+    external: false,
+    originalContent: undefined,
+    content: undefined,
     sourcemap: null,
     sourcemapReference: null,
-    type: "",
-    references: [],
-    dependencies: new Set(),
-    dependents: new Set(),
   }
 }

package/src/omega/web_workers.js

@@ -0,0 +1,42 @@
+// the following apis are creating js entry points:
+// - new Worker()
+// - new SharedWorker()
+// - navigator.serviceWorker.register()
+export const isWebWorkerEntryPointReference = (reference) => {
+  if (reference.subtype === "new_url_first_arg") {
+    return ["worker", "service_worker", "shared_worker"].includes(
+      reference.expectedSubtype,
+    )
+  }
+  return [
+    "new_worker_first_arg",
+    "new_shared_worker_first_arg",
+    "service_worker_register_first_arg",
+  ].includes(reference.subtype)
+}
+
+export const isWebWorkerUrlInfo = (urlInfo) => {
+  return (
+    urlInfo.subtype === "worker" ||
+    urlInfo.subtype === "service_worker" ||
+    urlInfo.subtype === "shared_worker"
+  )
+}
+
+// export const isEntryPoint = (urlInfo, urlGraph) => {
+//   if (urlInfo.data.isEntryPoint) {
+//     return true
+//   }
+//   if (isWebWorker(urlInfo)) {
+//     // - new Worker("a.js") -> "a.js" is an entry point
+//     // - self.importScripts("b.js") -> "b.js" is not an entry point
+//     // So the following logic applies to infer if the file is a web worker entry point
+//     // "When a non-webworker file references a worker file, the worker file is an entry point"
+//     const dependents = Array.from(urlInfo.dependents)
+//     return dependents.some((dependentUrl) => {
+//       const dependentUrlInfo = urlGraph.getUrlInfo(dependentUrl)
+//       return !isWebWorker(dependentUrlInfo)
+//     })
+//   }
+//   return false
+// }

package/src/{dev/plugins/autoreload → plugins/autoreload/dev_sse}/client/event_source_client.js

@@ -1,4 +1,5 @@
-import { createEventSourceConnection } from "./event_source_connection.js"
+import { createEventSourceConnection } from "@jsenv/utils/event_source/event_source.js"
+import { urlHotMetas } from "../../../import_meta_hot/client/import_meta_hot.js"
 import {
   isAutoreloadEnabled,
   setAutoreloadPreference,
@@ -9,7 +10,6 @@ import {
   reloadDOMNodesUsingUrl,
   reloadJsImport,
 } from "./reload.js"
-import { urlHotMetas } from "./import_meta_hot.js"
 
 const reloadMessages = []
 const reloadMessagesSignal = { onchange: () => {} }

package/src/plugins/autoreload/dev_sse/jsenv_plugin_dev_sse_client.js

@@ -0,0 +1,41 @@
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  injectScriptAsEarlyAsPossible,
+  createHtmlNode,
+} from "@jsenv/utils/html_ast/html_ast.js"
+
+export const jsenvPluginDevSSEClient = () => {
+  const eventSourceClientFileUrl = new URL(
+    "./client/event_source_client.js",
+    import.meta.url,
+  ).href
+
+  return {
+    name: "jsenv:dev_sse_client",
+    appliesDuring: { dev: true },
+    transformUrlContent: {
+      html: (htmlUrlInfo, context) => {
+        const htmlAst = parseHtmlString(htmlUrlInfo.content)
+        const [eventSourceClientReference] = context.referenceUtils.inject({
+          type: "script_src",
+          expectedType: "js_module",
+          specifier: eventSourceClientFileUrl,
+        })
+        injectScriptAsEarlyAsPossible(
+          htmlAst,
+          createHtmlNode({
+            "tagName": "script",
+            "type": "module",
+            "src": eventSourceClientReference.generatedSpecifier,
+            "injected-by": "jsenv:dev_sse_client",
+          }),
+        )
+        const htmlModified = stringifyHtmlAst(htmlAst)
+        return {
+          content: htmlModified,
+        }
+      },
+    },
+  }
+}

package/src/{dev/plugins/autoreload/jsenv_plugin_autoreload.js → plugins/autoreload/dev_sse/jsenv_plugin_dev_sse_server.js}

@@ -1,177 +1,35 @@
 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,
-  stringifyHtmlAst,
-  injectScriptAsEarlyAsPossible,
-  createHtmlNode,
-} from "@jsenv/utils/html_ast/html_ast.js"
-import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+import { createSSEService } from "@jsenv/utils/event_source/sse_service.js"
 
-import { createSSEService } from "./sse_service.js"
-import { collectHotDataFromHtmlAst } from "./html_hot_dependencies.js"
-import { babelPluginMetadataImportMetaHot } from "./babel_plugin_metadata_import_meta_hot.js"
-
-export const jsenvPluginAutoreload = ({
+export const jsenvPluginDevSSEServer = ({
   rootDirectoryUrl,
   urlGraph,
-  autoreloadPatterns,
+  watchedFilePatterns,
+  cooldownBetweenFileEvents,
 }) => {
-  return [
-    jsenvPluginHot(),
-    jsenvPluginHotSSE({
-      rootDirectoryUrl,
-      urlGraph,
-      autoreloadPatterns,
-    }),
-  ]
-}
-
-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 },
-    normalize: ({ url, data }) => {
-      const urlObject = new URL(url)
-      if (!urlObject.searchParams.has("hmr")) {
-        data.hmr = false
-        return null
-      }
-      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
-      // recognize the url (it is not considered as a different url)
-      urlObject.searchParams.delete("hmr")
-      urlObject.searchParams.delete("v")
-      return urlObject.href
-    },
-    transformReferencedUrl: ({ parentUrl, url, data }, { urlGraph }) => {
-      const parentUrlInfo = urlGraph.getUrlInfo(parentUrl)
-      if (!parentUrlInfo || !parentUrlInfo.data.hmr) {
-        return null
-      }
-      if (!data.hmrTimestamp) {
-        return null
-      }
-      return injectQueryParams(url, {
-        hmr: "",
-        v: data.hmrTimestamp,
-      })
-    },
-    transform: {
-      html: ({ data, content }, { referenceUtils }) => {
-        const htmlAst = parseHtmlString(content)
-        const { hotReferences } = collectHotDataFromHtmlAst(htmlAst)
-        data.hotDecline = false
-        data.hotAcceptSelf = false
-        data.hotAcceptDependencies = hotReferences.map(
-          ({ type, specifier }) => {
-            const [reference] = referenceUtils.inject({
-              type,
-              specifier,
-            })
-            return reference.url
-          },
-        )
-        const [eventSourceClientReference] = referenceUtils.inject({
-          type: "script_src",
-          specifier: eventSourceClientFileUrl,
-        })
-        injectScriptAsEarlyAsPossible(
-          htmlAst,
-          createHtmlNode({
-            "tagName": "script",
-            "type": "module",
-            "src": eventSourceClientReference.generatedSpecifier,
-            "injected-by": "jsenv:hot",
-          }),
-        )
-        const htmlModified = stringifyHtmlAst(htmlAst)
-        return {
-          content: htmlModified,
-        }
-      },
-      css: ({ data }) => {
-        data.hotDecline = false
-        data.hotAcceptSelf = false
-        data.hotAcceptDependencies = []
-      },
-      js_module: async (
-        { url, generatedUrl, data, content },
-        { referenceUtils },
-      ) => {
-        const { metadata } = await applyBabelPlugins({
-          babelPlugins: [babelPluginMetadataImportMetaHot],
-          url,
-          generatedUrl,
-          content,
-        })
-        const {
-          importMetaHotDetected,
-          hotDecline,
-          hotAcceptSelf,
-          hotAcceptDependencies,
-        } = metadata
-        data.hotDecline = hotDecline
-        data.hotAcceptSelf = hotAcceptSelf
-        data.hotAcceptDependencies = hotAcceptDependencies
-        if (!importMetaHotDetected) {
-          return null
-        }
-        // For some reason using magic source here produce
-        // 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)
-        magicSource.prepend(
-          `import { createImportMetaHot } from ${importMetaHotClientFileReference.generatedSpecifier}
-import.meta.hot = createImportMetaHot(import.meta.url)
-`,
-        )
-        return magicSource.toContentAndSourcemap()
-      },
-    },
-  }
-}
-
-const jsenvPluginHotSSE = ({
-  rootDirectoryUrl,
-  urlGraph,
-  autoreloadPatterns,
-}) => {
-  const hotUpdateCallbackList = createCallbackList()
+  const serverEventCallbackList = createCallbackList()
   const notifyDeclined = ({ cause, reason, declinedBy }) => {
-    hotUpdateCallbackList.notify({
-      declined: true,
-      cause,
-      reason,
-      declinedBy,
+    serverEventCallbackList.notify({
+      type: "reload",
+      data: JSON.stringify({
+        cause,
+        type: "full",
+        typeReason: reason,
+        declinedBy,
+      }),
     })
   }
   const notifyAccepted = ({ cause, reason, instructions }) => {
-    hotUpdateCallbackList.notify({
-      accepted: true,
-      cause,
-      reason,
-      instructions,
+    serverEventCallbackList.notify({
+      type: "reload",
+      data: JSON.stringify({
+        cause,
+        type: "hot",
+        typeReason: reason,
+        hotInstructions: instructions,
+      }),
     })
   }
   const updateHmrTimestamp = (urlInfo, hmrTimestamp) => {
@@ -273,9 +131,11 @@ const jsenvPluginHotSSE = ({
   }
   const sseService = createSSEService({
     rootDirectoryUrl,
-    autoreloadPatterns,
-    onFileChange: ({ relativeUrl, event }) => {
-      const url = new URL(relativeUrl, rootDirectoryUrl).href
+    watchedFilePatterns,
+    cooldownBetweenFileEvents,
+    serverEventCallbackList,
+    onFileChange: ({ url, event }) => {
+      const relativeUrl = urlToRelativeUrl(url, rootDirectoryUrl)
       const urlInfo = urlGraph.urlInfos[url]
       // file not part of dependency graph
       if (!urlInfo) {
@@ -297,7 +157,6 @@ const jsenvPluginHotSSE = ({
         })
       }
     },
-    hotUpdateCallbackList,
   })
   urlGraph.prunedCallbackList.add(({ prunedUrlInfos, firstUrlInfo }) => {
     prunedUrlInfos.forEach((prunedUrlInfo) => {
@@ -346,7 +205,7 @@ const jsenvPluginHotSSE = ({
   })
 
   return {
-    name: "jsenv:hot_sse",
+    name: "jsenv:sse_server",
     appliesDuring: { dev: true },
     serve: (request, { urlGraph, rootDirectoryUrl }) => {
       if (request.ressource === "/__graph__") {

package/src/plugins/autoreload/jsenv_plugin_autoreload.js

@@ -0,0 +1,25 @@
+import { jsenvPluginHmr } from "./jsenv_plugin_hmr.js"
+import { jsenvPluginDevSSEClient } from "./dev_sse/jsenv_plugin_dev_sse_client.js"
+import { jsenvPluginDevSSEServer } from "./dev_sse/jsenv_plugin_dev_sse_server.js"
+
+export const jsenvPluginAutoreload = ({
+  rootDirectoryUrl,
+  urlGraph,
+  scenario,
+  watchedFilePatterns,
+  cooldownBetweenFileEvents,
+}) => {
+  if (scenario === "build") {
+    return []
+  }
+  return [
+    jsenvPluginHmr(),
+    jsenvPluginDevSSEClient(),
+    jsenvPluginDevSSEServer({
+      rootDirectoryUrl,
+      urlGraph,
+      watchedFilePatterns,
+      cooldownBetweenFileEvents,
+    }),
+  ]
+}

package/src/plugins/autoreload/jsenv_plugin_hmr.js

@@ -0,0 +1,35 @@
+export const jsenvPluginHmr = () => {
+  return {
+    name: "jsenv:hmr",
+    appliesDuring: { dev: true },
+    normalizeUrl: (reference) => {
+      const urlObject = new URL(reference.url)
+      if (!urlObject.searchParams.has("hmr")) {
+        reference.data.hmr = false
+        return null
+      }
+      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
+      // recognize the url (it is not considered as a different url)
+      urlObject.searchParams.delete("hmr")
+      urlObject.searchParams.delete("v")
+      return urlObject.href
+    },
+    transformUrlSearchParams: (reference, context) => {
+      const parentUrlInfo = context.urlGraph.getUrlInfo(reference.parentUrl)
+      if (!parentUrlInfo || !parentUrlInfo.data.hmr) {
+        return null
+      }
+      const urlInfo = context.urlGraph.getUrlInfo(reference.url)
+      if (!urlInfo.data.hmrTimestamp) {
+        return null
+      }
+      return {
+        hmr: "",
+        v: urlInfo.data.hmrTimestamp,
+      }
+    },
+  }
+}