@jsenv/plugin-transpilation 1.0.0 → 1.2.0

package/src/babel/jsenv_plugin_babel.js

@@ -1,29 +1,101 @@
-import { applyJsTranspilation } from "./apply_js_transpilation.js";
+import { applyBabelPlugins } from "@jsenv/ast";
+
+import { getBaseBabelPluginStructure } from "./babel_plugin_structure.js";
+import { babelPluginBabelHelpersAsJsenvImports } from "./babel_plugin_babel_helpers_as_jsenv_imports.js";
+import { analyzeRegeneratorRuntimeUsage } from "./regenerator_runtime/regenerator_runtime_usage.js";
+import { babelPluginRegeneratorRuntimeInjector } from "./regenerator_runtime/babel_plugin_regenerator_runtime_injector.js";
+import { regeneratorRuntimeClientFileUrl } from "./regenerator_runtime/regenerator_runtime_client_file_url.js";
+import { analyzeConstructableStyleSheetUsage } from "./new_stylesheet/constructable_stylesheet_usage.js";
+import { babelPluginNewStylesheetInjector } from "./new_stylesheet/babel_plugin_new_stylesheet_injector.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: {
+  const transformWithBabel = async (urlInfo) => {
+    const isJsModule = urlInfo.type === "js_module";
+    const getImportSpecifier = (clientFileUrl) => {
+      const jsImportReference = urlInfo.dependencies.inject({
+        type: "js_import",
+        expectedType: "js_module",
+        specifier: clientFileUrl,
+      });
+      return JSON.parse(jsImportReference.generatedSpecifier);
+    };
+    const isSupported = urlInfo.context.isSupportedOnCurrentClients;
+    const babelPluginStructure = getBaseBabelPluginStructure({
+      url: urlInfo.originalUrl,
+      isSupported,
+      isJsModule,
+      getImportSpecifier,
+    });
+
+    if (!isSupported("async_generator_function")) {
+      const regeneratorRuntimeUsage = analyzeRegeneratorRuntimeUsage(urlInfo);
+      if (regeneratorRuntimeUsage) {
+        if (isJsModule && babelHelpersAsImport) {
+          babelPluginStructure["new-stylesheet-injector"] = [
+            babelPluginRegeneratorRuntimeInjector,
+            { babelHelpersAsImport, getImportSpecifier },
+          ];
+        } else {
+          urlInfo.dependencies.foundSideEffectFile({
+            sideEffectFileUrl: regeneratorRuntimeClientFileUrl,
+            expectedType: "js_classic",
+            specifierLine: regeneratorRuntimeUsage.line,
+            specifierColumn: regeneratorRuntimeUsage.column,
+          });
+        }
+      }
+    }
+    if (!isSupported("new_stylesheet")) {
+      const constructableStyleSheetUsage =
+        analyzeConstructableStyleSheetUsage(urlInfo);
+      if (constructableStyleSheetUsage) {
+        if (isJsModule && babelHelpersAsImport) {
+          babelPluginStructure["new-stylesheet-injector"] = [
+            babelPluginNewStylesheetInjector,
+            { babelHelpersAsImport, getImportSpecifier },
+          ];
+        } else {
+          urlInfo.dependencies.foundSideEffectFile({
+            sideEffectFileUrl: regeneratorRuntimeClientFileUrl,
+            expectedType: "js_classic",
+            specifierLine: constructableStyleSheetUsage.line,
+            specifierColumn: constructableStyleSheetUsage.column,
+          });
+        }
+      }
+    }
+    if (
+      isJsModule &&
+      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: {
         generatorOpts: {
-          retainLines: context.dev,
+          retainLines: urlInfo.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);
-      },
+      input: urlInfo.content,
+      inputIsJsModule: isJsModule,
+      inputUrl: urlInfo.originalUrl,
+      outputUrl: urlInfo.generatedUrl,
     });
+    return {
+      content: code,
+      sourcemap: map,
+    };
   };
