@jsenv/core 26.0.1 → 27.0.0-alpha.10

package/src/omega/core_plugins/babel/helpers/babel_plugin_structure.js

@@ -0,0 +1,176 @@
+import { getBabelHelperFileUrl, requireBabelPlugin } from "@jsenv/babel-plugins"
+import { babelPluginCompatMap } from "./babel_plugins_compatibility.js"
+
+export const getBaseBabelPluginStructure = ({
+  url,
+  isSupportedOnRuntime,
+  usesTopLevelAwait,
+  //   // https://github.com/rpetrich/babel-plugin-transform-async-to-promises/blob/92755ff8c943c97596523e586b5fa515c2e99326/async-to-promises.ts#L55
+  topLevelAwait = "simple",
+  isJsModule,
+}) => {
+  const isBabelPluginNeeded = (babelPluginName) => {
+    return !isSupportedOnRuntime(babelPluginCompatMap[babelPluginName])
+  }
+
+  const babelPluginStructure = {}
+  if (isBabelPluginNeeded("proposal-numeric-separator")) {
+    babelPluginStructure["proposal-numeric-separator"] = requireBabelPlugin(
+      "@babel/plugin-proposal-numeric-separator",
+    )
+  }
+  if (isBabelPluginNeeded("proposal-json-strings")) {
+    babelPluginStructure["proposal-json-strings"] = requireBabelPlugin(
+      "@babel/plugin-proposal-json-strings",
+    )
+  }
+  if (isBabelPluginNeeded("proposal-object-rest-spread")) {
+    babelPluginStructure["proposal-object-rest-spread"] = requireBabelPlugin(
+      "@babel/plugin-proposal-object-rest-spread",
+    )
+  }
+  if (isBabelPluginNeeded("proposal-optional-catch-binding")) {
+    babelPluginStructure["proposal-optional-catch-binding"] =
+      requireBabelPlugin("@babel/plugin-proposal-optional-catch-binding")
+  }
+  if (isBabelPluginNeeded("proposal-unicode-property-regex")) {
+    babelPluginStructure["proposal-unicode-property-regex"] =
+      requireBabelPlugin("@babel/plugin-proposal-unicode-property-regex")
+  }
+  if (
+    isJsModule &&
+    usesTopLevelAwait &&
+    !isSupportedOnRuntime("top_level_await")
+  ) {
+    babelPluginStructure["transform-async-to-promises"] = [
+      requireBabelPlugin("babel-plugin-transform-async-to-promises"),
+      {
+        topLevelAwait,
+      },
+    ]
+  } else if (isBabelPluginNeeded("transform-async-to-promises")) {
+    babelPluginStructure["transform-async-to-promises"] = requireBabelPlugin(
+      "babel-plugin-transform-async-to-promises",
+    )
+  }
+  if (isBabelPluginNeeded("transform-arrow-functions")) {
+    babelPluginStructure["transform-arrow-functions"] = requireBabelPlugin(
+      "@babel/plugin-transform-arrow-functions",
+    )
+  }
+  if (isBabelPluginNeeded("transform-block-scoped-functions")) {
+    babelPluginStructure["transform-block-scoped-functions"] =
+      requireBabelPlugin("@babel/plugin-transform-block-scoped-functions")
+  }
+  if (isBabelPluginNeeded("transform-block-scoping")) {
+    babelPluginStructure["transform-block-scoping"] = requireBabelPlugin(
+      "@babel/plugin-transform-block-scoping",
+    )
+  }
+  if (isBabelPluginNeeded("transform-classes")) {
+    babelPluginStructure["transform-classes"] = requireBabelPlugin(
+      "@babel/plugin-transform-classes",
+    )
+  }
+  if (isBabelPluginNeeded("transform-computed-properties")) {
+    babelPluginStructure["transform-computed-properties"] = requireBabelPlugin(
+      "@babel/plugin-transform-computed-properties",
+    )
+  }
+  if (isBabelPluginNeeded("transform-destructuring")) {
+    babelPluginStructure["transform-destructuring"] = requireBabelPlugin(
+      "@babel/plugin-transform-destructuring",
+    )
+  }
+  if (isBabelPluginNeeded("transform-dotall-regex")) {
+    babelPluginStructure["transform-dotall-regex"] = requireBabelPlugin(
+      "@babel/plugin-transform-dotall-regex",
+    )
+  }
+  if (isBabelPluginNeeded("transform-duplicate-keys")) {
+    babelPluginStructure["transform-duplicate-keys"] = requireBabelPlugin(
+      "@babel/plugin-transform-duplicate-keys",
+    )
+  }
+  if (isBabelPluginNeeded("transform-exponentiation-operator")) {
+    babelPluginStructure["transform-exponentiation-operator"] =
+      requireBabelPlugin("@babel/plugin-transform-exponentiation-operator")
+  }
+  if (isBabelPluginNeeded("transform-for-of")) {
+    babelPluginStructure["transform-for-of"] = requireBabelPlugin(
+      "@babel/plugin-transform-for-of",
+    )
+  }
+  if (isBabelPluginNeeded("transform-function-name")) {
+    babelPluginStructure["transform-function-name"] = requireBabelPlugin(
+      "@babel/plugin-transform-function-name",
+    )
+  }
+  if (isBabelPluginNeeded("transform-literals")) {
+    babelPluginStructure["transform-literals"] = requireBabelPlugin(
+      "@babel/plugin-transform-literals",
+    )
+  }
+  if (isBabelPluginNeeded("transform-new-target")) {
+    babelPluginStructure["transform-new-target"] = requireBabelPlugin(
+      "@babel/plugin-transform-new-target",
+    )
+  }
+  if (isBabelPluginNeeded("transform-object-super")) {
+    babelPluginStructure["transform-object-super"] = requireBabelPlugin(
+      "@babel/plugin-transform-object-super",
+    )
+  }
+  if (isBabelPluginNeeded("transform-parameters")) {
+    babelPluginStructure["transform-parameters"] = requireBabelPlugin(
+      "@babel/plugin-transform-parameters",
+    )
+  }
+  if (isBabelPluginNeeded("transform-regenerator")) {
+    babelPluginStructure["transform-regenerator"] = [
+      requireBabelPlugin("@babel/plugin-transform-regenerator"),
+      {
+        asyncGenerators: true,
+        generators: true,
+        async: false,
+      },
+    ]
+  }
+  if (isBabelPluginNeeded("transform-shorthand-properties")) {
+    babelPluginStructure["transform-shorthand-properties"] = [
+      requireBabelPlugin("@babel/plugin-transform-shorthand-properties"),
+    ]
+  }
+  if (isBabelPluginNeeded("transform-spread")) {
+    babelPluginStructure["transform-spread"] = [
+      requireBabelPlugin("@babel/plugin-transform-spread"),
+    ]
+  }
+  if (isBabelPluginNeeded("transform-sticky-regex")) {
+    babelPluginStructure["transform-sticky-regex"] = [
+      requireBabelPlugin("@babel/plugin-transform-sticky-regex"),
+    ]
+  }
+  if (isBabelPluginNeeded("transform-template-literals")) {
+    babelPluginStructure["transform-template-literals"] = [
+      requireBabelPlugin("@babel/plugin-transform-template-literals"),
+    ]
+  }
+  if (
+    isBabelPluginNeeded("transform-typeof-symbol") &&
+    // prevent "typeof" to be injected into itself:
+    // - not needed
+    // - would create infinite attempt to transform typeof
+    url !== getBabelHelperFileUrl("typeof")
+  ) {
+    babelPluginStructure["transform-typeof-symbol"] = [
+      requireBabelPlugin("@babel/plugin-transform-typeof-symbol"),
+    ]
+  }
+  if (isBabelPluginNeeded("transform-unicode-regex")) {
+    babelPluginStructure["transform-unicode-regex"] = [
+      requireBabelPlugin("@babel/plugin-transform-unicode-regex"),
+    ]
+  }
+  return babelPluginStructure
+}

