@jsenv/core 36.1.2 → 36.2.0

package/src/plugins/transpilation/js_module_fallback/jsenv_plugin_js_module_fallback_inside_html.js

@@ -1,240 +0,0 @@
-/*
- * when <script type="module"> cannot be used:
- * - ?js_module_fallback is injected into the src of <script type="module">
- * - js inside <script type="module"> is transformed into classic js
- * - <link rel="modulepreload"> are converted to <link rel="preload">
- */
-
-import { readFileSync } from "node:fs";
-import {
-  parseHtmlString,
-  visitHtmlNodes,
-  stringifyHtmlAst,
-  getHtmlNodeAttribute,
-  setHtmlNodeAttributes,
-  analyzeScriptNode,
-  injectHtmlNodeAsEarlyAsPossible,
-  createHtmlNode,
-} from "@jsenv/ast";
-import { injectQueryParams, urlToRelativeUrl } from "@jsenv/urls";
-import { SOURCEMAP } from "@jsenv/sourcemap";
-
-export const jsenvPluginJsModuleFallbackInsideHtml = ({
-  systemJsInjection,
-  systemJsClientFileUrl,
-}) => {
-  const turnIntoJsClassicProxy = (reference) => {
-    return injectQueryParams(reference.url, { js_module_fallback: "" });
-  };
-
-  return {
-    name: "jsenv:js_module_fallback_inside_html",
-    appliesDuring: "*",
-    redirectReference: {
-      link_href: (reference, context) => {
-        if (
-          context.systemJsTranspilation &&
-          reference.subtype === "modulepreload"
-        ) {
-          return turnIntoJsClassicProxy(reference);
-        }
-        if (
-          context.systemJsTranspilation &&
-          reference.subtype === "preload" &&
-          reference.expectedType === "js_module"
-        ) {
-          return turnIntoJsClassicProxy(reference);
-        }
-        return null;
-      },
-      script: (reference, context) => {
-        if (
-          context.systemJsTranspilation &&
-          reference.expectedType === "js_module"
-        ) {
-          return turnIntoJsClassicProxy(reference);
-        }
-        return null;
-      },
-      js_url: (reference, context) => {
-        if (
-          context.systemJsTranspilation &&
-          reference.expectedType === "js_module"
-        ) {
-          return turnIntoJsClassicProxy(reference);
-        }
-        return null;
-      },
-    },
-    finalizeUrlContent: {
-      html: async (urlInfo, context) => {
-        const htmlAst = parseHtmlString(urlInfo.content);
-        const mutations = [];
-        visitHtmlNodes(htmlAst, {
-          link: (node) => {
-            const rel = getHtmlNodeAttribute(node, "rel");
-            if (rel !== "modulepreload" && rel !== "preload") {
-              return;
-            }
-            const href = getHtmlNodeAttribute(node, "href");
-            if (!href) {
-              return;
-            }
-            const reference = context.referenceUtils.find(
-              (ref) =>
-                ref.generatedSpecifier === href &&
-                ref.type === "link_href" &&
-                ref.subtype === rel,
-            );
-            if (!isOrWasExpectingJsModule(reference)) {
-              return;
-            }
-            if (
-              rel === "modulepreload" &&
-              reference.expectedType === "js_classic"
-            ) {
-              mutations.push(() => {
-                setHtmlNodeAttributes(node, {
-                  rel: "preload",
-                  as: "script",
-                  crossorigin: undefined,
-                });
-              });
-            }
-            if (rel === "preload" && reference.expectedType === "js_classic") {
-              mutations.push(() => {
-                setHtmlNodeAttributes(node, { crossorigin: undefined });
-              });
-            }
-          },
-          script: (node) => {
-            const { type } = analyzeScriptNode(node);
-            if (type !== "js_module") {
-              return;
-            }
-            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) {
-                return;
-              }
-              if (reference.expectedType === "js_classic") {
-                mutations.push(() => {
-                  setHtmlNodeAttributes(node, { type: undefined });
-                });
-              }
-            } else if (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,
-        });
-      },
-    },
-  };
-};
-
-const isOrWasExpectingJsModule = (reference) => {
-  if (isExpectingJsModule(reference)) {
-    return true;
-  }
-  if (reference.original && isExpectingJsModule(reference.original)) {
-    return true;
-  }
-  return false;
-};
-
-const isExpectingJsModule = (reference) => {
-  return (
-    reference.expectedType === "js_module" ||
-    reference.searchParams.has("js_module_fallback") ||
-    reference.searchParams.has("as_js_classic")
-  );
-};

