@jsenv/core 26.0.1 → 27.0.0-alpha.2

package/src/omega/core_plugins/babel/new_stylesheet/babel_plugin_new_stylesheet_as_jsenv_import.js

@@ -0,0 +1,117 @@
+/*
+ * TODO:
+ * - code should also inject helper when code uses new keyword on "CSSStyleSheet"
+ * - code should also inject helper when code uses "document.adoptedStylesheets"
+ */
+
+import { pathToFileURL } from "node:url"
+
+import { injectImport } from "@jsenv/utils/js_ast/babel_utils.js"
+
+export const babelPluginNewStylesheetAsJsenvImport = (
+  babel,
+  { getImportSpecifier },
+) => {
+  const newStylesheetClientFileUrl = new URL(
+    "./client/new_stylesheet.js",
+    import.meta.url,
+  ).href
+
+  return {
+    name: "new-stylesheet-as-jsenv-import",
+    visitor: {
+      Program: (programPath, { filename }) => {
+        const fileUrl = pathToFileURL(filename).href
+        if (fileUrl === newStylesheetClientFileUrl) {
+          return
+        }
+        let usesNewStylesheet = false
+        programPath.traverse({
+          CallExpression: (path) => {
+            if (path.node.callee.type !== "Import") {
+              // Some other function call, not import();
+              return
+            }
+            if (path.node.arguments[0].type !== "StringLiteral") {
+              // Non-string argument, probably a variable or expression, e.g.
+              // import(moduleId)
+              // import('./' + moduleName)
+              return
+            }
+            const sourcePath = path.get("arguments")[0]
+            usesNewStylesheet =
+              hasCssModuleQueryParam(sourcePath) ||
+              hasImportTypeCssAssertion(path)
+            if (usesNewStylesheet) {
+              path.stop()
+            }
+          },
+          ImportDeclaration: (path) => {
+            const sourcePath = path.get("source")
+            usesNewStylesheet =
+              hasCssModuleQueryParam(sourcePath) ||
+              hasImportTypeCssAssertion(path)
+            if (usesNewStylesheet) {
+              path.stop()
+            }
+          },
+          ExportAllDeclaration: (path) => {
+            const sourcePath = path.get("source")
+            usesNewStylesheet = hasCssModuleQueryParam(sourcePath)
+            if (usesNewStylesheet) {
+              path.stop()
+            }
+          },
+          ExportNamedDeclaration: (path) => {
+            if (!path.node.source) {
+              // This export has no "source", so it's probably
+              // a local variable or function, e.g.
+              // export { varName }
+              // export const constName = ...
+              // export function funcName() {}
+              return
+            }
+            const sourcePath = path.get("source")
+            usesNewStylesheet = hasCssModuleQueryParam(sourcePath)
+            if (usesNewStylesheet) {
+              path.stop()
+            }
+          },
+        })
+        if (usesNewStylesheet) {
+          injectImport({
+            programPath,
+            from: getImportSpecifier(newStylesheetClientFileUrl),
+            sideEffect: true,
+          })
+        }
+      },
+    },
+  }
+}
+
+const hasCssModuleQueryParam = (path) => {
+  const { node } = path
+  return (
+    node.type === "StringLiteral" &&
+    new URL(node.value, "https://jsenv.dev").searchParams.has(`css_module`)
+  )
+}
+
+const hasImportTypeCssAssertion = (path) => {
+  const importAssertionsDescriptor = getImportAssertionsDescriptor(
+    path.node.assertions,
+  )
+  return Boolean(importAssertionsDescriptor.type === "css")
+}
+
+const getImportAssertionsDescriptor = (importAssertions) => {
+  const importAssertionsDescriptor = {}
+  if (importAssertions) {
+    importAssertions.forEach((importAssertion) => {
+      importAssertionsDescriptor[importAssertion.key.name] =
+        importAssertion.value.value
+    })
+  }
+  return importAssertionsDescriptor
+}

package/src/omega/core_plugins/babel/new_stylesheet/client/.eslintrc.cjs

