@jsenv/plugin-transpilation 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+This plugin has its own package because:
+
+- It's a direct dependency of `@jsenv/core` but it is easier to reason about this code when its properly splitted in its own package

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@jsenv/plugin-transpilation",
+  "version": "1.0.0",
+  "description": "TODO",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jsenv/core",
+    "directory": "packages/internal/plugin-transpilation"
+  },
+  "engines": {
+    "node": ">=16.13.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./src/main.js",
+  "files": [
+    "/src/"
+  ],
+  "dependencies": {
+    "@babel/plugin-proposal-json-strings": "7.18.6",
+    "@babel/plugin-proposal-numeric-separator": "7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
+    "@babel/plugin-proposal-optional-catch-binding": "7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
+    "@babel/plugin-proposal-unicode-property-regex": "7.18.6",
+    "@babel/plugin-syntax-import-assertions": "7.20.0",
+    "@babel/plugin-syntax-object-rest-spread": "7.8.3",
+    "@babel/plugin-syntax-optional-catch-binding": "7.8.3",
+    "@babel/plugin-transform-arrow-functions": "7.21.5",
+    "@babel/plugin-transform-block-scoped-functions": "7.18.6",
+    "@babel/plugin-transform-block-scoping": "7.21.0",
+    "@babel/plugin-transform-classes": "7.21.0",
+    "@babel/plugin-transform-computed-properties": "7.21.5",
+    "@babel/plugin-transform-destructuring": "7.21.3",
+    "@babel/plugin-transform-dotall-regex": "7.18.6",
+    "@babel/plugin-transform-duplicate-keys": "7.18.9",
+    "@babel/plugin-transform-exponentiation-operator": "7.18.6",
+    "@babel/plugin-transform-for-of": "7.21.5",
+    "@babel/plugin-transform-function-name": "7.18.9",
+    "@babel/plugin-transform-literals": "7.18.9",
+    "@babel/plugin-transform-new-target": "7.22.3",
+    "@babel/plugin-transform-object-super": "7.18.6",
+    "@babel/plugin-transform-parameters": "7.22.3",
+    "@babel/plugin-transform-regenerator": "7.21.5",
+    "@babel/plugin-transform-shorthand-properties": "7.18.6",
+    "@babel/plugin-transform-spread": "7.20.7",
+    "@babel/plugin-transform-sticky-regex": "7.18.6",
+    "@babel/plugin-transform-template-literals": "7.18.9",
+    "@babel/plugin-transform-typeof-symbol": "7.18.9",
+    "@babel/plugin-transform-unicode-regex": "7.18.6",
+    "babel-plugin-transform-async-to-promises": "0.8.18",
+    "construct-style-sheets-polyfill": "3.1.0",
+    "@jsenv/ast": "4.0.3",
+    "@jsenv/runtime-compat": "1.0.0",
+    "lightningcss": "1.20.0"
+  }
+}

package/src/as_js_module/convert_js_classic_to_js_module.js

@@ -0,0 +1,42 @@
+import { applyBabelPlugins } from "@jsenv/ast";
+import { composeTwoSourcemaps } from "@jsenv/sourcemap";
+
+export const convertJsClassicToJsModule = async ({
+  isWebWorker,
+  input,
+  inputSourcemap,
+  inputUrl,
+  outputUrl,
+}) => {
+  const { code, map } = await applyBabelPlugins({
+    babelPlugins: [[babelPluginReplaceTopLevelThis, { isWebWorker }]],
+    input,
+    inputIsJsModule: false,
+    inputUrl,
+    outputUrl,
+  });
+  const sourcemap = await composeTwoSourcemaps(inputSourcemap, map);
+  return {
+    content: code,
+    sourcemap,
+  };
+};
+
+const babelPluginReplaceTopLevelThis = () => {
+  return {
+    name: "replace-top-level-this",
+    visitor: {
+      Program: (programPath, state) => {
+        const { isWebWorker } = state.opts;
+        programPath.traverse({
+          ThisExpression: (path) => {
+            const closestFunction = path.getFunctionParent();
+            if (!closestFunction) {
+              path.replaceWithSourceString(isWebWorker ? "self" : "window");
+            }
+          },
+        });
+      },
+    },
+  };
+};

