@jsenv/plugin-transpilation 1.0.0

package/src/babel/babel_plugins_compatibility.js

@@ -0,0 +1,432 @@
+/* eslint-disable camelcase */
+// copied from
+// https://github.com/babel/babel/blob/e498bee10f0123bb208baa228ce6417542a2c3c4/packages/babel-compat-data/data/plugins.json#L1
+// https://github.com/babel/babel/blob/master/packages/babel-compat-data/data/plugins.json#L1
+// Because this is an hidden implementation detail of @babel/preset-env
+// it could be deprecated or moved anytime.
+// For that reason it makes more sens to have it inlined here
+// than importing it from an undocumented location.
+// Ideally it would be documented or a separate module
+
+export const babelPluginCompatMap = {
+  "proposal-numeric-separator": {
+    chrome: "75",
+    opera: "62",
+    edge: "79",
+    firefox: "70",
+    safari: "13",
+    node: "12.5",
+    ios: "13",
+    samsung: "11",
+    electron: "6",
+  },
+  "proposal-class-properties": {
+    chrome: "74",
+    opera: "61",
+    edge: "79",
+    node: "12",
+    electron: "6.1",
+  },
+  "proposal-private-methods": {
+    chrome: "84",
+    opera: "71",
+  },
+  "proposal-nullish-coalescing-operator": {
+    chrome: "80",
+    opera: "67",
+    edge: "80",
+    firefox: "72",
+    safari: "13.1",
+    node: "14",
+    electron: "8.1",
+  },
+  "proposal-optional-chaining": {
+    chrome: "80",
+    opera: "67",
+    edge: "80",
+    firefox: "74",
+    safari: "13.1",
+    node: "14",
+    electron: "8.1",
+  },
+  "proposal-json-strings": {
+    chrome: "66",
+    opera: "53",
+    edge: "79",
+    firefox: "62",
+    safari: "12",
+    node: "10",
+    ios: "12",
+    samsung: "9",
+    electron: "3",
+  },
+  "proposal-optional-catch-binding": {
+    chrome: "66",
+    opera: "53",
+    edge: "79",
+    firefox: "58",
+    safari: "11.1",
+    node: "10",
+    ios: "11.3",
+    samsung: "9",
+    electron: "3",
+  },
+  "transform-parameters": {
+    chrome: "49",
+    opera: "36",
+    edge: "18",
+    firefox: "53",
+    safari: "10",
+    node: "6",
+    ios: "10",
+    samsung: "5",
+    electron: "0.37",
+  },
+  "proposal-async-generator-functions": {
+    chrome: "63",
+    opera: "50",
+    edge: "79",
+    firefox: "57",
+    safari: "12",
+    node: "10",
+    ios: "12",
+    samsung: "8",
+    electron: "3",
+  },
+  "proposal-object-rest-spread": {
+    chrome: "60",
+    opera: "47",
+    edge: "79",
+    firefox: "55",
+    safari: "11.1",
+    node: "8.3",
+    ios: "11.3",
+    samsung: "8",
+    electron: "2",
+  },
+  "transform-dotall-regex": {
+    chrome: "62",
+    opera: "49",
+    edge: "79",
+    firefox: "78",
+    safari: "11.1",
+    node: "8.10",
+    ios: "11.3",
+    samsung: "8",
+    electron: "3",
+  },
+  "proposal-unicode-property-regex": {
+    chrome: "64",
+    opera: "51",
+    edge: "79",
+    firefox: "78",
+    safari: "11.1",
+    node: "10",
+    ios: "11.3",
+    samsung: "9",
+    electron: "3",
+  },
+  "transform-named-capturing-groups-regex": {
+    chrome: "64",
+    opera: "51",
+    edge: "79",
+    safari: "11.1",
+    node: "10",
+    ios: "11.3",
+    samsung: "9",
+    electron: "3",
+  },
+  "transform-async-to-generator": {
+    chrome: "55",
+    opera: "42",
+    edge: "15",
+    firefox: "52",
+    safari: "11",
+    node: "7.6",
+    ios: "11",
+    samsung: "6",
+    electron: "1.6",
+  },
+  "transform-exponentiation-operator": {
+    chrome: "52",
+    opera: "39",
+    edge: "14",
+    firefox: "52",
+    safari: "10.1",
+    node: "7",
+    ios: "10.3",
+    samsung: "6",
+    electron: "1.3",
+  },
+  "transform-template-literals": {
+    chrome: "41",
+    opera: "28",
+    edge: "13",
+    electron: "0.22",
+    firefox: "34",
+    safari: "13",
+    node: "4",
+    ios: "13",
+    samsung: "3.4",
+  },
+  "transform-literals": {
+    chrome: "44",
+    opera: "31",
+    edge: "12",
+    firefox: "53",
+    safari: "9",
+    node: "4",
+    ios: "9",
+    samsung: "4",
+    electron: "0.30",
+  },
+  "transform-function-name": {
+    chrome: "51",
+    opera: "38",
+    edge: "79",
+    firefox: "53",
+    safari: "10",
+    node: "6.5",
+    ios: "10",
+    samsung: "5",
+    electron: "1.2",
+  },
+  "transform-arrow-functions": {
+    chrome: "47",
+    opera: "34",
+    edge: "13",
+    firefox: "45",
+    safari: "10",
+    node: "6",
+    ios: "10",
+    samsung: "5",
+    electron: "0.36",
+  },
+  "transform-block-scoped-functions": {
+    chrome: "41",
+    opera: "28",
+    edge: "12",
+    firefox: "46",
+    safari: "10",
+    node: "4",
+    ie: "11",
+    ios: "10",
+    samsung: "3.4",
+    electron: "0.22",
+  },
+  "transform-classes": {
+    chrome: "46",
+    opera: "33",
+    edge: "13",
+    firefox: "45",
+    safari: "10",
+    node: "5",
+    ios: "10",
+    samsung: "5",
+    electron: "0.36",
+  },
+  "transform-object-super": {
+    chrome: "46",
+    opera: "33",
+    edge: "13",
+    firefox: "45",
+    safari: "10",
+    node: "5",
+    ios: "10",
+    samsung: "5",
+    electron: "0.36",
+  },
+  "transform-shorthand-properties": {
+    chrome: "43",
+    opera: "30",
+    edge: "12",
+    firefox: "33",
+    safari: "9",
+    node: "4",
+    ios: "9",
+    samsung: "4",
+    electron: "0.28",
+  },
+  "transform-duplicate-keys": {
+    chrome: "42",
+    opera: "29",
+    edge: "12",
+    firefox: "34",
+    safari: "9",
+    node: "4",
+    ios: "9",
+    samsung: "3.4",
+    electron: "0.25",
+  },
+  "transform-computed-properties": {
+    chrome: "44",
+    opera: "31",
+    edge: "12",
+    firefox: "34",
+    safari: "7.1",
+    node: "4",
+    ios: "8",
+    samsung: "4",
+    electron: "0.30",
+  },
+  "transform-for-of": {
+    chrome: "51",
+    opera: "38",
+    edge: "15",
+    firefox: "53",
+    safari: "10",
+    node: "6.5",
+    ios: "10",
+    samsung: "5",
+    electron: "1.2",
+  },
+  "transform-sticky-regex": {
+    chrome: "49",
+    opera: "36",
+    edge: "13",
+    firefox: "3",
+    safari: "10",
+    node: "6",
+    ios: "10",
+    samsung: "5",
+    electron: "0.37",
+  },
+  "transform-unicode-escapes": {
+    chrome: "44",
+    opera: "31",
+    edge: "12",
+    firefox: "53",
+    safari: "9",
+    node: "4",
+    ios: "9",
+    samsung: "4",
+    electron: "0.30",
+  },
+  "transform-unicode-regex": {
+    chrome: "50",
+    opera: "37",
+    edge: "13",
+    firefox: "46",
+    safari: "12",
+    node: "6",
+    ios: "12",
+    samsung: "5",
+    electron: "1.1",
+  },
+  "transform-spread": {
+    chrome: "46",
+    opera: "33",
+    edge: "13",
+    firefox: "36",
+    safari: "10",
+    node: "5",
+    ios: "10",
+    samsung: "5",
+    electron: "0.36",
+  },
+  "transform-destructuring": {
+    chrome: "51",
+    opera: "38",
+    edge: "15",
+    firefox: "53",
+    safari: "10",
+    node: "6.5",
+    ios: "10",
+    samsung: "5",
+    electron: "1.2",
+  },
+  "transform-block-scoping": {
+    chrome: "49",
+    opera: "36",
+    edge: "14",
+    firefox: "51",
+    safari: "11",
+    node: "6",
+    ios: "11",
+    samsung: "5",
+    electron: "0.37",
+  },
+  "transform-typeof-symbol": {
+    chrome: "38",
+    opera: "25",
+    edge: "12",
+    firefox: "36",
+    safari: "9",
+    node: "0.12",
+    ios: "9",
+    samsung: "3",
+    electron: "0.20",
+  },
+  "transform-new-target": {
+    chrome: "46",
+    opera: "33",
+    edge: "14",
+    firefox: "41",
+    safari: "10",
+    node: "5",
+    ios: "10",
+    samsung: "5",
+    electron: "0.36",
+  },
+  "transform-regenerator": {
+    chrome: "50",
+    opera: "37",
+    edge: "13",
+    firefox: "53",
+    safari: "10",
+    node: "6",
+    ios: "10",
+    samsung: "5",
+    electron: "1.1",
+  },
+  "transform-member-expression-literals": {
+    chrome: "7",
+    opera: "12",
+    edge: "12",
+    firefox: "2",
+    safari: "5.1",
+    node: "0.10",
+    ie: "9",
+    android: "4",
+    ios: "6",
+    phantom: "2",
+    samsung: "1",
+    electron: "0.20",
+  },
+  "transform-property-literals": {
+    chrome: "7",
+    opera: "12",
+    edge: "12",
+    firefox: "2",
+    safari: "5.1",
+    node: "0.10",
+    ie: "9",
+    android: "4",
+    ios: "6",
+    phantom: "2",
+    samsung: "1",
+    electron: "0.20",
+  },
+  "transform-reserved-words": {
+    chrome: "13",
+    opera: "10.50",
+    edge: "12",
+    firefox: "2",
+    safari: "3.1",
+    node: "0.10",
+    ie: "9",
+    android: "4.4",
+    ios: "6",
+    phantom: "2",
+    samsung: "1",
+    electron: "0.20",
+  },
+};
+
+// copy of transform-async-to-generator
+// so that async is not transpiled when supported
+babelPluginCompatMap["transform-async-to-promises"] =
+  babelPluginCompatMap["transform-async-to-generator"];
+
+babelPluginCompatMap["regenerator-transform"] =
+  babelPluginCompatMap["transform-regenerator"];

