@jsenv/core 27.0.0-alpha.44 → 27.0.0-alpha.47

package/src/omega/url_graph.js

@@ -1,7 +1,9 @@
-import { createCallbackList } from "@jsenv/abort"
 import { urlToRelativeUrl } from "@jsenv/filesystem"
 
-export const createUrlGraph = () => {
+export const createUrlGraph = ({
+  clientFileChangeCallbackList,
+  clientFilesPruneCallbackList,
+} = {}) => {
   const urlInfos = {}
   const getUrlInfo = (url) => urlInfos[url]
   const deleteUrlInfo = (url) => {
@@ -13,6 +15,16 @@ export const createUrlGraph = () => {
       }
     }
   }
+  const resetUrlInfo = (urlInfo) => {
+    urlInfo.sourcemap = null
+    urlInfo.sourcemapReference = null
+    urlInfo.content = null
+    urlInfo.originalContent = null
+    urlInfo.type = null
+    urlInfo.subtype = null
+    urlInfo.data = {}
+    urlInfo.timing = {}
+  }
 
   const reuseOrCreateUrlInfo = (url) => {
     const existingUrlInfo = urlInfos[url]
@@ -49,7 +61,6 @@ export const createUrlGraph = () => {
     return visitDependents(urlInfo)
   }
 
-  const prunedCallbackList = createCallbackList()
   const updateReferences = (urlInfo, references) => {
     const dependencyUrls = []
     references.forEach((reference) => {
@@ -101,7 +112,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 {
@@ -109,10 +160,9 @@ export const createUrlGraph = () => {
     reuseOrCreateUrlInfo,
     getUrlInfo,
     deleteUrlInfo,
+    resetUrlInfo,
     inferReference,
     findDependent,
-
-    prunedCallbackList,
     updateReferences,
 
     toJSON: (rootDirectoryUrl) => {
@@ -133,6 +183,7 @@ export const createUrlGraph = () => {
 
 const createUrlInfo = (url) => {
   return {
+    modifiedTimestamp: 0,
     data: {}, // plugins can put whatever they want here
     references: [],
     dependencies: new Set(),
@@ -148,6 +199,7 @@ const createUrlInfo = (url) => {
     external: false,
     originalContent: undefined,
     content: undefined,
+    contentEtag: null,
     sourcemap: null,
     sourcemapReference: null,
     timing: {},

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

@@ -6,10 +6,12 @@ import { createSSEService } from "@jsenv/utils/event_source/sse_service.js"
 export const jsenvPluginDevSSEServer = ({
   rootDirectoryUrl,
   urlGraph,
-  watchedFilePatterns,
-  cooldownBetweenFileEvents,
+  clientFileChangeCallbackList,
+  clientFilesPruneCallbackList,
 }) => {
   const serverEventCallbackList = createCallbackList()
+  const sseService = createSSEService({ serverEventCallbackList })
+
   const notifyDeclined = ({ cause, reason, declinedBy }) => {
     serverEventCallbackList.notify({
       type: "reload",
@@ -32,25 +34,6 @@ export const jsenvPluginDevSSEServer = ({
       }),
     })
   }
-  const updateHmrTimestamp = (urlInfo, hmrTimestamp) => {
-    const urlInfos = urlGraph.urlInfos
-    const seen = []
-    const iterate = (urlInfo) => {
-      if (seen.includes(urlInfo.url)) {
-        return
-      }
-      seen.push(urlInfo.url)
-      urlInfo.data.hmrTimestamp = hmrTimestamp
-      urlInfo.dependents.forEach((dependentUrl) => {
-        const dependentUrlInfo = urlInfos[dependentUrl]
-        const { hotAcceptDependencies = [] } = dependentUrlInfo.data
-        if (!hotAcceptDependencies.includes(urlInfo.url)) {
-          iterate(dependentUrlInfo, hmrTimestamp)
-        }
-      })
-    }
-    iterate(urlInfo)
-  }
   const propagateUpdate = (firstUrlInfo) => {
     const urlInfos = urlGraph.urlInfos
     const iterate = (urlInfo, trace) => {
@@ -129,41 +112,29 @@ export const jsenvPluginDevSSEServer = ({
     const trace = []
     return iterate(firstUrlInfo, trace)
   }
-  const sseService = createSSEService({
-    rootDirectoryUrl,
-    watchedFilePatterns,
-    cooldownBetweenFileEvents,
-    serverEventCallbackList,
-    onFileChange: ({ url, event }) => {
-      const relativeUrl = urlToRelativeUrl(url, rootDirectoryUrl)
-      const urlInfo = urlGraph.urlInfos[url]
-      // file not part of dependency graph
-      if (!urlInfo) {
-        return
-      }
-      updateHmrTimestamp(urlInfo, Date.now())
-      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,
-        })
-      }
-    },
+  clientFileChangeCallbackList.push(({ url, event }) => {
+    const urlInfo = urlGraph.urlInfos[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,
+      })
+    }
   })
-  urlGraph.prunedCallbackList.add(({ prunedUrlInfos, firstUrlInfo }) => {
-    prunedUrlInfos.forEach((prunedUrlInfo) => {
-      prunedUrlInfo.data.hmrTimestamp = Date.now()
-      // should we delete instead?
-      // delete urlGraph.urlInfos[prunedUrlInfo.url]
-    })
+  clientFilesPruneCallbackList.push(({ prunedUrlInfos, firstUrlInfo }) => {
     const mainHotUpdate = propagateUpdate(firstUrlInfo)
     const cause = `following files are no longer referenced: ${prunedUrlInfos.map(
       (prunedUrlInfo) => urlToRelativeUrl(prunedUrlInfo.url, rootDirectoryUrl),
@@ -207,7 +178,7 @@ export const jsenvPluginDevSSEServer = ({
   return {
     name: "jsenv:sse_server",
     appliesDuring: { dev: true },
-    serve: (request, { urlGraph, rootDirectoryUrl }) => {
+    serve: (request) => {
       if (request.ressource === "/__graph__") {
         const graphJson = JSON.stringify(urlGraph.toJSON(rootDirectoryUrl))
         return {

package/src/plugins/autoreload/jsenv_plugin_autoreload.js

@@ -6,8 +6,8 @@ export const jsenvPluginAutoreload = ({
   rootDirectoryUrl,
   urlGraph,
   scenario,
-  watchedFilePatterns,
-  cooldownBetweenFileEvents,
+  clientFileChangeCallbackList,
+  clientFilesPruneCallbackList,
 }) => {
   if (scenario === "build") {
     return []
@@ -20,8 +20,8 @@ export const jsenvPluginAutoreload = ({
     jsenvPluginDevSSEServer({
       rootDirectoryUrl,
       urlGraph,
-      watchedFilePatterns,
-      cooldownBetweenFileEvents,
+      clientFileChangeCallbackList,
+      clientFilesPruneCallbackList,
     }),
   ]
 }

package/src/plugins/autoreload/jsenv_plugin_hmr.js

@@ -23,12 +23,12 @@ export const jsenvPluginHmr = () => {
         return null
       }
       const urlInfo = context.urlGraph.getUrlInfo(reference.url)
-      if (!urlInfo.data.hmrTimestamp) {
+      if (!urlInfo.modifiedTimestamp) {
         return null
       }
       return {
         hmr: "",
-        v: urlInfo.data.hmrTimestamp,
+        v: urlInfo.modifiedTimestamp,
       }
     },
   }

package/src/plugins/html_supervisor/client/html_supervisor_installer.js

@@ -69,62 +69,135 @@ export const installHtmlSupervisor = ({ logs, measurePerf }) => {
     }
   }
 
-  __html_supervisor__.addExecution = async ({
-    type,
+  const performExecution = async ({
     src,
+    type,
     currentScript,
-    promise,
+    execute,
+    // https://developer.mozilla.org/en-US/docs/web/html/element/script
   }) => {
     if (logs) {
       console.group(`[jsenv] loading ${type} ${src}`)
     }
     onExecutionStart(src)
-    promise.then(
-      (namespace) => {
-        const executionResult = {
-          status: "completed",
-          namespace,
-          coverage: window.__coverage__,
-        }
-        onExecutionSettled(src, executionResult)
-        if (logs) {
-          console.log(`${type} load ended`)
-          console.groupEnd()
-        }
-      },
-      async (e) => {
-        let error = e
-        const executionResult = {
-          status: "errored",
-          coverage: window.__coverage__,
-        }
-        let errorExposureInConsole = true
-        if (e.name === "SyntaxError") {
-          // errorExposureInConsole = false
-        }
-        if (errorTransformer) {
-          try {
-            error = await errorTransformer(e)
-          } catch (e) {}
-        }
-        executionResult.error = error
-        onExecutionSettled(src, executionResult)
-        onExecutionError(executionResult, {
-          currentScript,
-        })
-        if (errorExposureInConsole) {
-          if (typeof window.reportError === "function") {
-            window.reportError(error)
-          } else {
-            console.error(error)
-          }
-        }
-        if (logs) {
-          console.groupEnd()
+    let completed
+    let result
+    let error
+    try {
+      result = await execute()
+      completed = true
+    } catch (e) {
+      completed = false
+      error = e
+    }
+    if (completed) {
+      const executionResult = {
+        status: "completed",
+        namespace: result,
+        coverage: window.__coverage__,
+      }
+      onExecutionSettled(src, executionResult)
+      if (logs) {
+        console.log(`${type} load ended`)
+        console.groupEnd()
+      }
+      return
+    }
+    const executionResult = {
+      status: "errored",
+      coverage: window.__coverage__,
+    }
+    let errorExposureInConsole = true
+    if (error.name === "SyntaxError") {
+      // errorExposureInConsole = false
+    }
+    if (errorTransformer) {
+      try {
+        error = await errorTransformer(error)
+      } catch (e) {}
+    }
+    executionResult.error = error
+    onExecutionSettled(src, executionResult)
+    onExecutionError(executionResult, {
+      currentScript,
+    })
+    if (errorExposureInConsole) {
+      if (typeof window.reportError === "function") {
+        window.reportError(error)
+      } else {
+        console.error(error)
+      }
+    }
+    if (logs) {
+      console.groupEnd()
+    }
+  }
+
+  const queue = []
+  let previousDonePromise = null
+  const dequeue = () => {
+    const next = queue.shift()
+    if (next) {
+      __html_supervisor__.addScriptToExecute(next)
+    } else {
+      const nextDefered = deferQueue.shift()
+      if (nextDefered) {
+        __html_supervisor__.addScriptToExecute(nextDefered)
+      }
+    }
+  }
+  const deferQueue = []
+  let previousDeferDonePromise = null
+  __html_supervisor__.addScriptToExecute = async (scriptToExecute) => {
+    if (scriptToExecute.async) {
+      performExecution(scriptToExecute)
+      return
+    }
+    const useDeferQueue =
+      scriptToExecute.defer || scriptToExecute.type === "js_module"
+    if (useDeferQueue) {
+      if (document.readyState !== "interactive") {
+        deferQueue.push(scriptToExecute)
+        return
+      }
+      if (previousDonePromise) {
+        // defer must wait for the regular script to be done
+        deferQueue.push(scriptToExecute)
+        return
+      }
+      if (previousDeferDonePromise) {
+        deferQueue.push(scriptToExecute)
+        return
+      }
+      previousDeferDonePromise = performExecution(scriptToExecute)
+      await previousDeferDonePromise
+      previousDeferDonePromise = null
+      dequeue()
+      return
+    }
+    if (previousDonePromise) {
+      queue.push(scriptToExecute)
+      return
+    }
+    previousDonePromise = performExecution(scriptToExecute)
+    await previousDonePromise
+    previousDonePromise = null
+    dequeue()
+  }
+  if (
+    document.readyState !== "intractive" &&
+    document.readyState !== "complete"
+  ) {
+    document.addEventListener("readystatechange", () => {
+      if (document.readyState === "interactive") {
+        const nextDefered = deferQueue.shift()
+        if (nextDefered) {
+          __html_supervisor__.addScriptToExecute(nextDefered)
         }
-      },
-    )
+      }
+    })
   }
+
   __html_supervisor__.collectScriptResults = async () => {
     collectCalled = true
     if (pendingExecutionCount === 0) {
@@ -150,20 +223,20 @@ export const installHtmlSupervisor = ({ logs, measurePerf }) => {
       scriptExecutionResults,
     }
   }
+
+  const { scriptsToExecute } = __html_supervisor__
+  const copy = scriptsToExecute.slice()
+  scriptsToExecute.length = 0
+  copy.forEach((scriptToExecute) => {
+    __html_supervisor__.addScriptToExecute(scriptToExecute)
+  })
 }
 
-export const superviseScriptTypeModule = ({ src }) => {
-  __html_supervisor__.addExecution({
-    type: "js_module",
-    currentScript: null,
-    improveErrorWithFetch: true,
+export const superviseScriptTypeModule = ({ src, isInline }) => {
+  __html_supervisor__.addScriptToExecute({
     src,
-    promise: import(new URL(src, document.location.href).href),
+    type: "js_module",
+    isInline,
+    execute: () => import(new URL(src, document.location.href).href),
   })
 }
-
-const { executions } = __html_supervisor__
-executions.forEach((execution) => {
-  __html_supervisor__.addExecution(execution)
-})
-executions.length = 0

package/src/plugins/html_supervisor/client/html_supervisor_setup.js

@@ -1,62 +1,61 @@
 window.__html_supervisor__ = {
   // "html_supervisor_installer.js" will implement
-  // - "addExecution"
-  // - "collectScriptResults"
+  // - "addScriptToExecute"
   // - "superviseScriptTypeModule"
-  // and take all executions in "executions" and implement their supervision
-  executions: [],
-  addExecution: (execution) => {
-    window.__html_supervisor__.executions.push(execution)
-  },
-  collectScriptResults: () => {
-    throw new Error("htmlSupervisor not installed")
-  },
-  superviseScriptTypeModule: () => {
-    throw new Error("htmlSupervisor not installed")
+  // - "collectScriptResults"
+  // and take all executions in "scriptsToExecute" and implement their supervision
+  scriptsToExecute: [],
+  addScriptToExecute: (scriptToExecute) => {
+    window.__html_supervisor__.scriptsToExecute.push(scriptToExecute)
   },
-  superviseScript: ({ src, crossorigin, integrity }) => {
-    window.__html_supervisor__.addExecution({
+  superviseScript: ({ src, isInline, crossorigin, integrity }) => {
+    window.__html_supervisor__.addScriptToExecute({
+      src,
       type: "js_classic",
-      improveErrorWithFetch: true,
+      isInline,
       currentScript: document.currentScript,
-      src,
-      promise: new Promise((resolve, reject) => {
-        const script = document.createElement("script")
-        if (crossorigin) {
-          script.crossorigin = crossorigin
-        }
-        if (integrity) {
-          script.integrity = integrity
-        }
-        script.src = src
-        const scriptUrl = new URL(src, window.location).href
-        let lastWindowErrorUrl
-        let lastWindowError
-        const windowErrorCallback = (e) => {
-          lastWindowErrorUrl = e.filename
-          lastWindowError = e.error
-        }
-        const cleanup = () => {
-          document.body.removeChild(script)
-          window.removeEventListener("error", windowErrorCallback)
-        }
-        window.addEventListener("error", windowErrorCallback)
-        script.addEventListener("error", () => {
-          cleanup()
-          reject(src)
-        })
-        script.addEventListener("load", () => {
-          cleanup()
-          if (lastWindowErrorUrl === scriptUrl) {
-            reject(lastWindowError)
-          } else {
-            resolve()
+      execute: () => {
+        return new Promise((resolve, reject) => {
+          const script = document.createElement("script")
+          if (crossorigin) {
+            script.crossorigin = crossorigin
+          }
+          if (integrity) {
+            script.integrity = integrity
+          }
+          script.src = src
+          const scriptUrl = new URL(src, window.location).href
+          let lastWindowErrorUrl
+          let lastWindowError
+          const windowErrorCallback = (e) => {
+            lastWindowErrorUrl = e.filename
+            lastWindowError = e.error
           }
+          const cleanup = () => {
+            document.body.removeChild(script)
+            window.removeEventListener("error", windowErrorCallback)
+          }
+          window.addEventListener("error", windowErrorCallback)
+          script.addEventListener("error", () => {
+            cleanup()
+            reject(src)
+          })
+          script.addEventListener("load", () => {
+            cleanup()
+            if (lastWindowErrorUrl === scriptUrl) {
+              reject(lastWindowError)
+            } else {
+              resolve()
+            }
+          })
+          document.body.appendChild(script)
         })
-        document.body.appendChild(script)
-      }),
+      },
     })
   },
+  superviseScriptTypeModule: () => {
+    throw new Error("htmlSupervisor not installed")
+  },
   getScriptExecutionResults: () => {
     // wait for page to load before collecting script execution results
     const htmlReadyPromise = new Promise((resolve) => {
@@ -74,4 +73,7 @@ window.__html_supervisor__ = {
       return window.__html_supervisor__.collectScriptResults()
     })
   },
+  collectScriptResults: () => {
+    throw new Error("htmlSupervisor not installed")
+  },
 }

package/src/plugins/html_supervisor/jsenv_plugin_html_supervisor.js

@@ -99,11 +99,17 @@ export const jsenvPluginHtmlSupervisor = ({
           const crossorigin = crossoriginAttribute
             ? crossoriginAttribute.value
             : undefined
+          const deferAttribute = getHtmlNodeAttributeByName(node, "crossorigin")
+          const defer = deferAttribute ? deferAttribute.value : undefined
+          const asyncAttribute = getHtmlNodeAttributeByName(node, "crossorigin")
+          const async = asyncAttribute ? asyncAttribute.value : undefined
           removeHtmlNodeAttributeByName(node, "src")
           scriptsToSupervise.push({
             node,
             type: scriptCategory,
             src: srcAttribute.value,
+            defer,
+            async,
             integrity,
             crossorigin,
           })
@@ -183,11 +189,23 @@ export const jsenvPluginHtmlSupervisor = ({
           }),
         )
         scriptsToSupervise.forEach(
-          ({ node, isInline, type, src, integrity, crossorigin }) => {
+          ({
+            node,
+            isInline,
+            type,
+            src,
+            defer,
+            async,
+            integrity,
+            crossorigin,
+          }) => {
             setHtmlNodeGeneratedText(node, {
               generatedText: generateCodeToSuperviseScript({
                 type,
                 src,
+                isInline,
+                defer,
+                async,
                 integrity,
                 crossorigin,
                 htmlSupervisorInstallerSpecifier:
@@ -213,11 +231,21 @@ export const jsenvPluginHtmlSupervisor = ({
 const generateCodeToSuperviseScript = ({
   type,
   src,
+  isInline,
+  defer,
+  async,
   integrity,
   crossorigin,
   htmlSupervisorInstallerSpecifier,
 }) => {
-  const paramsAsJson = JSON.stringify({ src, integrity, crossorigin })
+  const paramsAsJson = JSON.stringify({
+    src,
+    isInline,
+    defer,
+    async,
+    integrity,
+    crossorigin,
+  })
   if (type === "module") {
     return `
       import { superviseScriptTypeModule } from ${htmlSupervisorInstallerSpecifier}