+
   return {
     name: "jsenv:babel",
     appliesDuring: "*",

package/src/babel/new_stylesheet/babel_plugin_new_stylesheet_injector.js

@@ -1,10 +1,5 @@
-import { pathToFileURL } from "node:url";
-import { injectPolyfillIntoBabelAst } from "../polyfill_injection_in_babel_ast.js";
-
-const newStylesheetClientFileUrl = new URL(
-  "./client/new_stylesheet.js",
-  import.meta.url,
-).href;
+import { injectSideEffectFileIntoBabelAst } from "../side_effect_injection_in_babel_ast.js";
+import { newStylesheetClientFileUrl } from "./new_stylesheet_client_file_url.js";
 
 export const babelPluginNewStylesheetInjector = (
   babel,
@@ -14,136 +9,17 @@ export const babelPluginNewStylesheetInjector = (
     name: "new-stylesheet-injector",
     visitor: {
       Program: (path, state) => {
-        const { filename } = state;
-        const fileUrl = pathToFileURL(filename).href;
-        if (fileUrl === newStylesheetClientFileUrl) {
-          return;
-        }
-        let newStyleSheetDetected = false;
-        path.traverse({
-          NewExpression: (path) => {
-            if (isNewCssStyleSheetCall(path.node)) {
-              newStyleSheetDetected = true;
-              path.stop();
-            }
-          },
-          MemberExpression: (path) => {
-            if (isDocumentAdoptedStyleSheets(path.node)) {
-              newStyleSheetDetected = true;
-              path.stop();
-            }
-          },
-          CallExpression: (path) => {
-            if (path.node.callee.type !== "Import") {
-              // Some other function call, not import();
-              return;
-            }
-            if (path.node.arguments[0].type !== "StringLiteral") {
-              // Non-string argument, probably a variable or expression, e.g.
-              // import(moduleId)
-              // import('./' + moduleName)
-              return;
-            }
-            const sourcePath = path.get("arguments")[0];
-            if (
-              hasCssModuleQueryParam(sourcePath) ||
-              hasImportTypeCssAssertion(path)
-            ) {
-              newStyleSheetDetected = true;
-              path.stop();
-            }
-          },
-          ImportDeclaration: (path) => {
-            const sourcePath = path.get("source");
-            if (
-              hasCssModuleQueryParam(sourcePath) ||
-              hasImportTypeCssAssertion(path)
-            ) {
-              newStyleSheetDetected = true;
-              path.stop();
-            }
-          },
-          ExportAllDeclaration: (path) => {
-            const sourcePath = path.get("source");
-            if (hasCssModuleQueryParam(sourcePath)) {
-              newStyleSheetDetected = true;
-              path.stop();
-            }
-          },
-          ExportNamedDeclaration: (path) => {
-            if (!path.node.source) {
-              // This export has no "source", so it's probably
-              // a local variable or function, e.g.
-              // export { varName }
-              // export const constName = ...
-              // export function funcName() {}
-              return;
-            }
-            const sourcePath = path.get("source");
-            if (hasCssModuleQueryParam(sourcePath)) {
-              newStyleSheetDetected = true;
-              path.stop();
-            }
-          },
+        const { sourceType } = state.file.opts.parserOpts;
+        const isJsModule = sourceType === "module";
+        injectSideEffectFileIntoBabelAst({
+          programPath: path,
+          isJsModule,
+          asImport: babelHelpersAsImport,
+          sideEffectFileUrl: newStylesheetClientFileUrl,
+          getSideEffectFileSpecifier: getImportSpecifier,
+          babel,
         });
-        state.file.metadata.newStyleSheetDetected = newStyleSheetDetected;
-        if (newStyleSheetDetected) {
-          const { sourceType } = state.file.opts.parserOpts;
-          const isJsModule = sourceType === "module";
-          injectPolyfillIntoBabelAst({
-            programPath: path,
-            isJsModule,
-            asImport: babelHelpersAsImport,
-            polyfillFileUrl: newStylesheetClientFileUrl,
-            getPolyfillImportSpecifier: getImportSpecifier,
-            babel,
-          });
-        }
       },
     },
   };
 };
-
-const isNewCssStyleSheetCall = (node) => {
-  return (
-    node.type === "NewExpression" &&
-    node.callee.type === "Identifier" &&
-    node.callee.name === "CSSStyleSheet"
-  );
-};
-
-const isDocumentAdoptedStyleSheets = (node) => {
-  return (
-    node.type === "MemberExpression" &&
-    node.object.type === "Identifier" &&
-    node.object.name === "document" &&
-    node.property.type === "Identifier" &&
-    node.property.name === "adoptedStyleSheets"
-  );
-};
-
-const hasCssModuleQueryParam = (path) => {
-  const { node } = path;
-  return (
-    node.type === "StringLiteral" &&
-    new URL(node.value, "https://jsenv.dev").searchParams.has(`css_module`)
-  );
-};
-
-const hasImportTypeCssAssertion = (path) => {
-  const importAssertionsDescriptor = getImportAssertionsDescriptor(
-    path.node.assertions,
-  );
-  return Boolean(importAssertionsDescriptor.type === "css");
-};
-
-const getImportAssertionsDescriptor = (importAssertions) => {
-  const importAssertionsDescriptor = {};
-  if (importAssertions) {
-    importAssertions.forEach((importAssertion) => {
-      importAssertionsDescriptor[importAssertion.key.name] =
-        importAssertion.value.value;
-    });
-  }
-  return importAssertionsDescriptor;
-};

package/src/babel/new_stylesheet/constructable_stylesheet_usage.js

@@ -0,0 +1,114 @@
+import { visitJsAstUntil } from "@jsenv/ast";
+import { newStylesheetClientFileUrl } from "./new_stylesheet_client_file_url.js";
+
+export const analyzeConstructableStyleSheetUsage = (urlInfo) => {
+  if (urlInfo.url === newStylesheetClientFileUrl) {
+    return null;
+  }
+  const node = visitJsAstUntil(urlInfo.contentAst, {
+    NewExpression: (node) => {
+      return isNewCssStyleSheetCall(node);
+    },
+    MemberExpression: (node) => {
+      return isDocumentAdoptedStyleSheets(node);
+    },
+    ImportExpression: (node) => {
+      const source = node.source;
+      if (source.type !== "Literal" || typeof source.value === "string") {
+        // Non-string argument, probably a variable or expression, e.g.
+        // import(moduleId)
+        // import('./' + moduleName)
+        return false;
+      }
+      if (hasImportTypeCssAssertion(node)) {
+        return node;
+      }
+      if (hasCssModuleQueryParam(source)) {
+        return source;
+      }
+      return false;
+    },
+    ImportDeclaration: (node) => {
+      const { source } = node;
+      if (hasCssModuleQueryParam(source)) {
+        return source;
+      }
+      if (hasImportTypeCssAssertion(node)) {
+        return node;
+      }
+      return false;
+    },
+    ExportAllDeclaration: (node) => {
+      const { source } = node;
+      if (hasCssModuleQueryParam(source)) {
+        return source;
+      }
+      return false;
+    },
+    ExportNamedDeclaration: (node) => {
+      const { source } = node;
+      if (!source) {
+        // This export has no "source", so it's probably
+        // a local variable or function, e.g.
+        // export { varName }
+        // export const constName = ...
+        // export function funcName() {}
+        return false;
+      }
+      if (hasCssModuleQueryParam(source)) {
+        return source;
+      }
+      return false;
+    },
+  });
+  return node
+    ? {
+        line: node.loc.start.line,
+        column: node.loc.start.column,
+      }
+    : null;
+};
+
+const isNewCssStyleSheetCall = (node) => {
+  return (
+    node.type === "NewExpression" &&
+    node.callee.type === "Identifier" &&
+    node.callee.name === "CSSStyleSheet"
+  );
+};
+
+const isDocumentAdoptedStyleSheets = (node) => {
+  return (
+    node.type === "MemberExpression" &&
+    node.object.type === "Identifier" &&
+    node.object.name === "document" &&
+    node.property.type === "Identifier" &&
+    node.property.name === "adoptedStyleSheets"
+  );
+};
+
+const hasCssModuleQueryParam = (node) => {
+  return (
+    node.type === "Literal" &&
+    typeof node.value === "string" &&
+    new URL(node.value, "https://jsenv.dev").searchParams.has(`css_module`)
+  );
+};
+
+const hasImportTypeCssAssertion = (node) => {
+  const importAssertionsDescriptor = getImportAssertionsDescriptor(
+    node.assertions,
+  );
+  return Boolean(importAssertionsDescriptor.type === "css");
+};
+
+const getImportAssertionsDescriptor = (importAssertions) => {
+  const importAssertionsDescriptor = {};
+  if (importAssertions) {
+    importAssertions.forEach((importAssertion) => {
+      importAssertionsDescriptor[importAssertion.key.name] =
+        importAssertion.value.value;
+    });
+  }
+  return importAssertionsDescriptor;
+};

package/src/babel/new_stylesheet/new_stylesheet_client_file_url.js

@@ -0,0 +1,4 @@
+export const newStylesheetClientFileUrl = new URL(
+  "./client/new_stylesheet.js",
+  import.meta.url,
+).href;

package/src/babel/regenerator_runtime/babel_plugin_regenerator_runtime_injector.js

@@ -1,10 +1,5 @@
-import { pathToFileURL } from "node:url";
-import { injectPolyfillIntoBabelAst } from "../polyfill_injection_in_babel_ast.js";
-
-const regeneratorRuntimeClientFileUrl = new URL(
-  "./client/regenerator_runtime.js",
-  import.meta.url,
-).href;
+import { injectSideEffectFileIntoBabelAst } from "../side_effect_injection_in_babel_ast.js";
+import { regeneratorRuntimeClientFileUrl } from "./regenerator_runtime_client_file_url.js";
 
 export const babelPluginRegeneratorRuntimeInjector = (
   babel,
@@ -14,35 +9,16 @@ export const babelPluginRegeneratorRuntimeInjector = (
     name: "regenerator-runtime-injector",
     visitor: {
       Program: (path, state) => {
-        let regeneratorRuntimeDetected = false;
-        const { filename } = state;
-        const fileUrl = pathToFileURL(filename).href;
-        if (fileUrl === regeneratorRuntimeClientFileUrl) {
-          return;
-        }
-        path.traverse({
-          Identifier(path) {
-            const { node } = path;
-            if (node.name === "regeneratorRuntime") {
-              regeneratorRuntimeDetected = true;
-              path.stop();
-            }
-          },
+        const { sourceType } = state.file.opts.parserOpts;
+        const isJsModule = sourceType === "module";
+        injectSideEffectFileIntoBabelAst({
+          programPath: path,
+          isJsModule,
+          asImport: babelHelpersAsImport,
+          sideEffectFileUrl: regeneratorRuntimeClientFileUrl,
+          getSideEffectFileSpecifier: getImportSpecifier,
+          babel,
         });
-        state.file.metadata.regeneratorRuntimeDetected =
-          regeneratorRuntimeDetected;
-        if (regeneratorRuntimeDetected) {
-          const { sourceType } = state.file.opts.parserOpts;
-          const isJsModule = sourceType === "module";
-          injectPolyfillIntoBabelAst({
-            programPath: path,
-            isJsModule,
-            asImport: babelHelpersAsImport,
-            polyfillFileUrl: regeneratorRuntimeClientFileUrl,
-            getPolyfillImportSpecifier: getImportSpecifier,
-            babel,
-          });
-        }
       },
     },
   };

package/src/babel/regenerator_runtime/regenerator_runtime_client_file_url.js

@@ -0,0 +1,4 @@
+export const regeneratorRuntimeClientFileUrl = new URL(
+  "./client/regenerator_runtime.js",
+  import.meta.url,
+).href;

package/src/babel/regenerator_runtime/regenerator_runtime_usage.js

@@ -0,0 +1,23 @@
+import { visitJsAstUntil } from "@jsenv/ast";
+import { regeneratorRuntimeClientFileUrl } from "./regenerator_runtime_client_file_url.js";
+
+export const analyzeRegeneratorRuntimeUsage = (urlInfo) => {
+  if (urlInfo.url === regeneratorRuntimeClientFileUrl) {
+    return null;
+  }
+  const ast = urlInfo.contentAst;
+  const node = visitJsAstUntil(ast, {
+    Identifier: (node) => {
+      if (node.name === "regeneratorRuntime") {
+        return node;
+      }
+      return false;
+    },
+  });
+  return node
+    ? {
+        line: node.loc.start.line,
+        column: node.loc.start.column,
+      }
+    : null;
+};

package/src/babel/{polyfill_injection_in_babel_ast.js → side_effect_injection_in_babel_ast.js}

@@ -1,10 +1,10 @@
 import { readFileSync } from "node:fs";
 import { injectJsImport } from "@jsenv/ast";
 
-export const injectPolyfillIntoBabelAst = ({
+export const injectSideEffectFileIntoBabelAst = ({
   programPath,
-  polyfillFileUrl,
-  getPolyfillImportSpecifier,
+  sideEffectFileUrl,
+  getSideEffectFileSpecifier,
   babel,
   isJsModule,
   asImport = true,
@@ -12,19 +12,19 @@ export const injectPolyfillIntoBabelAst = ({
   if (isJsModule && asImport) {
     injectJsImport({
       programPath,
-      from: getPolyfillImportSpecifier(polyfillFileUrl),
+      from: getSideEffectFileSpecifier(sideEffectFileUrl),
       sideEffect: true,
     });
     return;
   }
-  const polyfillFileContent = readFileSync(new URL(polyfillFileUrl), "utf8");
-  const polyfillAst = babel.parse(polyfillFileContent);
+  const sidEffectFileContent = readFileSync(new URL(sideEffectFileUrl), "utf8");
+  const sideEffectFileContentAst = babel.parse(sidEffectFileContent);
   if (isJsModule) {
-    injectAstAfterImport(programPath, polyfillAst);
+    injectAstAfterImport(programPath, sideEffectFileContentAst);
     return;
   }
   const bodyNodePaths = programPath.get("body");
-  bodyNodePaths[0].insertBefore(polyfillAst.program.body);
+  bodyNodePaths[0].insertBefore(sideEffectFileContentAst.program.body);
 };
 
 const injectAstAfterImport = (programPath, ast) => {

package/src/css/jsenv_plugin_css_transpilation.js

@@ -5,11 +5,11 @@ export const jsenvPluginCssTranspilation = () => {
     name: "jsenv:css_transpilation",
     appliesDuring: "*",
     transformUrlContent: {
-      css: async (urlInfo, context) => {
+      css: (urlInfo) => {
         return applyCssTranspilation({
           input: urlInfo.content,
           inputUrl: urlInfo.originalUrl,
-          runtimeCompat: context.runtimeCompat,
+          runtimeCompat: urlInfo.context.runtimeCompat,
         });
       },
     },