package/src/as_js_module/jsenv_plugin_as_js_module.js

@@ -0,0 +1,89 @@
+/*
+ * Js modules might not be able to import js meant to be loaded by <script>
+ * Among other things this happens for a top level this:
+ * - With <script> this is window
+ * - With an import this is undefined
+ * Example of this: https://github.com/video-dev/hls.js/issues/2911
+ *
+ * This plugin fix this issue by rewriting top level this into window
+ * and can be used like this for instance import("hls?as_js_module")
+ */
+
+import { urlToFilename } from "@jsenv/urls";
+
+import { convertJsClassicToJsModule } from "./convert_js_classic_to_js_module.js";
+
+export const jsenvPluginAsJsModule = () => {
+  return {
+    name: "jsenv:as_js_module",
+    appliesDuring: "*",
+    redirectReference: (reference) => {
+      if (reference.searchParams.has("as_js_module")) {
+        reference.expectedType = "js_module";
+        const filename = urlToFilename(reference.url);
+        const [basename] = splitFileExtension(filename);
+        reference.filename = `${basename}.mjs`;
+      }
+    },
+    fetchUrlContent: async (urlInfo, context) => {
+      const [jsClassicReference, jsClassicUrlInfo] =
+        context.getWithoutSearchParam({
+          urlInfo,
+          context,
+          searchParam: "as_js_module",
+          // override the expectedType to "js_classic"
+          // because when there is ?as_js_module it means the underlying resource
+          // is js_classic
+          expectedType: "js_classic",
+        });
+      if (!jsClassicReference) {
+        return null;
+      }
+      await context.fetchUrlContent(jsClassicUrlInfo, {
+        reference: jsClassicReference,
+      });
+      if (context.dev) {
+        context.referenceUtils.found({
+          type: "js_import",
+          subtype: jsClassicReference.subtype,
+          specifier: jsClassicReference.url,
+          expectedType: "js_classic",
+        });
+      } else if (context.build && jsClassicUrlInfo.dependents.size === 0) {
+        context.urlGraph.deleteUrlInfo(jsClassicUrlInfo.url);
+      }
+      const { content, sourcemap } = await convertJsClassicToJsModule({
+        input: jsClassicUrlInfo.content,
+        inputSourcemap: jsClassicUrlInfo.sourcemap,
+        inputUrl: jsClassicUrlInfo.url,
+        outputUrl: jsClassicUrlInfo.generatedUrl,
+        isWebWorker: isWebWorkerUrlInfo(urlInfo),
+      });
+      return {
+        content,
+        contentType: "text/javascript",
+        type: "js_module",
+        originalUrl: jsClassicUrlInfo.originalUrl,
+        originalContent: jsClassicUrlInfo.originalContent,
+        sourcemap,
+        data: jsClassicUrlInfo.data,
+      };
+    },
+  };
+};
+
+const isWebWorkerUrlInfo = (urlInfo) => {
+  return (
+    urlInfo.subtype === "worker" ||
+    urlInfo.subtype === "service_worker" ||
+    urlInfo.subtype === "shared_worker"
+  );
+};
+
+const splitFileExtension = (filename) => {
+  const dotLastIndex = filename.lastIndexOf(".");
+  if (dotLastIndex === -1) {
+    return [filename, ""];
+  }
+  return [filename.slice(0, dotLastIndex), filename.slice(dotLastIndex)];
+};

package/src/babel/apply_js_transpilation.js

