@jsenv/core 27.6.1 → 27.8.1

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

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

@@ -0,0 +1,75 @@
+export const createEventsManager = ({ effect = () => {} } = {}) => {
+  const callbacksMap = new Map()
+  let cleanup
+  const addCallbacks = (namedCallbacks) => {
+    let callbacksMapSize = callbacksMap.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)
+      }
+      callbacks.push(callback)
+    })
+    if (effect && callbacksMapSize === 0 && callbacksMapSize.size > 0) {
+      cleanup = effect()
+    }
+
+    let removed = false
+    return () => {
+      if (removed) return
+      removed = true
+      callbacksMapSize = callbacksMap.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) {
+              callbacksMap.delete(eventName)
+            }
+          }
+        }
+      })
+      namedCallbacks = null // allow garbage collect
+      if (
+        cleanup &&
+        typeof cleanup === "function" &&
+        callbacksMapSize > 0 &&
+        callbacksMapSize.size === 0
+      ) {
+        cleanup()
+        cleanup = null
+      }
+    }
+  }
+
+  const triggerCallbacks = (event) => {
+    const callbacks = callbacksMap.get(event.type)
+    if (callbacks) {
+      callbacks.forEach((callback) => {
+        callback(event)
+      })
+    }
+  }
+
+  const destroy = () => {
+    callbacksMap.clear()
+    if (cleanup) {
+      cleanup()
+      cleanup = null
+    }
+  }
+
+  return {
+    addCallbacks,
+    triggerCallbacks,
+    destroy,
+  }
+}

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

@@ -1,17 +1,18 @@
-import { createEventSourceConnection } from "./event_source_connection.js"
+/* globals self */
 
-const eventsourceConnection = createEventSourceConnection(
-  document.location.href,
-  {
-    retryMaxAttempt: Infinity,
-    retryAllocatedMs: 20 * 1000,
-  },
-)
-const { status, connect, addEventCallbacks, disconnect } = eventsourceConnection
+import { createWebSocketConnection } from "./web_socket_connection.js"
+
+const websocketScheme = self.location.protocol === "https:" ? "wss" : "ws"
+const websocketUrl = `${websocketScheme}://${self.location.host}${self.location.pathname}${self.location.search}`
+const websocketConnection = createWebSocketConnection(websocketUrl, {
+  retry: true,
+  retryAllocatedMs: 10_000,
+})
+const { readyState, connect, disconnect, listenEvents } = websocketConnection
 window.__server_events__ = {
-  addEventCallbacks,
-  status,
+  readyState,
   connect,
   disconnect,
+  listenEvents,
 }
 connect()

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

@@ -0,0 +1,81 @@
+import { createConnectionManager } from "./connection_manager.js"
+import { createEventsManager } from "./events_manager.js"
+
+export const createWebSocketConnection = (
+  websocketUrl,
+  {
+    protocols = ["jsenv"],
+    useEventsToManageConnection = true,
+    retry = false,
+    retryAfter = 1000,
+    retryMaxAttempt = Infinity,
+    retryAllocatedMs = Infinity,
+  } = {},
+) => {
+  const connectionManager = createConnectionManager(
+    ({ onClosed, onOpen }) => {
+      let socket = new WebSocket(websocketUrl, protocols)
+      let interval
+      const cleanup = () => {
+        if (socket) {
+          socket.onerror = null
+          socket.onopen = null
+          socket.onclose = null
+          socket.onmessage = null
+          socket = null
+          clearInterval(interval)
+        }
+      }
+      socket.onerror = () => {
+        cleanup()
+        onClosed()
+      }
+      socket.onopen = () => {
+        socket.onopen = null
+        onOpen()
+        interval = setInterval(() => {
+          socket.send('{"type":"ping"}')
+        }, 30_000)
+      }
+      socket.onclose = () => {
+        cleanup()
+        onClosed()
+      }
+      socket.onmessage = (messageEvent) => {
+        const event = JSON.parse(messageEvent.data)
+        eventsManager.triggerCallbacks(event)
+      }
+      return () => {
+        if (socket) {
+          socket.close()
+          cleanup()
+        }
+      }
+    },
+    { retry, retryAfter, retryMaxAttempt, retryAllocatedMs },
+  )
+  const eventsManager = createEventsManager({
+    effect: () => {
+      if (useEventsToManageConnection) {
+        connectionManager.connect()
+        return () => {
+          connectionManager.disconnect()
+        }
+      }
+      return null
+    },
+  })
+
+  return {
+    readyState: connectionManager.readyState,
+    connect: connectionManager.connect,
+    disconnect: connectionManager.disconnect,
+    listenEvents: (namedCallbacks) => {
+      return eventsManager.addCallbacks(namedCallbacks)
+    },
+    destroy: () => {
+      connectionManager.destroy()
+      eventsManager.destroy()
+    },
+  }
+}

