@jsenv/core 27.0.0-alpha.8 → 27.0.0-alpha.82

package/src/omega/url_graph.js

@@ -1,10 +1,22 @@
-import { createCallbackList } from "@jsenv/abort"
-import { urlToRelativeUrl } from "@jsenv/filesystem"
+import { urlToRelativeUrl } from "@jsenv/urls"
+import { urlSpecifierEncoding } from "./url_specifier_encoding.js"
 
-export const createUrlGraph = () => {
+export const createUrlGraph = ({
+  clientFileChangeCallbackList,
+  clientFilesPruneCallbackList,
+} = {}) => {
   const urlInfos = {}
   const getUrlInfo = (url) => urlInfos[url]
-  const deleteUrlInfo = (url) => delete urlInfos[url]
+  const deleteUrlInfo = (url) => {
+    const urlInfo = urlInfos[url]
+    if (urlInfo) {
+      delete urlInfos[url]
+      if (urlInfo.sourcemapReference) {
+        deleteUrlInfo(urlInfo.sourcemapReference.url)
+      }
+    }
+  }
+
   const reuseOrCreateUrlInfo = (url) => {
     const existingUrlInfo = urlInfos[url]
     if (existingUrlInfo) return existingUrlInfo
@@ -12,13 +24,15 @@ export const createUrlGraph = () => {
     urlInfos[url] = urlInfo
     return urlInfo
   }
-  const inferReference = (url, parentUrl) => {
+  const inferReference = (specifier, parentUrl) => {
     const parentUrlInfo = urlInfos[parentUrl]
     if (!parentUrlInfo) {
       return null
     }
     const firstReferenceOnThatUrl = parentUrlInfo.references.find(
-      (reference) => reference.url === url,
+      (reference) => {
+        return urlSpecifierEncoding.decode(reference) === specifier
+      },
     )
     return firstReferenceOnThatUrl
   }
@@ -40,13 +54,22 @@ export const createUrlGraph = () => {
     return visitDependents(urlInfo)
   }
 
-  const prunedCallbackList = createCallbackList()
   const updateReferences = (urlInfo, references) => {
     const dependencyUrls = []
     references.forEach((reference) => {
-      if (!dependencyUrls.includes(reference.url)) {
-        dependencyUrls.push(reference.url)
+      if (reference.isRessourceHint) {
+        // ressource hint are a special kind of reference.
+        // They are a sort of weak reference to an url.
+        // We ignore them so that url referenced only by ressource hints
+        // have url.dependents.size === 0 and can be considered as not used
+        // It means html won't consider url referenced solely
+        // by <link> as dependency and it's fine
+        return
+      }
+      if (dependencyUrls.includes(reference.url)) {
+        return
       }
+      dependencyUrls.push(reference.url)
     })
     pruneDependencies(
       urlInfo,
@@ -82,7 +105,47 @@ export const createUrlGraph = () => {
     if (prunedUrlInfos.length === 0) {
       return
     }
-    prunedCallbackList.notify({ prunedUrlInfos, firstUrlInfo })
+    prunedUrlInfos.forEach((prunedUrlInfo) => {
+      prunedUrlInfo.modifiedTimestamp = Date.now()
+      // should we delete?
+      // delete urlInfos[prunedUrlInfo.url]
+    })
+    if (clientFilesPruneCallbackList) {
+      clientFilesPruneCallbackList.forEach((callback) => {
+        callback({
+          firstUrlInfo,
+          prunedUrlInfos,
+        })
+      })
+    }
+  }
+
+  if (clientFileChangeCallbackList) {
+    const updateModifiedTimestamp = (urlInfo, modifiedTimestamp) => {
+      const seen = []
+      const iterate = (urlInfo) => {
+        if (seen.includes(urlInfo.url)) {
+          return
+        }
+        seen.push(urlInfo.url)
+        urlInfo.modifiedTimestamp = modifiedTimestamp
+        urlInfo.dependents.forEach((dependentUrl) => {
+          const dependentUrlInfo = urlInfos[dependentUrl]
+          const { hotAcceptDependencies = [] } = dependentUrlInfo.data
+          if (!hotAcceptDependencies.includes(urlInfo.url)) {
+            iterate(dependentUrlInfo)
+          }
+        })
+      }
+      iterate(urlInfo)
+    }
+    clientFileChangeCallbackList.push(({ url }) => {
+      const urlInfo = urlInfos[url]
+      if (urlInfo) {
+        updateModifiedTimestamp(urlInfo, Date.now())
+        urlInfo.contentEtag = null
+      }
+    })
   }
 
   return {
@@ -92,8 +155,6 @@ export const createUrlGraph = () => {
     deleteUrlInfo,
     inferReference,
     findDependent,
-
-    prunedCallbackList,
     updateReferences,
 
     toJSON: (rootDirectoryUrl) => {
@@ -114,19 +175,27 @@ export const createUrlGraph = () => {
 
 const createUrlInfo = (url) => {
   return {
+    modifiedTimestamp: 0,
     data: {}, // plugins can put whatever they want here
+    references: [],
+    dependencies: new Set(),
+    dependents: new Set(),
+    type: undefined, // "html", "css", "js_classic", "js_module", "importmap", "json", "webmanifest", ...
+    subtype: undefined, // "worker", "service_worker", "shared_worker" for js, otherwise undefined
+    contentType: "", // "text/html", "text/css", "text/javascript", "application/json", ...
     url,
+    originalUrl: undefined,
     generatedUrl: null,
+    filename: "",
     isInline: false,
     inlineUrlSite: null,
-    contentType: "",
-    originalContent: "",
-    content: "",
+    shouldHandle: undefined,
+    originalContent: undefined,
+    content: undefined,
+    contentEtag: null,
     sourcemap: null,
     sourcemapReference: null,
-    type: "",
-    references: [],
-    dependencies: new Set(),
-    dependents: new Set(),
+    timing: {},
+    headers: {},
   }
 }

package/src/omega/url_specifier_encoding.js

@@ -0,0 +1,59 @@
+export const urlSpecifierEncoding = {
+  encode: (reference) => {
+    const { generatedSpecifier } = reference
+    if (generatedSpecifier.then) {
+      return generatedSpecifier.then((value) => {
+        reference.generatedSpecifier = value
+        return urlSpecifierEncoding.encode(reference)
+      })
+    }
+    // allow plugin to return a function to bypas default formatting
+    // (which is to use JSON.stringify when url is referenced inside js)
+    if (typeof generatedSpecifier === "function") {
+      return generatedSpecifier()
+    }
+    const formatter = formatters[reference.type]
+    const value = formatter
+      ? formatter.encode(generatedSpecifier)
+      : generatedSpecifier
+    if (reference.escape) {
+      return reference.escape(value)
+    }
+    return value
+  },
+  decode: (reference) => {
+    const formatter = formatters[reference.type]
+    return formatter
+      ? formatter.decode(reference.generatedSpecifier)
+      : reference.generatedSpecifier
+  },
+}
+const formatters = {
+  "js_import_export": { encode: JSON.stringify, decode: JSON.parse },
+  "js_url_specifier": { encode: JSON.stringify, decode: JSON.parse },
+  "css_@import": { encode: JSON.stringify, code: JSON.stringify },
+  // https://github.com/webpack-contrib/css-loader/pull/627/files
+  "css_url": {
+    encode: (url) => {
+      // If url is already wrapped in quotes, remove them
+      url = formatters.css_url.decode(url)
+      // Should url be wrapped?
+      // See https://drafts.csswg.org/css-values-3/#urls
+      if (/["'() \t\n]/.test(url)) {
+        return `"${url.replace(/"/g, '\\"').replace(/\n/g, "\\n")}"`
+      }
+      return url
+    },
+    decode: (url) => {
+      const firstChar = url[0]
+      const lastChar = url[url.length - 1]
+      if (firstChar === `"` && lastChar === `"`) {
+        return url.slice(1, -1)
+      }
+      if (firstChar === `'` && lastChar === `'`) {
+        return url.slice(1, -1)
+      }
+      return url
+    },
+  },
+}

package/src/omega/web_workers.js

@@ -0,0 +1,42 @@
+// the following apis are creating js entry points:
+// - new Worker()
+// - new SharedWorker()
+// - navigator.serviceWorker.register()
+export const isWebWorkerEntryPointReference = (reference) => {
+  if (reference.subtype === "new_url_first_arg") {
+    return ["worker", "service_worker", "shared_worker"].includes(
+      reference.expectedSubtype,
+    )
+  }
+  return [
+    "new_worker_first_arg",
+    "new_shared_worker_first_arg",
+    "service_worker_register_first_arg",
+  ].includes(reference.subtype)
+}
+
+export const isWebWorkerUrlInfo = (urlInfo) => {
+  return (
+    urlInfo.subtype === "worker" ||
+    urlInfo.subtype === "service_worker" ||
+    urlInfo.subtype === "shared_worker"
+  )
+}
+
+// export const isEntryPoint = (urlInfo, urlGraph) => {
+//   if (urlInfo.data.isEntryPoint) {
+//     return true
+//   }
+//   if (isWebWorker(urlInfo)) {
+//     // - new Worker("a.js") -> "a.js" is an entry point
+//     // - self.importScripts("b.js") -> "b.js" is not an entry point
+//     // So the following logic applies to infer if the file is a web worker entry point
+//     // "When a non-webworker file references a worker file, the worker file is an entry point"
+//     const dependents = Array.from(urlInfo.dependents)
+//     return dependents.some((dependentUrl) => {
+//       const dependentUrlInfo = urlGraph.getUrlInfo(dependentUrl)
+//       return !isWebWorker(dependentUrlInfo)
+//     })
+//   }
+//   return false
+// }

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

@@ -1,4 +1,5 @@
-import { createEventSourceConnection } from "./event_source_connection.js"
+import { createEventSourceConnection } from "@jsenv/utils/event_source/event_source.js"
+import { urlHotMetas } from "../../../import_meta_hot/client/import_meta_hot.js"
 import {
   isAutoreloadEnabled,
   setAutoreloadPreference,
@@ -9,7 +10,6 @@ import {
   reloadDOMNodesUsingUrl,
   reloadJsImport,
 } from "./reload.js"
-import { urlHotMetas } from "./import_meta_hot.js"
 
 const reloadMessages = []
 const reloadMessagesSignal = { onchange: () => {} }
@@ -26,13 +26,16 @@ const dequeue = async () => {
   const callbacks = pendingCallbacks.slice()
   pendingCallbacks = []
   running = true
-  await callbacks.reduce(async (previous, callback) => {
-    await previous
-    await callback()
-  }, Promise.resolve())
-  running = false
-  if (pendingCallbacks.length) {
-    dequeue()
+  try {
+    await callbacks.reduce(async (previous, callback) => {
+      await previous
+      await callback()
+    }, Promise.resolve())
+  } finally {
+    running = false
+    if (pendingCallbacks.length) {
+      dequeue()
+    }
   }
 }
 
@@ -93,11 +96,15 @@ const applyHotReload = async ({ hotInstructions }) => {
       // if (!urlHotMeta) {return }
 
       if (type === "prune") {
-        console.group(`[jsenv] prune: ${boundary} (inside ${acceptedBy})`)
+        console.groupCollapsed(
+          `[jsenv] prune: ${boundary} (inside ${acceptedBy})`,
+        )
       } else if (acceptedBy === boundary) {
-        console.group(`[jsenv] hot reloading: ${boundary}`)
+        console.groupCollapsed(`[jsenv] hot reloading: ${boundary}`)
       } else {
-        console.group(`[jsenv] hot reloading: ${acceptedBy} inside ${boundary}`)
+        console.groupCollapsed(
+          `[jsenv] hot reloading: ${acceptedBy} inside ${boundary}`,
+        )
       }
       if (urlHotMeta && urlHotMeta.disposeCallback) {
         console.log(`call dispose callback`)

package/src/plugins/autoreload/dev_sse/jsenv_plugin_dev_sse_client.js

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

package/src/plugins/autoreload/dev_sse/jsenv_plugin_dev_sse_server.js

@@ -0,0 +1,204 @@
+import { urlToRelativeUrl } from "@jsenv/urls"
+import { createCallbackList } from "@jsenv/abort"
+
+import { createSSEService } from "@jsenv/utils/event_source/sse_service.js"
+
+export const jsenvPluginDevSSEServer = ({
+  rootDirectoryUrl,
+  urlGraph,
+  clientFileChangeCallbackList,
+  clientFilesPruneCallbackList,
+}) => {
+  const serverEventCallbackList = createCallbackList()
+  const sseService = createSSEService({ serverEventCallbackList })
+
+  const notifyDeclined = ({ cause, reason, declinedBy }) => {
+    serverEventCallbackList.notify({
+      type: "reload",
+      data: JSON.stringify({
+        cause,
+        type: "full",
+        typeReason: reason,
+        declinedBy,
+      }),
+    })
+  }
+  const notifyAccepted = ({ cause, reason, instructions }) => {
+    serverEventCallbackList.notify({
+      type: "reload",
+      data: JSON.stringify({
+        cause,
+        type: "hot",
+        typeReason: reason,
+        hotInstructions: instructions,
+      }),
+    })
+  }
+  const propagateUpdate = (firstUrlInfo) => {
+    const urlInfos = urlGraph.urlInfos
+    const iterate = (urlInfo, trace) => {
+      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: urlToRelativeUrl(urlInfo.url, rootDirectoryUrl),
+              acceptedBy: urlToRelativeUrl(urlInfo.url, rootDirectoryUrl),
+            },
+          ],
+        }
+      }
+      const { dependents } = urlInfo
+      const instructions = []
+      for (const dependentUrl of dependents) {
+        const dependentUrlInfo = urlInfos[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: urlToRelativeUrl(dependentUrl, rootDirectoryUrl),
+            acceptedBy: urlToRelativeUrl(urlInfo.url, rootDirectoryUrl),
+          })
+          continue
+        }
+        if (trace.includes(dependentUrl)) {
+          return {
+            declined: true,
+            reason: "circular dependency",
+            declinedBy: urlToRelativeUrl(dependentUrl, rootDirectoryUrl),
+          }
+        }
+        const dependentPropagationResult = iterate(dependentUrlInfo, [
+          ...trace,
+          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 trace = []
+    return iterate(firstUrlInfo, trace)
+  }
+  clientFileChangeCallbackList.push(({ url, event }) => {
+    const urlInfo = urlGraph.getUrlInfo(url)
+    // file not part of dependency graph
+    if (!urlInfo) {
+      return
+    }
+    const relativeUrl = urlToRelativeUrl(url, rootDirectoryUrl)
+    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) => urlToRelativeUrl(prunedUrlInfo.url, rootDirectoryUrl),
+    )}`
+    // 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: urlToRelativeUrl(prunedUrlInfo.url, rootDirectoryUrl),
+        })
+        return
+      }
+      instructions.push({
+        type: "prune",
+        boundary: urlToRelativeUrl(prunedUrlInfo.url, rootDirectoryUrl),
+        acceptedBy: urlToRelativeUrl(firstUrlInfo.url, rootDirectoryUrl),
+      })
+    }
+    notifyAccepted({
+      cause,
+      reason: mainHotUpdate.reason,
+      instructions,
+    })
+  })
+
+  return {
+    name: "jsenv:sse_server",
+    appliesDuring: { dev: true },
+    serve: (request) => {
+      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,
+        }
+      }
+      const { accept } = request.headers
+      if (accept && accept.includes("text/event-stream")) {
+        const room = sseService.getOrCreateSSERoom(request)
+        return room.join(request)
+      }
+      return null
+    },
+    destroy: () => {
+      sseService.destroy()
+    },
+  }
+}

package/src/plugins/autoreload/jsenv_plugin_autoreload.js

@@ -0,0 +1,25 @@
+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"
+
+export const jsenvPluginAutoreload = ({
+  rootDirectoryUrl,
+  urlGraph,
+  scenario,
+  clientFileChangeCallbackList,
+  clientFilesPruneCallbackList,
+}) => {
+  if (scenario === "build") {
+    return []
+  }
+  return [
+    jsenvPluginHmr(),
+    jsenvPluginDevSSEClient(),
+    jsenvPluginDevSSEServer({
+      rootDirectoryUrl,
+      urlGraph,
+      clientFileChangeCallbackList,
+      clientFilesPruneCallbackList,
+    }),
+  ]
+}

package/src/plugins/autoreload/jsenv_plugin_hmr.js

@@ -0,0 +1,35 @@
+export const jsenvPluginHmr = () => {
+  return {
+    name: "jsenv:hmr",
+    appliesDuring: { dev: true },
+    redirectUrl: (reference) => {
+      const urlObject = new URL(reference.url)
+      if (!urlObject.searchParams.has("hmr")) {
+        reference.data.hmr = false
+        return null
+      }
+      reference.data.hmr = true
+      // "hmr" search param goal is to mark url as enabling hmr:
+      // this goal is achieved when we reach this part of the code
+      // We get rid of this params so that urlGraph and other parts of the code
+      // recognize the url (it is not considered as a different url)
+      urlObject.searchParams.delete("hmr")
+      urlObject.searchParams.delete("v")
+      return urlObject.href
+    },
+    transformUrlSearchParams: (reference, context) => {
+      const parentUrlInfo = context.urlGraph.getUrlInfo(reference.parentUrl)
+      if (!parentUrlInfo || !parentUrlInfo.data.hmr) {
+        return null
+      }
+      const urlInfo = context.urlGraph.getUrlInfo(reference.url)
+      if (!urlInfo.modifiedTimestamp) {
+        return null
+      }
+      return {
+        hmr: "",
+        v: urlInfo.modifiedTimestamp,
+      }
+    },
+  }
+}