@jsenv/plugin-transpilation 1.2.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/plugin-transpilation",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "TODO",
   "license": "MIT",
   "repository": {
@@ -53,8 +53,8 @@
     "@babel/plugin-transform-unicode-regex": "7.22.5",
     "babel-plugin-transform-async-to-promises": "0.8.18",
     "construct-style-sheets-polyfill": "3.1.0",
-    "@jsenv/ast": "5.0.1",
-    "@jsenv/runtime-compat": "1.1.0",
+    "@jsenv/ast": "5.1.0",
+    "@jsenv/runtime-compat": "1.2.0",
     "lightningcss": "1.21.5"
   }
 }

package/src/as_js_module/jsenv_plugin_as_js_module.js

@@ -16,10 +16,10 @@ import { convertJsClassicToJsModule } from "./convert_js_classic_to_js_module.js
 export const jsenvPluginAsJsModule = () => {
   const markAsJsModuleProxy = (reference) => {
     reference.expectedType = "js_module";
-    if (!reference.filename) {
+    if (!reference.filenameHint) {
       const filename = urlToFilename(reference.url);
       const [basename] = splitFileExtension(filename);
-      reference.filename = `${basename}.mjs`;
+      reference.filenameHint = `${basename}.mjs`;
     }
   };
 
@@ -41,7 +41,7 @@ export const jsenvPluginAsJsModule = () => {
       if (!jsClassicUrlInfo) {
         return null;
       }
-      await jsClassicUrlInfo.fetchContent();
+      await jsClassicUrlInfo.cook();
       const { content, sourcemap } = await convertJsClassicToJsModule({
         input: jsClassicUrlInfo.content,
         inputSourcemap: jsClassicUrlInfo.sourcemap,

package/src/import_assertions/jsenv_plugin_import_assertions.js

@@ -19,33 +19,22 @@ export const jsenvPluginImportAssertions = ({
   text = "auto",
 }) => {
   const transpilations = { json, css, text };
-  const shouldTranspileImportAssertion = (reference, type) => {
-    const transpilation = transpilations[type];
-    if (transpilation === true) {
-      return true;
-    }
-    if (transpilation === "auto") {
-      return !reference.ownerUrlInfo.context.isSupportedOnCurrentClients(
-        `import_type_${type}`,
-      );
-    }
-    return false;
-  };
   const markAsJsModuleProxy = (reference) => {
     reference.expectedType = "js_module";
-    if (!reference.filename) {
-      reference.filename = `${urlToFilename(reference.url)}.js`;
+    if (!reference.filenameHint) {
+      reference.filenameHint = `${urlToFilename(reference.url)}.js`;
     }
   };
   const turnIntoJsModuleProxy = (reference, type) => {
     reference.mutation = (magicSource) => {
-      const { importTypeAttributeNode } = reference.astInfo;
       if (reference.subtype === "import_dynamic") {
+        const { importTypeAttributeNode } = reference.astInfo;
         magicSource.remove({
           start: importTypeAttributeNode.start,
           end: importTypeAttributeNode.end,
         });
       } else {
+        const { importTypeAttributeNode } = reference.astInfo;
         const content = reference.ownerUrlInfo.content;
         const assertKeyboardStart = content.indexOf(
           "assert",
@@ -64,66 +53,86 @@ export const jsenvPluginImportAssertions = ({
     const newUrl = injectQueryParams(reference.url, {
       [`as_${type}_module`]: "",
     });
-    markAsJsModuleProxy(reference);
+    markAsJsModuleProxy(reference, type);
     return newUrl;
   };
 
-  const importAssertions = {
-    name: "jsenv:import_assertions",
-    appliesDuring: "*",
-    init: (context) => {
-      // transpilation is forced during build so that
-      //   - avoid rollup to see import assertions
-      //     We would have to tell rollup to ignore import with assertion
-      //   - means rollup can bundle more js file together
-      //   - means url versioning can work for css inlined in js
-      if (context.build) {
-        transpilations.json = true;
-        transpilations.css = true;
-        transpilations.text = true;
-      }
-    },
-    redirectReference: (reference) => {
-      if (!reference.importAttributes) {
+  const createImportTypePlugin = ({ type, createUrlContent }) => {
+    return {
+      name: `jsenv:import_type_${type}`,
+      appliesDuring: "*",
+      init: (context) => {
+        // transpilation is forced during build so that
+        //   - avoid rollup to see import assertions
+        //     We would have to tell rollup to ignore import with assertion
+        //   - means rollup can bundle more js file together
+        //   - means url versioning can work for css inlined in js
+        if (context.build) {
+          return true;
+        }
+        const transpilation = transpilations[type];
+        if (transpilation === "auto") {
+          return !context.isSupportedOnCurrentClients(`import_type_${type}`);
+        }
+        return transpilation;
+      },
+      redirectReference: (reference) => {
+        if (!reference.importAttributes) {
+          return null;
+        }
+        const { searchParams } = reference;
+        if (searchParams.has(`as_${type}_module`)) {
+          markAsJsModuleProxy(reference, type);
+          return null;
+        }
+        // when search param is injected, it will be removed later
+        // by "getWithoutSearchParam". We don't want to redirect again
+        // (would create infinite recursion)
+        if (
+          reference.prev &&
+          reference.prev.searchParams.has(`as_${type}_module`)
+        ) {
+          return null;
+        }
+        if (reference.importAttributes.type === type) {
+          return turnIntoJsModuleProxy(reference, type);
+        }
         return null;
-      }
-      const { searchParams } = reference;
-      if (
-        searchParams.has("as_json_module") ||
-        searchParams.has("as_css_module") ||
-        searchParams.has("as_text_module")
-      ) {
-        markAsJsModuleProxy(reference);
-        return null;
-      }
-      const type = reference.importAttributes.type;
-      if (shouldTranspileImportAssertion(reference, type)) {
-        return turnIntoJsModuleProxy(reference, type);
-      }
-      return null;
-    },
+      },
+      fetchUrlContent: async (urlInfo) => {
+        const originalUrlInfo = urlInfo.getWithoutSearchParam(
+          `as_${type}_module`,
+          {
+            expectedType: "json",
+          },
+        );
+        if (!originalUrlInfo) {
+          return null;
+        }
+        await originalUrlInfo.cook();
+        return createUrlContent(originalUrlInfo);
+      },
+    };
   };
-  return [importAssertions, ...jsenvPluginAsModules()];
-};
 
-const jsenvPluginAsModules = () => {
-  const asJsonModule = {
-    name: `jsenv:as_json_module`,
-    appliesDuring: "*",
-    fetchUrlContent: async (urlInfo) => {
-      const jsonUrlInfo = urlInfo.getWithoutSearchParam("as_json_module", {
-        expectedType: "json",
-      });
-      if (!jsonUrlInfo) {
-        return null;
-      }
-      await jsonUrlInfo.fetchContent();
+  const asJsonModule = createImportTypePlugin({
+    type: "json",
+    createUrlContent: (jsonUrlInfo) => {
       const jsonText = JSON.stringify(jsonUrlInfo.content.trim());
+      let inlineContentCall;
+      // here we could `export default ${jsonText}`:
+      // but js engine are optimized to recognize JSON.parse
+      // and use a faster parsing strategy
+      if (jsonUrlInfo.context.dev) {
+        inlineContentCall = `JSON.parse(
+  ${jsonText},
+  //# inlinedFromUrl=${jsonUrlInfo.url}
+)`;
+      } else {
+        inlineContentCall = `JSON.parse(${jsonText})`;
+      }
       return {
-        // here we could `export default ${jsonText}`:
-        // but js engine are optimized to recognize JSON.parse
-        // and use a faster parsing strategy
-        content: `export default JSON.parse(${jsonText})`,
+        content: `export default ${inlineContentCall};`,
         contentType: "text/javascript",
         type: "js_module",
         originalUrl: jsonUrlInfo.originalUrl,
@@ -131,33 +140,35 @@ const jsenvPluginAsModules = () => {
         data: jsonUrlInfo.data,
       };
     },
-  };
+  });
 
-  const asCssModule = {
-    name: `jsenv:as_css_module`,
-    appliesDuring: "*",
-    fetchUrlContent: async (urlInfo) => {
-      const cssUrlInfo = urlInfo.getWithoutSearchParam("as_css_module", {
-        expectedType: "css",
-      });
-      if (!cssUrlInfo) {
-        return null;
-      }
-      await cssUrlInfo.fetchContent();
+  const asCssModule = createImportTypePlugin({
+    type: "css",
+    createUrlContent: (cssUrlInfo) => {
       const cssText = JS_QUOTES.escapeSpecialChars(cssUrlInfo.content, {
         // If template string is choosen and runtime do not support template literals
         // it's ok because "jsenv:new_inline_content" plugin executes after this one
         // and convert template strings into raw strings
         canUseTemplateString: true,
       });
+      let inlineContentCall;
+      if (cssUrlInfo.context.dev) {
+        inlineContentCall = `new __InlineContent__(
+  ${cssText},
+  { type: "text/css" },
+  //# inlinedFromUrl=${cssUrlInfo.url}
+)`;
+      } else {
+        inlineContentCall = `new __InlineContent__(${cssText}, { type: "text/css" })`;
+      }
       return {
-        content: `import ${JSON.stringify(
-          urlInfo.context.inlineContentClientFileUrl,
-        )};
+        content: `
+import ${JSON.stringify(cssUrlInfo.context.inlineContentClientFileUrl)};
 
-const inlineContent = new __InlineContent__(${cssText}, { type: "text/css" });
+const inlineContent = ${inlineContentCall};
 const stylesheet = new CSSStyleSheet();
 stylesheet.replaceSync(inlineContent.text);
+
 export default stylesheet;`,
         contentType: "text/javascript",
         type: "js_module",
@@ -166,31 +177,33 @@ export default stylesheet;`,
         data: cssUrlInfo.data,
       };
     },
-  };
+  });
 
-  const asTextModule = {
-    name: `jsenv:as_text_module`,
-    appliesDuring: "*",
-    fetchUrlContent: async (urlInfo) => {
-      const textUrlInfo = urlInfo.getWithoutSearchParam("as_text_module", {
-        expectedType: "text",
-      });
-      if (!textUrlInfo) {
-        return null;
-      }
-      await textUrlInfo.fetchContent();
-      const textPlain = JS_QUOTES.escapeSpecialChars(urlInfo.content, {
+  const asTextModule = createImportTypePlugin({
+    type: "text",
+    createUrlContent: (textUrlInfo) => {
+      const textPlain = JS_QUOTES.escapeSpecialChars(textUrlInfo.content, {
         // If template string is choosen and runtime do not support template literals
         // it's ok because "jsenv:new_inline_content" plugin executes after this one
         // and convert template strings into raw strings
         canUseTemplateString: true,
       });
+      let inlineContentCall;
+      if (textUrlInfo.context.dev) {
+        inlineContentCall = `new __InlineContent__(
+  ${textPlain},
+  { type: "text/plain"},
+  //# inlinedFromUrl=${textUrlInfo.url}
+)`;
+      } else {
+        inlineContentCall = `new __InlineContent__(${textPlain}, { type: "text/plain"})`;
+      }
       return {
-        content: `import ${JSON.stringify(
-          urlInfo.context.inlineContentClientFileUrl,
-        )};
+        content: `
+import ${JSON.stringify(textUrlInfo.context.inlineContentClientFileUrl)};
+
+const inlineContent = ${inlineContentCall};
 
-const inlineContent = new InlineContent(${textPlain}, { type: "text/plain" });
 export default inlineContent.text;`,
         contentType: "text/javascript",
         type: "js_module",
@@ -199,7 +212,7 @@ export default inlineContent.text;`,
         data: textUrlInfo.data,
       };
     },
-  };
+  });
 
   return [asJsonModule, asCssModule, asTextModule];
 };

package/src/{import_meta_resolve → js_module_fallback}/jsenv_plugin_import_meta_resolve.js

@@ -1,6 +1,6 @@
 import { createMagicSource } from "@jsenv/sourcemap";
 
-export const jsenvPluginImportMetaResolve = () => {
+export const jsenvPluginImportMetaResolve = ({ needJsModuleFallback }) => {
   return {
     name: "jsenv:import_meta_resolve",
     appliesDuring: "*",
@@ -8,8 +8,8 @@ export const jsenvPluginImportMetaResolve = () => {
       if (context.isSupportedOnCurrentClients("import_meta_resolve")) {
         return false;
       }
-      // keep it untouched, systemjs will handle it
-      if (context.systemJsTranspilation) {
+      if (needJsModuleFallback(context)) {
+        // will be handled by systemjs, keep it untouched
         return false;
       }
       return true;

package/src/js_module_fallback/jsenv_plugin_js_module_conversion.js

@@ -9,7 +9,7 @@ import {
   systemJsClientFileUrlDefault,
 } from "@jsenv/js-module-fallback";
 
-export const jsenvPluginJsModuleConversion = () => {
+export const jsenvPluginJsModuleConversion = ({ remapImportSpecifier }) => {
   const isReferencingJsModule = (reference) => {
     if (
       reference.type === "js_import" ||
@@ -35,17 +35,16 @@ export const jsenvPluginJsModuleConversion = () => {
 
   const markAsJsClassicProxy = (reference) => {
     reference.expectedType = "js_classic";
-    if (!reference.filename) {
-      reference.filename = generateJsClassicFilename(reference.url);
+    if (!reference.filenameHint) {
+      reference.filenameHint = generateJsClassicFilename(reference.url);
     }
   };
 
   const turnIntoJsClassicProxy = (reference) => {
-    const urlTransformed = injectQueryParams(reference.url, {
+    markAsJsClassicProxy(reference);
+    return injectQueryParams(reference.url, {
       js_module_fallback: "",
     });
-    markAsJsClassicProxy(reference);
-    return urlTransformed;
   };
 
   return {
@@ -56,6 +55,15 @@ export const jsenvPluginJsModuleConversion = () => {
         markAsJsClassicProxy(reference);
         return null;
       }
+      // when search param is injected, it will be removed later
+      // by "getWithoutSearchParam". We don't want to redirect again
+      // (would create infinite recursion)
+      if (
+        reference.prev &&
+        reference.prev.searchParams.has(`js_module_fallback`)
+      ) {
+        return null;
+      }
       // We want to propagate transformation of js module to js classic to:
       // - import specifier (static/dynamic import + re-export)
       // - url specifier when inside System.register/_context.import()
@@ -80,7 +88,7 @@ export const jsenvPluginJsModuleConversion = () => {
       if (!jsModuleUrlInfo) {
         return null;
       }
-      await jsModuleUrlInfo.fetchContent();
+      await jsModuleUrlInfo.cook();
       let outputFormat;
       if (urlInfo.isEntryPoint && !jsModuleUrlInfo.data.usesImport) {
         // if it's an entry point without dependency (it does not use import)
@@ -107,6 +115,7 @@ export const jsenvPluginJsModuleConversion = () => {
         inputUrl: jsModuleUrlInfo.url,
         outputUrl: urlInfo.url,
         outputFormat,
+        remapImportSpecifier,
       });
       return {
         content,
@@ -130,6 +139,7 @@ const generateJsClassicFilename = (url) => {
     searchParams.has("as_css_module") ||
     searchParams.has("as_text_module")
   ) {
+    basename += extension;
     extension = ".js";
   }
   return `${basename}.nomodule${extension}`;

package/src/js_module_fallback/jsenv_plugin_js_module_fallback.js

@@ -1,11 +1,40 @@
 import { jsenvPluginJsModuleConversion } from "./jsenv_plugin_js_module_conversion.js";
 import { jsenvPluginJsModuleFallbackInsideHtml } from "./jsenv_plugin_js_module_fallback_inside_html.js";
 import { jsenvPluginJsModuleFallbackOnWorkers } from "./jsenv_plugin_js_module_fallback_on_workers.js";
+import { jsenvPluginImportMetaResolve } from "./jsenv_plugin_import_meta_resolve.js";
+import { jsenvPluginTopLevelAwait } from "./jsenv_plugin_top_level_await.js";
+
+export const jsenvPluginJsModuleFallback = ({ remapImportSpecifier } = {}) => {
+  const needJsModuleFallback = (context) => {
+    if (Object.keys(context.clientRuntimeCompat).includes("node")) {
+      return false;
+    }
+    if (
+      context.versioning &&
+      context.versioningViaImportmap &&
+      !context.isSupportedOnCurrentClients("importmap")
+    ) {
+      return true;
+    }
+    if (
+      !context.isSupportedOnCurrentClients("script_type_module") ||
+      !context.isSupportedOnCurrentClients("import_dynamic") ||
+      !context.isSupportedOnCurrentClients("import_meta")
+    ) {
+      return true;
+    }
+    return false;
+  };
 
-export const jsenvPluginJsModuleFallback = () => {
   return [
-    jsenvPluginJsModuleFallbackInsideHtml(),
+    jsenvPluginJsModuleFallbackInsideHtml({ needJsModuleFallback }),
     jsenvPluginJsModuleFallbackOnWorkers(),
-    jsenvPluginJsModuleConversion(),
+    jsenvPluginJsModuleConversion({ remapImportSpecifier }),
+    // must come after jsModuleFallback because it's related to the module format
+    // so we want to want to know the module format before transforming things
+    // - top level await
+    // - import.meta.resolve()
+    jsenvPluginImportMetaResolve({ needJsModuleFallback }),
+    jsenvPluginTopLevelAwait({ needJsModuleFallback }),
   ];
 };

package/src/js_module_fallback/jsenv_plugin_js_module_fallback_inside_html.js

@@ -13,34 +13,32 @@ import {
   getHtmlNodeAttribute,
   setHtmlNodeAttributes,
   analyzeScriptNode,
+  getHtmlNodeText,
 } from "@jsenv/ast";
 
-export const jsenvPluginJsModuleFallbackInsideHtml = () => {
+export const jsenvPluginJsModuleFallbackInsideHtml = ({
+  needJsModuleFallback,
+}) => {
   const turnIntoJsClassicProxy = (reference) => {
-    // not needed for now: redirections are disabled
-    // for getWithoutSearchParam
-    // if (
-    //   reference.prev &&
-    //   reference.prev.searchParams.has("js_module_fallback")
-    // ) {
-    //   return null;
-    // }
     return injectQueryParams(reference.url, { js_module_fallback: "" });
   };
 
   return {
     name: "jsenv:js_module_fallback_inside_html",
     appliesDuring: "*",
+    init: needJsModuleFallback,
     redirectReference: {
       link_href: (reference) => {
         if (
-          reference.ownerUrlInfo.context.systemJsTranspilation &&
-          reference.subtype === "modulepreload"
+          reference.prev &&
+          reference.prev.searchParams.has(`js_module_fallback`)
         ) {
+          return null;
+        }
+        if (reference.subtype === "modulepreload") {
           return turnIntoJsClassicProxy(reference);
         }
         if (
-          reference.ownerUrlInfo.context.systemJsTranspilation &&
           reference.subtype === "preload" &&
           reference.expectedType === "js_module"
         ) {
@@ -50,18 +48,24 @@ export const jsenvPluginJsModuleFallbackInsideHtml = () => {
       },
       script: (reference) => {
         if (
-          reference.ownerUrlInfo.context.systemJsTranspilation &&
-          reference.expectedType === "js_module"
+          reference.prev &&
+          reference.prev.searchParams.has(`js_module_fallback`)
         ) {
+          return null;
+        }
+        if (reference.expectedType === "js_module") {
           return turnIntoJsClassicProxy(reference);
         }
         return null;
       },
       js_url: (reference) => {
         if (
-          reference.ownerUrlInfo.context.systemJsTranspilation &&
-          reference.expectedType === "js_module"
+          reference.prev &&
+          reference.prev.searchParams.has(`js_module_fallback`)
         ) {
+          return null;
+        }
+        if (reference.expectedType === "js_module") {
           return turnIntoJsClassicProxy(reference);
         }
         return null;
@@ -92,19 +96,21 @@ export const jsenvPluginJsModuleFallbackInsideHtml = () => {
                 break;
               }
             }
-            if (!wasOrWillBeConvertedToJsClassic(linkHintReference)) {
-              return;
-            }
             if (rel === "modulepreload") {
-              mutations.push(() => {
-                setHtmlNodeAttributes(node, {
-                  rel: "preload",
-                  as: "script",
-                  crossorigin: undefined,
+              if (linkHintReference.expectedType === "js_classic") {
+                mutations.push(() => {
+                  setHtmlNodeAttributes(node, {
+                    rel: "preload",
+                    as: "script",
+                    crossorigin: undefined,
+                  });
                 });
-              });
+              }
             }
-            if (rel === "preload") {
+            if (
+              rel === "preload" &&
+              wasConvertedFromJsModule(linkHintReference)
+            ) {
               mutations.push(() => {
                 setHtmlNodeAttributes(node, { crossorigin: undefined });
               });
@@ -116,31 +122,33 @@ export const jsenvPluginJsModuleFallbackInsideHtml = () => {
               return;
             }
             const src = getHtmlNodeAttribute(node, "src");
-            if (src) {
-              let scriptTypeModuleReference = null;
-              for (const referenceToOther of urlInfo.referenceToOthersSet) {
-                if (
-                  referenceToOther.generatedSpecifier === src &&
-                  referenceToOther.type === "script" &&
-                  referenceToOther.subtype === "js_module"
-                ) {
-                  scriptTypeModuleReference = referenceToOther;
-                  break;
-                }
+            const text = getHtmlNodeText(node);
+            let scriptReference = null;
+            for (const referenceToOther of urlInfo.referenceToOthersSet) {
+              if (referenceToOther.type !== "script") {
+                continue;
               }
-              if (!scriptTypeModuleReference) {
-                return;
+              if (src && referenceToOther.generatedSpecifier === src) {
+                scriptReference = referenceToOther;
+                break;
               }
-              if (scriptTypeModuleReference.expectedType === "js_classic") {
-                mutations.push(() => {
-                  setHtmlNodeAttributes(node, { type: undefined });
-                });
+              if (text) {
+                if (referenceToOther.content === text) {
+                  scriptReference = referenceToOther;
+                  break;
+                }
+                if (referenceToOther.urlInfo.content === text) {
+                  scriptReference = referenceToOther;
+                  break;
+                }
               }
-            } else if (urlInfo.context.systemJsTranspilation) {
-              mutations.push(() => {
-                setHtmlNodeAttributes(node, { type: undefined });
-              });
             }
+            if (!wasConvertedFromJsModule(scriptReference)) {
+              return;
+            }
+            mutations.push(() => {
+              setHtmlNodeAttributes(node, { type: undefined });
+            });
           },
         });
         await Promise.all(mutations.map((mutation) => mutation()));
@@ -152,30 +160,14 @@ export const jsenvPluginJsModuleFallbackInsideHtml = () => {
   };
 };
 
-const wasOrWillBeConvertedToJsClassic = (reference) => {
-  if (reference.expectedType !== "js_module") {
-    return false;
-  }
-  if (willBeConvertedToJsClassic(reference)) {
-    return true;
-  }
-  let prev = reference.prev;
-  while (prev) {
-    if (prev.expectedType === "js_classic") {
-      return true;
-    }
-    if (willBeConvertedToJsClassic(prev)) {
-      return true;
+const wasConvertedFromJsModule = (reference) => {
+  if (reference.expectedType === "js_classic") {
+    // check if a prev version was using js module
+    if (reference.original) {
+      if (reference.original.expectedType === "js_module") {
+        return true;
+      }
     }
-    prev = prev.prev;
   }
-
   return false;
 };
-
-const willBeConvertedToJsClassic = (reference) => {
-  return (
-    reference.searchParams.has("js_module_fallback") ||
-    reference.searchParams.has("as_js_classic")
-  );
-};

package/src/js_module_fallback/jsenv_plugin_js_module_fallback_on_workers.js

@@ -26,46 +26,33 @@ export const jsenvPluginJsModuleFallbackOnWorkers = () => {
     return injectQueryParams(reference.url, { js_module_fallback: "" });
   };
 
-  return {
-    name: "jsenv:js_module_fallback_on_workers",
-    appliesDuring: "*",
-    redirectReference: {
-      js_url: (reference) => {
-        if (reference.expectedType !== "js_module") {
-          return null;
+  const createWorkerPlugin = (subtype) => {
+    return {
+      name: `jsenv:js_module_fallback_on_${subtype}`,
+      appliesDuring: "*",
+      init: (context) => {
+        if (context.isSupportedOnCurrentClients(`${subtype}_type_module`)) {
+          return false;
         }
-        if (reference.expectedSubtype === "worker") {
-          if (
-            reference.ownerUrlInfo.context.isSupportedOnCurrentClients(
-              "worker_type_module",
-            )
-          ) {
-            return null;
-          }
-          return turnIntoJsClassicProxy(reference);
-        }
-        if (reference.expectedSubtype === "service_worker") {
-          if (
-            reference.ownerUrlInfo.context.isSupportedOnCurrentClients(
-              "service_worker_type_module",
-            )
-          ) {
+        return true;
+      },
+      redirectReference: {
+        js_url: (reference) => {
+          if (reference.expectedType !== "js_module") {
             return null;
           }
-          return turnIntoJsClassicProxy(reference);
-        }
-        if (reference.expectedSubtype === "shared_worker") {
-          if (
-            reference.ownerUrlInfo.context.isSupportedOnCurrentClients(
-              "shared_worker_type_module",
-            )
-          ) {
+          if (reference.expectedSubtype !== subtype) {
             return null;
           }
           return turnIntoJsClassicProxy(reference);
-        }
-        return null;
+        },
       },
-    },
+    };
   };
+
+  return [
+    createWorkerPlugin("worker"),
+    createWorkerPlugin("service_worker"),
+    createWorkerPlugin("shared_worker"),
+  ];
 };

package/src/{top_level_await → js_module_fallback}/jsenv_plugin_top_level_await.js

@@ -3,7 +3,7 @@ import { applyBabelPlugins } from "@jsenv/ast";
 
 const require = createRequire(import.meta.url);
 
-export const jsenvPluginTopLevelAwait = () => {
+export const jsenvPluginTopLevelAwait = ({ needJsModuleFallback }) => {
   return {
     name: "jsenv:top_level_await",
     appliesDuring: "*",
@@ -11,8 +11,8 @@ export const jsenvPluginTopLevelAwait = () => {
       if (context.isSupportedOnCurrentClients("top_level_await")) {
         return false;
       }
-      // keep it untouched, systemjs will handle it
-      if (context.systemJsTranspilation) {
+      if (needJsModuleFallback(context)) {
+        // will be handled by systemjs, keep it untouched
         return false;
       }
       return true;

package/src/jsenv_plugin_transpilation.js

@@ -11,44 +11,34 @@ import { jsenvPluginImportAssertions } from "./import_assertions/jsenv_plugin_im
 import { jsenvPluginBabel } from "./babel/jsenv_plugin_babel.js";
 import { jsenvPluginJsModuleFallback } from "./js_module_fallback/jsenv_plugin_js_module_fallback.js";
 import { jsenvPluginAsJsModule } from "./as_js_module/jsenv_plugin_as_js_module.js";
-import { jsenvPluginTopLevelAwait } from "./top_level_await/jsenv_plugin_top_level_await.js";
-import { jsenvPluginImportMetaResolve } from "./import_meta_resolve/jsenv_plugin_import_meta_resolve.js";
 import { jsenvPluginCssTranspilation } from "./css/jsenv_plugin_css_transpilation.js";
 
 export const jsenvPluginTranspilation = ({
   importAssertions = true,
   css = true, // TODO
-  // build sets jsModuleFallbackOnJsClassic: false during first step of the build
+  // build sets jsModuleFallback: false during first step of the build
   // and re-enable it in the second phase (when performing the bundling)
   // so that bundling is applied on js modules THEN it is converted to js classic if needed
-  jsModuleFallbackOnJsClassic = true,
-  topLevelAwait = true,
-  importMetaResolve = true,
+  jsModuleFallback = true,
   babelHelpersAsImport = true,
 }) => {
   if (importAssertions === true) {
     importAssertions = {};
   }
-  if (jsModuleFallbackOnJsClassic === true) {
-    jsModuleFallbackOnJsClassic = {};
+  if (jsModuleFallback === true) {
+    jsModuleFallback = {};
   }
   return [
-    ...(importMetaResolve ? [jsenvPluginImportMetaResolve()] : []),
-    ...(importAssertions
-      ? [jsenvPluginImportAssertions(importAssertions)]
-      : []),
     // babel also so that rollup can bundle babel helpers for instance
     jsenvPluginBabel({
-      topLevelAwait,
       babelHelpersAsImport,
     }),
-    ...(jsModuleFallbackOnJsClassic
-      ? [jsenvPluginJsModuleFallback(jsModuleFallbackOnJsClassic)]
-      : []),
     jsenvPluginAsJsModule(),
-    // topLevelAwait must come after jsModuleFallback because it's related to the module format
-    // so we want to wait to know the module format before transforming things related to top level await
-    ...(topLevelAwait ? [jsenvPluginTopLevelAwait(topLevelAwait)] : []),
+    ...(jsModuleFallback ? [jsenvPluginJsModuleFallback()] : []),
+    ...(importAssertions
+      ? [jsenvPluginImportAssertions(importAssertions)]
+      : []),
+
     ...(css ? [jsenvPluginCssTranspilation()] : []),
   ];
 };