@jsenv/core 27.3.3 → 27.5.0

package/src/omega/server/file_service.js

@@ -3,43 +3,242 @@ import {
   serveDirectory,
   composeTwoResponses,
 } from "@jsenv/server"
+import { registerDirectoryLifecycle } from "@jsenv/filesystem"
 import { urlIsInsideOf, moveUrl } from "@jsenv/urls"
+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"
 
 export const createFileService = ({
+  signal,
+  logLevel,
+  serverStopCallbacks,
+
   rootDirectoryUrl,
-  urlGraph,
-  kitchen,
   scenario,
+  runtimeCompat,
+
+  plugins,
+  urlAnalysis,
+  htmlSupervisor,
+  nodeEsmResolution,
+  fileSystemMagicResolution,
+  transpilation,
+  clientAutoreload,
+  clientFiles,
+  cooldownBetweenFileEvents,
+  explorer,
+  sourcemaps,
+  writeGeneratedFiles,
 }) => {
-  kitchen.pluginController.addHook("serve")
-  kitchen.pluginController.addHook("augmentResponse")
-  const serveContext = {
-    rootDirectoryUrl,
-    urlGraph,
-    scenario,
+  const jsenvDirectoryUrl = new URL(".jsenv/", rootDirectoryUrl).href
+  const onErrorWhileServingFileCallbacks = []
+  const onErrorWhileServingFile = (data) => {
+    onErrorWhileServingFileCallbacks.forEach(
+      (onErrorWhileServingFileCallback) => {
+        onErrorWhileServingFileCallback(data)
+      },
+    )
+  }
+
+  const clientFileChangeCallbackList = []
+  const clientFilesPruneCallbackList = []
+  const clientFileChangeCallback = ({ relativeUrl, event }) => {
+    const url = new URL(relativeUrl, rootDirectoryUrl).href
+    clientFileChangeCallbackList.forEach((callback) => {
+      callback({ url, event })
+    })
+  }
+  const clientFilePatterns = {
+    ...clientFiles,
+    ".jsenv/": false,
   }
-  const augmentResponseContext = {
-    rootDirectoryUrl,
-    urlGraph,
-    scenario,
+
+  if (scenario === "dev") {
+    const stopWatchingClientFiles = registerDirectoryLifecycle(
+      rootDirectoryUrl,
+      {
+        watchPatterns: clientFilePatterns,
+        cooldownBetweenFileEvents,
+        keepProcessAlive: false,
+        recursive: true,
+        added: ({ relativeUrl }) => {
+          clientFileChangeCallback({ event: "added", relativeUrl })
+        },
+        updated: ({ relativeUrl }) => {
+          clientFileChangeCallback({ event: "modified", relativeUrl })
+        },
+        removed: ({ relativeUrl }) => {
+          clientFileChangeCallback({ event: "removed", relativeUrl })
+        },
+      },
+    )
+    serverStopCallbacks.push(stopWatchingClientFiles)
+  }
+
+  const contextCache = new Map()
+  const getOrCreateContext = (request) => {
+    const { runtimeName, runtimeVersion } = parseUserAgentHeader(
+      request.headers["user-agent"],
+    )
+    const runtimeId = `${runtimeName}@${runtimeVersion}`
+    const existingContext = contextCache.get(runtimeId)
+    if (existingContext) {
+      return existingContext
+    }
+    const watchAssociations = URL_META.resolveAssociations(
+      { watch: clientFilePatterns },
+      rootDirectoryUrl,
+    )
+    const urlGraph = createUrlGraph({
+      clientFileChangeCallbackList,
+      clientFilesPruneCallbackList,
+      onCreateUrlInfo: (urlInfo) => {
+        const { watch } = URL_META.applyAssociations({
+          url: urlInfo.url,
+          associations: watchAssociations,
+        })
+        urlInfo.isValid = () => watch
+      },
+      includeOriginalUrls: scenario === "dev",
+    })
+    const kitchen = createKitchen({
+      signal,
+      logLevel,
+      rootDirectoryUrl,
+      scenario,
+      runtimeCompat,
+      urlGraph,
+      plugins: [
+        ...plugins,
+        ...getCorePlugins({
+          rootDirectoryUrl,
+          scenario,
+          runtimeCompat,
+
+          urlAnalysis,
+          htmlSupervisor,
+          nodeEsmResolution,
+          fileSystemMagicResolution,
+          transpilation,
+
+          clientAutoreload,
+          clientFileChangeCallbackList,
+          clientFilesPruneCallbackList,
+          explorer,
+        }),
+      ],
+      sourcemaps,
+      writeGeneratedFiles,
+    })
+    serverStopCallbacks.push(() => {
+      kitchen.pluginController.callHooks("destroy", kitchen.kitchenContext)
+    })
+    server_events: {
+      const allServerEvents = {}
+      kitchen.pluginController.plugins.forEach((plugin) => {
+        const { serverEvents } = plugin
+        if (serverEvents) {
+          Object.keys(serverEvents).forEach((serverEventName) => {
+            // we could throw on serverEvent name conflict
+            // we could throw if serverEvents[serverEventName] is not a function
+            allServerEvents[serverEventName] = serverEvents[serverEventName]
+          })
+        }
+      })
+      const serverEventNames = Object.keys(allServerEvents)
+      if (serverEventNames.length > 0) {
+        const serverEventsDispatcher = createServerEventsDispatcher()
+        serverStopCallbacks.push(() => {
+          serverEventsDispatcher.destroy()
+        })
+        Object.keys(allServerEvents).forEach((serverEventName) => {
+          allServerEvents[serverEventName]({
+            rootDirectoryUrl,
+            urlGraph,
+            scenario,
+            sendServerEvent: (data) => {
+              serverEventsDispatcher.dispatch({
+                type: serverEventName,
+                data,
+              })
+            },
+          })
+        })
+        onErrorWhileServingFileCallbacks.push((data) => {
+          serverEventsDispatcher.dispatchToRoomsMatching(
+            {
+              type: "error_while_serving_file",
+              data,
+            },
+            (room) => {
+              // send only to page depending on this file
+              const errorFileUrl = data.url
+              const roomEntryPointUrl = new URL(
+                room.request.ressource.slice(1),
+                rootDirectoryUrl,
+              ).href
+              const isErrorRelatedToEntryPoint = Boolean(
+                urlGraph.findDependent(errorFileUrl, (dependentUrlInfo) => {
+                  return dependentUrlInfo.url === roomEntryPointUrl
+                }),
+              )
+              return isErrorRelatedToEntryPoint
+            },
+          )
+        })
+        // "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
+        kitchen.pluginController.pushPlugin(
+          jsenvPluginServerEventsClientInjection(),
+        )
+      }
+    }
+
+    const context = {
+      rootDirectoryUrl,
+      scenario,
+      runtimeName,
+      runtimeVersion,
+      urlGraph,
+      kitchen,
+    }
+    contextCache.set(runtimeId, context)
+    return context
   }
 
-  const getResponse = async (request) => {
+  return async (request) => {
     // serve file inside ".jsenv" directory
     const requestFileUrl = new URL(request.ressource.slice(1), rootDirectoryUrl)
       .href
-    if (urlIsInsideOf(requestFileUrl, kitchen.jsenvDirectoryUrl)) {
+    if (urlIsInsideOf(requestFileUrl, jsenvDirectoryUrl)) {
       return fetchFileSystem(requestFileUrl, {
         headers: request.headers,
       })
     }
+    const { runtimeName, runtimeVersion, urlGraph, kitchen } =
+      getOrCreateContext(request)
     const responseFromPlugin =
       await kitchen.pluginController.callAsyncHooksUntil(
         "serve",
         request,
-        serveContext,
+        kitchen.kitchenContext,
       )
     if (responseFromPlugin) {
       return responseFromPlugin
@@ -51,7 +250,7 @@ export const createFileService = ({
     }
     if (!reference) {
       const entryPoint = kitchen.injectReference({
-        trace: parentUrl || rootDirectoryUrl,
+        trace: { message: parentUrl || rootDirectoryUrl },
         parentUrl: parentUrl || rootDirectoryUrl,
         type: "http_request",
         specifier: request.ressource,
@@ -64,8 +263,12 @@ export const createFileService = ({
     if (
       ifNoneMatch &&
       urlInfo.contentEtag === ifNoneMatch &&
-      // - isValid is true by default
-      // - isValid can be overriden by plugins such as cjs_to_esm
+      // urlInfo.isValid
+      // - is false by default because there must be some logic capable
+      //   to invalidate the url (otherwise server would return 304 forever)
+      // - is set to a function returning true if the file is watched
+      //   in start_dev_server.js
+      // - is set to a custom function by cjs_to_esm in compiled_file_cache.js
       urlInfo.isValid()
     ) {
       return {
@@ -92,9 +295,6 @@ export const createFileService = ({
         urlInfo.dependsOnPackageJson = false
         urlInfo.timing = {}
       }
-      const { runtimeName, runtimeVersion } = parseUserAgentHeader(
-        request.headers["user-agent"],
-      )
       await kitchen.cook(urlInfo, {
         request,
         reference,
@@ -126,7 +326,7 @@ export const createFileService = ({
       kitchen.pluginController.callHooks(
         "augmentResponse",
         { reference, urlInfo },
-        augmentResponseContext,
+        kitchen.kitchenContext,
         (returnValue) => {
           response = composeTwoResponses(response, returnValue)
         },
@@ -135,10 +335,19 @@ export const createFileService = ({
     } catch (e) {
       const code = e.code
       if (code === "PARSE_ERROR") {
-        // let the browser re-throw the syntax error
+        onErrorWhileServingFile({
+          requestedRessource: request.ressource,
+          code: "PARSE_ERROR",
+          message: e.reason,
+          url: e.url,
+          traceUrl: e.traceUrl,
+          traceLine: e.traceLine,
+          traceColumn: e.traceColumn,
+          traceMessage: e.traceMessage,
+        })
         return {
           url: reference.url,
-          status: 200,
+          status: 200, // let the browser re-throw the syntax error
           statusText: e.reason,
           statusMessage: e.message,
           headers: {
@@ -166,6 +375,19 @@ export const createFileService = ({
         }
       }
       if (code === "NOT_FOUND") {
+        onErrorWhileServingFile({
+          requestedRessource: request.ressource,
+          isFaviconAutoRequest:
+            request.ressource === "/favicon.ico" &&
+            reference.type === "http_request",
+          code: "NOT_FOUND",
+          message: e.reason,
+          url: e.url,
+          traceUrl: e.traceUrl,
+          traceLine: e.traceLine,
+          traceColumn: e.traceColumn,
+          traceMessage: e.traceMessage,
+        })
         return {
           url: reference.url,
           status: 404,
@@ -173,6 +395,16 @@ export const createFileService = ({
           statusMessage: e.message,
         }
       }
+      onErrorWhileServingFile({
+        requestedRessource: request.ressource,
+        code: "UNEXPECTED",
+        stack: e.stack,
+        url: e.url,
+        traceUrl: e.traceUrl,
+        traceLine: e.traceLine,
+        traceColumn: e.traceColumn,
+        traceMessage: e.traceMessage,
+      })
       return {
         url: reference.url,
         status: 500,
@@ -181,10 +413,6 @@ export const createFileService = ({
       }
     }
   }
-  return async (request) => {
-    let response = await getResponse(request)
-    return response
-  }
 }
 
 const inferParentFromRequest = (request, rootDirectoryUrl) => {

package/src/omega/url_graph.js

@@ -4,6 +4,8 @@ import { urlSpecifierEncoding } from "./url_specifier_encoding.js"
 export const createUrlGraph = ({
   clientFileChangeCallbackList,
   clientFilesPruneCallbackList,
+  onCreateUrlInfo = () => {},
+  includeOriginalUrls,
 } = {}) => {
   const urlInfoMap = new Map()
   const getUrlInfo = (url) => urlInfoMap.get(url)
@@ -22,6 +24,7 @@ export const createUrlGraph = ({
     if (existingUrlInfo) return existingUrlInfo
     const urlInfo = createUrlInfo(url)
     urlInfoMap.set(url, urlInfo)
+    onCreateUrlInfo(urlInfo)
     return urlInfo
   }
   const inferReference = (specifier, parentUrl) => {
@@ -55,7 +58,17 @@ export const createUrlGraph = ({
   }
 
   const updateReferences = (urlInfo, references) => {
-    const dependencyUrls = []
+    const setOfDependencyUrls = new Set()
+
+    // for import assertion "file.css?as_css_module" depends on "file.css"
+    // this is enabled only for dev where there is autoreload
+    // during build the css file must be considered as not referenced
+    // (except if referenced explicitely by something else) so that
+    // the css file does not appear in the build directory
+    if (includeOriginalUrls && urlInfo.originalUrl !== urlInfo.url) {
+      setOfDependencyUrls.add(urlInfo.originalUrl)
+    }
+
     references.forEach((reference) => {
       if (reference.isRessourceHint) {
         // ressource hint are a special kind of reference.
@@ -66,19 +79,14 @@ export const createUrlGraph = ({
         // by <link> as dependency and it's fine
         return
       }
-      if (dependencyUrls.includes(reference.url)) {
-        return
-      }
-      dependencyUrls.push(reference.url)
+      setOfDependencyUrls.add(reference.url)
     })
-    pruneDependencies(
-      urlInfo,
-      Array.from(urlInfo.dependencies).filter(
-        (dep) => !dependencyUrls.includes(dep),
-      ),
+    const urlsToRemove = Array.from(urlInfo.dependencies).filter(
+      (dep) => !setOfDependencyUrls.has(dep),
     )
+    pruneDependencies(urlInfo, urlsToRemove)
     urlInfo.references = references
-    dependencyUrls.forEach((dependencyUrl) => {
+    setOfDependencyUrls.forEach((dependencyUrl) => {
       const dependencyUrlInfo = reuseOrCreateUrlInfo(dependencyUrl)
       urlInfo.dependencies.add(dependencyUrl)
       dependencyUrlInfo.dependents.add(urlInfo.url)
@@ -90,14 +98,17 @@ export const createUrlGraph = ({
     const removeDependencies = (urlInfo, urlsToPrune) => {
       urlsToPrune.forEach((urlToPrune) => {
         urlInfo.dependencies.delete(urlToPrune)
-        const dependency = getUrlInfo(urlToPrune)
-        if (!dependency) {
+        const dependencyUrlInfo = getUrlInfo(urlToPrune)
+        if (!dependencyUrlInfo) {
           return
         }
-        dependency.dependents.delete(urlInfo.url)
-        if (dependency.dependents.size === 0) {
-          removeDependencies(dependency, Array.from(dependency.dependencies))
-          prunedUrlInfos.push(dependency)
+        dependencyUrlInfo.dependents.delete(urlInfo.url)
+        if (dependencyUrlInfo.dependents.size === 0) {
+          removeDependencies(
+            dependencyUrlInfo,
+            Array.from(dependencyUrlInfo.dependencies),
+          )
+          prunedUrlInfos.push(dependencyUrlInfo)
         }
       })
     }
@@ -107,8 +118,10 @@ export const createUrlGraph = ({
     }
     prunedUrlInfos.forEach((prunedUrlInfo) => {
       prunedUrlInfo.modifiedTimestamp = Date.now()
-      // should we delete?
-      // delete urlInfos[prunedUrlInfo.url]
+      if (prunedUrlInfo.isInline) {
+        // should we always delete?
+        deleteUrlInfo(prunedUrlInfo.url)
+      }
     })
     if (clientFilesPruneCallbackList) {
       clientFilesPruneCallbackList.forEach((callback) => {
@@ -145,6 +158,12 @@ export const createUrlGraph = ({
           iterate(dependentUrlInfo)
         }
       })
+      urlInfo.dependencies.forEach((dependencyUrl) => {
+        const dependencyUrlInfo = getUrlInfo(dependencyUrl)
+        if (dependencyUrlInfo.isInline) {
+          iterate(dependencyUrlInfo)
+        }
+      })
     }
     iterate(urlInfo)
   }
@@ -229,4 +248,4 @@ const createUrlInfo = (url) => {
   }
 }
 
-const isValid = () => true
+const isValid = () => false

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

@@ -0,0 +1,201 @@
+import { urlHotMetas } from "../../import_meta_hot/client/import_meta_hot.js"
+import {
+  isAutoreloadEnabled,
+  setAutoreloadPreference,
+} from "./autoreload_preference.js"
+import { compareTwoUrlPaths } from "./url_helpers.js"
+import {
+  reloadHtmlPage,
+  reloadJsImport,
+  getDOMNodesUsingUrl,
+} from "./reload.js"
+
+const reloader = {
+  urlHotMetas,
+  isAutoreloadEnabled,
+  setAutoreloadPreference,
+  status: "idle",
+  onstatuschange: () => {},
+  setStatus: (status) => {
+    reloader.status = status
+    reloader.onstatuschange()
+  },
+  messages: [],
+  addMessage: (reloadMessage) => {
+    reloader.messages.push(reloadMessage)
+    if (isAutoreloadEnabled()) {
+      reloader.reload()
+    } else {
+      reloader.setStatus("can_reload")
+    }
+  },
+  reload: () => {
+    const someEffectIsFullReload = reloader.messages.some(
+      (reloadMessage) => reloadMessage.type === "full",
+    )
+    if (someEffectIsFullReload) {
+      reloadHtmlPage()
+      return
+    }
+    reloader.setStatus("reloading")
+    const onApplied = (reloadMessage) => {
+      const index = reloader.messages.indexOf(reloadMessage)
+      reloader.messages.splice(index, 1)
+      if (reloader.messages.length === 0) {
+        reloader.setStatus("idle")
+      }
+    }
+    const setReloadMessagePromise = (reloadMessage, promise) => {
+      promise.then(
+        () => {
+          onApplied(reloadMessage)
+        },
+        (e) => {
+          reloader.setStatus("failed")
+          if (typeof window.reportError === "function") {
+            window.reportError(e)
+          } else {
+            console.error(e)
+          }
+          console.error(
+            `[jsenv] Hot reload failed after ${reloadMessage.reason}.
+This could be due to syntax errors or importing non-existent modules (see errors in console)`,
+          )
+        },
+      )
+    }
+    reloader.messages.forEach((reloadMessage) => {
+      if (reloadMessage.type === "hot") {
+        const promise = addToHotQueue(() => {
+          return applyHotReload(reloadMessage)
+        })
+        setReloadMessagePromise(reloadMessage, promise)
+      } else {
+        setReloadMessagePromise(reloadMessage, Promise.resolve())
+      }
+    })
+  },
+}
+
+let pendingCallbacks = []
+let running = false
+const addToHotQueue = async (callback) => {
+  pendingCallbacks.push(callback)
+  dequeue()
+}
+const dequeue = async () => {
+  if (running) {
+    return
+  }
+  const callbacks = pendingCallbacks.slice()
+  pendingCallbacks = []
+  running = true
+  try {
+    await callbacks.reduce(async (previous, callback) => {
+      await previous
+      await callback()
+    }, Promise.resolve())
+  } finally {
+    running = false
+    if (pendingCallbacks.length) {
+      dequeue()
+    }
+  }
+}
+
+const applyHotReload = async ({ hotInstructions }) => {
+  await hotInstructions.reduce(
+    async (previous, { type, boundary, acceptedBy }) => {
+      await previous
+
+      const urlToFetch = new URL(boundary, `${window.location.origin}/`).href
+      const urlHotMeta = urlHotMetas[urlToFetch]
+      // there is no url hot meta when:
+      // - code was not executed (code splitting with dynamic import)
+      // - import.meta.hot.accept() is not called (happens for HTML and CSS)
+
+      if (type === "prune") {
+        if (urlHotMeta) {
+          delete urlHotMetas[urlToFetch]
+          if (urlHotMeta.disposeCallback) {
+            console.groupCollapsed(
+              `[jsenv] cleanup ${boundary} (previously used in ${acceptedBy})`,
+            )
+            console.log(`call dispose callback`)
+            await urlHotMeta.disposeCallback()
+            console.groupEnd()
+          }
+        }
+        return null
+      }
+
+      if (acceptedBy === boundary) {
+        console.groupCollapsed(`[jsenv] hot reloading ${boundary}`)
+      } else {
+        console.groupCollapsed(
+          `[jsenv] hot reloading ${acceptedBy} usage in ${boundary}`,
+        )
+      }
+      if (type === "js_module") {
+        if (!urlHotMeta) {
+          // code was not executed, no need to re-execute it
+          return null
+        }
+        if (urlHotMeta.disposeCallback) {
+          console.log(`call dispose callback`)
+          await urlHotMeta.disposeCallback()
+        }
+        console.log(`importing js module`)
+        const namespace = await reloadJsImport(urlToFetch)
+        if (urlHotMeta.acceptCallback) {
+          await urlHotMeta.acceptCallback(namespace)
+        }
+        console.log(`js module import done`)
+        console.groupEnd()
+        return namespace
+      }
+      if (type === "html") {
+        if (!compareTwoUrlPaths(urlToFetch, window.location.href)) {
+          // we are not in that HTML page
+          return null
+        }
+        const urlToReload = new URL(acceptedBy, `${window.location.origin}/`)
+          .href
+        const domNodesUsingUrl = getDOMNodesUsingUrl(urlToReload)
+        const domNodesCount = domNodesUsingUrl.length
+        if (domNodesCount === 0) {
+          console.log(`no dom node using ${acceptedBy}`)
+        } else if (domNodesCount === 1) {
+          console.log(`reloading`, domNodesUsingUrl[0].node)
+          domNodesUsingUrl[0].reload()
+        } else {
+          console.log(`reloading ${domNodesCount} nodes using ${acceptedBy}`)
+          domNodesUsingUrl.forEach((domNodesUsingUrl) => {
+            domNodesUsingUrl.reload()
+          })
+        }
+        console.groupEnd()
+        return null
+      }
+      console.warn(`unknown update type: "${type}"`)
+      return null
+    },
+    Promise.resolve(),
+  )
+}
+
+window.__reloader__ = reloader
+window.__server_events__.addEventCallbacks({
+  reload: ({ data }) => {
+    const reloadMessage = JSON.parse(data)
+    reloader.addMessage(reloadMessage)
+  },
+})
+
+// const findHotMetaUrl = (originalFileRelativeUrl) => {
+//   return Object.keys(urlHotMetas).find((compileUrl) => {
+//     return (
+//       parseCompiledUrl(compileUrl).fileRelativeUrl === originalFileRelativeUrl
+//     )
+//   })
+// }