@jsenv/core 27.3.3 → 27.5.0

package/src/plugins/plugin_controller.js

@@ -1,44 +1,63 @@
 import { timeStart } from "@jsenv/server"
 
-export const createPluginController = ({
-  plugins,
-  scenario,
-  hooks = [
-    "init",
-    "resolveUrl",
-    "redirectUrl",
-    "fetchUrlContent",
-    "transformUrlContent",
-    "transformUrlSearchParams",
-    "formatUrl",
-    "finalizeUrlContent",
-    "cooked",
-    "destroy",
-  ],
-}) => {
-  plugins = flattenAndFilterPlugins(plugins, { scenario })
-  // precompute a list of hooks per hookName
-  // For one major reason:
+const HOOK_NAMES = [
+  "init",
+  "serve", // is called only during dev/tests
+  "resolveUrl",
+  "redirectUrl",
+  "fetchUrlContent",
+  "transformUrlContent",
+  "transformUrlSearchParams",
+  "formatUrl",
+  "finalizeUrlContent",
+  "bundle", // is called only during build
+  "optimizeUrlContent", // is called only during build
+  "cooked",
+  "augmentResponse", // is called only during dev/tests
+  "destroy",
+]
+
+export const createPluginController = ({ plugins, scenario }) => {
+  const flatPlugins = flattenAndFilterPlugins(plugins, { scenario })
+  // precompute a list of hooks per hookName for one major reason:
   // - When debugging, there is less iteration
-  // And also it should increase perf as there is less work to do
+  // also it should increase perf as there is less work to do
+
   const hookGroups = {}
-  const addHook = (hookName) => {
-    const hooks = []
-    plugins.forEach((plugin) => {
-      const hook = plugin[hookName]
-      if (hook) {
-        hooks.push({
+  const addPlugin = (plugin, { position = "start" }) => {
+    Object.keys(plugin).forEach((key) => {
+      if (key === "name" || key === "appliesDuring" || key === "serverEvents") {
+        return
+      }
+      const isHook = HOOK_NAMES.includes(key)
+      if (!isHook) {
+        console.warn(`Unexpected "${key}" property on "${plugin.name}" plugin`)
+      }
+      const hookName = key
+      const hookValue = plugin[hookName]
+      if (hookValue) {
+        const group = hookGroups[hookName] || (hookGroups[hookName] = [])
+        const hook = {
           plugin,
-          hookName,
-          value: hook,
-        })
+          name: hookName,
+          value: hookValue,
+        }
+        if (position === "start") {
+          group.push(hook)
+        } else {
+          group.unshift(hook)
+        }
       }
     })
-    hookGroups[hookName] = hooks
-    return hooks
   }
-  hooks.forEach((hookName) => {
-    addHook(hookName)
+  const pushPlugin = (plugin) => {
+    addPlugin(plugin, { position: "start" })
+  }
+  const unshiftPlugin = (plugin) => {
+    addPlugin(plugin, { position: "end" })
+  }
+  flatPlugins.forEach((plugin) => {
+    pushPlugin(plugin)
   })
 
   let currentPlugin = null
@@ -49,15 +68,18 @@ export const createPluginController = ({
       return null
     }
     currentPlugin = hook.plugin
-    currentHookName = hook.hookName
-    const timeEnd = timeStart(
-      `${currentHookName}-${currentPlugin.name.replace("jsenv:", "")}`,
-    )
+    currentHookName = hook.name
+    let timeEnd
+    if (info.timing) {
+      timeEnd = timeStart(
+        `${currentHookName}-${currentPlugin.name.replace("jsenv:", "")}`,
+      )
+    }
     let valueReturned = hookFn(info, context)
     if (info.timing) {
       Object.assign(info.timing, timeEnd())
     }
-    valueReturned = assertAndNormalizeReturnValue(hook.hookName, valueReturned)
+    valueReturned = assertAndNormalizeReturnValue(hook.name, valueReturned)
     currentPlugin = null
     currentHookName = null
     return valueReturned
@@ -68,15 +90,18 @@ export const createPluginController = ({
       return null
     }
     currentPlugin = hook.plugin
-    currentHookName = hook.hookName
-    const timeEnd = timeStart(
-      `${currentHookName}-${currentPlugin.name.replace("jsenv:", "")}`,
-    )
+    currentHookName = hook.name
+    let timeEnd
+    if (info.timing) {
+      timeEnd = timeStart(
+        `${currentHookName}-${currentPlugin.name.replace("jsenv:", "")}`,
+      )
+    }
     let valueReturned = await hookFn(info, context)
     if (info.timing) {
       Object.assign(info.timing, timeEnd())
     }
-    valueReturned = assertAndNormalizeReturnValue(hook.hookName, valueReturned)
+    valueReturned = assertAndNormalizeReturnValue(hook.name, valueReturned)
     currentPlugin = null
     currentHookName = null
     return valueReturned
@@ -84,36 +109,45 @@ export const createPluginController = ({
 
   const callHooks = (hookName, info, context, callback) => {
     const hooks = hookGroups[hookName]
-    for (const hook of hooks) {
-      const returnValue = callHook(hook, info, context)
-      if (returnValue) {
-        callback(returnValue)
+    if (hooks) {
+      for (const hook of hooks) {
+        const returnValue = callHook(hook, info, context)
+        if (returnValue && callback) {
+          callback(returnValue)
+        }
       }
     }
   }
   const callAsyncHooks = async (hookName, info, context, callback) => {
     const hooks = hookGroups[hookName]
-    await hooks.reduce(async (previous, hook) => {
-      await previous
-      const returnValue = await callAsyncHook(hook, info, context)
-      if (returnValue && callback) {
-        await callback(returnValue)
-      }
-    }, Promise.resolve())
+    if (hooks) {
+      await hooks.reduce(async (previous, hook) => {
+        await previous
+        const returnValue = await callAsyncHook(hook, info, context)
+        if (returnValue && callback) {
+          await callback(returnValue)
+        }
+      }, Promise.resolve())
+    }
   }
 
   const callHooksUntil = (hookName, info, context) => {
     const hooks = hookGroups[hookName]
-    for (const hook of hooks) {
-      const returnValue = callHook(hook, info, context)
-      if (returnValue) {
-        return returnValue
+    if (hooks) {
+      for (const hook of hooks) {
+        const returnValue = callHook(hook, info, context)
+        if (returnValue) {
+          return returnValue
+        }
       }
     }
     return null
   }
   const callAsyncHooksUntil = (hookName, info, context) => {
     const hooks = hookGroups[hookName]
+    if (!hooks) {
+      return null
+    }
     if (hooks.length === 0) {
       return null
     }
@@ -136,8 +170,9 @@ export const createPluginController = ({
   }
 
   return {
-    plugins,
-    addHook,
+    plugins: flatPlugins,
+    pushPlugin,
+    unshiftPlugin,
     getHookFunction,
     callHook,
     callAsyncHook,
@@ -152,8 +187,8 @@ export const createPluginController = ({
   }
 }
 
-const flattenAndFilterPlugins = (pluginsRaw, { scenario }) => {
-  const plugins = []
+const flattenAndFilterPlugins = (plugins, { scenario }) => {
+  const flatPlugins = []
   const visitPluginEntry = (pluginEntry) => {
     if (Array.isArray(pluginEntry)) {
       pluginEntry.forEach((value) => visitPluginEntry(value))
@@ -169,7 +204,7 @@ const flattenAndFilterPlugins = (pluginsRaw, { scenario }) => {
         return
       }
       if (appliesDuring === "*") {
-        plugins.push(pluginEntry)
+        flatPlugins.push(pluginEntry)
         return
       }
       if (typeof appliesDuring === "string") {
@@ -179,7 +214,7 @@ const flattenAndFilterPlugins = (pluginsRaw, { scenario }) => {
           )
         }
         if (appliesDuring === scenario) {
-          plugins.push(pluginEntry)
+          flatPlugins.push(pluginEntry)
         }
         return
       }
@@ -189,7 +224,7 @@ const flattenAndFilterPlugins = (pluginsRaw, { scenario }) => {
         )
       }
       if (appliesDuring[scenario]) {
-        plugins.push(pluginEntry)
+        flatPlugins.push(pluginEntry)
         return
       }
       if (pluginEntry.destroy) {
@@ -199,8 +234,8 @@ const flattenAndFilterPlugins = (pluginsRaw, { scenario }) => {
     }
     throw new Error(`plugin must be objects, got ${pluginEntry}`)
   }
-  pluginsRaw.forEach((plugin) => visitPluginEntry(plugin))
-  return plugins
+  plugins.forEach((plugin) => visitPluginEntry(plugin))
+  return flatPlugins
 }
 
 const getHookFunction = (

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(),
@@ -83,8 +84,6 @@ export const getCorePlugins = ({
       ? [
           jsenvPluginAutoreload({
             ...clientAutoreload,
-            rootDirectoryUrl,
-            urlGraph,
             scenario,
             clientFileChangeCallbackList,
             clientFilesPruneCallbackList,
@@ -92,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,27 +1,103 @@
-/* eslint-env browser */
+const STATUSES = {
+  CONNECTING: "connecting",
+  CONNECTED: "connected",
+  DISCONNECTED: "disconnected",
+}
 
 export const createEventSourceConnection = (
   eventSourceUrl,
-  events = {},
-  { retryMaxAttempt = Infinity, retryAllocatedMs = Infinity, lastEventId } = {},
+  {
+    retryMaxAttempt = Infinity,
+    retryAllocatedMs = Infinity,
+    lastEventId,
+    useEventsToManageConnection = true,
+  } = {},
 ) => {
   const { EventSource } = window
   if (typeof EventSource !== "function") {
     return () => {}
   }
 
+  let eventSource
+  const listenersMap = new Map()
+  const callbacksMap = new Map()
   const eventSourceOrigin = new URL(eventSourceUrl).origin
-  Object.keys(events).forEach((eventName) => {
-    const eventCallback = events[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)
+            })
+          }
+        }
+        listenersMap.set(eventName, eventListener)
+        if (eventSource) {
+          eventSource.addEventListener(eventName, eventListener)
         }
-        eventCallback(e)
       }
+      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()
+      }
+    }
+  }
 
   const status = {
     value: "default",
@@ -37,22 +113,34 @@ export const createEventSourceConnection = (
   let _disconnect = () => {}
 
   const attemptConnection = (url) => {
-    const eventSource = new EventSource(url, {
+    if (
+      status.value === STATUSES.CONNECTING ||
+      status.value === STATUSES.CONNECTED
+    ) {
+      return
+    }
+    eventSource = new EventSource(url, {
       withCredentials: true,
     })
     _disconnect = () => {
-      if (status.value !== "connecting" && status.value !== "connected") {
+      if (
+        status.value !== STATUSES.CONNECTING &&
+        status.value !== STATUSES.CONNECTED
+      ) {
         console.warn(
           `disconnect() ignored because connection is ${status.value}`,
         )
         return
       }
-      eventSource.onerror = undefined
-      eventSource.close()
-      Object.keys(events).forEach((eventName) => {
-        eventSource.removeEventListener(eventName, events[eventName])
-      })
-      status.goTo("disconnected")
+      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()
@@ -78,7 +166,7 @@ export const createEventSourceConnection = (
         }
 
         retryCount++
-        status.goTo("connecting")
+        status.goTo(STATUSES.CONNECTING)
         return
       }
 
@@ -88,24 +176,22 @@ export const createEventSourceConnection = (
       }
     }
     eventSource.onopen = () => {
-      status.goTo("connected")
+      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("connecting")
+    status.goTo(STATUSES.CONNECTING)
   }
 
-  let connect = () => {
+  let _connect = () => {
     attemptConnection(eventSourceUrl)
-    connect = () => {
+    _connect = () => {
       attemptConnection(
         lastEventId
           ? addLastEventIdIntoUrlSearchParams(eventSourceUrl, lastEventId)
@@ -115,7 +201,10 @@ export const createEventSourceConnection = (
   }
 
   const removePageUnloadListener = listenPageUnload(() => {
-    if (status.value === "connecting" || status.value === "connected") {
+    if (
+      status.value === STATUSES.CONNECTING ||
+      status.value === STATUSES.CONNECTED
+    ) {
       _disconnect()
     }
   })
@@ -123,11 +212,14 @@ 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,
+        }
+      },
+    },
+  }
+}