@jsenv/core 27.4.0 → 27.5.0

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) => {
@@ -235,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
+//     )
+//   })
+// }

package/src/plugins/autoreload/{dev_sse/client → client}/reload.js

@@ -13,8 +13,8 @@ export const reloadHtmlPage = () => {
 // - no need to check [hot-accept]and [hot-decline] attributes for instance
 // This is because if something should full reload, we receive "full_reload"
 // from server and this function is not called
-export const reloadDOMNodesUsingUrl = (urlToReload) => {
-  const mutations = []
+export const getDOMNodesUsingUrl = (urlToReload) => {
+  const nodes = []
   const shouldReloadUrl = (urlCandidate) => {
     return compareTwoUrlPaths(urlCandidate, urlToReload)
   }
@@ -29,8 +29,11 @@ export const reloadDOMNodesUsingUrl = (urlToReload) => {
     if (!shouldReloadUrl(attribute)) {
       return
     }
-    mutations.push(() => {
-      node[attributeName] = injectQuery(attribute, { hmr: Date.now() })
+    nodes.push({
+      node,
+      reload: () => {
+        node[attributeName] = injectQuery(attribute, { hmr: Date.now() })
+      },
     })
   }
   Array.from(document.querySelectorAll(`link[rel="stylesheet"]`)).forEach(
@@ -41,8 +44,23 @@ export const reloadDOMNodesUsingUrl = (urlToReload) => {
   Array.from(document.querySelectorAll(`link[rel="icon"]`)).forEach((link) => {
     visitNodeAttributeAsUrl(link, "href")
   })
-  Array.from(document.querySelector("script")).forEach((script) => {
+  Array.from(document.querySelectorAll("script")).forEach((script) => {
     visitNodeAttributeAsUrl(script, "src")
+    const generatedFromSrc = script.getAttribute("generated-from-src")
+    if (generatedFromSrc) {
+      const generatedFromUrl = new URL(generatedFromSrc, window.location.origin)
+        .href
+      if (shouldReloadUrl(generatedFromUrl)) {
+        nodes.push({
+          node: script,
+          reload: () =>
+            window.__html_supervisor__.reloadSupervisedScript({
+              type: script.type,
+              src: generatedFromSrc,
+            }),
+        })
+      }
+    }
   })
   // There is no real need to update a.href because the ressource will be fetched when clicked.
   // But in a scenario where the ressource was already visited and is in browser cache, adding
@@ -67,8 +85,11 @@ export const reloadDOMNodesUsingUrl = (urlToReload) => {
           srcCandidate.specifier = injectQuery(url, { hmr: Date.now() })
         }
       })
-      mutations.push(() => {
-        img.srcset = stringifySrcSet(srcCandidates)
+      nodes.push({
+        node: img,
+        reload: () => {
+          img.srcset = stringifySrcSet(srcCandidates)
+        },
       })
     }
   })
@@ -83,9 +104,7 @@ export const reloadDOMNodesUsingUrl = (urlToReload) => {
   Array.from(document.querySelectorAll("use")).forEach((use) => {
     visitNodeAttributeAsUrl(use, "href")
   })
-  mutations.forEach((mutation) => {
-    mutation()
-  })
+  return nodes
 }
 
 export const reloadJsImport = async (url) => {

package/src/plugins/autoreload/jsenv_plugin_autoreload.js

@@ -1,6 +1,6 @@
 import { jsenvPluginHmr } from "./jsenv_plugin_hmr.js"
-import { jsenvPluginDevSSEClient } from "./dev_sse/jsenv_plugin_dev_sse_client.js"
-import { jsenvPluginDevSSEServer } from "./dev_sse/jsenv_plugin_dev_sse_server.js"
+import { jsenvPluginAutoreloadClient } from "./jsenv_plugin_autoreload_client.js"
+import { jsenvPluginAutoreloadServer } from "./jsenv_plugin_autoreload_server.js"
 
 export const jsenvPluginAutoreload = ({
   scenario,
@@ -12,8 +12,8 @@ export const jsenvPluginAutoreload = ({
   }
   return [
     jsenvPluginHmr(),
-    jsenvPluginDevSSEClient(),
-    jsenvPluginDevSSEServer({
+    jsenvPluginAutoreloadClient(),
+    jsenvPluginAutoreloadServer({
       clientFileChangeCallbackList,
       clientFilesPruneCallbackList,
     }),

package/src/plugins/autoreload/{dev_sse/jsenv_plugin_dev_sse_client.js → jsenv_plugin_autoreload_client.js}

@@ -5,30 +5,30 @@ import {
   createHtmlNode,
 } from "@jsenv/ast"
 
-export const jsenvPluginDevSSEClient = () => {
-  const eventSourceClientFileUrl = new URL(
-    "./client/event_source_client.js",
+export const jsenvPluginAutoreloadClient = () => {
+  const autoreloadClientFileUrl = new URL(
+    "./client/autoreload.js",
     import.meta.url,
   ).href
 
   return {
-    name: "jsenv:dev_sse_client",
+    name: "jsenv:autoreload_client",
     appliesDuring: { dev: true },
     transformUrlContent: {
       html: (htmlUrlInfo, context) => {
         const htmlAst = parseHtmlString(htmlUrlInfo.content)
-        const [eventSourceClientReference] = context.referenceUtils.inject({
+        const [autoreloadClientReference] = context.referenceUtils.inject({
           type: "script_src",
           expectedType: "js_module",
-          specifier: eventSourceClientFileUrl,
+          specifier: autoreloadClientFileUrl,
         })
         injectScriptNodeAsEarlyAsPossible(
           htmlAst,
           createHtmlNode({
             "tagName": "script",
             "type": "module",
-            "src": eventSourceClientReference.generatedSpecifier,
-            "injected-by": "jsenv:dev_sse_client",
+            "src": autoreloadClientReference.generatedSpecifier,
+            "injected-by": "jsenv:autoreload_client",
           }),
         )
         const htmlModified = stringifyHtmlAst(htmlAst)

package/src/plugins/autoreload/jsenv_plugin_autoreload_server.js

@@ -0,0 +1,196 @@
+import { urlIsInsideOf, urlToRelativeUrl } from "@jsenv/urls"
+
+export const jsenvPluginAutoreloadServer = ({
+  clientFileChangeCallbackList,
+  clientFilesPruneCallbackList,
+}) => {
+  return {
+    name: "jsenv:autoreload_server",
+    appliesDuring: { dev: true },
+    serverEvents: {
+      reload: ({ sendServerEvent, rootDirectoryUrl, urlGraph }) => {
+        const formatUrlForClient = (url) => {
+          if (urlIsInsideOf(url, rootDirectoryUrl)) {
+            return urlToRelativeUrl(url, rootDirectoryUrl)
+          }
+          if (url.startsWith("file:")) {
+            return `/@fs/${url.slice("file:///".length)}`
+          }
+          return url
+        }
+
+        const notifyDeclined = ({ cause, reason, declinedBy }) => {
+          sendServerEvent({
+            cause,
+            type: "full",
+            typeReason: reason,
+            declinedBy,
+          })
+        }
+        const notifyAccepted = ({ cause, reason, instructions }) => {
+          sendServerEvent({
+            cause,
+            type: "hot",
+            typeReason: reason,
+            hotInstructions: instructions,
+          })
+        }
+        const propagateUpdate = (firstUrlInfo) => {
+          const iterate = (urlInfo, seen) => {
+            if (urlInfo.data.hotAcceptSelf) {
+              return {
+                accepted: true,
+                reason:
+                  urlInfo === firstUrlInfo
+                    ? `file accepts hot reload`
+                    : `a dependent file accepts hot reload`,
+                instructions: [
+                  {
+                    type: urlInfo.type,
+                    boundary: formatUrlForClient(urlInfo.url),
+                    acceptedBy: formatUrlForClient(urlInfo.url),
+                  },
+                ],
+              }
+            }
+            const { dependents } = urlInfo
+            const instructions = []
+            for (const dependentUrl of dependents) {
+              const dependentUrlInfo = urlGraph.getUrlInfo(dependentUrl)
+              if (dependentUrlInfo.data.hotDecline) {
+                return {
+                  declined: true,
+                  reason: `a dependent file declines hot reload`,
+                  declinedBy: dependentUrl,
+                }
+              }
+              const { hotAcceptDependencies = [] } = dependentUrlInfo.data
+              if (hotAcceptDependencies.includes(urlInfo.url)) {
+                instructions.push({
+                  type: dependentUrlInfo.type,
+                  boundary: formatUrlForClient(dependentUrl),
+                  acceptedBy: formatUrlForClient(urlInfo.url),
+                })
+                continue
+              }
+              if (seen.includes(dependentUrl)) {
+                return {
+                  declined: true,
+                  reason: "circular dependency",
+                  declinedBy: formatUrlForClient(dependentUrl),
+                }
+              }
+              const dependentPropagationResult = iterate(dependentUrlInfo, [
+                ...seen,
+                dependentUrl,
+              ])
+              if (dependentPropagationResult.accepted) {
+                instructions.push(...dependentPropagationResult.instructions)
+                continue
+              }
+              if (
+                // declined explicitely by an other file, it must decline the whole update
+                dependentPropagationResult.declinedBy
+              ) {
+                return dependentPropagationResult
+              }
+              // declined by absence of boundary, we can keep searching
+              continue
+            }
+            if (instructions.length === 0) {
+              return {
+                declined: true,
+                reason: `there is no file accepting hot reload while propagating update`,
+              }
+            }
+            return {
+              accepted: true,
+              reason: `${instructions.length} dependent file(s) accepts hot reload`,
+              instructions,
+            }
+          }
+          const seen = []
+          return iterate(firstUrlInfo, seen)
+        }
+        clientFileChangeCallbackList.push(({ url, event }) => {
+          const urlInfo = urlGraph.getUrlInfo(url)
+          // file not part of dependency graph
+          if (!urlInfo) {
+            return
+          }
+          const relativeUrl = formatUrlForClient(url)
+          const hotUpdate = propagateUpdate(urlInfo)
+          if (hotUpdate.declined) {
+            notifyDeclined({
+              cause: `${relativeUrl} ${event}`,
+              reason: hotUpdate.reason,
+              declinedBy: hotUpdate.declinedBy,
+            })
+          } else {
+            notifyAccepted({
+              cause: `${relativeUrl} ${event}`,
+              reason: hotUpdate.reason,
+              instructions: hotUpdate.instructions,
+            })
+          }
+        })
+        clientFilesPruneCallbackList.push(
+          ({ prunedUrlInfos, firstUrlInfo }) => {
+            const mainHotUpdate = propagateUpdate(firstUrlInfo)
+            const cause = `following files are no longer referenced: ${prunedUrlInfos.map(
+              (prunedUrlInfo) => formatUrlForClient(prunedUrlInfo.url),
+            )}`
+            // now check if we can hot update the main ressource
+            // then if we can hot update all dependencies
+            if (mainHotUpdate.declined) {
+              notifyDeclined({
+                cause,
+                reason: mainHotUpdate.reason,
+                declinedBy: mainHotUpdate.declinedBy,
+              })
+              return
+            }
+            // main can hot update
+            let i = 0
+            const instructions = []
+            while (i < prunedUrlInfos.length) {
+              const prunedUrlInfo = prunedUrlInfos[i++]
+              if (prunedUrlInfo.data.hotDecline) {
+                notifyDeclined({
+                  cause,
+                  reason: `a pruned file declines hot reload`,
+                  declinedBy: formatUrlForClient(prunedUrlInfo.url),
+                })
+                return
+              }
+              instructions.push({
+                type: "prune",
+                boundary: formatUrlForClient(prunedUrlInfo.url),
+                acceptedBy: formatUrlForClient(firstUrlInfo.url),
+              })
+            }
+            notifyAccepted({
+              cause,
+              reason: mainHotUpdate.reason,
+              instructions,
+            })
+          },
+        )
+      },
+    },
+    serve: (request, { rootDirectoryUrl, urlGraph }) => {
+      if (request.ressource === "/__graph__") {
+        const graphJson = JSON.stringify(urlGraph.toJSON(rootDirectoryUrl))
+        return {
+          status: 200,
+          headers: {
+            "content-type": "application/json",
+            "content-length": Buffer.byteLength(graphJson),
+          },
+          body: graphJson,
+        }
+      }
+      return null
+    },
+  }
+}

package/src/{dev/plugins → plugins}/explorer/jsenv_plugin_explorer.js

@@ -9,9 +9,7 @@ export const jsenvPluginExplorer = ({ groups }) => {
 
   return {
     name: "jsenv:explorer",
-    appliesDuring: {
-      dev: true,
-    },
+    appliesDuring: "dev",
     serve: async (request, { rootDirectoryUrl }) => {
       if (request.ressource !== "/") {
         return null