@@ -0,0 +1,74 @@
+import { applyBabelPlugins } from "@jsenv/ast";
+import { RUNTIME_COMPAT } from "@jsenv/runtime-compat";
+
+import { getBaseBabelPluginStructure } from "./babel_plugin_structure.js";
+import { babelPluginBabelHelpersAsJsenvImports } from "./babel_plugin_babel_helpers_as_jsenv_imports.js";
+import { babelPluginNewStylesheetInjector } from "./new_stylesheet/babel_plugin_new_stylesheet_injector.js";
+import { babelPluginGlobalThisInjector } from "./global_this/babel_plugin_global_this_injector.js";
+import { babelPluginRegeneratorRuntimeInjector } from "./regenerator_runtime/babel_plugin_regenerator_runtime_injector.js";
+
+export const applyJsTranspilation = async ({
+  input,
+  inputIsJsModule = false,
+  inputUrl,
+  outputUrl,
+  runtimeCompat,
+  babelHelpersAsImport = true,
+  babelOptions,
+  getImportSpecifier,
+}) => {
+  const isSupported = (feature) => {
+    return RUNTIME_COMPAT.isSupported(runtimeCompat, feature);
+  };
+  const babelPluginStructure = getBaseBabelPluginStructure({
+    url: inputUrl,
+    isSupported,
+    isJsModule: inputIsJsModule,
+    getImportSpecifier,
+  });
+
+  if (!isSupported("global_this")) {
+    babelPluginStructure["global-this-injector"] = [
+      babelPluginGlobalThisInjector,
+      { babelHelpersAsImport, getImportSpecifier },
+    ];
+  }
+  if (!isSupported("async_generator_function")) {
+    babelPluginStructure["regenerator-runtime-injector"] = [
+      babelPluginRegeneratorRuntimeInjector,
+      { babelHelpersAsImport, getImportSpecifier },
+    ];
+  }
+  if (!isSupported("new_stylesheet")) {
+    babelPluginStructure["new-stylesheet-injector"] = [
+      babelPluginNewStylesheetInjector,
+      { babelHelpersAsImport, getImportSpecifier },
+    ];
+  }
+  if (
+    inputIsJsModule &&
+    babelHelpersAsImport &&
+    Object.keys(babelPluginStructure).length > 0
+  ) {
+    babelPluginStructure["babel-helper-as-jsenv-import"] = [
+      babelPluginBabelHelpersAsJsenvImports,
+      { getImportSpecifier },
+    ];
+  }
+
+  const babelPlugins = Object.keys(babelPluginStructure).map(
+    (babelPluginName) => babelPluginStructure[babelPluginName],
+  );
+  const { code, map } = await applyBabelPlugins({
+    babelPlugins,
+    options: babelOptions,
+    input,
+    inputIsJsModule,
+    inputUrl,
+    outputUrl,
+  });
+  return {
+    content: code,
+    sourcemap: map,
+  };
+};

package/src/babel/babel_helper_directory/README.md

@@ -0,0 +1,8 @@
+# Babel helpers
+
+Babel helpers are copied in there to properly appear in sourcemap.
+
+- Last sync date: 3 May 2023
+
+- Helpers file: https://github.com/babel/babel/blob/main/packages/babel-helpers/src/helpers.ts
+- Individual helpers: https://github.com/babel/babel/tree/main/packages/babel-helpers/src/helpers

package/src/babel/babel_helper_directory/babel_helper_directory.js

@@ -0,0 +1,35 @@
+/*
+ * Generated helpers
+ * - https://github.com/babel/babel/commits/main/packages/babel-helpers/src/helpers.ts
+ * File helpers
+ * - https://github.com/babel/babel/tree/main/packages/babel-helpers/src/helpers
+ *
+ */
+export const babelHelperClientDirectoryUrl = new URL(
+  "./babel_helpers/",
+  import.meta.url,
+).href;
+
+// we cannot use "@jsenv/core/src/*" because babel helper might be injected
+// into node_modules not depending on "@jsenv/core"
+export const getBabelHelperFileUrl = (babelHelperName) => {
+  const babelHelperFileUrl = new URL(
+    `./${babelHelperName}/${babelHelperName}.js`,
+    babelHelperClientDirectoryUrl,
+  ).href;
+  return babelHelperFileUrl;
+};
+
+export const babelHelperNameFromUrl = (url) => {
+  if (!url.startsWith(babelHelperClientDirectoryUrl)) {
+    return null;
+  }
+  const afterBabelHelperDirectory = url.slice(
+    babelHelperClientDirectoryUrl.length,
+  );
+  const babelHelperName = afterBabelHelperDirectory.slice(
+    0,
+    afterBabelHelperDirectory.indexOf("/"),
+  );
+  return babelHelperName;
+};

package/src/babel/babel_helper_directory/babel_helpers/AsyncGenerator/AsyncGenerator.js

