@jsenv/core 27.6.1 → 27.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "27.6.1",
+  "version": "27.7.0",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "author": {
@@ -73,7 +73,7 @@
     "@jsenv/integrity": "0.0.1",
     "@jsenv/log": "3.1.0",
     "@jsenv/node-esm-resolution": "0.1.0",
-    "@jsenv/server": "13.0.0",
+    "@jsenv/server": "13.1.0",
     "@jsenv/sourcemap": "1.0.4",
     "@jsenv/uneval": "1.6.0",
     "@jsenv/url-meta": "7.0.0",
@@ -109,7 +109,7 @@
     "eslint-plugin-html": "7.0.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-react": "7.30.1",
-    "playwright": "1.23.4",
+    "playwright": "1.24.1",
     "prettier": "2.7.1"
   }
 }

package/src/build/build.js

@@ -47,6 +47,20 @@ import { createVersionGenerator } from "./version_generator.js"
 import { injectServiceWorkerUrls } from "./inject_service_worker_urls.js"
 import { resyncRessourceHints } from "./resync_ressource_hints.js"
 
+// default runtimeCompat corresponds to
+// "we can keep <script type="module"> intact":
+// so script_type_module + dynamic_import + import_meta
+export const defaultRuntimeCompat = {
+  // android: "8",
+  chrome: "64",
+  edge: "79",
+  firefox: "67",
+  ios: "12",
+  opera: "51",
+  safari: "11.3",
+  samsung: "9.2",
+}
+
 /**
  * Generate an optimized version of source files into a directory
  * @param {Object} buildParameters
@@ -85,19 +99,7 @@ export const build = async ({
   entryPoints = {},
   baseUrl = "/",
 
-  // default runtimeCompat corresponds to
-  // "we can keep <script type="module"> intact":
-  // so script_type_module + dynamic_import + import_meta
-  runtimeCompat = {
-    // android: "8",
-    chrome: "64",
-    edge: "79",
-    firefox: "67",
-    ios: "12",
-    opera: "51",
-    safari: "11.3",
-    samsung: "9.2",
-  },
+  runtimeCompat = defaultRuntimeCompat,
   plugins = [],
   sourcemaps = false,
   sourcemapsSourcesContent,

package/src/dev/start_dev_server.js

@@ -7,6 +7,7 @@ import { Abort, raceProcessTeardownEvents } from "@jsenv/abort"
 import { createLogger, loggerToLevels, createTaskLog } from "@jsenv/log"
 import { getCallerPosition } from "@jsenv/urls"
 
+import { defaultRuntimeCompat } from "@jsenv/core/src/build/build.js"
 import { createReloadableWorker } from "@jsenv/core/src/helpers/worker_reload.js"
 import { startOmegaServer } from "@jsenv/core/src/omega/omega_server.js"
 
@@ -41,16 +42,10 @@ export const startDevServer = async ({
   devServerMainFile = getCallerPosition().url,
   cooldownBetweenFileEvents,
 
-  // default runtimeCompat assume dev server will be request by recent browsers
-  // Used by "jsenv_plugin_node_runtime.js" to deactivate itself
-  // If dev server can be requested by Node.js to exec files
-  // we would add "node" to the potential runtimes. For now it's out of the scope of the dev server
-  // and "jsenv_plugin_node_runtime.js" applies only during build made for node.js
-  runtimeCompat = {
-    chrome: "100",
-    firefox: "100",
-    safari: "15.5",
-  },
+  // runtimeCompat is the runtimeCompat for the build
+  // when specified, dev server use it to warn in case
+  // code would be supported during dev but not after build
+  runtimeCompat = defaultRuntimeCompat,
   plugins = [],
   urlAnalysis = {},
   htmlSupervisor = true,
@@ -162,6 +157,7 @@ export const startDevServer = async ({
     rootDirectoryUrl,
     scenario: "dev",
     runtimeCompat,
+
     plugins,
     urlAnalysis,
     htmlSupervisor,

package/src/execute/runtimes/browsers/chromium.js

@@ -2,7 +2,7 @@ import { createRuntimeFromPlaywright } from "./from_playwright.js"
 
 export const chromium = createRuntimeFromPlaywright({
   browserName: "chromium",
-  browserVersion: "104.0.5112.20", // to update, check https://github.com/microsoft/playwright/releases
+  browserVersion: "104.0.5112.48", // to update, check https://github.com/microsoft/playwright/releases
   coveragePlaywrightAPIAvailable: true,
 })
 export const chromiumIsolatedTab = chromium.isolatedTab

package/src/execute/runtimes/browsers/firefox.js

@@ -2,6 +2,6 @@ import { createRuntimeFromPlaywright } from "./from_playwright.js"
 
 export const firefox = createRuntimeFromPlaywright({
   browserName: "firefox",
-  browserVersion: "100.0.2", // to update, check https://github.com/microsoft/playwright/releases
+  browserVersion: "102.0", // to update, check https://github.com/microsoft/playwright/releases
 })
 export const firefoxIsolatedTab = firefox.isolatedTab

package/src/execute/runtimes/browsers/webkit.js

@@ -2,7 +2,7 @@ import { createRuntimeFromPlaywright } from "./from_playwright.js"
 
 export const webkit = createRuntimeFromPlaywright({
   browserName: "webkit",
-  browserVersion: "15.4", // to update, check https://github.com/microsoft/playwright/releases
+  browserVersion: "16.0", // to update, check https://github.com/microsoft/playwright/releases
   ignoreErrorHook: (error) => {
     // we catch error during execution but safari throw unhandled rejection
     // in a non-deterministic way.

package/src/omega/omega_server.js

@@ -5,6 +5,7 @@ import {
   jsenvServiceErrorHandler,
 } from "@jsenv/server"
 import { convertFileSystemErrorToResponseProperties } from "@jsenv/server/src/internal/convertFileSystemErrorToResponseProperties.js"
+import { createServerEventsDispatcher } from "@jsenv/core/src/plugins/server_events/server_events_dispatcher.js"
 
 import { createFileService } from "./server/file_service.js"
 
@@ -43,6 +44,10 @@ export const startOmegaServer = async ({
   writeGeneratedFiles,
 }) => {
   const serverStopCallbacks = []
+  const serverEventsDispatcher = createServerEventsDispatcher()
+  serverStopCallbacks.push(() => {
+    serverEventsDispatcher.destroy()
+  })
   const server = await startServer({
     signal,
     stopOnExit: false,
@@ -79,6 +84,7 @@ export const startOmegaServer = async ({
           signal,
           logLevel,
           serverStopCallbacks,
+          serverEventsDispatcher,
 
           rootDirectoryUrl,
           scenario,
@@ -99,6 +105,11 @@ export const startOmegaServer = async ({
           sourcemapsSourcesContent,
           writeGeneratedFiles,
         }),
+        handleWebsocket: (websocket, { request }) => {
+          if (request.headers["sec-websocket-protocol"] === "jsenv") {
+            serverEventsDispatcher.addWebsocket(websocket, request)
+          }
+        },
       },
       {
         name: "jsenv:omega_error_handler",

package/src/omega/server/file_service.js

@@ -10,7 +10,6 @@ import { URL_META } from "@jsenv/url-meta"
 import { getCorePlugins } from "@jsenv/core/src/plugins/plugins.js"
 import { createUrlGraph } from "@jsenv/core/src/omega/url_graph.js"
 import { createKitchen } from "@jsenv/core/src/omega/kitchen.js"
-import { createServerEventsDispatcher } from "@jsenv/core/src/plugins/server_events/server_events_dispatcher.js"
 import { jsenvPluginServerEventsClientInjection } from "@jsenv/core/src/plugins/server_events/jsenv_plugin_server_events_client_injection.js"
 import { parseUserAgentHeader } from "./user_agent.js"
 
@@ -18,6 +17,7 @@ export const createFileService = ({
   signal,
   logLevel,
   serverStopCallbacks,
+  serverEventsDispatcher,
 
   rootDirectoryUrl,
   scenario,
@@ -152,10 +152,6 @@ export const createFileService = ({
       })
       const serverEventNames = Object.keys(allServerEvents)
       if (serverEventNames.length > 0) {
-        const serverEventsDispatcher = createServerEventsDispatcher()
-        serverStopCallbacks.push(() => {
-          serverEventsDispatcher.destroy()
-        })
         Object.keys(allServerEvents).forEach((serverEventName) => {
           allServerEvents[serverEventName]({
             rootDirectoryUrl,
@@ -169,19 +165,7 @@ export const createFileService = ({
             },
           })
         })
-        // "unshift" because serve must come first to catch event source client request
-        kitchen.pluginController.unshiftPlugin({
-          name: "jsenv:provide_server_events",
-          serve: (request) => {
-            const { accept } = request.headers
-            if (accept && accept.includes("text/event-stream")) {
-              const room = serverEventsDispatcher.addRoom(request)
-              return room.join(request)
-            }
-            return null
-          },
-        })
-        // "push" so that event source client connection can be put as early as possible in html
+        // "pushPlugin" so that event source client connection can be put as early as possible in html
         kitchen.pluginController.pushPlugin(
           jsenvPluginServerEventsClientInjection(),
         )

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

@@ -192,10 +192,9 @@ const applyHotReload = async ({ hotInstructions }) => {
 }
 
 window.__reloader__ = reloader
-window.__server_events__.addEventCallbacks({
-  reload: ({ data }) => {
-    const reloadMessage = JSON.parse(data)
-    reloader.addMessage(reloadMessage)
+window.__server_events__.listenEvents({
+  reload: (reloadServerEvent) => {
+    reloader.addMessage(reloadServerEvent.data)
   },
 })
 

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

@@ -123,46 +123,52 @@ export const formatError = (
   const onErrorLocated = (urlSite) => {
     errorUrlSite = urlSite
     errorDetailsPromiseReference.current = (async () => {
-      if (errorMeta.type === "dynamic_import_fetch_error") {
-        const response = await window.fetch(
-          `/__get_error_cause__/${
-            urlSite.isInline ? urlSite.originalUrl : urlSite.url
-          }`,
-        )
-        if (response.status !== 200) {
-          return null
-        }
-        const causeInfo = await response.json()
-        if (!causeInfo) {
-          return null
-        }
+      try {
+        if (errorMeta.type === "dynamic_import_fetch_error") {
+          const response = await window.fetch(
+            `/__get_error_cause__/${
+              urlSite.isInline ? urlSite.originalUrl : urlSite.url
+            }`,
+          )
 
-        const causeText =
-          causeInfo.code === "NOT_FOUND"
-            ? formatErrorText({
-                message: causeInfo.reason,
-                stack: causeInfo.codeFrame,
-              })
-            : formatErrorText({
-                message: causeInfo.stack,
-                stack: causeInfo.codeFrame,
-              })
-        return {
-          cause: causeText,
-        }
-      }
-      if (urlSite.line !== undefined) {
-        let ressourceToFetch = `/__get_code_frame__/${formatUrlWithLineAndColumn(
-          urlSite,
-        )}`
-        if (!Error.captureStackTrace) {
-          ressourceToFetch += `?remap`
+          if (response.status !== 200) {
+            return null
+          }
+          const causeInfo = await response.json()
+          if (!causeInfo) {
+            return null
+          }
+
+          const causeText =
+            causeInfo.code === "NOT_FOUND"
+              ? formatErrorText({
+                  message: causeInfo.reason,
+                  stack: causeInfo.codeFrame,
+                })
+              : formatErrorText({
+                  message: causeInfo.stack,
+                  stack: causeInfo.codeFrame,
+                })
+          return {
+            cause: causeText,
+          }
         }
-        const response = await window.fetch(ressourceToFetch)
-        const codeFrame = await response.text()
-        return {
-          codeFrame: formatErrorText({ message: codeFrame }),
+        if (urlSite.line !== undefined) {
+          let ressourceToFetch = `/__get_code_frame__/${formatUrlWithLineAndColumn(
+            urlSite,
+          )}`
+          if (!Error.captureStackTrace) {
+            ressourceToFetch += `?remap`
+          }
+          const response = await window.fetch(ressourceToFetch)
+          const codeFrame = await response.text()
+          return {
+            codeFrame: formatErrorText({ message: codeFrame }),
+          }
         }
+      } catch (e) {
+        // happens if server is closed for instance
+        return null
       }
       return null
     })()

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

@@ -132,9 +132,7 @@ export const installHtmlSupervisor = ({
     }
     executionResult.error = error
     onExecutionSettled(src, executionResult)
-    onExecutionError(executionResult, {
-      currentScript,
-    })
+    onExecutionError(executionResult, { currentScript })
     if (errorExposureInConsole) {
       if (typeof window.reportError === "function") {
         window.reportError(error)
@@ -181,7 +179,6 @@ export const installHtmlSupervisor = ({
     const useDeferQueue =
       scriptToExecute.defer || scriptToExecute.type === "module"
     if (useDeferQueue) {
-      // defer must wait for classic script to be done
       const classicExecutionPromise = classicExecutionQueue.getPromise()
       if (classicExecutionPromise) {
         deferedExecutionQueue.waitFor(classicExecutionPromise)

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

@@ -132,7 +132,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/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)
+  }
+}