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

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

@@ -1,186 +1,35 @@
 import { urlToRelativeUrl } from "@jsenv/filesystem"
 import { createCallbackList } from "@jsenv/abort"
 
-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 = ({
-  rootDirectoryUrl,
-  urlGraph,
-  autoreloadPatterns,
-  cooldownBetweenFileEvents,
-}) => {
-  return [
-    jsenvPluginHmr(),
-    jsenvPluginHot(),
-    jsenvPluginHotSSE({
-      rootDirectoryUrl,
-      urlGraph,
-      autoreloadPatterns,
-      cooldownBetweenFileEvents,
-    }),
-  ]
-}
-
-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,
-      }
-    },
-  }
-}
-
-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)
-        htmlUrlInfo.data.hotDecline = false
-        htmlUrlInfo.data.hotAcceptSelf = false
-        htmlUrlInfo.data.hotAcceptDependencies = hotReferences.map(
-          ({ type, specifier }) => {
-            const [reference] = context.referenceUtils.found({
-              type,
-              specifier,
-            })
-            return reference.url
-          },
-        )
-        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:hot",
-          }),
-        )
-        const htmlModified = stringifyHtmlAst(htmlAst)
-        return {
-          content: htmlModified,
-        }
-      },
-      css: (cssUrlInfo) => {
-        cssUrlInfo.data.hotDecline = false
-        cssUrlInfo.data.hotAcceptSelf = false
-        cssUrlInfo.data.hotAcceptDependencies = []
-      },
-      js_module: async (urlInfo, context) => {
-        const { metadata } = await applyBabelPlugins({
-          babelPlugins: [babelPluginMetadataImportMetaHot],
-          urlInfo,
-        })
-        const {
-          importMetaHotDetected,
-          hotDecline,
-          hotAcceptSelf,
-          hotAcceptDependencies,
-        } = metadata
-        urlInfo.data.hotDecline = hotDecline
-        urlInfo.data.hotAcceptSelf = hotAcceptSelf
-        urlInfo.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] =
-          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)
-`,
-        )
-        return magicSource.toContentAndSourcemap()
-      },
-    },
-  }
-}
-
-const jsenvPluginHotSSE = ({
+export const jsenvPluginDevSSEServer = ({
   rootDirectoryUrl,
   urlGraph,
-  autoreloadPatterns,
+  watchedFilePatterns,
   cooldownBetweenFileEvents,
 }) => {
-  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) => {
@@ -282,9 +131,9 @@ const jsenvPluginHotSSE = ({
   }
   const sseService = createSSEService({
     rootDirectoryUrl,
-    autoreloadPatterns,
-    hotUpdateCallbackList,
+    watchedFilePatterns,
     cooldownBetweenFileEvents,
+    serverEventCallbackList,
     onFileChange: ({ relativeUrl, event }) => {
       const url = new URL(relativeUrl, rootDirectoryUrl).href
       const urlInfo = urlGraph.urlInfos[url]
@@ -356,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,
+      }
+    },
+  }
+}

package/src/{dev/plugins/autoreload → plugins/import_meta_hot}/babel_plugin_metadata_import_meta_hot.js

@@ -16,13 +16,12 @@ export const babelPluginMetadataImportMetaHot = () => {
   }
 }
 const collectImportMetaProperties = (programPath) => {
-  let importMetaHotDetected = false
+  const importMetaHotPaths = []
   let hotDecline = false
   let hotAcceptSelf = false
   let hotAcceptDependencies = []
   programPath.traverse({
     MemberExpression(path) {
-      if (importMetaHotDetected) return
       const { node } = path
       const { object } = node
       if (object.type !== "MetaProperty") {
@@ -35,7 +34,7 @@ const collectImportMetaProperties = (programPath) => {
       const { property } = node
       const { name } = property
       if (name === "hot") {
-        importMetaHotDetected = true
+        importMetaHotPaths.push(path)
       }
     },
     CallExpression(path) {
@@ -79,7 +78,7 @@ const collectImportMetaProperties = (programPath) => {
     },
   })
   return {
-    importMetaHotDetected,
+    importMetaHotPaths,
     hotDecline,
     hotAcceptSelf,
     hotAcceptDependencies,

package/src/plugins/import_meta_hot/jsenv_plugin_import_meta_hot.js

@@ -0,0 +1,98 @@
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+import { parseHtmlString } from "@jsenv/utils/html_ast/html_ast.js"
+import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+
+import { collectHotDataFromHtmlAst } from "./html_hot_dependencies.js"
+import { babelPluginMetadataImportMetaHot } from "./babel_plugin_metadata_import_meta_hot.js"
+
+const importMetaHotClientFileUrl = new URL(
+  "./client/import_meta_hot.js",
+  import.meta.url,
+).href
+
+export const jsenvPluginImportMetaHot = () => {
+  return {
+    name: "jsenv:import_meta_hot",
+    appliesDuring: "*",
+    transformUrlContent: {
+      html: (htmlUrlInfo, context) => {
+        // during build we don't really care to parse html hot dependencies
+        if (context.scenario === "build") {
+          return
+        }
+        const htmlAst = parseHtmlString(htmlUrlInfo.content)
+        const { hotReferences } = collectHotDataFromHtmlAst(htmlAst)
+        htmlUrlInfo.data.hotDecline = false
+        htmlUrlInfo.data.hotAcceptSelf = false
+        htmlUrlInfo.data.hotAcceptDependencies = hotReferences.map(
+          ({ type, specifier }) => {
+            const [reference] = context.referenceUtils.found({
+              type,
+              specifier,
+            })
+            return reference.url
+          },
+        )
+      },
+      css: (cssUrlInfo) => {
+        cssUrlInfo.data.hotDecline = false
+        cssUrlInfo.data.hotAcceptSelf = false
+        cssUrlInfo.data.hotAcceptDependencies = []
+      },
+      js_module: async (urlInfo, context) => {
+        const { metadata } = await applyBabelPlugins({
+          babelPlugins: [babelPluginMetadataImportMetaHot],
+          urlInfo,
+        })
+        const {
+          importMetaHotPaths,
+          hotDecline,
+          hotAcceptSelf,
+          hotAcceptDependencies,
+        } = metadata
+        urlInfo.data.hotDecline = hotDecline
+        urlInfo.data.hotAcceptSelf = hotAcceptSelf
+        urlInfo.data.hotAcceptDependencies = hotAcceptDependencies
+        if (importMetaHotPaths.length === 0) {
+          return null
+        }
+        if (context.scenario === "build") {
+          return removeImportMetaHots(urlInfo, importMetaHotPaths)
+        }
+        return injectImportMetaHot(urlInfo, context)
+      },
+    },
+  }
+}
+
+const removeImportMetaHots = (urlInfo, importMetaHotPaths) => {
+  const magicSource = createMagicSource(urlInfo.content)
+  importMetaHotPaths.forEach((path) => {
+    magicSource.replace({
+      start: path.node.start,
+      end: path.node.end,
+      replacement: "undefined",
+    })
+  })
+  return magicSource.toContentAndSourcemap()
+}
+
+// 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 injectImportMetaHot = (urlInfo, context) => {
+  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)
+`,
+  )
+  return magicSource.toContentAndSourcemap()
+}

