@jsenv/core 28.1.2 → 28.2.1

package/src/plugins/transpilation/as_js_classic/jsenv_plugin_as_js_classic_conversion.js

@@ -0,0 +1,104 @@
+/*
+ * - propagate ?as_js_classic to urls
+ * - perform conversion from js module to js classic when url uses ?as_js_classic
+ */
+
+import { injectQueryParams } from "@jsenv/urls"
+import { convertJsModuleToJsClassic } from "./convert_js_module_to_js_classic.js"
+
+export const jsenvPluginAsJsClassicConversion = ({
+  systemJsInjection,
+  systemJsClientFileUrl,
+  generateJsClassicFilename,
+}) => {
+  const shouldPropagateJsClassic = (reference, context) => {
+    const parentUrlInfo = context.urlGraph.getUrlInfo(reference.parentUrl)
+    if (!parentUrlInfo) {
+      return false
+    }
+    return new URL(parentUrlInfo.url).searchParams.has("as_js_classic")
+  }
+  const markAsJsClassicProxy = (reference) => {
+    reference.expectedType = "js_classic"
+    reference.filename = generateJsClassicFilename(reference.url)
+  }
+  const turnIntoJsClassicProxy = (reference) => {
+    const urlTransformed = injectQueryParams(reference.url, {
+      as_js_classic: "",
+    })
+    markAsJsClassicProxy(reference)
+    return urlTransformed
+  }
+
+  return {
+    name: "jsenv:as_js_classic_conversion",
+    appliesDuring: "*",
+    redirectUrl: (reference, context) => {
+      if (reference.searchParams.has("as_js_classic")) {
+        markAsJsClassicProxy(reference)
+        return null
+      }
+      if (
+        reference.type === "js_import_export" ||
+        reference.subtype === "system_register_arg" ||
+        reference.subtype === "system_import_arg"
+      ) {
+        // 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 (shouldPropagateJsClassic(reference, context)) {
+          return turnIntoJsClassicProxy(reference, context)
+        }
+      }
+      return null
+    },
+    fetchUrlContent: async (urlInfo, context) => {
+      const [jsModuleReference, jsModuleUrlInfo] =
+        context.getWithoutSearchParam({
+          urlInfo,
+          context,
+          searchParam: "as_js_classic",
+          // override the expectedType to "js_module"
+          // because when there is ?as_js_classic it means the underlying resource
+          // is a js_module
+          expectedType: "js_module",
+        })
+      if (!jsModuleReference) {
+        return null
+      }
+      await context.fetchUrlContent(jsModuleUrlInfo, {
+        reference: jsModuleReference,
+      })
+      if (context.scenarios.dev) {
+        context.referenceUtils.found({
+          type: "js_import_export",
+          subtype: jsModuleReference.subtype,
+          specifier: jsModuleReference.url,
+          expectedType: "js_module",
+        })
+      } else if (
+        context.scenarios.build &&
+        jsModuleUrlInfo.dependents.size === 0
+      ) {
+        context.urlGraph.deleteUrlInfo(jsModuleUrlInfo.url)
+      }
+      const { content, sourcemap } = await convertJsModuleToJsClassic({
+        systemJsInjection,
+        systemJsClientFileUrl,
+        urlInfo,
+        jsModuleUrlInfo,
+      })
+      return {
+        content,
+        contentType: "text/javascript",
+        type: "js_classic",
+        originalUrl: jsModuleUrlInfo.originalUrl,
+        originalContent: jsModuleUrlInfo.originalContent,
+        sourcemap,
+      }
+    },
+  }
+}

package/src/plugins/transpilation/as_js_classic/jsenv_plugin_as_js_classic_html.js

