@jsenv/core 27.0.0-alpha.46 → 27.0.0-alpha.49

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

@@ -68,9 +68,9 @@ export const jsenvPluginHtmlSupervisor = ({
             expectedType: { classic: "js_classic", module: "js_module" }[
               scriptCategory
             ],
-            line: line - 1,
-            column,
             isOriginalPosition: isOriginal,
+            specifierLine: line - 1,
+            specifierColumn: column,
             specifier: inlineScriptUrl,
             contentType: "text/javascript",
             content: textNode.value,
@@ -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}

package/src/plugins/import_meta_hot/jsenv_plugin_import_meta_hot.js

@@ -1,16 +1,20 @@
+import { urlIsInsideOf } from "@jsenv/filesystem"
+
 import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
 import { parseHtmlString } from "@jsenv/utils/html_ast/html_ast.js"
 import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
-
+import { jsenvRootDirectoryUrl } from "@jsenv/core/src/jsenv_root_directory_url.js"
 import { collectHotDataFromHtmlAst } from "./html_hot_dependencies.js"
 import { babelPluginMetadataImportMetaHot } from "./babel_plugin_metadata_import_meta_hot.js"
 
-const importMetaHotClientFileUrl = new URL(
-  "./client/import_meta_hot.js",
-  import.meta.url,
-).href
+export const jsenvPluginImportMetaHot = ({ rootDirectoryUrl }) => {
+  const preferSourceFiles =
+    rootDirectoryUrl === jsenvRootDirectoryUrl ||
+    urlIsInsideOf(rootDirectoryUrl, jsenvRootDirectoryUrl)
+  const importMetaHotClientFileUrl = preferSourceFiles
+    ? new URL("./client/import_meta_hot.js", import.meta.url).href
+    : new URL("./dist/import_meta_hot.js", jsenvRootDirectoryUrl).href
 
-export const jsenvPluginImportMetaHot = () => {
   return {
     name: "jsenv:import_meta_hot",
     appliesDuring: "*",
@@ -62,7 +66,7 @@ export const jsenvPluginImportMetaHot = () => {
         if (context.scenario === "build") {
           return removeImportMetaHots(urlInfo, importMetaHotPaths)
         }
-        return injectImportMetaHot(urlInfo, context)
+        return injectImportMetaHot(urlInfo, context, importMetaHotClientFileUrl)
       },
     },
   }
@@ -84,7 +88,7 @@ const removeImportMetaHots = (urlInfo, importMetaHotPaths) => {
 // better sourcemap than doing the equivalent with babel
 // I suspect it's because I was doing injectAstAfterImport(programPath, ast.program.body[0])
 // which is likely not well supported by babel
-const injectImportMetaHot = (urlInfo, context) => {
+const injectImportMetaHot = (urlInfo, context, importMetaHotClientFileUrl) => {
   const [importMetaHotClientFileReference] = context.referenceUtils.inject({
     parentUrl: urlInfo.url,
     type: "js_import_export",

package/src/plugins/importmap/jsenv_plugin_importmap.js

@@ -123,9 +123,9 @@ export const jsenvPluginImportmap = () => {
           const [inlineImportmapReference, inlineImportmapUrlInfo] =
             context.referenceUtils.foundInline({
               type: "script_src",
-              line: line - 1,
-              column,
               isOriginalPosition: isOriginal,
+              specifierLine: line - 1,
+              specifierColumn: column,
               specifier: inlineImportmapUrl,
               contentType: "application/importmap+json",
               content: textNode.value,

package/src/plugins/inline/jsenv_plugin_html_inline_content.js

@@ -44,12 +44,12 @@ export const jsenvPluginHtmlInlineContent = ({ analyzeConvertedScripts }) => {
               context.referenceUtils.foundInline({
                 type: "link_href",
                 expectedType: "css",
+                isOriginalPosition: isOriginal,
                 // we remove 1 to the line because imagine the following html:
                 // <style>body { color: red; }</style>
                 // -> content starts same line as <style>
-                line: line - 1,
-                column,
-                isOriginalPosition: isOriginal,
+                specifierLine: line - 1,
+                specifierColumn: column,
                 specifier: inlineStyleUrl,
                 contentType: "text/css",
                 content: textNode.value,
@@ -127,8 +127,8 @@ export const jsenvPluginHtmlInlineContent = ({ analyzeConvertedScripts }) => {
                 // we remove 1 to the line because imagine the following html:
                 // <script>console.log('ok')</script>
                 // -> content starts same line as <script>
-                line: line - 1,
-                column,
+                specifierLine: line - 1,
+                specifierColumn: column,
                 isOriginalPosition: isOriginal,
                 specifier: inlineScriptUrl,
                 contentType,

package/src/plugins/inline/jsenv_plugin_js_inline_content.js

@@ -40,8 +40,8 @@ export const jsenvPluginJsInlineContent = ({ allowEscapeForVersioning }) => {
           type: "js_inline_content",
           subtype: inlineContentInfo.type, // "new_blob_first_arg", "new_inline_content_first_arg", "json_parse_first_arg"
           isOriginalPosition: urlInfo.content === urlInfo.originalContent,
-          line: inlineContentInfo.line,
-          column: inlineContentInfo.column,
+          specifierLine: inlineContentInfo.line,
+          specifierColumn: inlineContentInfo.column,
           specifier: inlineUrl,
           contentType: inlineContentInfo.contentType,
           content: inlineContentInfo.content,

package/src/plugins/plugins.js

@@ -73,7 +73,9 @@ export const getCorePlugins = ({
     jsenvPluginBundling(bundling),
     jsenvPluginMinification(minification),
 
-    jsenvPluginImportMetaHot(),
+    jsenvPluginImportMetaHot({
+      rootDirectoryUrl,
+    }),
     ...(clientAutoreload
       ? [
           jsenvPluginAutoreload({

package/src/plugins/transpilation/as_js_classic/jsenv_plugin_script_type_module_as_classic.js

@@ -202,12 +202,12 @@ export const jsenvPluginScriptTypeModuleAsClassic = ({
               node: moduleScriptNode,
               type: "script_src",
               expectedType: "js_module",
+              isOriginalPosition: isOriginal,
               // we remove 1 to the line because imagine the following html:
               // <script>console.log('ok')</script>
               // -> content starts same line as <script>
-              line: line - 1,
-              column,
-              isOriginalPosition: isOriginal,
+              specifierLine: line - 1,
+              specifierColumn: column,
               specifier: inlineScriptUrl,
               contentType: "application/javascript",
               content: textNode.value,