@jsenv/plugin-transpilation 1.0.0

package/src/css/apply_css_transpilation.js

@@ -0,0 +1,41 @@
+import { fileURLToPath } from "node:url";
+
+export const applyCssTranspilation = async ({
+  input,
+  inputUrl,
+  runtimeCompat,
+}) => {
+  // https://lightningcss.dev/docs.html
+  const { transform } = await import("lightningcss");
+  const targets = runtimeCompatToTargets(runtimeCompat);
+  const { code, map } = transform({
+    filename: fileURLToPath(inputUrl),
+    code: Buffer.from(input),
+    targets,
+    minify: false,
+    drafts: {
+      nesting: true,
+      customMedia: true,
+    },
+  });
+  return { content: String(code), sourcemap: map };
+};
+
+const runtimeCompatToTargets = (runtimeCompat) => {
+  const targets = {};
+  ["chrome", "firefox", "ie", "opera", "safari"].forEach((runtimeName) => {
+    const version = runtimeCompat[runtimeName];
+    if (version) {
+      targets[runtimeName] = versionToBits(version);
+    }
+  });
+  return targets;
+};
+
+const versionToBits = (version) => {
+  const [major, minor = 0, patch = 0] = version
+    .split("-")[0]
+    .split(".")
+    .map((v) => parseInt(v, 10));
+  return (major << 16) | (minor << 8) | patch;
+};

package/src/css/jsenv_plugin_css_transpilation.js

@@ -0,0 +1,17 @@
+import { applyCssTranspilation } from "./apply_css_transpilation.js";
+
+export const jsenvPluginCssTranspilation = () => {
+  return {
+    name: "jsenv:css_transpilation",
+    appliesDuring: "*",
+    transformUrlContent: {
+      css: async (urlInfo, context) => {
+        return applyCssTranspilation({
+          input: urlInfo.content,
+          inputUrl: urlInfo.originalUrl,
+          runtimeCompat: context.runtimeCompat,
+        });
+      },
+    },
+  };
+};

package/src/import_assertions/jsenv_plugin_import_assertions.js