package/src/babel/global_this/babel_plugin_global_this_injector.js

@@ -0,0 +1,56 @@
+import { pathToFileURL } from "node:url";
+import { injectPolyfillIntoBabelAst } from "../polyfill_injection_in_babel_ast.js";
+
+const globalThisJsModuleClientFileUrl = new URL(
+  "./client/global_this_js_module.js",
+  import.meta.url,
+).href;
+const globalThisJsClassicClientFileUrl = new URL(
+  "./client/global_this_js_classic.js?js_classic",
+  import.meta.url,
+).href;
+
+export const babelPluginGlobalThisInjector = (
+  babel,
+  { babelHelpersAsImport, getImportSpecifier },
+) => {
+  return {
+    name: "global-this-injector",
+    visitor: {
+      Program: {
+        enter: (path, state) => {
+          let globalThisDetected = false;
+          const { filename } = state;
+          const fileUrl = pathToFileURL(filename).href;
+          if (fileUrl === globalThisJsModuleClientFileUrl) {
+            return;
+          }
+          path.traverse({
+            Identifier(path) {
+              const { node } = path;
+              if (node.name === "globalThis") {
+                globalThisDetected = true;
+                path.stop();
+              }
+            },
+          });
+          state.file.metadata.globalThisDetected = globalThisDetected;
+          if (globalThisDetected) {
+            const { sourceType } = state.file.opts.parserOpts;
+            const isJsModule = sourceType === "module";
+            injectPolyfillIntoBabelAst({
+              programPath: path,
+              isJsModule,
+              asImport: babelHelpersAsImport,
+              polyfillFileUrl: isJsModule
+                ? globalThisJsModuleClientFileUrl
+                : globalThisJsClassicClientFileUrl,
+              getPolyfillImportSpecifier: getImportSpecifier,
+              babel,
+            });
+          }
+        },
+      },
+    },
+  };
+};