package/src/plugins/transpilation/js_module_fallback/jsenv_plugin_js_module_fallback_on_workers.js

@@ -1,62 +0,0 @@
-/*
- * when {type: "module"} cannot be used on web workers:
- * - new Worker("worker.js", { type: "module" })
- *   transformed into
- *   new Worker("worker.js?js_module_fallback", { type: " lassic" })
- * - navigator.serviceWorker.register("service_worker.js", { type: "module" })
- *   transformed into
- *   navigator.serviceWorker.register("service_worker.js?js_module_fallback", { type: "classic" })
- * - new SharedWorker("shared_worker.js", { type: "module" })
- *   transformed into
- *   new SharedWorker("shared_worker.js?js_module_fallback", { type: "classic" })
- */
-
-import { injectQueryParams } from "@jsenv/urls";
-
-export const jsenvPluginJsModuleFallbackOnWorkers = () => {
-  const turnIntoJsClassicProxy = (reference) => {
-    reference.mutation = (magicSource) => {
-      magicSource.replace({
-        start: reference.typePropertyNode.value.start,
-        end: reference.typePropertyNode.value.end,
-        replacement: JSON.stringify("classic"),
-      });
-    };
-    return injectQueryParams(reference.url, { js_module_fallback: "" });
-  };
-
-  return {
-    name: "jsenv:js_module_fallback_on_workers",
-    appliesDuring: "*",
-    redirectReference: {
-      js_url: (reference, context) => {
-        if (reference.expectedType !== "js_module") {
-          return null;
-        }
-        if (reference.expectedSubtype === "worker") {
-          if (context.isSupportedOnCurrentClients("worker_type_module")) {
-            return null;
-          }
-          return turnIntoJsClassicProxy(reference);
-        }
-        if (reference.expectedSubtype === "service_worker") {
-          if (
-            context.isSupportedOnCurrentClients("service_worker_type_module")
-          ) {
-            return null;
-          }
-          return turnIntoJsClassicProxy(reference);
-        }
-        if (reference.expectedSubtype === "shared_worker") {
-          if (
-            context.isSupportedOnCurrentClients("shared_worker_type_module")
-          ) {
-            return null;
-          }
-          return turnIntoJsClassicProxy(reference);
-        }
-        return null;
-      },
-    },
-  };
-};

package/src/plugins/transpilation/jsenv_plugin_import_meta_resolve.js

@@ -1,48 +0,0 @@
-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/plugins/transpilation/jsenv_plugin_top_level_await.js