package/src/plugins/minification/jsenv_plugin_minification.js

@@ -8,7 +8,8 @@ export const jsenvPluginMinification = (minification) => {
     minification = {
       html: minification,
       css: minification,
-      js: minification,
+      js_classic: minification,
+      js_module: minification,
       json: minification,
       svg: minification,
     }

package/src/plugins/plugins.js

@@ -14,8 +14,14 @@ import { jsenvPluginInjectGlobals } from "./inject_globals/jsenv_plugin_inject_g
 import { jsenvPluginTranspilation } from "./transpilation/jsenv_plugin_transpilation.js"
 import { jsenvPluginBundling } from "./bundling/jsenv_plugin_bundling.js"
 import { jsenvPluginMinification } from "./minification/jsenv_plugin_minification.js"
+import { jsenvPluginImportMetaHot } from "./import_meta_hot/jsenv_plugin_import_meta_hot.js"
+import { jsenvPluginAutoreload } from "./autoreload/jsenv_plugin_autoreload.js"
 
 export const getCorePlugins = ({
+  rootDirectoryUrl,
+  urlGraph,
+  scenario,
+
   htmlSupervisor,
   nodeEsmResolution,
   fileSystemMagicResolution,
@@ -23,10 +29,15 @@ export const getCorePlugins = ({
   transpilation = true,
   minification = false,
   bundling = false,
+
+  autoreload = false,
 } = {}) => {
   if (htmlSupervisor === true) {
     htmlSupervisor = {}
   }
+  if (autoreload === true) {
+    autoreload = {}
+  }
   return [
     jsenvPluginTranspilation(transpilation),
     ...(htmlSupervisor ? [jsenvPluginHtmlSupervisor(htmlSupervisor)] : []), // before inline as it turns inline <script> into <script src>
@@ -46,5 +57,17 @@ export const getCorePlugins = ({
 
     jsenvPluginBundling(bundling),
     jsenvPluginMinification(minification),
+
+    jsenvPluginImportMetaHot(),
+    ...(autoreload
+      ? [
+          jsenvPluginAutoreload({
+            rootDirectoryUrl,
+            urlGraph,
+            scenario,
+            ...autoreload,
+          }),
+        ]
+      : []),
   ]
 }

package/src/plugins/transpilation/as_js_classic/jsenv_plugin_as_js_classic.js

@@ -1,3 +1,16 @@
+/*
+ * Something to keep in mind:
+ * When systemjs format is used by babel, it will generated UID based on
+ * the import specifier:
+ * https://github.com/babel/babel/blob/97d1967826077f15e766778c0d64711399e9a72a/packages/babel-plugin-transform-modules-systemjs/src/index.ts#L498
+ * But at this stage import specifier are absolute file urls
+ * So without minification these specifier are long and dependent
+ * on where the files are on the filesystem.
+ * This is mitigated by minification that will shorten them
+ * But ideally babel should not generate this in the first place
+ * and prefer to unique identifier based solely on the specifier basename for instance
+ */
+
 import { createRequire } from "node:module"
 import { readFileSync, urlToFilename } from "@jsenv/filesystem"
 

package/src/test/execute_plan.js

@@ -65,8 +65,10 @@ export const executePlan = async (
     scenario,
     sourcemaps,
     plugins,
-    transpilation,
     injectedGlobals,
+    nodeEsmResolution,
+    fileSystemMagicResolution,
+    transpilation,
 
     protocol,
     privateKey,
@@ -140,7 +142,10 @@ export const executePlan = async (
         plugins: [
           ...plugins,
           ...getCorePlugins({
+            scenario,
             htmlSupervisor: true,
+            nodeEsmResolution,
+            fileSystemMagicResolution,
             injectedGlobals,
             transpilation: {
               ...transpilation,

package/src/test/execute_test_plan.js

@@ -83,6 +83,8 @@ export const executeTestPlan = async ({
   sourcemaps = "inline",
   plugins = [],
   injectedGlobals,
+  nodeEsmResolution,
+  fileSystemMagicResolution,
 
   protocol,
   privateKey,
@@ -167,6 +169,8 @@ export const executeTestPlan = async ({
     sourcemaps,
     plugins,
     injectedGlobals,
+    nodeEsmResolution,
+    fileSystemMagicResolution,
 
     protocol,
     privateKey,