@@ -0,0 +1,24 @@
+const eslintConfig = require("../../../../../../.eslintrc.cjs")
+
+// babel helpers are copy pasted from the babel repository
+Object.assign(eslintConfig.rules, {
+  "eqeqeq": ["off"],
+  "no-eq-null": ["off"],
+  "no-undef-init": ["off"],
+  "dot-notation": ["off"],
+  "consistent-return": ["off"],
+  "one-var": ["off"],
+  "object-shorthand": ["off"],
+  "no-return-assign": ["off"],
+  "prefer-template": ["off"],
+  "prefer-rest-params": ["off"],
+  "no-void": ["off"],
+  "no-implicit-coercion": ["off"],
+  "prefer-spread": ["off"],
+  "no-loop-func": ["off"],
+  "no-negated-condition": ["off"],
+  "no-func-assign": ["off"],
+  "no-else-return": ["off"],
+})
+
+module.exports = eslintConfig

package/src/omega/core_plugins/babel/regenerator_runtime/babel_plugin_regenerator_runtime_as_jsenv_import.js

@@ -0,0 +1,34 @@
+import { pathToFileURL } from "node:url"
+
+import { injectImport } from "@jsenv/utils/js_ast/babel_utils.js"
+
+export const babelPluginRegeneratorRuntimeAsJsenvImport = (
+  babel,
+  { getImportSpecifier },
+) => {
+  const regeneratorRuntimeClientFileUrl = new URL(
+    "./client/regenerator_runtime.js",
+    import.meta.url,
+  ).href
+
+  return {
+    name: "regenerator-runtime-as-jsenv-import",
+    visitor: {
+      Identifier(path, opts) {
+        const { filename } = opts
+        const fileUrl = pathToFileURL(filename).href
+        if (fileUrl === regeneratorRuntimeClientFileUrl) {
+          return
+        }
+        const { node } = path
+        if (node.name === "regeneratorRuntime") {
+          injectImport({
+            programPath: path.scope.getProgramParent().path,
+            from: getImportSpecifier(regeneratorRuntimeClientFileUrl),
+            sideEffect: true,
+          })
+        }
+      },
+    },
+  }
+}

package/src/omega/core_plugins/commonjs_globals/jsenv_plugin_commonjs_globals.js

@@ -0,0 +1,169 @@
+/*
+ * Some code uses globals specific to Node.js in code meant to run in browsers...
+ * This plugin will replace some node globals to things compatible with web:
+ * - process.env.NODE_ENV
+ * - __filename
+ * - __dirname
+ * - global
+ */
+
+import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+
+export const jsenvPluginCommonJsGlobals = () => {
+  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()
+      },
+    },
+  }
+}
+
+// heavily inspired from https://github.com/jviide/babel-plugin-transform-replace-expressions
+// last known commit: 57b608e0eeb8807db53d1c68292621dfafb5599c
+const babelPluginMetadataExpressionPaths = (
+  babel,
+  { replaceMap = {}, allowConflictingReplacements = false },
+) => {
+  const { traverse, parse, types } = babel
+  const replacementMap = new Map()
+  const valueExpressionSet = new Set()
+
+  return {
+    name: "metadata-replace",
+
+    pre: (state) => {
+      // https://github.com/babel/babel/blob/d50e78d45b608f6e0f6cc33aeb22f5db5027b153/packages/babel-traverse/src/path/replacement.js#L93
+      const parseExpression = (value) => {
+        const expressionNode = parse(value, state.opts).program.body[0]
+          .expression
+        traverse.removeProperties(expressionNode)
+        return expressionNode
+      }
+      Object.keys(replaceMap).forEach((key) => {
+        const keyExpressionNode = parseExpression(key)
+        const candidateArray = replacementMap.get(keyExpressionNode.type) || []
+        const value = replaceMap[key]
+        const valueExpressionNode = parseExpression(value)
+        const equivalentKeyExpressionIndex = candidateArray.findIndex(
+          (candidate) =>
+            types.isNodesEquivalent(
+              candidate.keyExpressionNode,
+              keyExpressionNode,
+            ),
+        )
+        if (
+          !allowConflictingReplacements &&
+          equivalentKeyExpressionIndex > -1
+        ) {
+          throw new Error(
+            `Expressions ${candidateArray[equivalentKeyExpressionIndex].key} and ${key} conflict`,
+          )
+        }
+        const newCandidate = {
+          key,
+          value,
+          keyExpressionNode,
+          valueExpressionNode,
+        }
+        if (equivalentKeyExpressionIndex > -1) {
+          candidateArray[equivalentKeyExpressionIndex] = newCandidate
+        } else {
+          candidateArray.push(newCandidate)
+        }
+        replacementMap.set(keyExpressionNode.type, candidateArray)
+      })
+      replacementMap.forEach((candidateArray) => {
+        candidateArray.forEach((candidate) => {
+          valueExpressionSet.add(candidate.valueExpressionNode)
+        })
+      })
+    },
+    visitor: {
+      Program: (programPath, state) => {
+        const expressionPaths = {}
+        programPath.traverse({
+          Expression(path) {
+            if (valueExpressionSet.has(path.node)) {
+              path.skip()
+              return
+            }
+            const candidateArray = replacementMap.get(path.node.type)
+            if (!candidateArray) {
+              return
+            }
+            const candidateFound = candidateArray.find((candidate) => {
+              return types.isNodesEquivalent(
+                candidate.keyExpressionNode,
+                path.node,
+              )
+            })
+            if (candidateFound) {
+              try {
+                types.validate(
+                  path.parent,
+                  path.key,
+                  candidateFound.valueExpressionNode,
+                )
+              } catch (err) {
+                if (err instanceof TypeError) {
+                  path.skip()
+                  return
+                }
+                throw err
+              }
+              const paths = expressionPaths[candidateFound.key]
+              if (paths) {
+                expressionPaths[candidateFound.key] = [...paths, path]
+              } else {
+                expressionPaths[candidateFound.key] = [path]
+              }
+              return
+            }
+          },
+        })
+        state.file.metadata.expressionPaths = expressionPaths
+      },
+    },
+  }
+}