@@ -1,87 +0,0 @@
-import { applyBabelPlugins } from "@jsenv/ast";
-
-import { requireBabelPlugin } from "./babel/require_babel_plugin.js";
-
-export const jsenvPluginTopLevelAwait = () => {
-  return {
-    name: "jsenv:top_level_await",
-    appliesDuring: "*",
-    init: (context) => {
-      if (context.isSupportedOnCurrentClients("top_level_await")) {
-        return false;
-      }
-      // keep it untouched, systemjs will handle it
-      if (context.systemJsTranspilation) {
-        return false;
-      }
-      return true;
-    },
-    transformUrlContent: {
-      js_module: async (urlInfo) => {
-        const usesTLA = await usesTopLevelAwait(urlInfo);
-        if (!usesTLA) {
-          return null;
-        }
-        const { code, map } = await applyBabelPlugins({
-          urlInfo,
-          babelPlugins: [
-            [
-              requireBabelPlugin("babel-plugin-transform-async-to-promises"),
-              {
-                // Maybe we could pass target: "es6" when we support arrow function
-                // https://github.com/rpetrich/babel-plugin-transform-async-to-promises/blob/92755ff8c943c97596523e586b5fa515c2e99326/async-to-promises.ts#L55
-                topLevelAwait: "simple",
-                // enable once https://github.com/rpetrich/babel-plugin-transform-async-to-promises/pull/83
-                // externalHelpers: true,
-                // externalHelpersPath: JSON.parse(
-                //   context.referenceUtils.inject({
-                //     type: "js_import",
-                //     expectedType: "js_module",
-                //     specifier:
-                //       "babel-plugin-transform-async-to-promises/helpers.mjs",
-                //   })[0],
-                // ),
-              },
-            ],
-          ],
-        });
-        return {
-          content: code,
-          sourcemap: map,
-        };
-      },
-    },
-  };
-};
-
-const usesTopLevelAwait = async (urlInfo) => {
-  if (!urlInfo.content.includes("await ")) {
-    return false;
-  }
-  const { metadata } = await applyBabelPlugins({
-    urlInfo,
-    babelPlugins: [babelPluginMetadataUsesTopLevelAwait],
-  });
-  return metadata.usesTopLevelAwait;
-};
-
-const babelPluginMetadataUsesTopLevelAwait = () => {
-  return {
-    name: "metadata-uses-top-level-await",
-    visitor: {
-      Program: (programPath, state) => {
-        let usesTopLevelAwait = false;
-        programPath.traverse({
-          AwaitExpression: (path) => {
-            const closestFunction = path.getFunctionParent();
-            if (!closestFunction || closestFunction.type === "Program") {
-              usesTopLevelAwait = true;
-              path.stop();
-            }
-          },
-        });
-        state.file.metadata.usesTopLevelAwait = usesTopLevelAwait;
-      },
-    },
-  };
-};

package/src/plugins/transpilation/jsenv_plugin_transpilation.js

@@ -1,56 +0,0 @@
-/*
- * Transforms code to make it compatible with browser that would not be able to
- * run it otherwise. For instance:
- * - const -> var
- * - async/await -> promises
- * Anything that is not standard (import.meta.dev for instance) is outside the scope
- * of this plugin
- */
-
-import { jsenvPluginCssTranspilation } from "./css/jsenv_plugin_css_transpilation.js";
-import { jsenvPluginImportAssertions } from "./import_assertions/jsenv_plugin_import_assertions.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 { jsenvPluginBabel } from "./babel/jsenv_plugin_babel.js";
-import { jsenvPluginTopLevelAwait } from "./jsenv_plugin_top_level_await.js";
-import { jsenvPluginImportMetaResolve } from "./jsenv_plugin_import_meta_resolve.js";
-
-export const jsenvPluginTranspilation = ({
-  importAssertions = true,
-  css = true,
-  // build sets jsModuleFallbackOnJsClassic: 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,
-  babelHelpersAsImport = true,
-  getCustomBabelPlugins,
-}) => {
-  if (importAssertions === true) {
-    importAssertions = {};
-  }
-  if (jsModuleFallbackOnJsClassic === true) {
-    jsModuleFallbackOnJsClassic = {};
-  }
-  return [
-    ...(importMetaResolve ? [jsenvPluginImportMetaResolve()] : []),
-    ...(importAssertions
-      ? [jsenvPluginImportAssertions(importAssertions)]
-      : []),
-    // babel also so that rollup can bundle babel helpers for instance
-    jsenvPluginBabel({
-      topLevelAwait,
-      getCustomBabelPlugins,
-      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)] : []),
-    ...(css ? [jsenvPluginCssTranspilation()] : []),
-  ];
-};