@jsenv/core 27.0.0-alpha.6 → 27.0.0-alpha.60

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

@@ -0,0 +1,242 @@
+import { unevalException } from "./uneval_exception.js"
+import { displayErrorInDocument } from "./error_in_document.js"
+import { displayErrorNotification } from "./error_in_notification.js"
+
+const { __html_supervisor__ } = window
+
+export const installHtmlSupervisor = ({ logs, measurePerf }) => {
+  const errorTransformer = null // could implement error stack remapping if needed
+  const scriptExecutionResults = {}
+  let collectCalled = false
+  let pendingExecutionCount = 0
+  let resolveScriptExecutionsPromise
+  const scriptExecutionsPromise = new Promise((resolve) => {
+    resolveScriptExecutionsPromise = resolve
+  })
+  const onExecutionStart = (name) => {
+    scriptExecutionResults[name] = null // ensure execution order is reflected into the object
+    pendingExecutionCount++
+    if (measurePerf) {
+      performance.mark(`execution_start`)
+    }
+  }
+  const onExecutionSettled = (name, executionResult) => {
+    if (measurePerf) {
+      performance.measure(`execution`, `execution_start`)
+    }
+    scriptExecutionResults[name] = executionResult
+    pendingExecutionCount--
+    if (pendingExecutionCount === 0 && collectCalled) {
+      resolveScriptExecutionsPromise()
+    }
+  }
+  const onExecutionError = (
+    executionResult,
+    {
+      currentScript,
+      errorExposureInNotification = false,
+      errorExposureInDocument = true,
+    },
+  ) => {
+    const error = executionResult.error
+    if (error && error.code === "NETWORK_FAILURE") {
+      if (currentScript) {
+        const errorEvent = new Event("error")
+        currentScript.dispatchEvent(errorEvent)
+      }
+    } else if (typeof error === "object") {
+      const globalErrorEvent = new Event("error")
+      globalErrorEvent.filename = error.filename
+      globalErrorEvent.lineno = error.line || error.lineno
+      globalErrorEvent.colno = error.column || error.columnno
+      globalErrorEvent.message = error.message
+      window.dispatchEvent(globalErrorEvent)
+    }
+    if (errorExposureInNotification) {
+      displayErrorNotification(error)
+    }
+    if (errorExposureInDocument) {
+      displayErrorInDocument(error)
+    }
+    executionResult.exceptionSource = unevalException(error)
+    delete executionResult.error
+  }
+  const getNavigationStartTime = () => {
+    try {
+      return window.performance.timing.navigationStart
+    } catch (e) {
+      return Date.now()
+    }
+  }
+
+  const performExecution = async ({
+    src,
+    type,
+    currentScript,
+    execute,
+    // https://developer.mozilla.org/en-US/docs/web/html/element/script
+  }) => {
+    if (logs) {
+      console.group(`[jsenv] loading ${type} ${src}`)
+    }
+    onExecutionStart(src)
+    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) {
+      resolveScriptExecutionsPromise()
+    } else {
+      await scriptExecutionsPromise
+    }
+
+    let status = "completed"
+    let exceptionSource = ""
+    Object.keys(scriptExecutionResults).forEach((key) => {
+      const scriptExecutionResult = scriptExecutionResults[key]
+      if (scriptExecutionResult.status === "errored") {
+        status = "errored"
+        exceptionSource = scriptExecutionResult.exceptionSource
+      }
+    })
+    return {
+      status,
+      ...(status === "errored" ? { exceptionSource } : {}),
+      startTime: getNavigationStartTime(),
+      endTime: Date.now(),
+      scriptExecutionResults,
+    }
+  }
+
+  const { scriptsToExecute } = __html_supervisor__
+  const copy = scriptsToExecute.slice()
+  scriptsToExecute.length = 0
+  copy.forEach((scriptToExecute) => {
+    __html_supervisor__.addScriptToExecute(scriptToExecute)
+  })
+}
+
+export const superviseScriptTypeModule = ({ src, isInline }) => {
+  __html_supervisor__.addScriptToExecute({
+    src,
+    type: "js_module",
+    isInline,
+    execute: () => import(new URL(src, document.location.href).href),
+  })
+}

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

