@jsenv/plugin-transpilation 1.0.0 → 1.2.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,17 +13,18 @@ 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) => {
+    // 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: "" });
   };
 
@@ -31,15 +32,15 @@ export const jsenvPluginJsModuleFallbackInsideHtml = ({
     name: "jsenv:js_module_fallback_inside_html",
     appliesDuring: "*",
     redirectReference: {
-      link_href: (reference, context) => {
+      link_href: (reference) => {
         if (
-          context.systemJsTranspilation &&
+          reference.ownerUrlInfo.context.systemJsTranspilation &&
           reference.subtype === "modulepreload"
         ) {
           return turnIntoJsClassicProxy(reference);
         }
         if (
-          context.systemJsTranspilation &&
+          reference.ownerUrlInfo.context.systemJsTranspilation &&
           reference.subtype === "preload" &&
           reference.expectedType === "js_module"
         ) {
@@ -47,18 +48,18 @@ export const jsenvPluginJsModuleFallbackInsideHtml = ({
         }
         return null;
       },
-      script: (reference, context) => {
+      script: (reference) => {
         if (
-          context.systemJsTranspilation &&
+          reference.ownerUrlInfo.context.systemJsTranspilation &&
           reference.expectedType === "js_module"
         ) {
           return turnIntoJsClassicProxy(reference);
         }
         return null;
       },
-      js_url: (reference, context) => {
+      js_url: (reference) => {
         if (
-          context.systemJsTranspilation &&
+          reference.ownerUrlInfo.context.systemJsTranspilation &&
           reference.expectedType === "js_module"
         ) {
           return turnIntoJsClassicProxy(reference);
@@ -67,7 +68,7 @@ export const jsenvPluginJsModuleFallbackInsideHtml = ({
       },
     },
     finalizeUrlContent: {
-      html: async (urlInfo, context) => {
+      html: async (urlInfo) => {
         const htmlAst = parseHtmlString(urlInfo.content);
         const mutations = [];
         visitHtmlNodes(htmlAst, {
@@ -80,19 +81,21 @@ export const jsenvPluginJsModuleFallbackInsideHtml = ({
             if (!href) {
               return;
             }
-            const reference = context.referenceUtils.find(
-              (ref) =>
-                ref.generatedSpecifier === href &&
-                ref.type === "link_href" &&
-                ref.subtype === rel,
-            );
-            if (!isOrWasExpectingJsModule(reference)) {
+            let linkHintReference = null;
+            for (const referenceToOther of urlInfo.referenceToOthersSet) {
+              if (
+                referenceToOther.generatedSpecifier === href &&
+                referenceToOther.type === "link_href" &&
+                referenceToOther.subtype === rel
+              ) {
+                linkHintReference = referenceToOther;
+                break;
+              }
+            }
+            if (!wasOrWillBeConvertedToJsClassic(linkHintReference)) {
               return;
             }
-            if (
-              rel === "modulepreload" &&
-              reference.expectedType === "js_classic"
-            ) {
+            if (rel === "modulepreload") {
               mutations.push(() => {
                 setHtmlNodeAttributes(node, {
                   rel: "preload",
@@ -101,7 +104,7 @@ export const jsenvPluginJsModuleFallbackInsideHtml = ({
                 });
               });
             }
-            if (rel === "preload" && reference.expectedType === "js_classic") {
+            if (rel === "preload") {
               mutations.push(() => {
                 setHtmlNodeAttributes(node, { crossorigin: undefined });
               });
@@ -114,126 +117,64 @@ export const jsenvPluginJsModuleFallbackInsideHtml = ({
             }
             const src = getHtmlNodeAttribute(node, "src");
             if (src) {
-              const reference = context.referenceUtils.find(
-                (ref) =>
-                  ref.generatedSpecifier === src &&
-                  ref.type === "script" &&
-                  ref.subtype === "js_module",
-              );
-              if (!reference) {
+              let scriptTypeModuleReference = null;
+              for (const referenceToOther of urlInfo.referenceToOthersSet) {
+                if (
+                  referenceToOther.generatedSpecifier === src &&
+                  referenceToOther.type === "script" &&
+                  referenceToOther.subtype === "js_module"
+                ) {
+                  scriptTypeModuleReference = referenceToOther;
+                  break;
+                }
+              }
+              if (!scriptTypeModuleReference) {
                 return;
               }
-              if (reference.expectedType === "js_classic") {
+              if (scriptTypeModuleReference.expectedType === "js_classic") {
                 mutations.push(() => {
                   setHtmlNodeAttributes(node, { type: undefined });
                 });
               }
-            } else if (context.systemJsTranspilation) {
+            } else if (urlInfo.context.systemJsTranspilation) {
               mutations.push(() => {
                 setHtmlNodeAttributes(node, { type: undefined });
               });
             }
           },
         });
-        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,
+          cleanupPositionAttributes: urlInfo.context.dev,
         });
       },
     },
   };
 };
 
-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/js_module_fallback/jsenv_plugin_js_module_fallback_on_workers.js

@@ -16,9 +16,10 @@ import { injectQueryParams } from "@jsenv/urls";
 export const jsenvPluginJsModuleFallbackOnWorkers = () => {
   const turnIntoJsClassicProxy = (reference) => {
     reference.mutation = (magicSource) => {
+      const { typePropertyNode } = reference.astInfo;
       magicSource.replace({
-        start: reference.typePropertyNode.value.start,
-        end: reference.typePropertyNode.value.end,
+        start: typePropertyNode.value.start,
+        end: typePropertyNode.value.end,
         replacement: JSON.stringify("classic"),
       });
     };
@@ -29,19 +30,25 @@ export const jsenvPluginJsModuleFallbackOnWorkers = () => {
     name: "jsenv:js_module_fallback_on_workers",
     appliesDuring: "*",
     redirectReference: {
-      js_url: (reference, context) => {
+      js_url: (reference) => {
         if (reference.expectedType !== "js_module") {
           return null;
         }
         if (reference.expectedSubtype === "worker") {
-          if (context.isSupportedOnCurrentClients("worker_type_module")) {
+          if (
+            reference.ownerUrlInfo.context.isSupportedOnCurrentClients(
+              "worker_type_module",
+            )
+          ) {
             return null;
           }
           return turnIntoJsClassicProxy(reference);
         }
         if (reference.expectedSubtype === "service_worker") {
           if (
-            context.isSupportedOnCurrentClients("service_worker_type_module")
+            reference.ownerUrlInfo.context.isSupportedOnCurrentClients(
+              "service_worker_type_module",
+            )
           ) {
             return null;
           }
@@ -49,7 +56,9 @@ export const jsenvPluginJsModuleFallbackOnWorkers = () => {
         }
         if (reference.expectedSubtype === "shared_worker") {
           if (
-            context.isSupportedOnCurrentClients("shared_worker_type_module")
+            reference.ownerUrlInfo.context.isSupportedOnCurrentClients(
+              "shared_worker_type_module",
+            )
           ) {
             return null;
           }

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;