@jsenv/core 27.5.3 → 27.7.0

package/src/plugins/html_supervisor/jsenv_plugin_html_supervisor.js

@@ -20,6 +20,7 @@ import {
   setHtmlNodeText,
 } from "@jsenv/ast"
 import { generateInlineContentUrl, stringifyUrlSite } from "@jsenv/urls"
+import { getOriginalPosition } from "@jsenv/sourcemap"
 
 import { requireFromJsenv } from "@jsenv/core/src/require_from_jsenv.js"
 
@@ -46,44 +47,42 @@ export const jsenvPluginHtmlSupervisor = ({
       dev: true,
       test: true,
     },
-    serve: (request, context) => {
-      if (request.ressource.startsWith("/__open_in_editor__/")) {
-        const file = request.ressource.slice("/__open_in_editor__/".length)
-        if (!file) {
-          return {
-            status: 400,
-            body: "Missing file in url",
-          }
-        }
-        const launch = requireFromJsenv("launch-editor")
-        launch(fileURLToPath(file), () => {
-          // ignore error for now
-        })
-        return {
-          status: 200,
-          headers: {
-            "cache-control": "no-store",
-          },
-        }
-      }
+    serve: async (request, context) => {
       if (request.ressource.startsWith("/__get_code_frame__/")) {
-        const url = request.ressource.slice("/__get_code_frame__/".length)
-        const match = url.match(/:([0-9]+):([0-9]+)$/)
+        const { pathname, searchParams } = new URL(request.url)
+        const urlWithLineAndColumn = pathname.slice(
+          "/__get_code_frame__/".length,
+        )
+        const match = urlWithLineAndColumn.match(/:([0-9]+):([0-9]+)$/)
         if (!match) {
           return {
             status: 400,
             body: "Missing line and column in url",
           }
         }
-        const file = url.slice(0, match.index)
-        const line = parseInt(match[1])
-        const column = parseInt(match[2])
+        const file = urlWithLineAndColumn.slice(0, match.index)
+        let line = parseInt(match[1])
+        let column = parseInt(match[2])
         const urlInfo = context.urlGraph.getUrlInfo(file)
         if (!urlInfo) {
           return {
             status: 404,
           }
         }
+        const remap = searchParams.has("remap")
+        if (remap) {
+          const sourcemap = urlInfo.sourcemap
+          if (sourcemap) {
+            const original = await getOriginalPosition({
+              sourcemap,
+              url: file,
+              line,
+              column,
+            })
+            line = original.line
+            column = original.column
+          }
+        }
         const codeFrame = stringifyUrlSite({
           url: file,
           line,
@@ -99,6 +98,78 @@ export const jsenvPluginHtmlSupervisor = ({
           body: codeFrame,
         }
       }
+      if (request.ressource.startsWith("/__get_error_cause__/")) {
+        const file = request.ressource.slice("/__get_error_cause__/".length)
+        if (!file) {
+          return {
+            status: 400,
+            body: "Missing file in url",
+          }
+        }
+        const getErrorCauseInfo = () => {
+          const urlInfo = context.urlGraph.getUrlInfo(file)
+          if (!urlInfo) {
+            return null
+          }
+          const { error } = urlInfo
+          if (error) {
+            return error
+          }
+          // search in direct dependencies (404 or 500)
+          const { dependencies } = urlInfo
+          for (const dependencyUrl of dependencies) {
+            const dependencyUrlInfo = context.urlGraph.getUrlInfo(dependencyUrl)
+            if (dependencyUrlInfo.error) {
+              return dependencyUrlInfo.error
+            }
+          }
+          return null
+        }
+        const causeInfo = getErrorCauseInfo()
+        const body = JSON.stringify(
+          causeInfo
+            ? {
+                code: causeInfo.code,
+                message: causeInfo.message,
+                reason: causeInfo.reason,
+                stack: errorBaseUrl
+                  ? `stack mocked for snapshot`
+                  : causeInfo.stack,
+                codeFrame: causeInfo.traceMessage,
+              }
+            : null,
+          null,
+          "  ",
+        )
+        return {
+          status: 200,
+          headers: {
+            "cache-control": "no-cache",
+            "content-type": "application/json",
+            "content-length": Buffer.byteLength(body),
+          },
+          body,
+        }
+      }
+      if (request.ressource.startsWith("/__open_in_editor__/")) {
+        const file = request.ressource.slice("/__open_in_editor__/".length)
+        if (!file) {
+          return {
+            status: 400,
+            body: "Missing file in url",
+          }
+        }
+        const launch = requireFromJsenv("launch-editor")
+        launch(fileURLToPath(file), () => {
+          // ignore error for now
+        })
+        return {
+          status: 200,
+          headers: {
+            "cache-control": "no-store",
+          },
+        }
+      }
       return null
     },
     transformUrlContent: {

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)
+  }
+}

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

@@ -1,227 +1,75 @@
-const STATUSES = {
-  CONNECTING: "connecting",
-  CONNECTED: "connected",
-  DISCONNECTED: "disconnected",
-}
+import { createConnectionManager } from "./connection_manager.js"
+import { createEventsManager } from "./events_manager.js"
 
 export const createEventSourceConnection = (
   eventSourceUrl,
   {
-    retryMaxAttempt = Infinity,
-    retryAllocatedMs = Infinity,
+    withCredentials = true,
     lastEventId,
     useEventsToManageConnection = true,
+    retry = false,
+    retryMaxAttempt = Infinity,
+    retryAllocatedMs = Infinity,
   } = {},
 ) => {
-  const { EventSource } = window
-  if (typeof EventSource !== "function") {
-    return () => {}
-  }
-
-  let eventSource
-  const listenersMap = new Map()
-  const callbacksMap = new Map()
   const eventSourceOrigin = new URL(eventSourceUrl).origin
-  const addEventCallbacks = (namedCallbacks) => {
-    let listenersMapSize = listenersMap.size
-    Object.keys(namedCallbacks).forEach((eventName) => {
-      const callback = namedCallbacks[eventName]
-      const existingCallbacks = callbacksMap.get(eventName)
-      let callbacks
-      if (existingCallbacks) {
-        callbacks = existingCallbacks
-      } else {
-        callbacks = []
-        callbacksMap.set(eventName, callbacks)
-      }
-      if (callbacks.length === 0) {
-        const eventListener = (e) => {
-          if (e.origin === eventSourceOrigin) {
-            if (e.lastEventId) {
-              lastEventId = e.lastEventId
-            }
-            callbacks.forEach((eventCallback) => {
-              eventCallback(e)
-            })
-          }
-        }
-        listenersMap.set(eventName, eventListener)
-        if (eventSource) {
-          eventSource.addEventListener(eventName, eventListener)
-        }
-      }
-      callbacks.push(callback)
-    })
-    if (
-      useEventsToManageConnection &&
-      listenersMapSize === 0 &&
-      listenersMap.size > 0 &&
-      status.value !== STATUSES.CONNECTING &&
-      status.value !== STATUSES.CONNECTED
-    ) {
-      _connect()
+  const attemptConnection = ({ onOpen, onClosed }) => {
+    const url = lastEventId
+      ? addLastEventIdIntoUrlSearchParams(eventSourceUrl, lastEventId)
+      : eventSourceUrl
+    let eventSource = new EventSource(url, { withCredentials })
+    eventSource.onerror = () => {
+      eventSource.onerror = null
+      eventSource.onopen = null
+      eventSource.onmessage = null
+      eventSource = null
+      onClosed()
     }
-
-    let removed = false
-    return () => {
-      if (removed) return
-      removed = true
-      listenersMapSize = listenersMap.size
-      Object.keys(namedCallbacks).forEach((eventName) => {
-        const callback = namedCallbacks[eventName]
-        const callbacks = callbacksMap.get(eventName)
-        if (callbacks) {
-          const index = callbacks.indexOf(callback)
-          if (index > -1) {
-            callbacks.splice(index, 1)
-            if (callbacks.length === 0) {
-              const listener = listenersMap.get(eventName)
-              if (listener) {
-                listenersMap.delete(listener)
-                if (eventSource) {
-                  eventSource.removeEventListener(eventName, listener)
-                }
-              }
-            }
-          }
-        }
-      })
-      namedCallbacks = null // allow garbage collect
-      if (
-        useEventsToManageConnection &&
-        listenersMapSize > 0 &&
-        listenersMap.size === 0 &&
-        (status.value === STATUSES.CONNECTING ||
-          status.value === STATUSES.CONNECTED)
-      ) {
-        _disconnect()
-      }
+    eventSource.onopen = () => {
+      eventSource.onopen = null
+      onOpen()
     }
-  }
-
-  const status = {
-    value: "default",
-    goTo: (value) => {
-      if (value === status.value) {
-        return
+    eventSource.onmessage = (messageEvent) => {
+      if (messageEvent.origin === eventSourceOrigin) {
+        if (messageEvent.lastEventId) {
+          lastEventId = messageEvent.lastEventId
+        }
+        const event = JSON.parse(messageEvent.data)
+        eventsManager.triggerCallbacks(event)
       }
-      status.value = value
-      status.onchange()
-    },
-    onchange: () => {},
-  }
-  let _disconnect = () => {}
-
-  const attemptConnection = (url) => {
-    if (
-      status.value === STATUSES.CONNECTING ||
-      status.value === STATUSES.CONNECTED
-    ) {
-      return
     }
-    eventSource = new EventSource(url, {
-      withCredentials: true,
-    })
-    _disconnect = () => {
-      if (
-        status.value !== STATUSES.CONNECTING &&
-        status.value !== STATUSES.CONNECTED
-      ) {
-        console.warn(
-          `disconnect() ignored because connection is ${status.value}`,
-        )
-        return
-      }
+    return () => {
       if (eventSource) {
-        eventSource.onerror = undefined
         eventSource.close()
-        listenersMap.forEach((listener, eventName) => {
-          eventSource.removeEventListener(eventName, listener)
-        })
       }
-      eventSource = null
-      status.goTo(STATUSES.DISCONNECTED)
     }
-    let retryCount = 0
-    let firstRetryMs = Date.now()
-    eventSource.onerror = (errorEvent) => {
-      if (errorEvent.target.readyState === EventSource.CONNECTING) {
-        if (retryCount > retryMaxAttempt) {
-          console.info(`could not connect after ${retryMaxAttempt} attempt`)
-          _disconnect()
-          return
-        }
-
-        if (retryCount === 0) {
-          firstRetryMs = Date.now()
-        } else {
-          const allRetryDuration = Date.now() - firstRetryMs
-          if (retryAllocatedMs && allRetryDuration > retryAllocatedMs) {
-            console.info(
-              `could not connect in less than ${retryAllocatedMs} ms`,
-            )
-            _disconnect()
-            return
-          }
+  }
+  const connectionManager = createConnectionManager(attemptConnection, {
+    retry,
+    retryMaxAttempt,
+    retryAllocatedMs,
+  })
+  const eventsManager = createEventsManager({
+    effect: () => {
+      if (useEventsToManageConnection) {
+        connectionManager.connect()
+        return () => {
+          connectionManager.disconnect()
         }
-
-        retryCount++
-        status.goTo(STATUSES.CONNECTING)
-        return
-      }
-
-      if (errorEvent.target.readyState === EventSource.CLOSED) {
-        _disconnect()
-        return
       }
-    }
-    eventSource.onopen = () => {
-      status.goTo(STATUSES.CONNECTED)
-    }
-    listenersMap.forEach((listener, eventName) => {
-      eventSource.addEventListener(eventName, listener)
-    })
-    if (!listenersMap.has("welcome")) {
-      addEventCallbacks({
-        welcome: () => {}, // to update lastEventId
-      })
-    }
-    status.goTo(STATUSES.CONNECTING)
-  }
-
-  let _connect = () => {
-    attemptConnection(eventSourceUrl)
-    _connect = () => {
-      attemptConnection(
-        lastEventId
-          ? addLastEventIdIntoUrlSearchParams(eventSourceUrl, lastEventId)
-          : eventSourceUrl,
-      )
-    }
-  }
-
-  const removePageUnloadListener = listenPageUnload(() => {
-    if (
-      status.value === STATUSES.CONNECTING ||
-      status.value === STATUSES.CONNECTED
-    ) {
-      _disconnect()
-    }
+      return null
+    },
   })
 
-  const destroy = () => {
-    removePageUnloadListener()
-    _disconnect()
-    listenersMap.clear()
-    callbacksMap.clear()
-  }
-
   return {
-    status,
-    connect: () => _connect(),
-    addEventCallbacks,
-    disconnect: () => _disconnect(),
-    destroy,
+    readyState: connectionManager.readyState,
+    listenEvents: (namedCallbacks) => {
+      return eventsManager.addCallbacks(namedCallbacks)
+    },
+    destroy: () => {
+      connectionManager.destroy()
+      eventsManager.destroy()
+    },
   }
 }
 
@@ -233,57 +81,3 @@ const addLastEventIdIntoUrlSearchParams = (url, lastEventId) => {
   }
   return `${url}last-event-id=${encodeURIComponent(lastEventId)}`
 }
-
-// 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)
-  }
-}