@@ -0,0 +1,79 @@
+window.__html_supervisor__ = {
+  // "html_supervisor_installer.js" will implement
+  // - "addScriptToExecute"
+  // - "superviseScriptTypeModule"
+  // - "collectScriptResults"
+  // and take all executions in "scriptsToExecute" and implement their supervision
+  scriptsToExecute: [],
+  addScriptToExecute: (scriptToExecute) => {
+    window.__html_supervisor__.scriptsToExecute.push(scriptToExecute)
+  },
+  superviseScript: ({ src, isInline, crossorigin, integrity }) => {
+    window.__html_supervisor__.addScriptToExecute({
+      src,
+      type: "js_classic",
+      isInline,
+      currentScript: document.currentScript,
+      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)
+        })
+      },
+    })
+  },
+  superviseScriptTypeModule: () => {
+    throw new Error("htmlSupervisor not installed")
+  },
+  getScriptExecutionResults: () => {
+    // wait for page to load before collecting script execution results
+    const htmlReadyPromise = new Promise((resolve) => {
+      if (document.readyState === "complete") {
+        resolve()
+        return
+      }
+      const loadCallback = () => {
+        window.removeEventListener("load", loadCallback)
+        resolve()
+      }
+      window.addEventListener("load", loadCallback)
+    })
+    return htmlReadyPromise.then(() => {
+      return window.__html_supervisor__.collectScriptResults()
+    })
+  },
+  collectScriptResults: () => {
+    throw new Error("htmlSupervisor not installed")
+  },
+}

package/src/{omega/core_plugins → plugins}/html_supervisor/jsenv_plugin_html_supervisor.js

@@ -2,42 +2,41 @@
  * Things happening here
  * - html supervisor module injection
  * - scripts are wrapped to be supervised
- *
- * TODO:
- *  - if ressource is referenced by ressource hint we should do sthing?
- *   I think so when we inject ?js_classic
  */
 
-import { injectQueryParams } from "@jsenv/utils/urls/url_utils.js"
+import { urlIsInsideOf } from "@jsenv/filesystem"
+
 import {
   parseHtmlString,
   stringifyHtmlAst,
   visitHtmlAst,
   getHtmlNodeAttributeByName,
   removeHtmlNodeAttributeByName,
-  setHtmlNodeText,
-  assignHtmlNodeAttributes,
   parseScriptNode,
   injectScriptAsEarlyAsPossible,
   createHtmlNode,
   htmlNodePosition,
-  removeHtmlNodeText,
   getHtmlNodeTextNode,
+  removeHtmlNodeText,
+  setHtmlNodeGeneratedText,
 } from "@jsenv/utils/html_ast/html_ast.js"
 import { generateInlineContentUrl } from "@jsenv/utils/urls/inline_content_url_generator.js"