package/src/{internal/features → omega/core_plugins/babel/helpers}/babel_plugins_compatibility.js

@@ -162,12 +162,12 @@ export const babelPluginCompatMap = {
     chrome: "41",
     opera: "28",
     edge: "13",
+    electron: "0.22",
     firefox: "34",
     safari: "13",
     node: "4",
     ios: "13",
     samsung: "3.4",
-    electron: "0.22",
   },
   "transform-literals": {
     chrome: "44",
@@ -430,26 +430,3 @@ babelPluginCompatMap["transform-async-to-promises"] =
 
 babelPluginCompatMap["regenerator-transform"] =
   babelPluginCompatMap["transform-regenerator"]
-
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis#browser_compatibility
-babelPluginCompatMap["global-this-as-jsenv-import"] = {
-  edge: "79",
-  firefox: "65",
-  chrome: "71",
-  safari: "12.1",
-  opera: "58",
-  ios: "12.2",
-  android: "94",
-  node: "12",
-}
-
-// needs support for both json and css
-babelPluginCompatMap["transform-import-assertions"] = {
-  chrome: "93",
-  edge: "93",
-}
-
-babelPluginCompatMap["new-stylesheet-as-jsenv-import"] = {
-  chrome: "93",
-  edge: "93",
-}

package/src/omega/core_plugins/babel/jsenv_plugin_babel.js

@@ -0,0 +1,111 @@
+import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+
+import { RUNTIME_SUPPORT } from "@jsenv/core/src/omega/runtime_support/runtime_support.js"
+import { getBaseBabelPluginStructure } from "./helpers/babel_plugin_structure.js"
+import { babelPluginBabelHelpersAsJsenvImports } from "./helpers/babel_plugin_babel_helpers_as_jsenv_imports.js"
+import { babelPluginNewStylesheetAsJsenvImport } from "./new_stylesheet/babel_plugin_new_stylesheet_as_jsenv_import.js"
+import { babelPluginGlobalThisAsJsenvImport } from "./global_this/babel_plugin_global_this_as_jsenv_import.js"
+import { babelPluginRegeneratorRuntimeAsJsenvImport } from "./regenerator_runtime/babel_plugin_regenerator_runtime_as_jsenv_import.js"
+
+export const jsenvPluginBabel = ({
+  getCustomBabelPlugins,
+  topLevelAwait,
+} = {}) => {
+  const transformWithBabel = async (urlInfo, context) => {
+    const isJsModule = urlInfo.type === "js_module"
+    const isWorker = urlInfo.subtype === "worker"
+    const isServiceWorker = urlInfo.subtype === "service_worker"
+    const isWorkerContext = isWorker || isServiceWorker
+    let { runtimeSupport } = context
+    if (isServiceWorker) {
+      // when code is executed by a service worker we can assume
+      // the execution context supports more than the default one
+      // for instance arrow function are supported
+      runtimeSupport = RUNTIME_SUPPORT.add(runtimeSupport, "service_worker")
+    }
+    if (isWorker) {
+      runtimeSupport = RUNTIME_SUPPORT.add(runtimeSupport, "worker")
+    }
+    const { referenceUtils } = context
+    const isSupportedOnRuntime = (feature) =>
+      RUNTIME_SUPPORT.isSupported(runtimeSupport, feature)
+    const babelPluginStructure = getBaseBabelPluginStructure({
+      url: urlInfo.url,
+      isSupportedOnRuntime,
+      topLevelAwait,
+      usesTopLevelAwait: urlInfo.data.usesTopLevelAwait,
+      isJsModule,
+      isWorkerContext,
+    })
+    if (getCustomBabelPlugins) {
+      Object.assign(babelPluginStructure, getCustomBabelPlugins(context))
+    }
+
+    if (isJsModule) {
+      const getImportSpecifier = (clientFileUrl) => {
+        const [reference] = referenceUtils.inject({
+          type: "js_import_export",
+          specifier: clientFileUrl,
+        })
+        return JSON.parse(reference.generatedSpecifier)
+      }
+      if (!isSupportedOnRuntime("global_this")) {
+        babelPluginStructure["global-this-as-jsenv-import"] = [
+          babelPluginGlobalThisAsJsenvImport,
+          {
+            getImportSpecifier,
+          },
+        ]
+      }
+      if (!isSupportedOnRuntime("async_generator_function")) {
+        babelPluginStructure["regenerator-runtime-as-jsenv-import"] = [
+          babelPluginRegeneratorRuntimeAsJsenvImport,
+          {
+            getImportSpecifier,
+          },
+        ]
+      }
+      if (!isSupportedOnRuntime("new_stylesheet")) {
+        babelPluginStructure["new-stylesheet-as-jsenv-import"] = [
+          babelPluginNewStylesheetAsJsenvImport,
+          {
+            getImportSpecifier,
+          },
+        ]
+      }
+      if (Object.keys(babelPluginStructure).length > 0) {
+        babelPluginStructure["babel-helper-as-jsenv-import"] = [
+          babelPluginBabelHelpersAsJsenvImports,
+          {
+            getImportSpecifier,
+          },
+        ]
+      }
+    }
+    // otherwise, concerning global_this, and new_stylesheet we must inject the code
+    // (we cannot inject an import)
+
+    const babelPlugins = Object.keys(babelPluginStructure).map(
+      (babelPluginName) => babelPluginStructure[babelPluginName],
+    )
+    const { code, map } = await applyBabelPlugins({
+      babelPlugins,
+      url: urlInfo.url,
+      generatedUrl: urlInfo.generatedUrl,
+      content: urlInfo.content,
+    })
+    return {
+      content: code,
+      sourcemap: map,
+    }
+  }
+
+  return {
+    name: "jsenv:babel",
+    appliesDuring: "*",
+    transform: {
+      js_module: transformWithBabel,
+      js_classic: transformWithBabel,
+    },
+  }
+}

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/{helpers/babel → src/omega/core_plugins/babel/new_stylesheet/client}/.eslintrc.cjs

@@ -1,4 +1,4 @@
-const eslintConfig = require("../../.eslintrc.cjs")
+const eslintConfig = require("../../../../../../.eslintrc.cjs")
 
 // babel helpers are copy pasted from the babel repository
 Object.assign(eslintConfig.rules, {

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