@jsenv/core 27.4.0 → 27.5.0

package/src/plugins/plugins.js

@@ -19,16 +19,17 @@ import { jsenvPluginMinification } from "./minification/jsenv_plugin_minificatio
 import { jsenvPluginImportMetaHot } from "./import_meta_hot/jsenv_plugin_import_meta_hot.js"
 import { jsenvPluginAutoreload } from "./autoreload/jsenv_plugin_autoreload.js"
 import { jsenvPluginCacheControl } from "./cache_control/jsenv_plugin_cache_control.js"
+// dev only
+import { jsenvPluginExplorer } from "./explorer/jsenv_plugin_explorer.js"
 
 export const getCorePlugins = ({
   rootDirectoryUrl,
-  urlGraph,
   scenario,
   runtimeCompat,
 
   urlAnalysis = {},
   htmlSupervisor,
-  nodeEsmResolution,
+  nodeEsmResolution = true,
   fileSystemMagicResolution,
   directoryReferenceAllowed,
   transpilation = true,
@@ -38,6 +39,7 @@ export const getCorePlugins = ({
   clientAutoreload = false,
   clientFileChangeCallbackList,
   clientFilesPruneCallbackList,
+  explorer,
 } = {}) => {
   if (htmlSupervisor === true) {
     htmlSupervisor = {}
@@ -45,9 +47,13 @@ export const getCorePlugins = ({
   if (nodeEsmResolution === true) {
     nodeEsmResolution = {}
   }
+  if (fileSystemMagicResolution === true) {
+    fileSystemMagicResolution = {}
+  }
   if (clientAutoreload === true) {
     clientAutoreload = {}
   }
+
   return [
     jsenvPluginUrlAnalysis({ rootDirectoryUrl, ...urlAnalysis }),
     jsenvPluginTranspilation(transpilation),
@@ -63,12 +69,7 @@ export const getCorePlugins = ({
     jsenvPluginHttpUrls(),
     jsenvPluginLeadingSlash(),
     // before url resolution to handle "js_import_export" resolution
-    jsenvPluginNodeEsmResolution({
-      rootDirectoryUrl,
-      urlGraph,
-      runtimeCompat,
-      ...nodeEsmResolution,
-    }),
+    jsenvPluginNodeEsmResolution(nodeEsmResolution),
     jsenvPluginUrlResolution(),
     jsenvPluginUrlVersion(),
     jsenvPluginCommonJsGlobals(),
@@ -90,5 +91,6 @@ export const getCorePlugins = ({
         ]
       : []),
     jsenvPluginCacheControl(),
+    ...(explorer ? [jsenvPluginExplorer(explorer)] : []),
   ]
 }

package/src/{helpers/event_source/event_source.js → plugins/server_events/client/event_source_connection.js}

@@ -1,5 +1,3 @@
-/* eslint-env browser */
-
 const STATUSES = {
   CONNECTING: "connecting",
   CONNECTED: "connected",
@@ -8,7 +6,12 @@ const STATUSES = {
 
 export const createEventSourceConnection = (
   eventSourceUrl,
-  { retryMaxAttempt = Infinity, retryAllocatedMs = Infinity, lastEventId } = {},
+  {
+    retryMaxAttempt = Infinity,
+    retryAllocatedMs = Infinity,
+    lastEventId,
+    useEventsToManageConnection = true,
+  } = {},
 ) => {
   const { EventSource } = window
   if (typeof EventSource !== "function") {
@@ -16,25 +19,85 @@ export const createEventSourceConnection = (
   }
 
   let eventSource
-  const events = {}
+  const listenersMap = new Map()
+  const callbacksMap = new Map()
   const eventSourceOrigin = new URL(eventSourceUrl).origin
-  const addEventCallbacks = (eventCallbacks) => {
-    Object.keys(eventCallbacks).forEach((eventName) => {
-      const eventCallback = eventCallbacks[eventName]
-      events[eventName] = (e) => {
-        if (e.origin === eventSourceOrigin) {
-          if (e.lastEventId) {
-            lastEventId = e.lastEventId
+  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)
+            })
           }
-          eventCallback(e)
+        }
+        listenersMap.set(eventName, eventListener)
+        if (eventSource) {
+          eventSource.addEventListener(eventName, eventListener)
         }
       }
-      if (eventSource) {
-        eventSource.addEventListener(eventName, events[eventName])
-      }
+      callbacks.push(callback)
     })
+    if (
+      useEventsToManageConnection &&
+      listenersMapSize === 0 &&
+      listenersMap.size > 0 &&
+      status.value !== STATUSES.CONNECTING &&
+      status.value !== STATUSES.CONNECTED
+    ) {
+      _connect()
+    }
+
+    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()
+      }
+    }
   }
-  addEventCallbacks(events)
 
   const status = {
     value: "default",
@@ -50,6 +113,12 @@ export const createEventSourceConnection = (
   let _disconnect = () => {}
 
   const attemptConnection = (url) => {
+    if (
+      status.value === STATUSES.CONNECTING ||
+      status.value === STATUSES.CONNECTED
+    ) {
+      return
+    }
     eventSource = new EventSource(url, {
       withCredentials: true,
     })
@@ -63,11 +132,13 @@ export const createEventSourceConnection = (
         )
         return
       }
-      eventSource.onerror = undefined
-      eventSource.close()
-      Object.keys(events).forEach((eventName) => {
-        eventSource.removeEventListener(eventName, events[eventName])
-      })
+      if (eventSource) {
+        eventSource.onerror = undefined
+        eventSource.close()
+        listenersMap.forEach((listener, eventName) => {
+          eventSource.removeEventListener(eventName, listener)
+        })
+      }
       eventSource = null
       status.goTo(STATUSES.DISCONNECTED)
     }
@@ -107,22 +178,20 @@ export const createEventSourceConnection = (
     eventSource.onopen = () => {
       status.goTo(STATUSES.CONNECTED)
     }
-    Object.keys(events).forEach((eventName) => {
-      eventSource.addEventListener(eventName, events[eventName])
+    listenersMap.forEach((listener, eventName) => {
+      eventSource.addEventListener(eventName, listener)
     })
-    if (!events.hasOwnProperty("welcome")) {
-      eventSource.addEventListener("welcome", (e) => {
-        if (e.origin === eventSourceOrigin && e.lastEventId) {
-          lastEventId = e.lastEventId
-        }
+    if (!listenersMap.has("welcome")) {
+      addEventCallbacks({
+        welcome: () => {}, // to update lastEventId
       })
     }
     status.goTo(STATUSES.CONNECTING)
   }
 
-  let connect = () => {
+  let _connect = () => {
     attemptConnection(eventSourceUrl)
-    connect = () => {
+    _connect = () => {
       attemptConnection(
         lastEventId
           ? addLastEventIdIntoUrlSearchParams(eventSourceUrl, lastEventId)
@@ -143,11 +212,13 @@ export const createEventSourceConnection = (
   const destroy = () => {
     removePageUnloadListener()
     _disconnect()
+    listenersMap.clear()
+    callbacksMap.clear()
   }
 
   return {
     status,
-    connect,
+    connect: () => _connect(),
     addEventCallbacks,
     disconnect: () => _disconnect(),
     destroy,

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

@@ -0,0 +1,17 @@
+import { createEventSourceConnection } from "./event_source_connection.js"
+
+const eventsourceConnection = createEventSourceConnection(
+  document.location.href,
+  {
+    retryMaxAttempt: Infinity,
+    retryAllocatedMs: 20 * 1000,
+  },
+)
+const { status, connect, addEventCallbacks, disconnect } = eventsourceConnection
+window.__server_events__ = {
+  addEventCallbacks,
+  status,
+  connect,
+  disconnect,
+}
+connect()

package/src/plugins/server_events/jsenv_plugin_server_events_client_injection.js

@@ -0,0 +1,48 @@
+/*
+ * This plugin is very special because it is here
+ * to provide "serverEvents" used by other plugins
+ */
+
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  injectScriptNodeAsEarlyAsPossible,
+  createHtmlNode,
+} from "@jsenv/ast"
+
+const serverEventsClientFileUrl = new URL(
+  "./client/server_events_client.js",
+  import.meta.url,
+).href
+
+export const jsenvPluginServerEventsClientInjection = () => {
+  return {
+    name: "jsenv:server_events_client_injection",
+    appliesDuring: "*",
+    transformUrlContent: {
+      html: (htmlUrlInfo, context) => {
+        const htmlAst = parseHtmlString(htmlUrlInfo.content)
+        const [serverEventsClientFileReference] = context.referenceUtils.inject(
+          {
+            type: "script_src",
+            expectedType: "js_module",
+            specifier: serverEventsClientFileUrl,
+          },
+        )
+        injectScriptNodeAsEarlyAsPossible(
+          htmlAst,
+          createHtmlNode({
+            "tagName": "script",
+            "type": "module",
+            "src": serverEventsClientFileReference.generatedSpecifier,
+            "injected-by": "jsenv:server_events",
+          }),
+        )
+        const htmlModified = stringifyHtmlAst(htmlAst)
+        return {
+          content: htmlModified,
+        }
+      },
+    },
+  }
+}

package/src/plugins/server_events/server_events_dispatcher.js

@@ -0,0 +1,69 @@
+import { createSSERoom } from "@jsenv/server"
+import { createCallbackListNotifiedOnce } from "@jsenv/abort"
+
+export const createServerEventsDispatcher = () => {
+  const destroyCallbackList = createCallbackListNotifiedOnce()
+  const rooms = []
+  const sseRoomLimit = 100
+
+  destroyCallbackList.add(() => {
+    rooms.forEach((room) => {
+      room.close()
+    })
+  })
+
+  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)
+            }
+          }
+        },
+      })
+      room.request = request
+      return room
+    },
+    dispatch: ({ type, data }) => {
+      rooms.forEach((room) =>
+        room.sendEventToAllClients({
+          type,
+          data: JSON.stringify(data),
+        }),
+      )
+    },
+    dispatchToRoomsMatching: ({ type, data }, predicate) => {
+      rooms.forEach((room) => {
+        if (predicate(room)) {
+          room.sendEventToAllClients({
+            type,
+            data: JSON.stringify(data),
+          })
+        }
+      })
+    },
+    destroy: () => {
+      destroyCallbackList.notify()
+    },
+  }
+}

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

@@ -11,6 +11,7 @@ import {
   getHtmlNodePosition,
   setHtmlNodeAttributes,
   setHtmlNodeText,
+  analyzeScriptNode,
   injectScriptNodeAsEarlyAsPossible,
   createHtmlNode,
 } from "@jsenv/ast"
@@ -49,12 +50,12 @@ export const jsenvPluginAsJsClassicHtml = ({
           }
         }
         const visitScriptNodes = (node) => {
-          const type = getHtmlNodeAttribute(node, "type")
-          if (type === "module") {
+          const { type } = analyzeScriptNode(node)
+          if (type === "js_module") {
             moduleScriptNodes.push(node)
             return
           }
-          if (type === undefined || type === "text/javascript") {
+          if (type === "js_classic") {
             classicScriptNodes.push(node)
             return
           }

package/src/plugins/transpilation/babel/new_stylesheet/client/new_stylesheet.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
-// copy paste to help finding the file (npm and node modules would make it complex)
+// construct-style-sheets-polyfill@3.1.0
 // to keep in sync with https://github.com/calebdwilliams/construct-style-sheets
+// copy pasted into jsenv codebase to inject this code with more ease
 ;(function () {
   "use strict"
 
@@ -15,29 +16,6 @@
   var defineProperty = Object.defineProperty
   var forEach = Array.prototype.forEach
 
-  var hasBrokenRules = (function () {
-    var style = bootstrapper.createElement("style")
-    style.textContent = '.x{content:"y"}'
-    bootstrapper.body.appendChild(style)
-    return style.sheet.cssRules[0].style.content !== '"y"'
-  })()
-  var brokenRulePatterns = [/content:\s*["']/gm]
-  function fixBrokenRules(content) {
-    return brokenRulePatterns.reduce(function (acc, pattern) {
-      return acc.replace(pattern, "$&%%%")
-    }, content)
-  }
-  var placeholderPatterns = [/(content:\s*["'])%%%/gm]
-  var getCssText = hasBrokenRules
-    ? function (rule) {
-        return placeholderPatterns.reduce(function (acc, pattern) {
-          return acc.replace(pattern, "$1")
-        }, rule.cssText)
-      }
-    : function (rule) {
-        return rule.cssText
-      }
-
   var importPattern = /@import.+?;?$/gm
   function rejectImports(contents) {
     var _contents = contents.replace(importPattern, "")
@@ -48,16 +26,6 @@
     }
     return _contents.trim()
   }
-  function clearRules(sheet) {
-    for (var i = 0; i < sheet.cssRules.length; i++) {
-      sheet.deleteRule(0)
-    }
-  }
-  function insertAllRules(from, to) {
-    forEach.call(from.cssRules, function (rule, i) {
-      to.insertRule(getCssText(rule), i)
-    })
-  }
   function isElementConnected(element) {
     return "isConnected" in element
       ? element.isConnected
@@ -111,9 +79,10 @@
       ? nonConstructedProto.isPrototypeOf(instance)
       : false
   }
-  var $basicStyleSheet = new WeakMap()
+  var $basicStyleElement = new WeakMap()
   var $locations = new WeakMap()
   var $adoptersByLocation = new WeakMap()
+  var $appliedMethods = new WeakMap()
   function addAdopterLocation(sheet, location) {
     var adopter = document.createElement("style")
     $adoptersByLocation.get(sheet).set(location, adopter)
@@ -134,12 +103,14 @@
   }
   function restyleAdopter(sheet, adopter) {
     requestAnimationFrame(function () {
-      clearRules(adopter.sheet)
-      insertAllRules($basicStyleSheet.get(sheet), adopter.sheet)
+      adopter.textContent = $basicStyleElement.get(sheet).textContent
+      $appliedMethods.get(sheet).forEach(function (command) {
+        return adopter.sheet[command.method].apply(adopter.sheet, command.args)
+      })
     })
   }
   function checkInvocationCorrectness(self) {
-    if (!$basicStyleSheet.has(self)) {
+    if (!$basicStyleElement.has(self)) {
       throw new TypeError("Illegal invocation")
     }
   }
@@ -147,9 +118,10 @@
     var self = this
     var style = document.createElement("style")
     bootstrapper.body.appendChild(style)
-    $basicStyleSheet.set(self, style.sheet)
+    $basicStyleElement.set(self, style)
     $locations.set(self, [])
     $adoptersByLocation.set(self, new WeakMap())
+    $appliedMethods.set(self, [])
   }
   var proto$1 = ConstructedStyleSheet.prototype
   proto$1.replace = function replace(contents) {
@@ -164,11 +136,8 @@
     checkInvocationCorrectness(this)
     if (typeof contents === "string") {
       var self_1 = this
-      var style = $basicStyleSheet.get(self_1).ownerNode
-      style.textContent = hasBrokenRules
-        ? fixBrokenRules(rejectImports(contents))
-        : rejectImports(contents)
-      $basicStyleSheet.set(self_1, style.sheet)
+      $basicStyleElement.get(self_1).textContent = rejectImports(contents)
+      $appliedMethods.set(self_1, [])
       $locations.get(self_1).forEach(function (location) {
         if (location.isConnected()) {
           restyleAdopter(self_1, getAdopterByLocation(self_1, location))
@@ -181,7 +150,15 @@
     enumerable: true,
     get: function cssRules() {
       checkInvocationCorrectness(this)
-      return $basicStyleSheet.get(this).cssRules
+      return $basicStyleElement.get(this).sheet.cssRules
+    },
+  })
+  defineProperty(proto$1, "media", {
+    configurable: true,
+    enumerable: true,
+    get: function media() {
+      checkInvocationCorrectness(this)
+      return $basicStyleElement.get(this).sheet.media
     },
   })
   cssStyleSheetMethods.forEach(function (method) {
@@ -189,22 +166,15 @@
       var self = this
       checkInvocationCorrectness(self)
       var args = arguments
+      $appliedMethods.get(self).push({ method: method, args: args })
       $locations.get(self).forEach(function (location) {
         if (location.isConnected()) {
           var sheet = getAdopterByLocation(self, location).sheet
           sheet[method].apply(sheet, args)
         }
       })
-      if (hasBrokenRules) {
-        if (method === "insertRule") {
-          args[0] = fixBrokenRules(args[0])
-        }
-        if (method === "addRule") {
-          args[1] = fixBrokenRules(args[1])
-        }
-      }
-      var basic = $basicStyleSheet.get(self)
-      return basic[method].apply(basic, args)
+      var basicSheet = $basicStyleElement.get(self).sheet
+      return basicSheet[method].apply(basicSheet, args)
     }
   })
   defineProperty(ConstructedStyleSheet, Symbol.hasInstance, {