package/src/babel/global_this/client/global_this_js_classic.js

@@ -0,0 +1,25 @@
+// https://mathiasbynens.be/notes/globalthis
+
+/* eslint-disable no-redeclare */
+/* global globalThis */
+let globalObject;
+if (typeof globalThis === "object") {
+  globalObject = globalThis;
+} else {
+  if (typeof this === "object") {
+    globalObject = this;
+  } else {
+    // eslint-disable-next-line no-extend-native
+    Object.defineProperty(Object.prototype, "__global__", {
+      get() {
+        return this;
+      },
+      configurable: true,
+    });
+    // eslint-disable-next-line no-undef
+    globalObject = __global__;
+    delete Object.prototype.__global__;
+  }
+
+  globalObject.globalThis = globalObject;
+}

package/src/babel/global_this/client/global_this_js_module.js

@@ -0,0 +1,21 @@
+// https://mathiasbynens.be/notes/globalthis
+
+/* eslint-disable no-redeclare */
+/* global globalThis */
+let globalObject;
+if (typeof globalThis === "object") {
+  globalObject = globalThis;
+} else {
+  // eslint-disable-next-line no-extend-native
+  Object.defineProperty(Object.prototype, "__global__", {
+    get() {
+      return this;
+    },
+    configurable: true,
+  });
+  // eslint-disable-next-line no-undef
+  globalObject = __global__;
+  delete Object.prototype.__global__;
+}
+
+globalObject.globalThis = globalObject;

package/src/babel/jsenv_plugin_babel.js

@@ -0,0 +1,35 @@
+import { applyJsTranspilation } from "./apply_js_transpilation.js";
+
+export const jsenvPluginBabel = ({ babelHelpersAsImport = true } = {}) => {
+  const transformWithBabel = async (urlInfo, context) => {
+    return applyJsTranspilation({
+      input: urlInfo.content,
+      inputIsJsModule: urlInfo.type === "js_module",
+      inputUrl: urlInfo.originalUrl,
+      outputUrl: urlInfo.generatedUrl,
+      babelHelpersAsImport,
+      babelOptions: {
+        generatorOpts: {
+          retainLines: context.dev,
+        },
+      },
+      runtimeCompat: context.clientRuntimeCompat,
+      getImportSpecifier: (clientFileUrl) => {
+        const [reference] = context.referenceUtils.inject({
+          type: "js_import",
+          expectedType: "js_module",
+          specifier: clientFileUrl,
+        });
+        return JSON.parse(reference.generatedSpecifier);
+      },
+    });
+  };
+  return {
+    name: "jsenv:babel",
+    appliesDuring: "*",
+    transformUrlContent: {
+      js_classic: transformWithBabel,
+      js_module: transformWithBabel,
+    },
+  };
+};