@@ -0,0 +1,244 @@
+/*
+ * Jsenv wont touch code where "specifier" or "type" is dynamic (see code below)
+ * ```js
+ * const file = "./style.css"
+ * const type = "css"
+ * import(file, { assert: { type }})
+ * ```
+ * Jsenv could throw an error when it knows some browsers in runtimeCompat
+ * do not support import assertions
+ * But for now (as it is simpler) we let the browser throw the error
+ */
+
+import { urlToFilename, injectQueryParams } from "@jsenv/urls";
+import { JS_QUOTES } from "@jsenv/utils/src/string/js_quotes.js";
+
+export const jsenvPluginImportAssertions = ({
+  json = "auto",
+  css = "auto",
+  text = "auto",
+}) => {
+  const transpilations = { json, css, text };
+  const shouldTranspileImportAssertion = (context, type) => {
+    const transpilation = transpilations[type];
+    if (transpilation === true) {
+      return true;
+    }
+    if (transpilation === "auto") {
+      return !context.isSupportedOnCurrentClients(`import_type_${type}`);
+    }
+    return false;
+  };
+  const markAsJsModuleProxy = (reference) => {
+    reference.expectedType = "js_module";
+    reference.filename = `${urlToFilename(reference.url)}.js`;
+  };
+  const turnIntoJsModuleProxy = (reference, type) => {
+    reference.mutation = (magicSource) => {
+      const { assertNode } = reference;
+      if (reference.subtype === "import_dynamic") {
+        const assertPropertyNode = assertNode.properties.find(
+          (prop) => prop.key.name === "assert",
+        );
+        const assertPropertyValue = assertPropertyNode.value;
+        const typePropertyNode = assertPropertyValue.properties.find(
+          (prop) => prop.key.name === "type",
+        );
+        magicSource.remove({
+          start: typePropertyNode.start,
+          end: typePropertyNode.end,
+        });
+      } else {
+        magicSource.remove({
+          start: assertNode.start,
+          end: assertNode.end,
+        });
+      }
+    };
+    const newUrl = injectQueryParams(reference.url, {
+      [`as_${type}_module`]: "",
+    });
+    markAsJsModuleProxy(reference);
+    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, context) => {
+      if (!reference.assert) {
+        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.assert.type;
+      if (shouldTranspileImportAssertion(context, type)) {
+        return turnIntoJsModuleProxy(reference, type);
+      }
+      return null;
+    },
+  };
+  return [importAssertions, ...jsenvPluginAsModules()];
+};
+
+const jsenvPluginAsModules = () => {
+  const asJsonModule = {
+    name: `jsenv:as_json_module`,
+    appliesDuring: "*",
+    fetchUrlContent: async (urlInfo, context) => {
+      const [jsonReference, jsonUrlInfo] = context.getWithoutSearchParam({
+        urlInfo,
+        context,
+        searchParam: "as_json_module",
+        expectedType: "json",
+      });
+      if (!jsonReference) {
+        return null;
+      }
+      await context.fetchUrlContent(jsonUrlInfo, {
+        reference: jsonReference,
+      });
+      if (context.dev) {
+        context.referenceUtils.found({
+          type: "js_import",
+          subtype: jsonReference.subtype,
+          specifier: jsonReference.url,
+          expectedType: "js_module",
+        });
+      } else if (context.build && jsonUrlInfo.dependents.size === 0) {
+        context.urlGraph.deleteUrlInfo(jsonUrlInfo.url);
+      }
+      const jsonText = JSON.stringify(jsonUrlInfo.content.trim());
+      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})`,
+        contentType: "text/javascript",
+        type: "js_module",
+        originalUrl: jsonUrlInfo.originalUrl,
+        originalContent: jsonUrlInfo.originalContent,
+        data: jsonUrlInfo.data,
+      };
+    },
+  };
+
+  const asCssModule = {
+    name: `jsenv:as_css_module`,
+    appliesDuring: "*",
+    fetchUrlContent: async (urlInfo, context) => {
+      const [cssReference, cssUrlInfo] = context.getWithoutSearchParam({
+        urlInfo,
+        context,
+        searchParam: "as_css_module",
+        expectedType: "css",
+      });
+      if (!cssReference) {
+        return null;
+      }
+      await context.fetchUrlContent(cssUrlInfo, {
+        reference: cssReference,
+      });
+      if (context.dev) {
+        context.referenceUtils.found({
+          type: "js_import",
+          subtype: cssReference.subtype,
+          specifier: cssReference.url,
+          expectedType: "js_module",
+        });
+      } else if (context.build && cssUrlInfo.dependents.size === 0) {
+        context.urlGraph.deleteUrlInfo(cssUrlInfo.url);
+      }
+      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,
+      });
+      return {
+        content: `import ${JSON.stringify(
+          context.referenceUtils.inlineContentClientFileUrl,
+        )};
+
+const inlineContent = new __InlineContent__(${cssText}, { type: "text/css" });
+const stylesheet = new CSSStyleSheet();
+stylesheet.replaceSync(inlineContent.text);
+export default stylesheet;`,
+        contentType: "text/javascript",
+        type: "js_module",
+        originalUrl: cssUrlInfo.originalUrl,
+        originalContent: cssUrlInfo.originalContent,
+        data: cssUrlInfo.data,
+      };
+    },
+  };
+
+  const asTextModule = {
+    name: `jsenv:as_text_module`,
+    appliesDuring: "*",
+    fetchUrlContent: async (urlInfo, context) => {
+      const [textReference, textUrlInfo] = context.getWithoutSearchParam({
+        urlInfo,
+        context,
+        searchParam: "as_text_module",
+        expectedType: "text",
+      });
+      if (!textReference) {
+        return null;
+      }
+      await context.fetchUrlContent(textUrlInfo, {
+        reference: textReference,
+      });
+      if (context.dev) {
+        context.referenceUtils.found({
+          type: "js_import",
+          subtype: textReference.subtype,
+          specifier: textReference.url,
+          expectedType: "js_module",
+        });
+      } else if (context.build && textUrlInfo.dependents.size === 0) {
+        context.urlGraph.deleteUrlInfo(textUrlInfo.url);
+      }
+      const textPlain = JS_QUOTES.escapeSpecialChars(urlInfo.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,
+      });
+      return {
+        content: `import ${JSON.stringify(
+          context.referenceUtils.inlineContentClientFileUrl,
+        )};
+
+const inlineContent = new InlineContent(${textPlain}, { type: "text/plain" });
+export default inlineContent.text;`,
+        contentType: "text/javascript",
+        type: "js_module",
+        originalUrl: textUrlInfo.originalUrl,
+        originalContent: textUrlInfo.originalContent,
+        data: textUrlInfo.data,
+      };
+    },
+  };
+
+  return [asJsonModule, asCssModule, asTextModule];
+};

package/src/import_meta_resolve/jsenv_plugin_import_meta_resolve.js

@@ -0,0 +1,48 @@
+import { createMagicSource } from "@jsenv/sourcemap";
+
+export const jsenvPluginImportMetaResolve = () => {
+  return {
+    name: "jsenv:import_meta_resolve",
+    appliesDuring: "*",
+    init: (context) => {
+      if (context.isSupportedOnCurrentClients("import_meta_resolve")) {
+        return false;
+      }
+      // keep it untouched, systemjs will handle it
+      if (context.systemJsTranspilation) {
+        return false;
+      }
+      return true;
+    },
+    transformUrlContent: {
+      js_module: async (urlInfo, context) => {
+        const magicSource = createMagicSource(urlInfo.content);
+        context.referenceUtils._references.forEach((ref) => {
+          if (ref.subtype === "import_meta_resolve") {
+            const originalSpecifierLength = Buffer.byteLength(ref.specifier);
+            const specifierLength = Buffer.byteLength(
+              ref.generatedSpecifier.slice(1, -1), // remove `"` around
+            );
+            const specifierLengthDiff =
+              specifierLength - originalSpecifierLength;
+            const end = ref.node.end + specifierLengthDiff;
+            magicSource.replace({
+              start: ref.node.start,
+              end,
+              replacement: `new URL(${ref.generatedSpecifier}, import.meta.url).href`,
+            });
+            const currentLengthBeforeSpecifier = "import.meta.resolve(".length;
+            const newLengthBeforeSpecifier = "new URL(".length;
+            const lengthDiff =
+              currentLengthBeforeSpecifier - newLengthBeforeSpecifier;
+            ref.specifierColumn -= lengthDiff;
+            ref.specifierStart -= lengthDiff;
+            ref.specifierEnd =
+              ref.specifierStart + Buffer.byteLength(ref.generatedSpecifier);
+          }
+        });
+        return magicSource.toContentAndSourcemap();
+      },
+    },
+  };
+};

