@jsenv/plugin-transpilation 1.0.0 → 1.1.0

package/src/js_module_fallback/jsenv_plugin_js_module_fallback_inside_html.js

@@ -5,7 +5,7 @@
  * - <link rel="modulepreload"> are converted to <link rel="preload">
  */
 
-import { readFileSync } from "node:fs";
+import { injectQueryParams } from "@jsenv/urls";
 import {
   parseHtmlString,
   visitHtmlNodes,
@@ -13,16 +13,9 @@ import {
   getHtmlNodeAttribute,
   setHtmlNodeAttributes,
   analyzeScriptNode,
-  injectHtmlNodeAsEarlyAsPossible,
-  createHtmlNode,
 } from "@jsenv/ast";
-import { injectQueryParams, urlToRelativeUrl } from "@jsenv/urls";
-import { SOURCEMAP } from "@jsenv/sourcemap";
 
-export const jsenvPluginJsModuleFallbackInsideHtml = ({
-  systemJsInjection,
-  systemJsClientFileUrl,
-}) => {
+export const jsenvPluginJsModuleFallbackInsideHtml = () => {
   const turnIntoJsClassicProxy = (reference) => {
     return injectQueryParams(reference.url, { js_module_fallback: "" });
   };
@@ -86,13 +79,10 @@ export const jsenvPluginJsModuleFallbackInsideHtml = ({
                 ref.type === "link_href" &&
                 ref.subtype === rel,
             );
-            if (!isOrWasExpectingJsModule(reference)) {
+            if (!wasOrWillBeConvertedToJsClassic(reference)) {
               return;
             }
-            if (
-              rel === "modulepreload" &&
-              reference.expectedType === "js_classic"
-            ) {
+            if (rel === "modulepreload") {
               mutations.push(() => {
                 setHtmlNodeAttributes(node, {
                   rel: "preload",
@@ -101,7 +91,7 @@ export const jsenvPluginJsModuleFallbackInsideHtml = ({
                 });
               });
             }
-            if (rel === "preload" && reference.expectedType === "js_classic") {
+            if (rel === "preload") {
               mutations.push(() => {
                 setHtmlNodeAttributes(node, { crossorigin: undefined });
               });
@@ -135,83 +125,6 @@ export const jsenvPluginJsModuleFallbackInsideHtml = ({
             }
           },
         });
-        if (systemJsInjection) {
-          let needsSystemJs = false;
-          for (const reference of urlInfo.references) {
-            if (reference.isResourceHint) {
-              // we don't cook resource hints
-              // because they might refer to resource that will be modified during build
-              // It also means something else HAVE to reference that url in order to cook it
-              // so that the preload is deleted by "resync_resource_hints.js" otherwise
-              continue;
-            }
-            if (isOrWasExpectingJsModule(reference)) {
-              const dependencyUrlInfo = context.urlGraph.getUrlInfo(
-                reference.url,
-              );
-              try {
-                await context.cook(dependencyUrlInfo, { reference });
-                if (dependencyUrlInfo.data.jsClassicFormat === "system") {
-                  needsSystemJs = true;
-                  break;
-                }
-              } catch (e) {
-                if (context.dev && e.code !== "PARSE_ERROR") {
-                  needsSystemJs = true;
-                  // ignore cooking error, the browser will trigger it again on fetch
-                  // + disable cache for this html file because when browser will reload
-                  // the error might be gone and we might need to inject systemjs
-                  urlInfo.headers["cache-control"] = "no-store";
-                } else {
-                  throw e;
-                }
-              }
-            }
-          }
-          if (needsSystemJs) {
-            mutations.push(async () => {
-              let systemJsFileContent = readFileSync(
-                new URL(systemJsClientFileUrl),
-                { encoding: "utf8" },
-              );
-              const sourcemapFound = SOURCEMAP.readComment({
-                contentType: "text/javascript",
-                content: systemJsFileContent,
-              });
-              if (sourcemapFound) {
-                const sourcemapFileUrl = new URL(
-                  sourcemapFound.specifier,
-                  systemJsClientFileUrl,
-                );
-                systemJsFileContent = SOURCEMAP.writeComment({
-                  contentType: "text/javascript",
-                  content: systemJsFileContent,
-                  specifier: urlToRelativeUrl(sourcemapFileUrl, urlInfo.url),
-                });
-              }
-              const [systemJsReference, systemJsUrlInfo] =
-                context.referenceUtils.inject({
-                  type: "script",
-                  expectedType: "js_classic",
-                  isInline: true,
-                  contentType: "text/javascript",
-                  content: systemJsFileContent,
-                  specifier: "s.js",
-                });
-              await context.cook(systemJsUrlInfo, {
-                reference: systemJsReference,
-              });
-              injectHtmlNodeAsEarlyAsPossible(
-                htmlAst,
-                createHtmlNode({
-                  tagName: "script",
-                  textContent: systemJsUrlInfo.content,
-                }),
-                "jsenv:js_module_fallback",
-              );
-            });
-          }
-        }
         await Promise.all(mutations.map((mutation) => mutation()));
         return stringifyHtmlAst(htmlAst, {
           cleanupPositionAttributes: context.dev,
@@ -221,19 +134,29 @@ export const jsenvPluginJsModuleFallbackInsideHtml = ({
   };
 };
 
-const isOrWasExpectingJsModule = (reference) => {
-  if (isExpectingJsModule(reference)) {
-    return true;
+const wasOrWillBeConvertedToJsClassic = (reference) => {
+  if (reference.expectedType !== "js_module") {
+    return false;
   }
-  if (reference.original && isExpectingJsModule(reference.original)) {
+  if (willBeConvertedToJsClassic(reference)) {
     return true;
   }
+  let prev = reference.prev;
+  while (prev) {
+    if (prev.expectedType === "js_classic") {
+      return true;
+    }
+    if (willBeConvertedToJsClassic(prev)) {
+      return true;
+    }
+    prev = prev.prev;
+  }
+
   return false;
 };
 
-const isExpectingJsModule = (reference) => {
+const willBeConvertedToJsClassic = (reference) => {
   return (
-    reference.expectedType === "js_module" ||
     reference.searchParams.has("js_module_fallback") ||
     reference.searchParams.has("as_js_classic")
   );

package/src/babel/apply_js_transpilation.js

@@ -1,74 +0,0 @@
-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/global_this/babel_plugin_global_this_injector.js

@@ -1,56 +0,0 @@
-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

@@ -1,25 +0,0 @@
-// 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

@@ -1,21 +0,0 @@
-// 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;