package/src/plugins/server_events/server_events_dispatcher.js

@@ -1,69 +1,85 @@
-import { createSSERoom } from "@jsenv/server"
-import { createCallbackListNotifiedOnce } from "@jsenv/abort"
-
 export const createServerEventsDispatcher = () => {
-  const destroyCallbackList = createCallbackListNotifiedOnce()
-  const rooms = []
-  const sseRoomLimit = 100
+  const clients = []
+  const MAX_CLIENTS = 100
 
-  destroyCallbackList.add(() => {
-    rooms.forEach((room) => {
-      room.close()
-    })
-  })
+  const addClient = (client) => {
+    clients.push(client)
+    if (clients.length >= MAX_CLIENTS) {
+      const firstClient = clients.shift()
+      firstClient.close()
+    }
+    return () => {
+      client.close()
+      const index = clients.indexOf(client)
+      if (index > -1) {
+        clients.splice(index, 1)
+      }
+    }
+  }
 
   return {
-    addRoom: (request) => {
-      const existingRoom = rooms.find(
-        (roomCandidate) =>
-          roomCandidate.request.ressource === request.ressource,
-      )
-      if (existingRoom) {
-        return existingRoom
-      }
-      const room = createSSERoom({
-        retryDuration: 2000,
-        historyLength: 100,
-        welcomeEventEnabled: true,
-        effect: () => {
-          rooms.push(room)
-          if (rooms.length >= sseRoomLimit) {
-            const firstRoom = rooms.shift()
-            firstRoom.close()
-          }
-          return () => {
-            // when the last client leaves the room it is closed and removed from the list
-            room.close()
-            const index = rooms.indexOf(room)
-            if (index > -1) {
-              rooms.splice(index, 1)
+    addWebsocket: (websocket, request) => {
+      const client = {
+        request,
+        getReadystate: () => {
+          return websocket.readyState
+        },
+        sendEvent: (event) => {
+          websocket.send(JSON.stringify(event))
+        },
+        close: (reason) => {
+          const closePromise = new Promise((resolve, reject) => {
+            websocket.onclose = () => {
+              websocket.onclose = null
+              websocket.onerror = null
+              resolve()
+            }
+            websocket.onerror = (e) => {
+              websocket.onclose = null
+              websocket.onerror = null
+              reject(e)
             }
-          }
+          })
+          websocket.close(reason)
+          return closePromise
         },
-      })
-      room.request = request
-      return room
+        destroy: () => {
+          websocket.terminate()
+        },
+      }
+      client.sendEvent({ type: "welcome" })
+      return addClient(client)
     },
-    dispatch: ({ type, data }) => {
-      rooms.forEach((room) =>
-        room.sendEventToAllClients({
-          type,
-          data: JSON.stringify(data),
-        }),
-      )
+    // we could add "addEventSource" and let clients connect using
+    // new WebSocket or new EventSource
+    // in practice the new EventSource won't be used
+    // so "serverEventsDispatcher.addEventSource" is not implemented
+    // addEventSource: (request) => {},
+    dispatch: (event) => {
+      clients.forEach((client) => {
+        if (client.getReadystate() === 1) {
+          client.sendEvent(event)
+        }
+      })
     },
-    dispatchToRoomsMatching: ({ type, data }, predicate) => {
-      rooms.forEach((room) => {
-        if (predicate(room)) {
-          room.sendEventToAllClients({
-            type,
-            data: JSON.stringify(data),
-          })
+    dispatchToClientsMatching: (event, predicate) => {
+      clients.forEach((client) => {
+        if (client.getReadystate() === 1 && predicate(client)) {
+          client.sendEvent(event)
         }
       })
     },
+    close: async (reason) => {
+      await Promise.all(
+        clients.map(async (client) => {
+          await client.close(reason)
+        }),
+      )
+    },
     destroy: () => {
-      destroyCallbackList.notify()
+      clients.forEach((client) => {
+        client.destroy()
+      })
     },
   }
 }

package/src/plugins/toolbar/jsenv_plugin_toolbar.js

@@ -17,9 +17,7 @@ export const jsenvPluginToolbar = ({ logs = false } = {}) => {
 
   return {
     name: "jsenv:toolbar",
-    appliesDuring: {
-      dev: true,
-    },
+    appliesDuring: { dev: true, test: false },
     transformUrlContent: {
       html: ({ url, content }, { referenceUtils }) => {
         if (url === toolbarHtmlClientFileUrl) {

package/src/plugins/transpilation/import_assertions/jsenv_plugin_import_assertions.js

@@ -43,7 +43,7 @@ export const jsenvPluginImportAssertions = ({
       //     We would have to tell rollup to ignore import with assertion
       //   - means rollup can bundle more js file together
       //   - means url versioning can work for css inlined in js
-      if (context.scenario === "build") {
+      if (context.scenarios.build) {
         json = true
         css = true
         text = true