package/src/omega/core_plugins/file_urls/jsenv_plugin_file_urls.js

@@ -0,0 +1,67 @@
+import { readFileSync } from "node:fs"
+import { urlToContentType } from "@jsenv/server"
+import {
+  urlIsInsideOf,
+  urlToRelativeUrl,
+  fileSystemRootUrl,
+} from "@jsenv/filesystem"
+import { ContentType } from "@jsenv/utils/src/content_type.js"
+
+export const jsenvPluginFileUrls = () => {
+  return [jsenvPluginResolveAbsoluteFileUrls(), jsenvPluginLoadFileUrls()]
+}
+
+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,
+    },
+    resolve: ({ specifier }, { rootDirectoryUrl }) => {
+      if (!specifier.startsWith("/@fs/")) {
+        return null
+      }
+      const url = new URL(specifier.slice("/@fs".length), rootDirectoryUrl).href
+      return url
+    },
+    formatReferencedUrl: ({ url }, { rootDirectoryUrl }) => {
+      if (!url.startsWith("file:")) {
+        return null
+      }
+      const specifier = urlIsInsideOf(url, rootDirectoryUrl)
+        ? `/${urlToRelativeUrl(url, rootDirectoryUrl)}`
+        : `/@fs/${url.slice(fileSystemRootUrl.length)}`
+      return specifier
+    },
+  }
+}
+
+const jsenvPluginLoadFileUrls = () => {
+  return {
+    name: "jsenv:load_file_urls",
+    appliesDuring: "*",
+    load: ({ url }) => {
+      if (!url.startsWith("file:")) {
+        return null
+      }
+      const urlObject = new URL(url)
+      const fileBuffer = readFileSync(urlObject)
+      const contentType = urlToContentType(url)
+      if (ContentType.isTextual(contentType)) {
+        return {
+          contentType,
+          content: String(fileBuffer),
+        }
+      }
+      return {
+        contentType,
+        content: fileBuffer,
+      }
+    },
+  }
+}

package/src/omega/core_plugins/filesystem_magic/jsenv_plugin_filesystem_magic.js

