@jsenv/core 27.6.1 → 27.8.1

package/src/plugins/html_supervisor/client/html_supervisor_setup.js

@@ -9,11 +9,12 @@ window.__html_supervisor__ = {
     window.__html_supervisor__.scriptsToExecute.push(scriptToExecute)
   },
   superviseScript: ({ src, isInline, crossorigin, integrity }) => {
+    const { currentScript } = document
     window.__html_supervisor__.addScriptToExecute({
       src,
       type: "js_classic",
       isInline,
-      currentScript: document.currentScript,
+      currentScript,
       execute: (url) => {
         return new Promise((resolve, reject) => {
           const script = document.createElement("script")
@@ -50,7 +51,14 @@ window.__html_supervisor__ = {
               resolve()
             }
           })
-          document.body.appendChild(script)
+          if (currentScript) {
+            currentScript.parentNode.insertBefore(
+              script,
+              currentScript.nextSibling,
+            )
+          } else {
+            document.body.appendChild(script)
+          }
         })
       },
     })

package/src/plugins/html_supervisor/jsenv_plugin_html_supervisor.js

@@ -43,10 +43,7 @@ export const jsenvPluginHtmlSupervisor = ({
 
   return {
     name: "jsenv:html_supervisor",
-    appliesDuring: {
-      dev: true,
-      test: true,
-    },
+    appliesDuring: "dev",
     serve: async (request, context) => {
       if (request.ressource.startsWith("/__get_code_frame__/")) {
         const { pathname, searchParams } = new URL(request.url)
@@ -132,7 +129,9 @@ export const jsenvPluginHtmlSupervisor = ({
                 code: causeInfo.code,
                 message: causeInfo.message,
                 reason: causeInfo.reason,
-                stack: causeInfo.stack,
+                stack: errorBaseUrl
+                  ? `stack mocked for snapshot`
+                  : causeInfo.stack,
                 codeFrame: causeInfo.traceMessage,
               }
             : null,

package/src/plugins/import_meta_hot/jsenv_plugin_import_meta_hot.js

@@ -16,7 +16,7 @@ export const jsenvPluginImportMetaHot = () => {
     transformUrlContent: {
       html: (htmlUrlInfo, context) => {
         // during build we don't really care to parse html hot dependencies
-        if (context.scenario === "build") {
+        if (context.scenarios.build) {
           return
         }
         const htmlAst = parseHtmlString(htmlUrlInfo.content)
@@ -58,7 +58,7 @@ export const jsenvPluginImportMetaHot = () => {
         if (importMetaHotPaths.length === 0) {
           return null
         }
-        if (context.scenario === "build") {
+        if (context.scenarios.build) {
           return removeImportMetaHots(urlInfo, importMetaHotPaths)
         }
         return injectImportMetaHot(urlInfo, context, importMetaHotClientFileUrl)

package/src/plugins/import_meta_scenarios/jsenv_plugin_import_meta_scenarios.js

@@ -1,11 +1,10 @@
 /*
  * Source code can contain the following
  * - import.meta.dev
- * - import.meta.test
  * - import.meta.build
  * They are either:
  * - replaced by true: When scenario matches (import.meta.dev and it's the dev server)
- * - left as is to be evaluated to undefined (import.meta.test but it's the dev server)
+ * - left as is to be evaluated to undefined (import.meta.build but it's the dev server)
  * - replaced by undefined (import.meta.dev but it's build; the goal is to ensure it's tree-shaked)
  */
 
@@ -17,7 +16,7 @@ export const jsenvPluginImportMetaScenarios = () => {
     name: "jsenv:import_meta_scenario",
     appliesDuring: "*",
     transformUrlContent: {
-      js_module: async (urlInfo, { scenario }) => {
+      js_module: async (urlInfo, context) => {
         if (
           !urlInfo.content.includes("import.meta.dev") &&
           !urlInfo.content.includes("import.meta.test") &&
@@ -34,34 +33,30 @@ export const jsenvPluginImportMetaScenarios = () => {
         const replace = (path, value) => {
           replacements.push({ path, value })
         }
-        if (scenario === "dev") {
-          dev.forEach((path) => {
-            replace(path, "true")
-          })
-        } else if (scenario === "test") {
-          // test is also considered a dev environment
-          // just like the dev server can be used to debug test files
-          // without this people would have to write
-          // if (import.meta.dev || import.meta.test) or if (!import.meta.build)
-          dev.forEach((path) => {
-            replace(path, "true")
-          })
-          test.forEach((path) => {
-            replace(path, "true")
-          })
-        } else if (scenario === "build") {
-          // replacing by undefined might not be required
-          // as I suppose rollup would consider them as undefined
-          // but let's make it explicit to ensure code is properly tree-shaked
+        if (context.scenarios.build) {
+          // during build ensure replacement for tree-shaking
           dev.forEach((path) => {
             replace(path, "undefined")
           })
           test.forEach((path) => {
-            replace(path, "undefined")
+            replace(path, context.scenarios.test ? "true" : "undefined")
           })
           build.forEach((path) => {
             replace(path, "true")
           })
+        } else {
+          // during dev we can let "import.meta.build" untouched
+          // it will be evaluated to undefined.
+          // Moreover it can be surprising to see some "undefined"
+          // when source file contains "import.meta.build"
+          dev.forEach((path) => {
+            replace(path, "true")
+          })
+          if (context.scenarios.test) {
+            test.forEach((path) => {
+              replace(path, "true")
+            })
+          }
         }
         const magicSource = createMagicSource(urlInfo.content)
         replacements.forEach(({ path, value }) => {
@@ -106,7 +101,6 @@ const babelPluginMetadataImportMetaScenarios = () => {
         })
         state.file.metadata.importMetaScenarios = {
           dev: importMetas.dev,
-          test: importMetas.test,
           build: importMetas.build,
         }
       },

package/src/plugins/importmap/jsenv_plugin_importmap.js

@@ -202,7 +202,7 @@ export const jsenvPluginImportmap = () => {
         // by "formatReferencedUrl" making the importmap presence useless.
         // In dev/test we keep importmap into the HTML to see it even if useless
         // Duing build we get rid of it
-        if (context.scenario === "build") {
+        if (context.scenarios.build) {
           removeHtmlNode(importmap)
         }
         return {

package/src/plugins/minification/jsenv_plugin_minification.js

@@ -40,9 +40,7 @@ export const jsenvPluginMinification = (minification) => {
 
   return {
     name: "jsenv:minification",
-    appliesDuring: {
-      build: true,
-    },
+    appliesDuring: "build",
     optimizeUrlContent: {
       html: htmlOptimizer,
       svg: htmlOptimizer,

package/src/plugins/node_esm_resolution/jsenv_plugin_node_esm_resolution.js

@@ -27,8 +27,10 @@ export const jsenvPluginNodeEsmResolution = ({
   return {
     name: "jsenv:node_esm_resolution",
     appliesDuring: "*",
-    init: ({ rootDirectoryUrl, scenario, runtimeCompat, urlGraph }) => {
-      const nodeRuntimeEnabled = Object.keys(runtimeCompat).includes("node")
+    init: (context) => {
+      const nodeRuntimeEnabled = Object.keys(context.runtimeCompat).includes(
+        "node",
+      )
       // https://nodejs.org/api/esm.html#resolver-algorithm-specification
       packageConditions = packageConditions || [
         ...readCustomConditionsFromProcessArgs(),
@@ -57,19 +59,19 @@ export const jsenvPluginNodeEsmResolution = ({
         return packageJson
       }
 
-      if (scenario === "dev") {
+      if (context.scenarios.dev) {
         const onFileChange = () => {
           packageScopesCache.clear()
           packageJsonsCache.clear()
-          urlGraph.urlInfoMap.forEach((urlInfo) => {
+          context.urlGraph.urlInfoMap.forEach((urlInfo) => {
             if (urlInfo.dependsOnPackageJson) {
-              urlGraph.considerModified(urlInfo)
+              context.urlGraph.considerModified(urlInfo)
             }
           })
         }
         filesInvalidatingCache.forEach((file) => {
           const unregister = registerFileLifecycle(
-            new URL(file, rootDirectoryUrl),
+            new URL(file, context.rootDirectoryUrl),
             {
               added: () => {
                 onFileChange()
@@ -131,7 +133,7 @@ export const jsenvPluginNodeEsmResolution = ({
       return null
     },
     transformUrlSearchParams: (reference, context) => {
-      if (context.scenario === "build") {
+      if (context.scenarios.build) {
         return null
       }
       if (!reference.url.startsWith("file:")) {

package/src/plugins/plugin_controller.js

@@ -17,8 +17,8 @@ const HOOK_NAMES = [
   "destroy",
 ]
 
-export const createPluginController = ({ plugins, scenario }) => {
-  const flatPlugins = flattenAndFilterPlugins(plugins, { scenario })
+export const createPluginController = ({ plugins, scenarios }) => {
+  const flatPlugins = flattenAndFilterPlugins(plugins, { scenarios })
   // precompute a list of hooks per hookName for one major reason:
   // - When debugging, there is less iteration
   // also it should increase perf as there is less work to do
@@ -187,7 +187,7 @@ export const createPluginController = ({ plugins, scenario }) => {
   }
 }
 
-const flattenAndFilterPlugins = (plugins, { scenario }) => {
+const flattenAndFilterPlugins = (plugins, { scenarios }) => {
   const flatPlugins = []
   const visitPluginEntry = (pluginEntry) => {
     if (Array.isArray(pluginEntry)) {
@@ -208,13 +208,14 @@ const flattenAndFilterPlugins = (plugins, { scenario }) => {
         return
       }
       if (typeof appliesDuring === "string") {
-        if (!["dev", "build", "test"].includes(appliesDuring)) {
+        if (!["dev", "test", "build"].includes(appliesDuring)) {
           throw new Error(
             `"appliesDuring" must be "dev", "test" or "build", got ${appliesDuring}`,
           )
         }
-        if (appliesDuring === scenario) {
+        if (scenarios[appliesDuring]) {
           flatPlugins.push(pluginEntry)
+          return
         }
         return
       }
@@ -223,7 +224,17 @@ const flattenAndFilterPlugins = (plugins, { scenario }) => {
           `"appliesDuring" must be an object or a string, got ${appliesDuring}`,
         )
       }
-      if (appliesDuring[scenario]) {
+      let applies
+      for (const key of Object.keys(appliesDuring)) {
+        if (!appliesDuring[key] && scenarios[key]) {
+          applies = false
+          break
+        }
+        if (appliesDuring[key] && scenarios[key]) {
+          applies = true
+        }
+      }
+      if (applies) {
         flatPlugins.push(pluginEntry)
         return
       }

package/src/plugins/plugins.js

@@ -24,7 +24,6 @@ import { jsenvPluginExplorer } from "./explorer/jsenv_plugin_explorer.js"
 
 export const getCorePlugins = ({
   rootDirectoryUrl,
-  scenario,
   runtimeCompat,
 
   urlAnalysis = {},
@@ -84,7 +83,6 @@ export const getCorePlugins = ({
       ? [
           jsenvPluginAutoreload({
             ...clientAutoreload,
-            scenario,
             clientFileChangeCallbackList,
             clientFilesPruneCallbackList,
           }),

package/src/plugins/server_events/client/connection_manager.js

@@ -0,0 +1,165 @@
+const READY_STATES = {
+  CONNECTING: "connecting",
+  OPEN: "open",
+  CLOSING: "closing",
+  CLOSED: "closed",
+}
+
+export const createConnectionManager = (
+  attemptConnection,
+  { retry, retryAfter, retryMaxAttempt, retryAllocatedMs },
+) => {
+  const readyState = {
+    value: READY_STATES.CLOSED,
+    goTo: (value) => {
+      if (value === readyState.value) {
+        return
+      }
+      readyState.value = value
+      readyState.onchange()
+    },
+    onchange: () => {},
+  }
+
+  let _disconnect = () => {}
+  const connect = () => {
+    if (
+      readyState.value === READY_STATES.CONNECTING ||
+      readyState.value === READY_STATES.OPEN
+    ) {
+      return
+    }
+
+    let retryCount = 0
+    let msSpent = 0
+    const attempt = () => {
+      readyState.goTo(READY_STATES.CONNECTING)
+      _disconnect = attemptConnection({
+        onClosed: () => {
+          if (!retry) {
+            readyState.goTo(READY_STATES.CLOSED)
+            console.info(`[jsenv] failed to connect to server`)
+            return
+          }
+          if (retryCount > retryMaxAttempt) {
+            readyState.goTo(READY_STATES.CLOSED)
+            console.info(
+              `[jsenv] could not connect to server after ${retryMaxAttempt} attempt`,
+            )
+            return
+          }
+          if (retryAllocatedMs && msSpent > retryAllocatedMs) {
+            readyState.goTo(READY_STATES.CLOSED)
+            console.info(
+              `[jsenv] could not connect to server in less than ${retryAllocatedMs}ms`,
+            )
+            return
+          }
+
+          // if closed while open -> connection lost
+          // otherwise it's the attempt to connect for the first time
+          // or to reconnect
+          if (readyState.value === READY_STATES.OPEN) {
+            console.info(`[jsenv] server connection lost; retrying to connect`)
+          }
+          retryCount++
+          setTimeout(() => {
+            msSpent += retryAfter
+            attempt()
+          }, retryAfter)
+        },
+        onOpen: () => {
+          readyState.goTo(READY_STATES.OPEN)
+          // console.info(`[jsenv] connected to server`)
+        },
+      })
+    }
+    attempt()
+  }
+
+  const disconnect = () => {
+    if (
+      readyState.value !== READY_STATES.CONNECTING &&
+      readyState.value !== READY_STATES.OPEN
+    ) {
+      console.warn(
+        `disconnect() ignored because connection is ${readyState.value}`,
+      )
+      return null
+    }
+    return _disconnect()
+  }
+
+  const removePageUnloadListener = listenPageUnload(() => {
+    if (
+      readyState.value === READY_STATES.CONNECTING ||
+      readyState.value === READY_STATES.OPEN
+    ) {
+      _disconnect()
+    }
+  })
+
+  return {
+    readyState,
+    connect,
+    disconnect,
+    destroy: () => {
+      removePageUnloadListener()
+      disconnect()
+    },
+  }
+}
+
+// const listenPageMightFreeze = (callback) => {
+//   const removePageHideListener = listenEvent(window, "pagehide", (pageHideEvent) => {
+//     if (pageHideEvent.persisted === true) {
+//       callback(pageHideEvent)
+//     }
+//   })
+//   return removePageHideListener
+// }
+
+// const listenPageFreeze = (callback) => {
+//   const removeFreezeListener = listenEvent(document, "freeze", (freezeEvent) => {
+//     callback(freezeEvent)
+//   })
+//   return removeFreezeListener
+// }
+
+// const listenPageIsRestored = (callback) => {
+//   const removeResumeListener = listenEvent(document, "resume", (resumeEvent) => {
+//     removePageshowListener()
+//     callback(resumeEvent)
+//   })
+//   const removePageshowListener = listenEvent(window, "pageshow", (pageshowEvent) => {
+//     if (pageshowEvent.persisted === true) {
+//       removePageshowListener()
+//       removeResumeListener()
+//       callback(pageshowEvent)
+//     }
+//   })
+//   return () => {
+//     removeResumeListener()
+//     removePageshowListener()
+//   }
+// }
+
+const listenPageUnload = (callback) => {
+  const removePageHideListener = listenEvent(
+    window,
+    "pagehide",
+    (pageHideEvent) => {
+      if (pageHideEvent.persisted !== true) {
+        callback(pageHideEvent)
+      }
+    },
+  )
+  return removePageHideListener
+}
+
+const listenEvent = (emitter, event, callback) => {
+  emitter.addEventListener(event, callback)
+  return () => {
+    emitter.removeEventListener(event, callback)
+  }
+}