@@ -1,285 +1,206 @@
-import {
-  generateInlineContentUrl,
-  injectQueryParamsIntoSpecifier,
-} from "@jsenv/urls"
+/*
+ * when <script type="module"> cannot be used:
+ * - ?as_js_classic 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 {
   parseHtmlString,
   visitHtmlNodes,
   stringifyHtmlAst,
   getHtmlNodeAttribute,
-  getHtmlNodeText,
-  getHtmlNodePosition,
   setHtmlNodeAttributes,
-  setHtmlNodeText,
   analyzeScriptNode,
   injectScriptNodeAsEarlyAsPossible,
   createHtmlNode,
 } from "@jsenv/ast"
+import { injectQueryParams } from "@jsenv/urls"
 
 export const jsenvPluginAsJsClassicHtml = ({
   systemJsInjection,
   systemJsClientFileUrl,
-  generateJsClassicFilename,
 }) => {
+  let shouldTransformScriptTypeModule
+
+  const turnIntoJsClassicProxy = (reference) => {
+    return injectQueryParams(reference.url, { as_js_classic: "" })
+  }
+
   return {
     name: "jsenv:as_js_classic_html",
     appliesDuring: "*",
-    transformUrlContent: {
-      html: async (urlInfo, context) => {
-        const shouldTransformScriptTypeModule =
-          !context.isSupportedOnCurrentClients("script_type_module") ||
-          !context.isSupportedOnCurrentClients("import_dynamic") ||
-          !context.isSupportedOnCurrentClients("import_meta")
-        const htmlAst = parseHtmlString(urlInfo.content)
-        const preloadAsScriptNodes = []
-        const modulePreloadNodes = []
-        const moduleScriptNodes = []
-        const classicScriptNodes = []
-        const visitLinkNodes = (node) => {
-          const rel = getHtmlNodeAttribute(node, "rel")
-          if (rel === "modulepreload") {
-            modulePreloadNodes.push(node)
-            return
-          }
-          if (rel === "preload") {
-            const asValue = getHtmlNodeAttribute(node, "as")
-            if (asValue === "script") {
-              preloadAsScriptNodes.push(node)
-            }
-            return
-          }
+    init: (context) => {
+      shouldTransformScriptTypeModule =
+        !context.isSupportedOnCurrentClients("script_type_module") ||
+        !context.isSupportedOnCurrentClients("import_dynamic") ||
+        !context.isSupportedOnCurrentClients("import_meta")
+    },
+    redirectUrl: {
+      link_href: (reference) => {
+        if (
+          shouldTransformScriptTypeModule &&
+          reference.subtype === "modulepreload"
+        ) {
+          return turnIntoJsClassicProxy(reference)
         }
-        const visitScriptNodes = (node) => {
-          const { type } = analyzeScriptNode(node)
-          if (type === "js_module") {
-            moduleScriptNodes.push(node)
-            return
-          }
-          if (type === "js_classic") {
-            classicScriptNodes.push(node)
-            return
-          }
+        if (
+          shouldTransformScriptTypeModule &&
+          reference.subtype === "preload" &&
+          reference.expectedType === "js_module"
+        ) {
+          return turnIntoJsClassicProxy(reference)
+        }
+        return null
+      },
+      script_src: (reference) => {
+        if (
+          shouldTransformScriptTypeModule &&
+          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) => {
-            visitLinkNodes(node)
-          },
-          script: (node) => {
-            visitScriptNodes(node)
-          },
-        })
-
-        const actions = []
-        const jsModuleUrls = []
-        const convertedUrls = []
-        const getReferenceAsJsClassic = async (
-          reference,
-          {
-            // 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
-            cookIt = false,
-          } = {},
-        ) => {
-          const newReferenceProps = {
-            expectedType: "js_classic",
-            specifier: injectQueryParamsIntoSpecifier(reference.specifier, {
-              as_js_classic: "",
-            }),
-            filename: generateJsClassicFilename(reference.url),
-          }
-          const [newReference, newUrlInfo] = context.referenceUtils.update(
-            reference,
-            newReferenceProps,
-          )
-          const convertedUrl = newUrlInfo.url
-          if (!convertedUrls.includes(convertedUrl)) {
-            convertedUrls.push(convertedUrl)
-          }
-          if (cookIt) {
-            // during dev it means js modules will be cooked before server sends the HTML
-            // it's ok because:
-            // - during dev script_type_module are supported (dev use a recent browser)
-            // - even if browser is not supported it still works it's jus a bit slower
-            //   because it needs to decide if systemjs will be injected or not
-            await context.cook(newUrlInfo, { reference: newReference })
-          }
-          return [newReference, newUrlInfo]
-        }
-
-        classicScriptNodes.forEach((classicScriptNode) => {
-          const src = getHtmlNodeAttribute(classicScriptNode, "src")
-          if (src !== undefined) {
-            const reference = urlInfo.references.find(
-              (ref) =>
-                ref.generatedSpecifier === src && ref.type === "script_src",
-            )
-            const urlObject = new URL(reference.url)
-            if (urlObject.searchParams.has("as_js_classic")) {
-              const convertedUrl = urlObject.href
-              convertedUrls.push(convertedUrl)
-              urlObject.searchParams.delete("as_js_classic")
-              const jsModuleUrl = urlObject.href
-              jsModuleUrls.push(jsModuleUrl)
-              actions.push(async () => {
-                const urlInfo = context.urlGraph.getUrlInfo(convertedUrl)
-                await context.cook(urlInfo, { reference })
-              })
+            const rel = getHtmlNodeAttribute(node, "rel")
+            if (rel !== "modulepreload" && rel !== "preload") {
+              return
             }
-          }
-        })
-        moduleScriptNodes.forEach((moduleScriptNode) => {
-          const src = getHtmlNodeAttribute(moduleScriptNode, "src")
-          if (src !== undefined) {
-            const reference = urlInfo.references.find(
-              (ref) =>
-                ref.generatedSpecifier === src &&
-                ref.type === "script_src" &&
-                ref.expectedType === "js_module",
-            )
-            jsModuleUrls.push(reference.url)
-            if (shouldTransformScriptTypeModule) {
-              actions.push(async () => {
-                const [newReference] = await getReferenceAsJsClassic(
-                  reference,
-                  {
-                    cookIt: true,
-                  },
-                )
-                setHtmlNodeAttributes(moduleScriptNode, {
-                  type: undefined,
-                  src: newReference.generatedSpecifier,
-                })
-              })
+            const href = getHtmlNodeAttribute(node, "href")
+            if (!href) {
+              return
             }
-            return
-          }
-          if (shouldTransformScriptTypeModule) {
-            const htmlNodeText = getHtmlNodeText(moduleScriptNode)
-            actions.push(async () => {
-              const { line, column, lineEnd, columnEnd, isOriginal } =
-                getHtmlNodePosition(moduleScriptNode, {
-                  preferOriginal: true,
-                })
-              let inlineScriptUrl = generateInlineContentUrl({
-                url: urlInfo.url,
-                extension: ".js",
-                line,
-                column,
-                lineEnd,
-                columnEnd,
-              })
-              const [inlineReference] = context.referenceUtils.foundInline({
-                node: moduleScriptNode,
-                type: "script_src",
-                expectedType: "js_module",
-                isOriginalPosition: isOriginal,
-                // we remove 1 to the line because imagine the following html:
-                // <script>console.log('ok')</script>
-                // -> content starts same line as <script>
-                specifierLine: line - 1,
-                specifierColumn: column,
-                specifier: inlineScriptUrl,
-                contentType: "text/javascript",
-                content: htmlNodeText,
-              })
-              const [, newUrlInfo] = await getReferenceAsJsClassic(
-                inlineReference,
-                { cookIt: true },
-              )
-              setHtmlNodeText(moduleScriptNode, newUrlInfo.content)
-              setHtmlNodeAttributes(moduleScriptNode, {
-                "type": undefined,
-                "jsenv-plugin-owner": "jsenv:as_js_classic_html",
-                "jsenv-plugin-action": "content_cooked",
-              })
-            })
-          }
-        })
-        if (shouldTransformScriptTypeModule) {
-          preloadAsScriptNodes.forEach((preloadAsScriptNode) => {
-            const href = getHtmlNodeAttribute(preloadAsScriptNode, "href")
-            const reference = urlInfo.references.find(
+            const reference = context.referenceUtils.find(
               (ref) =>
                 ref.generatedSpecifier === href &&
                 ref.type === "link_href" &&
-                ref.expectedType === undefined,
+                ref.subtype === rel,
             )
-            const expectedScriptType = jsModuleUrls.includes(reference.url)
-              ? "module"
-              : "classic"
-            if (expectedScriptType === "module") {
-              actions.push(async () => {
-                // reference modified by <script type="module"> conversion
-                let newReference
-                if (reference.next) {
-                  newReference = reference.next
-                } else {
-                  // when the url is not referenced by a <script type="module">
-                  // we assume we want to preload "classic" but it might not be the case
-                  // but it's unlikely to happen and people should use "modulepreload" in that case anyway
-                  ;[newReference] = await getReferenceAsJsClassic(reference)
-                }
-                setHtmlNodeAttributes(preloadAsScriptNode, {
-                  href: newReference.generatedSpecifier,
+            if (!isOrWasExpectingJsModule(reference)) {
+              return
+            }
+            if (rel === "modulepreload") {
+              mutations.push(() => {
+                setHtmlNodeAttributes(node, {
+                  rel: "preload",
+                  as: "script",
                   crossorigin: undefined,
                 })
               })
             }
-          })
-          modulePreloadNodes.forEach((modulePreloadNode) => {
-            const href = getHtmlNodeAttribute(modulePreloadNode, "href")
-            const reference = urlInfo.references.find(
-              (ref) =>
-                ref.generatedSpecifier === href &&
-                ref.type === "link_href" &&
-                ref.expectedType === "js_module",
-            )
-            actions.push(async () => {
-              let newReference
-              if (reference.next) {
-                newReference = reference.next
-              } else {
-                ;[newReference] = await getReferenceAsJsClassic(reference)
+            if (rel === "preload") {
+              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_src" &&
+                  ref.subtype === "js_module",
+              )
+              if (!reference) {
+                return
+              }
+              if (reference.expectedType === "js_classic") {
+                mutations.push(() => {
+                  setHtmlNodeAttributes(node, { type: undefined })
+                })
               }
-              setHtmlNodeAttributes(modulePreloadNode, {
-                rel: "preload",
-                as: "script",
-                href: newReference.generatedSpecifier,
+            } else if (shouldTransformScriptTypeModule) {
+              mutations.push(() => {
+                setHtmlNodeAttributes(node, { type: undefined })
               })
-            })
-          })
-        }
+            }
+          },
+        })
 
-        if (actions.length === 0) {
-          return null
-        }
-        await Promise.all(actions.map((action) => action()))
         if (systemJsInjection) {
-          const needsSystemJs = convertedUrls.some(
-            (convertedUrl) =>
-              context.urlGraph.getUrlInfo(convertedUrl).data.jsClassicFormat ===
-              "system",
-          )
+          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.scenarios.dev) {
+                  // ignore cooking error, the browser will trigger it again on fetch
+                } else {
+                  throw e
+                }
+              }
+            }
+          }
           if (needsSystemJs) {
-            const [systemJsReference] = context.referenceUtils.inject({
-              type: "script_src",
-              expectedType: "js_classic",
-              specifier: systemJsClientFileUrl,
+            mutations.push(() => {
+              const [systemJsReference] = context.referenceUtils.inject({
+                type: "script_src",
+                expectedType: "js_classic",
+                specifier: systemJsClientFileUrl,
+              })
+              injectScriptNodeAsEarlyAsPossible(
+                htmlAst,
+                createHtmlNode({
+                  tagName: "script",
+                  src: systemJsReference.generatedSpecifier,
+                }),
+                "jsenv:as_js_classic_html",
+              )
             })
-            injectScriptNodeAsEarlyAsPossible(
-              htmlAst,
-              createHtmlNode({
-                tagName: "script",
-                src: systemJsReference.generatedSpecifier,
-              }),
-              "jsenv:as_js_classic_html",
-            )
           }
         }
+        if (mutations.length === 0) {
+          return null
+        }
+        mutations.forEach((mutation) => mutation())
         return stringifyHtmlAst(htmlAst)
       },
     },
   }
 }
+
+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("as_js_classic") ||
+    reference.searchParams.has("as_js_classic_library")
+  )
+}

package/src/plugins/transpilation/as_js_classic/jsenv_plugin_as_js_classic_library.js

@@ -0,0 +1,91 @@
+import { createUrlGraphLoader } from "@jsenv/core/src/omega/url_graph/url_graph_loader.js"
+import { bundleJsModules } from "@jsenv/core/src/plugins/bundling/js_module/bundle_js_modules.js"
+
+import { convertJsModuleToJsClassic } from "./convert_js_module_to_js_classic.js"
+
+export const jsenvPluginAsJsClassicLibrary = ({
+  systemJsInjection,
+  systemJsClientFileUrl,
+  generateJsClassicFilename,
+}) => {
+  const markAsJsClassicLibraryProxy = (reference) => {
+    reference.expectedType = "js_classic"
+    reference.filename = generateJsClassicFilename(reference.url)
+  }
+
+  return {
+    name: "jsenv:as_js_classic_library",
+    appliesDuring: "*",
+    redirectUrl: (reference) => {
+      if (reference.searchParams.has("as_js_classic_library")) {
+        markAsJsClassicLibraryProxy(reference)
+      }
+    },
+    fetchUrlContent: async (urlInfo, context) => {
+      const [jsModuleReference, jsModuleUrlInfo] =
+        context.getWithoutSearchParam({
+          urlInfo,
+          context,
+          searchParam: "as_js_classic_library",
+          // override the expectedType to "js_module"
+          // because when there is ?as_js_classic_library it means the underlying resource
+          // is a js_module
+          expectedType: "js_module",
+        })
+      if (!jsModuleReference) {
+        return null
+      }
+      // cook it to get content + dependencies
+      await context.cook(jsModuleUrlInfo, { reference: jsModuleReference })
+      const loader = createUrlGraphLoader(context)
+      loader.loadReferencedUrlInfos(jsModuleUrlInfo, {
+        // we ignore dynamic import to cook lazyly (as browser request the server)
+        // these dynamic imports must inherit "?as_js_classic_library"
+        // This is done inside rollup for convenience
+        ignoreDynamicImport: true,
+      })
+      await loader.getAllLoadDonePromise()
+      const bundleUrlInfos = await bundleJsModules({
+        jsModuleUrlInfos: [jsModuleUrlInfo],
+        context: {
+          ...context,
+          buildDirectoryUrl: context.outDirectoryUrl,
+        },
+        options: {
+          preserveDynamicImport: true,
+        },
+      })
+      const jsModuleBundledUrlInfo = bundleUrlInfos[jsModuleUrlInfo.url]
+      if (context.scenarios.dev) {
+        jsModuleBundledUrlInfo.sourceUrls.forEach((sourceUrl) => {
+          context.referenceUtils.inject({
+            type: "js_url_specifier",
+            specifier: sourceUrl,
+            isImplicit: true,
+          })
+        })
+      } else if (context.scenarios.build) {
+        jsModuleBundledUrlInfo.sourceUrls.forEach((sourceUrl) => {
+          const sourceUrlInfo = context.urlGraph.getUrlInfo(sourceUrl)
+          if (sourceUrlInfo.dependents.size === 0) {
+            context.urlGraph.deleteUrlInfo(sourceUrl)
+          }
+        })
+      }
+      const { content, sourcemap } = await convertJsModuleToJsClassic({
+        systemJsInjection,
+        systemJsClientFileUrl,
+        urlInfo,
+        jsModuleUrlInfo: jsModuleBundledUrlInfo,
+      })
+      return {
+        content,
+        contentType: "text/javascript",
+        type: "js_classic",
+        originalUrl: urlInfo.originalUrl,
+        originalContent: jsModuleUrlInfo.originalContent,
+        sourcemap,
+      }
+    },
+  }
+}