@@ -0,0 +1,58 @@
+// https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/resolve.ts
+
+import { realpathSync } from "node:fs"
+import { pathToFileURL } from "node:url"
+import { urlToExtension } from "@jsenv/filesystem"
+import { applyFileSystemMagicResolution } from "@jsenv/node-esm-resolution"
+
+export const jsenvPluginFileSystemMagic = ({
+  magicExtensions = ["inherit"],
+  magicDirectoryIndex = true,
+  preservesSymlink = true,
+} = {}) => {
+  return {
+    name: "jsenv:filesystem_magic",
+    appliesDuring: "*",
+    normalize: ({ parentUrl, url }) => {
+      // http, https, data, about, etc
+      if (!url.startsWith("file:")) {
+        return null
+      }
+      const urlObject = new URL(url)
+      const { search, hash } = urlObject
+      urlObject.search = ""
+      urlObject.hash = ""
+      const filesystemResolution = applyFileSystemMagicResolution(
+        urlObject.href,
+        {
+          magicDirectoryIndex,
+          magicExtensions: getExtensionsToTry(magicExtensions, parentUrl),
+        },
+      )
+      if (!filesystemResolution.found) {
+        return null
+      }
+      const fileUrlRaw = filesystemResolution.url
+      const fileUrl = `${fileUrlRaw}${search}${hash}`
+      if (preservesSymlink) {
+        return fileUrl
+      }
+      const realPath = realpathSync(urlObject)
+      const realFileUrl = `${pathToFileURL(realPath)}${search}${hash}`
+      return realFileUrl
+    },
+  }
+}
+
+const getExtensionsToTry = (magicExtensions, importer) => {
+  const extensionsSet = new Set()
+  magicExtensions.forEach((magicExtension) => {
+    if (magicExtension === "inherit") {
+      const importerExtension = urlToExtension(importer)
+      extensionsSet.add(importerExtension)
+    } else {
+      extensionsSet.add(magicExtension)
+    }
+  })
+  return Array.from(extensionsSet.values())
+}

package/src/{internal/browser_client → omega/core_plugins/html_supervisor/client}/error_in_document.js

@@ -1,19 +1,10 @@
 export const displayErrorInDocument = (error) => {
   const title = "An error occured"
-  let theme
-  let message
-
-  if (error && error.parsingError) {
-    theme = "light"
-    const { parsingError } = error
-    message = errorToHTML(
-      parsingError.messageHTML || escapeHtml(parsingError.message),
-    )
-  } else {
-    theme = "dark"
-    message = errorToHTML(error)
-  }
-
+  let theme =
+    error && error.cause && error.cause.code === "PARSE_ERROR"
+      ? "light"
+      : "dark"
+  let message = errorToHTML(error)
   const css = `
     .jsenv-console {
       background: rgba(0, 0, 0, 0.95);
@@ -90,8 +81,11 @@ const errorToHTML = (error) => {
   let html
 
   if (error && error instanceof Error) {
-    //  stackTrace formatted by V8
-    if (Error.captureStackTrace) {
+    if (error.cause && error.cause.code === "PARSE_ERROR") {
+      html = error.messageHTML || escapeHtml(error.message)
+    }
+    // stackTrace formatted by V8
+    else if (Error.captureStackTrace) {
       html = escapeHtml(error.stack)
     } else {
       // other stack trace such as firefox do not contain error.message

package/src/omega/core_plugins/html_supervisor/client/html_supervisor_installer.js

@@ -0,0 +1,168 @@
+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()
+    }
+  }
+
+  __html_supervisor__.addExecution = async ({
+    type,
+    src,
+    currentScript,
+    promise,
+  }) => {
+    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)
+          }
+        }
+        console.groupEnd()
+      },
+    )
+  }
+  __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,
+    }
+  }
+}
+
+export const superviseScriptTypeModule = ({ src }) => {
+  __html_supervisor__.addExecution({
+    type: "js_module",
+    currentScript: null,
+    improveErrorWithFetch: true,
+    src,
+    promise: import(new URL(src, document.location.href).href),
+  })
+}
+
+const { executions } = __html_supervisor__
+executions.forEach((execution) => {
+  __html_supervisor__.addExecution(execution)
+})
+executions.length = 0