package/src/js_module_fallback/jsenv_plugin_js_module_conversion.js

@@ -0,0 +1,136 @@
+/*
+ * - propagate "?js_module_fallback" query string param on urls
+ * - perform conversion from js module to js classic when url uses "?js_module_fallback"
+ */
+
+import { injectQueryParams } from "@jsenv/urls";
+import { convertJsModuleToJsClassic } from "@jsenv/js-module-fallback";
+
+export const jsenvPluginJsModuleConversion = ({
+  systemJsInjection,
+  systemJsClientFileUrl,
+  generateJsClassicFilename,
+}) => {
+  const isReferencingJsModule = (reference) => {
+    if (
+      reference.type === "js_import" ||
+      reference.subtype === "system_register_arg" ||
+      reference.subtype === "system_import_arg"
+    ) {
+      return true;
+    }
+    if (reference.type === "js_url" && reference.expectedType === "js_module") {
+      return true;
+    }
+    return false;
+  };
+
+  const shouldPropagateJsModuleConversion = (reference, context) => {
+    if (isReferencingJsModule(reference, context)) {
+      const parentUrlInfo = context.urlGraph.getUrlInfo(reference.parentUrl);
+      if (!parentUrlInfo) {
+        return false;
+      }
+      const parentGotAsJsClassic = new URL(parentUrlInfo.url).searchParams.has(
+        "js_module_fallback",
+      );
+      return parentGotAsJsClassic;
+    }
+    return false;
+  };
+
+  const markAsJsClassicProxy = (reference) => {
+    reference.expectedType = "js_classic";
+    reference.filename = generateJsClassicFilename(reference.url);
+  };
+
+  const turnIntoJsClassicProxy = (reference) => {
+    const urlTransformed = injectQueryParams(reference.url, {
+      js_module_fallback: "",
+    });
+    markAsJsClassicProxy(reference);
+    return urlTransformed;
+  };
+
+  return {
+    name: "jsenv:js_module_conversion",
+    appliesDuring: "*",
+    redirectReference: (reference, context) => {
+      if (reference.searchParams.has("js_module_fallback")) {
+        markAsJsClassicProxy(reference);
+        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()
+      //   (because it's the transpiled equivalent of static and dynamic imports)
+      // And not other references otherwise we could try to transform inline resources
+      // or specifiers inside new URL()...
+      if (shouldPropagateJsModuleConversion(reference, context)) {
+        return turnIntoJsClassicProxy(reference, context);
+      }
+      return null;
+    },
+    fetchUrlContent: async (urlInfo, context) => {
+      const [jsModuleReference, jsModuleUrlInfo] =
+        context.getWithoutSearchParam({
+          urlInfo,
+          context,
+          searchParam: "js_module_fallback",
+          // override the expectedType to "js_module"
+          // because when there is ?js_module_fallback it means the underlying resource
+          // is a js_module
+          expectedType: "js_module",
+        });
+      if (!jsModuleReference) {
+        return null;
+      }
+      await context.fetchUrlContent(jsModuleUrlInfo, {
+        reference: jsModuleReference,
+      });
+      if (context.dev) {
+        context.referenceUtils.found({
+          type: "js_import",
+          subtype: jsModuleReference.subtype,
+          specifier: jsModuleReference.url,
+          expectedType: "js_module",
+        });
+      } else if (context.build && jsModuleUrlInfo.dependents.size === 0) {
+        context.urlGraph.deleteUrlInfo(jsModuleUrlInfo.url);
+      }
+
+      let outputFormat;
+      if (urlInfo.isEntryPoint && !jsModuleUrlInfo.data.usesImport) {
+        // if it's an entry point without dependency (it does not use import)
+        // then we can use UMD
+        outputFormat = "umd";
+      } else {
+        // otherwise we have to use system in case it's imported
+        // by an other file (for entry points)
+        // or to be able to import when it uses import
+        outputFormat = "system";
+      }
+      urlInfo.data.jsClassicFormat = outputFormat;
+      const { content, sourcemap } = await convertJsModuleToJsClassic({
+        rootDirectoryUrl: context.rootDirectoryUrl,
+        systemJsInjection,
+        systemJsClientFileUrl,
+        input: jsModuleUrlInfo.content,
+        inputIsEntryPoint: urlInfo.isEntryPoint,
+        inputSourcemap: jsModuleUrlInfo.sourcemap,
+        inputUrl: jsModuleUrlInfo.url,
+        outputUrl: jsModuleUrlInfo.generatedUrl,
+        outputFormat,
+      });
+      return {
+        content,
+        contentType: "text/javascript",
+        type: "js_classic",
+        originalUrl: jsModuleUrlInfo.originalUrl,
+        originalContent: jsModuleUrlInfo.originalContent,
+        sourcemap,
+        data: jsModuleUrlInfo.data,
+      };
+    },
+  };
+};

package/src/js_module_fallback/jsenv_plugin_js_module_fallback.js

@@ -0,0 +1,46 @@
+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,
+}) => {
+  return [
+    jsenvPluginJsModuleFallbackInsideHtml({
+      systemJsInjection,
+      systemJsClientFileUrl,
+    }),
+    jsenvPluginJsModuleFallbackOnWorkers(),
+    jsenvPluginJsModuleConversion({
+      systemJsInjection,
+      systemJsClientFileUrl,
+      generateJsClassicFilename,
+    }),
+  ];
+};
+
+const generateJsClassicFilename = (url) => {
+  const filename = urlToFilename(url);
+  let [basename, extension] = splitFileExtension(filename);
+  const { searchParams } = new URL(url);
+  if (
+    searchParams.has("as_json_module") ||
+    searchParams.has("as_css_module") ||
+    searchParams.has("as_text_module")
+  ) {
+    extension = ".js";
+  }
+  return `${basename}.nomodule${extension}`;
+};
+
+const splitFileExtension = (filename) => {
+  const dotLastIndex = filename.lastIndexOf(".");
+  if (dotLastIndex === -1) {
+    return [filename, ""];
+  }
+  return [filename.slice(0, dotLastIndex), filename.slice(dotLastIndex)];
+};