@jsenv/plugin-transpilation 1.0.0 → 1.1.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 isJsModule = urlInfo.type === "js_module";
+    const getImportSpecifier = (clientFileUrl) => {
+      const [reference] = context.referenceUtils.inject({
+        type: "js_import",
+        expectedType: "js_module",
+        specifier: clientFileUrl,
+      });
+      return JSON.parse(reference.generatedSpecifier);
+    };
+    const isSupported = 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 {
+          context.referenceUtils.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 {
+          context.referenceUtils.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,
         },
       },
-      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/import_assertions/jsenv_plugin_import_assertions.js

@@ -124,7 +124,7 @@ const jsenvPluginAsModules = () => {
           specifier: jsonReference.url,
           expectedType: "js_module",
         });
-      } else if (context.build && jsonUrlInfo.dependents.size === 0) {
+      } else if (context.build && !context.urlGraph.hasDependent(jsonUrlInfo)) {
         context.urlGraph.deleteUrlInfo(jsonUrlInfo.url);
       }
       const jsonText = JSON.stringify(jsonUrlInfo.content.trim());
@@ -165,7 +165,7 @@ const jsenvPluginAsModules = () => {
           specifier: cssReference.url,
           expectedType: "js_module",
         });
-      } else if (context.build && cssUrlInfo.dependents.size === 0) {
+      } else if (context.build && !context.urlGraph.hasDependent(cssUrlInfo)) {
         context.urlGraph.deleteUrlInfo(cssUrlInfo.url);
       }
       const cssText = JS_QUOTES.escapeSpecialChars(cssUrlInfo.content, {
@@ -215,7 +215,7 @@ export default stylesheet;`,
           specifier: textReference.url,
           expectedType: "js_module",
         });
-      } else if (context.build && textUrlInfo.dependents.size === 0) {
+      } else if (context.build && !context.urlGraph.hasDependent(textUrlInfo)) {
         context.urlGraph.deleteUrlInfo(textUrlInfo.url);
       }
       const textPlain = JS_QUOTES.escapeSpecialChars(urlInfo.content, {

package/src/js_module_fallback/jsenv_plugin_js_module_conversion.js

@@ -4,11 +4,12 @@
  */
 
 import { injectQueryParams } from "@jsenv/urls";
-import { convertJsModuleToJsClassic } from "@jsenv/js-module-fallback";
+import {
+  convertJsModuleToJsClassic,
+  systemJsClientFileUrlDefault,
+} from "@jsenv/js-module-fallback";
 
 export const jsenvPluginJsModuleConversion = ({
-  systemJsInjection,
-  systemJsClientFileUrl,
   generateJsClassicFilename,
 }) => {
   const isReferencingJsModule = (reference) => {
@@ -95,7 +96,10 @@ export const jsenvPluginJsModuleConversion = ({
           specifier: jsModuleReference.url,
           expectedType: "js_module",
         });
-      } else if (context.build && jsModuleUrlInfo.dependents.size === 0) {
+      } else if (
+        context.build &&
+        !context.urlGraph.hasDependent(jsModuleUrlInfo)
+      ) {
         context.urlGraph.deleteUrlInfo(jsModuleUrlInfo.url);
       }
 
@@ -109,12 +113,16 @@ export const jsenvPluginJsModuleConversion = ({
         // by an other file (for entry points)
         // or to be able to import when it uses import
         outputFormat = "system";
+        urlInfo.type = "js_classic";
+        context.referenceUtils.foundSideEffectFile({
+          sideEffectFileUrl: systemJsClientFileUrlDefault,
+          expectedType: "js_classic",
+          line: 0,
+          column: 0,
+        });
       }
-      urlInfo.data.jsClassicFormat = outputFormat;
       const { content, sourcemap } = await convertJsModuleToJsClassic({
         rootDirectoryUrl: context.rootDirectoryUrl,
-        systemJsInjection,
-        systemJsClientFileUrl,
         input: jsModuleUrlInfo.content,
         inputIsEntryPoint: urlInfo.isEntryPoint,
         inputSourcemap: jsModuleUrlInfo.sourcemap,

package/src/js_module_fallback/jsenv_plugin_js_module_fallback.js

@@ -1,23 +1,14 @@
 import { urlToFilename } from "@jsenv/urls";
-import { systemJsClientFileUrlDefault } from "@jsenv/js-module-fallback";
 
 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";
 
-export const jsenvPluginJsModuleFallback = ({
-  systemJsInjection = true,
-  systemJsClientFileUrl = systemJsClientFileUrlDefault,
-}) => {
+export const jsenvPluginJsModuleFallback = () => {
   return [
-    jsenvPluginJsModuleFallbackInsideHtml({
-      systemJsInjection,
-      systemJsClientFileUrl,
-    }),
+    jsenvPluginJsModuleFallbackInsideHtml(),
     jsenvPluginJsModuleFallbackOnWorkers(),
     jsenvPluginJsModuleConversion({
-      systemJsInjection,
-      systemJsClientFileUrl,
       generateJsClassicFilename,
     }),
   ];