+import { jsenvRootDirectoryUrl } from "@jsenv/core/src/jsenv_root_directory_url.js"
 
 export const jsenvPluginHtmlSupervisor = ({
+  rootDirectoryUrl,
   logs = false,
   measurePerf = false,
-} = {}) => {
-  const htmlSupervisorSetupFileUrl = new URL(
-    "./client/html_supervisor_setup.js",
-    import.meta.url,
-  ).href
-  const htmlSupervisorInstallerFileUrl = new URL(
-    "./client/html_supervisor_installer.js",
-    import.meta.url,
-  ).href
+}) => {
+  const preferSourceFiles =
+    rootDirectoryUrl === jsenvRootDirectoryUrl ||
+    urlIsInsideOf(rootDirectoryUrl, jsenvRootDirectoryUrl)
+  const htmlSupervisorSetupFileUrl = preferSourceFiles
+    ? new URL("./client/html_supervisor_setup.js", import.meta.url).href
+    : new URL("./dist/html_supervisor_setup.js", jsenvRootDirectoryUrl).href
+  const htmlSupervisorInstallerFileUrl = preferSourceFiles
+    ? new URL("./client/html_supervisor_installer.js", import.meta.url).href
+    : new URL("./dist/html_supervisor_installer.js", jsenvRootDirectoryUrl).href
 
   return {
     name: "jsenv:html_supervisor",
@@ -45,7 +44,7 @@ export const jsenvPluginHtmlSupervisor = ({
       dev: true,
       test: true,
     },
-    transform: {
+    transformUrlContent: {
       html: ({ url, content }, { referenceUtils }) => {
         const htmlAst = parseHtmlString(content)
         const scriptsToSupervise = []
@@ -64,27 +63,22 @@ export const jsenvPluginHtmlSupervisor = ({
             lineEnd,
             columnEnd,
           })
-          if (scriptCategory === "classic") {
-            inlineScriptUrl = injectQueryParams(inlineScriptUrl, {
-              js_classic: "",
-            })
-          }
           const [inlineScriptReference] = referenceUtils.foundInline({
             type: "script_src",
-            line: line - 1,
-            column,
-            isOriginal,
+            expectedType: { classic: "js_classic", module: "js_module" }[
+              scriptCategory
+            ],
+            isOriginalPosition: isOriginal,
+            specifierLine: line - 1,
+            specifierColumn: column,
             specifier: inlineScriptUrl,
-            contentType: "application/javascript",
+            contentType: "text/javascript",
             content: textNode.value,
           })
-          assignHtmlNodeAttributes(node, {
-            "src": inlineScriptReference.generatedSpecifier,
-            "src-generated-from-inline-content": "",
-          })
           removeHtmlNodeText(node)
           scriptsToSupervise.push({
             node,
+            isInline: true,
             type: scriptCategory,
             src: inlineScriptReference.generatedSpecifier,
           })
@@ -105,10 +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,
           })
@@ -146,11 +147,9 @@ export const jsenvPluginHtmlSupervisor = ({
             return
           }
         })
-        if (scriptsToSupervise.length === 0) {
-          return null
-        }
         const [htmlSupervisorInstallerFileReference] = referenceUtils.inject({
           type: "js_import_export",
+          expectedType: "js_module",
           specifier: htmlSupervisorInstallerFileUrl,
         })
         injectScriptAsEarlyAsPossible(
@@ -159,25 +158,24 @@ export const jsenvPluginHtmlSupervisor = ({
             "tagName": "script",
             "type": "module",
             "textContent": `
-import { installHtmlSupervisor } from ${
-              htmlSupervisorInstallerFileReference.generatedSpecifier
-            }
-installHtmlSupervisor(${JSON.stringify(
-              {
-                logs,
-                measurePerf,
-              },
-              null,
-              "  ",
-            )})`,
+      import { installHtmlSupervisor } from ${
+        htmlSupervisorInstallerFileReference.generatedSpecifier
+      }
+      installHtmlSupervisor(${JSON.stringify(
+        {
+          logs,
+          measurePerf,
+        },
+        null,
+        "        ",
+      )})`,
             "injected-by": "jsenv:html_supervisor",
           }),
         )
         const [htmlSupervisorSetupFileReference] = referenceUtils.inject({
           type: "script_src",
-          specifier: injectQueryParams(htmlSupervisorSetupFileUrl, {
-            js_classic: "",
-          }),
+          expectedType: "js_classic",
+          specifier: htmlSupervisorSetupFileUrl,
         })
         injectScriptAsEarlyAsPossible(
           htmlAst,
@@ -188,22 +186,32 @@ installHtmlSupervisor(${JSON.stringify(
           }),
         )
         scriptsToSupervise.forEach(
-          ({ node, type, src, integrity, crossorigin }) => {
-            removeHtmlNodeAttributeByName(node, "src")
-            assignHtmlNodeAttributes(node, {
-              "content-src": src,
-            })
-            setHtmlNodeText(
-              node,
-              generateCodeToSuperviseScript({
+          ({
+            node,
+            isInline,
+            type,
+            src,
+            defer,
+            async,
+            integrity,
+            crossorigin,
+          }) => {
+            setHtmlNodeGeneratedText(node, {
+              generatedText: generateCodeToSuperviseScript({
                 type,
                 src,
+                isInline,
+                defer,
+                async,
                 integrity,
                 crossorigin,
                 htmlSupervisorInstallerSpecifier:
                   htmlSupervisorInstallerFileReference.generatedSpecifier,
               }),
-            )
+              generatedBy: "jsenv:html_supervisor",
+              generatedFromSrc: src,
+              generatedFromInlineContent: isInline,
+            })
           },
         )
         const htmlModified = stringifyHtmlAst(htmlAst)
@@ -220,14 +228,28 @@ installHtmlSupervisor(${JSON.stringify(
 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}
-superviseScriptTypeModule(${paramsAsJson})`
+    return `
+      import { superviseScriptTypeModule } from ${htmlSupervisorInstallerSpecifier}
+      superviseScriptTypeModule(${paramsAsJson})
+`
   }
-  return `window.__html_supervisor__.superviseScript(${paramsAsJson})`
+  return `
+      window.__html_supervisor__.superviseScript(${paramsAsJson})
+`
 }

package/src/plugins/http_urls/jsenv_plugin_http_urls.js

@@ -0,0 +1,12 @@
+export const jsenvPluginHttpUrls = () => {
+  return {
+    name: "jsenv:http_urls",
+    appliesDuring: "*",
+    fetchUrlContent: (urlInfo) => {
+      if (urlInfo.url.startsWith("http") || urlInfo.url.startsWith("https")) {
+        return { external: true }
+      }
+      return null
+    },
+  }
+}

package/src/{dev/plugins/autoreload → plugins/import_meta_hot}/babel_plugin_metadata_import_meta_hot.js

@@ -16,13 +16,12 @@ export const babelPluginMetadataImportMetaHot = () => {
   }
 }
 const collectImportMetaProperties = (programPath) => {
-  let importMetaHotDetected = false
+  const importMetaHotPaths = []
   let hotDecline = false
   let hotAcceptSelf = false
   let hotAcceptDependencies = []
   programPath.traverse({
     MemberExpression(path) {
-      if (importMetaHotDetected) return
       const { node } = path
       const { object } = node
       if (object.type !== "MetaProperty") {
@@ -35,7 +34,7 @@ const collectImportMetaProperties = (programPath) => {
       const { property } = node
       const { name } = property
       if (name === "hot") {
-        importMetaHotDetected = true
+        importMetaHotPaths.push(path)
       }
     },
     CallExpression(path) {
@@ -64,7 +63,7 @@ const collectImportMetaProperties = (programPath) => {
               )
             }
             return {
-              specifierPath: firstArgPath.get(index),
+              specifierPath: firstArgPath.get(String(index)),
             }
           })
           return
@@ -79,7 +78,7 @@ const collectImportMetaProperties = (programPath) => {
     },
   })
   return {
-    importMetaHotDetected,
+    importMetaHotPaths,
     hotDecline,
     hotAcceptSelf,
     hotAcceptDependencies,

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

@@ -40,7 +40,9 @@ export const createImportMetaHot = (importMetaUrl) => {
         })
         return
       }
-      throw new Error(`invalid call to hot.accept()`)
+      throw new Error(
+        `invalid call to import.meta.hot.accept(), received ${firstArg}`,
+      )
     },
     dispose: (callback) => {
       addUrlMeta(url, {

package/src/{dev/plugins/autoreload → plugins/import_meta_hot}/html_hot_dependencies.js

@@ -53,7 +53,7 @@ export const collectHotDataFromHtmlAst = (htmlAst) => {
       })
       visitUrlSpecifierAttribute({
         node,
-        attributeName: "content-href",
+        attributeName: "generated-from-href",
         hotAccepted,
       })
     }
@@ -65,7 +65,7 @@ export const collectHotDataFromHtmlAst = (htmlAst) => {
       })
       visitUrlSpecifierAttribute({
         node,
-        attributeName: "content-src",
+        attributeName: "generated-from-src",
         hotAccepted,
       })
     }