@jsenv/core 27.0.0-alpha.5 → 27.0.0-alpha.50

package/src/{omega/core_plugins → plugins}/commonjs_globals/jsenv_plugin_commonjs_globals.js

@@ -11,50 +11,63 @@ import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
 import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
 
 export const jsenvPluginCommonJsGlobals = () => {
+  const transformCommonJsGlobals = async (urlInfo, { scenario }) => {
+    if (
+      !urlInfo.content.includes("process.env.NODE_ENV") &&
+      !urlInfo.content.includes("__filename") &&
+      !urlInfo.content.includes("__dirname")
+    ) {
+      return null
+    }
+    const isJsModule = urlInfo.type === "js_module"
+    const replaceMap = {
+      "process.env.NODE_ENV": `("${
+        scenario === "dev" || scenario === "test" ? "dev" : "prod"
+      }")`,
+      "global": "globalThis",
+      "__filename": isJsModule
+        ? `import.meta.url.slice('file:///'.length)`
+        : `document.currentScript.src`,
+      "__dirname": isJsModule
+        ? `import.meta.url.slice('file:///'.length).replace(/[\\\/\\\\][^\\\/\\\\]*$/, '')`
+        : `new URL('./', document.currentScript.src).href`,
+    }
+    const { metadata } = await applyBabelPlugins({
+      babelPlugins: [
+        [
+          babelPluginMetadataExpressionPaths,
+          {
+            replaceMap,
+            allowConflictingReplacements: true,
+          },
+        ],
+      ],
+      urlInfo,
+    })
+    const { expressionPaths } = metadata
+    const keys = Object.keys(expressionPaths)
+    if (keys.length === 0) {
+      return null
+    }
+    const magicSource = createMagicSource(urlInfo.content)
+    keys.forEach((key) => {
+      expressionPaths[key].forEach((path) => {
+        magicSource.replace({
+          start: path.node.start,
+          end: path.node.end,
+          replacement: replaceMap[key],
+        })
+      })
+    })
+    return magicSource.toContentAndSourcemap()
+  }
+
   return {
     name: "jsenv:commonjs_globals",
     appliesDuring: "*",
-    transform: {
-      js_module: async ({ url, generatedUrl, content }, { scenario }) => {
-        const replaceMap = {
-          "process.env.NODE_ENV": `("${
-            scenario === "dev" || scenario === "test" ? "dev" : "prod"
-          }")`,
-          "global": "globalThis",
-          "__filename": `import.meta.url.slice('file:///'.length)`,
-          "__dirname": `import.meta.url.slice('file:///'.length).replace(/[\\\/\\\\][^\\\/\\\\]*$/, '')`,
-        }
-        const { metadata } = await applyBabelPlugins({
-          babelPlugins: [
-            [
-              babelPluginMetadataExpressionPaths,
-              {
-                replaceMap,
-                allowConflictingReplacements: true,
-              },
-            ],
-          ],
-          url,
-          generatedUrl,
-          content,
-        })
-        const { expressionPaths } = metadata
-        const keys = Object.keys(expressionPaths)
-        if (keys.length === 0) {
-          return null
-        }
-        const magicSource = createMagicSource(content)
-        keys.forEach((key) => {
-          expressionPaths[key].forEach((path) => {
-            magicSource.replace({
-              start: path.node.start,
-              end: path.node.end,
-              replacement: replaceMap[key],
-            })
-          })
-        })
-        return magicSource.toContentAndSourcemap()
-      },
+    transformUrlContent: {
+      js_classic: transformCommonJsGlobals,
+      js_module: transformCommonJsGlobals,
     },
   }
 }

package/src/plugins/file_urls/jsenv_plugin_file_urls.js

@@ -0,0 +1,66 @@
+import { readFileSync } from "node:fs"
+import { urlIsInsideOf, urlToRelativeUrl } from "@jsenv/filesystem"
+
+import { CONTENT_TYPE } from "@jsenv/utils/content_type/content_type.js"
+
+export const jsenvPluginFileUrls = () => {
+  return [jsenvPluginResolveAbsoluteFileUrls(), jsenvPluginFetchFileUrls()]
+}
+
+const jsenvPluginResolveAbsoluteFileUrls = () => {
+  return {
+    name: "jsenv:resolve_absolute_file_urls",
+    appliesDuring: {
+      // during dev and test it's a browser running the code
+      // so absolute file urls needs to be relativized
+      dev: true,
+      test: true,
+      // during build it's fine to use file:// urls
+      build: false,
+    },
+    resolveUrl: (reference) => {
+      if (!reference.specifier.startsWith("/@fs/")) {
+        return null
+      }
+      const fsRootRelativeUrl = reference.specifier.slice("/@fs/".length)
+      return `file:///${fsRootRelativeUrl}`
+    },
+    formatUrl: (reference, context) => {
+      if (!reference.generatedUrl.startsWith("file:")) {
+        return null
+      }
+      if (urlIsInsideOf(reference.generatedUrl, context.rootDirectoryUrl)) {
+        return `/${urlToRelativeUrl(
+          reference.generatedUrl,
+          context.rootDirectoryUrl,
+        )}`
+      }
+      return `/@fs/${reference.generatedUrl.slice("file:///".length)}`
+    },
+  }
+}
+
+const jsenvPluginFetchFileUrls = () => {
+  return {
+    name: "jsenv:fetch_file_urls",
+    appliesDuring: "*",
+    fetchUrlContent: (urlInfo) => {
+      if (!urlInfo.url.startsWith("file:")) {
+        return null
+      }
+      const urlObject = new URL(urlInfo.url)
+      const fileBuffer = readFileSync(urlObject)
+      const contentType = CONTENT_TYPE.fromUrlExtension(urlInfo.url)
+      if (CONTENT_TYPE.isTextual(contentType)) {
+        return {
+          contentType,
+          content: String(fileBuffer),
+        }
+      }
+      return {
+        contentType,
+        content: fileBuffer,
+      }
+    },
+  }
+}

package/src/{omega/core_plugins → plugins}/filesystem_magic/jsenv_plugin_filesystem_magic.js

@@ -6,19 +6,19 @@ import { urlToExtension } from "@jsenv/filesystem"
 import { applyFileSystemMagicResolution } from "@jsenv/node-esm-resolution"
 
 export const jsenvPluginFileSystemMagic = ({
-  magicExtensions = ["inherit"],
+  magicExtensions = ["inherit", ".js"],
   magicDirectoryIndex = true,
   preservesSymlink = true,
 } = {}) => {
   return {
     name: "jsenv:filesystem_magic",
     appliesDuring: "*",
-    normalize: ({ parentUrl, url }) => {
+    normalizeUrl: (reference) => {
       // http, https, data, about, etc
-      if (!url.startsWith("file:")) {
+      if (!reference.url.startsWith("file:")) {
         return null
       }
-      const urlObject = new URL(url)
+      const urlObject = new URL(reference.url)
       const { search, hash } = urlObject
       urlObject.search = ""
       urlObject.hash = ""
@@ -26,7 +26,10 @@ export const jsenvPluginFileSystemMagic = ({
         urlObject.href,
         {
           magicDirectoryIndex,
-          magicExtensions: getExtensionsToTry(magicExtensions, parentUrl),
+          magicExtensions: getExtensionsToTry(
+            magicExtensions,
+            reference.parentUrl,
+          ),
         },
       )
       if (!filesystemResolution.found) {

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")
+  },
+}