@@ -0,0 +1,112 @@
+/* @minVersion 7.0.0-beta.0 */
+
+import OverloadYield from "../overloadYield/overloadYield.js";
+
+export default function AsyncGenerator(gen) {
+  var front, back;
+
+  function send(key, arg) {
+    return new Promise(function (resolve, reject) {
+      var request = {
+        key: key,
+        arg: arg,
+        resolve: resolve,
+        reject: reject,
+        next: null,
+      };
+
+      if (back) {
+        back = back.next = request;
+      } else {
+        front = back = request;
+        resume(key, arg);
+      }
+    });
+  }
+
+  function resume(key, arg) {
+    try {
+      var result = gen[key](arg);
+      var value = result.value;
+      var overloaded = value instanceof OverloadYield;
+
+      Promise.resolve(overloaded ? value.v : value).then(
+        function (arg) {
+          if (overloaded) {
+            // Overloaded yield requires calling into the generator twice:
+            //  - first we get the iterator result wrapped in a promise
+            //    (the gen[key](arg) call above)
+            //  - then we await it (the Promise.resolve call above)
+            //  - then we give the result back to the iterator, so that it can:
+            //    * if it was an await, use its result
+            //    * if it was a yield*, possibly return the `done: true` signal
+            //      so that yield* knows that the iterator is finished.
+            //      This needs to happen in the second call, because in the
+            //      first one `done: true` was hidden in the promise and thus
+            //      not visible to the (sync) yield*.
+            //      The other part of this implementation is in asyncGeneratorDelegate.
+            var nextKey = key === "return" ? "return" : "next";
+            if (!value.k || arg.done) {
+              // await or end of yield*
+              return resume(nextKey, arg);
+            } else {
+              // yield*, not done
+              arg = gen[nextKey](arg).value;
+            }
+          }
+
+          settle(result.done ? "return" : "normal", arg);
+        },
+        function (err) {
+          resume("throw", err);
+        }
+      );
+    } catch (err) {
+      settle("throw", err);
+    }
+  }
+
+  function settle(type, value) {
+    switch (type) {
+      case "return":
+        front.resolve({ value: value, done: true });
+        break;
+      case "throw":
+        front.reject(value);
+        break;
+      default:
+        front.resolve({ value: value, done: false });
+        break;
+    }
+
+    front = front.next;
+    if (front) {
+      resume(front.key, front.arg);
+    } else {
+      back = null;
+    }
+  }
+
+  this._invoke = send;
+
+  // Hide "return" method if generator return is not supported
+  if (typeof gen.return !== "function") {
+    this.return = undefined;
+  }
+}
+
+AsyncGenerator.prototype[
+  (typeof Symbol === "function" && Symbol.asyncIterator) || "@@asyncIterator"
+] = function () {
+  return this;
+};
+
+AsyncGenerator.prototype.next = function (arg) {
+  return this._invoke("next", arg);
+};
+AsyncGenerator.prototype.throw = function (arg) {
+  return this._invoke("throw", arg);
+};
+AsyncGenerator.prototype.return = function (arg) {
+  return this._invoke("return", arg);
+};

package/src/babel/babel_helper_directory/babel_helpers/AwaitValue/AwaitValue.js

@@ -0,0 +1,3 @@
+export default function _AwaitValue (value) {
+  this.wrapped = value
+}

package/src/babel/babel_helper_directory/babel_helpers/applyDecoratedDescriptor/applyDecoratedDescriptor.js

@@ -0,0 +1,23 @@
+export default function _applyDecoratedDescriptor(target, property, decorators, descriptor, context){
+  var desc = {};
+  Object.keys(descriptor).forEach(function(key){
+      desc[key] = descriptor[key];
+  });
+  desc.enumerable = !!desc.enumerable;
+  desc.configurable = !!desc.configurable;
+  if ('value' in desc || desc.initializer){
+      desc.writable = true;
+  }
+  desc = decorators.slice().reverse().reduce(function(desc, decorator){
+      return decorator(target, property, desc) || desc;
+  }, desc);
+  if (context && desc.initializer !== void 0){
+      desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
+      desc.initializer = undefined;
+  }
+  if (desc.initializer === void 0){
+      Object.defineProperty(target, property, desc);
+      desc = null;
+  }
+  return desc;
+}