@jsenv/core 27.0.0-alpha.3 → 27.0.0-alpha.32

package/src/plugins/transpilation/as_js_classic/client/s.js.md

@@ -0,0 +1 @@
+s.js exists to ease jsenv ability to find the file.

package/src/plugins/transpilation/as_js_classic/helpers/babel_plugin_transform_import_meta_url.js

@@ -0,0 +1,47 @@
+import babelParser from "@babel/parser"
+
+export const babelPluginTransformImportMetaUrl = (babel) => {
+  return {
+    name: "transform-import-meta-url",
+    visitor: {
+      Program: (programPath) => {
+        const currentUrlIdentifier =
+          programPath.scope.generateUidIdentifier("currentUrl")
+        let used = false
+
+        programPath.traverse({
+          MemberExpression: (path) => {
+            const node = path.node
+            if (
+              node.object.type === "MetaProperty" &&
+              node.object.property.name === "meta" &&
+              node.property.name === "url"
+            ) {
+              // const node = babel.types.valueToNode(10)
+              const identifier = babel.types.identifier(
+                currentUrlIdentifier.name,
+              )
+              const expressionStatement =
+                babel.types.expressionStatement(identifier)
+              path.replaceWith(expressionStatement)
+              used = true
+            }
+          },
+        })
+        if (used) {
+          const ast = generateExpressionAst(`document.currentScript.src`)
+          programPath.scope.push({
+            id: currentUrlIdentifier,
+            init: ast,
+          })
+        }
+      },
+    },
+  }
+}
+
+const generateExpressionAst = (expression, options) => {
+  const { parseExpression } = babelParser
+  const ast = parseExpression(expression, options)
+  return ast
+}

package/src/plugins/transpilation/as_js_classic/helpers/systemjs_old.js

@@ -0,0 +1,43 @@
+// const { clientRuntimeCompat, isSupportedOnCurrentClient } = context
+// const shouldBeCompatibleWithNode =
+//   Object.keys(clientRuntimeCompat).includes("node")
+// const requiredFeatureNames = [
+//   "import_dynamic",
+//   "top_level_await",
+//   "global_this",
+//   // when using node we assume the code won't use browser specific feature
+//   ...(shouldBeCompatibleWithNode
+//     ? []
+//     : [
+//         "script_type_module",
+//         "worker_type_module",
+//         "import_type_json",
+//         "import_type_css",
+//       ]),
+//   // "importmap",
+// ]
+// const needsSystemJs = featuresRelatedToSystemJs.some((featureName) => {
+//   const isRequired = requiredFeatureNames.includes(featureName)
+//   return isRequired && !isSupportedOnCurrentClient(featureName)
+// })
+// if (!needsSystemJs) {
+//   return null
+// }
+// const { code, map } = await applyBabelPlugins({
+
+// })
+// return {
+//   content: code,
+//   soourcemap: map,
+// }
+
+// const featuresRelatedToSystemJs = [
+//   "script_type_module",
+//   "worker_type_module",
+//   "import_dynamic",
+//   "import_type_json",
+//   "import_type_css",
+//   "top_level_await",
+//   // "importmap",
+//   // "worker_importmap",
+// ]

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

@@ -0,0 +1,183 @@
+/*
+ * Something to keep in mind:
+ * When systemjs format is used by babel, it will generated UID based on
+ * the import specifier:
+ * https://github.com/babel/babel/blob/97d1967826077f15e766778c0d64711399e9a72a/packages/babel-plugin-transform-modules-systemjs/src/index.ts#L498
+ * But at this stage import specifier are absolute file urls
+ * So without minification these specifier are long and dependent
+ * on where the files are on the filesystem.
+ * This is mitigated by minification that will shorten them
+ * But ideally babel should not generate this in the first place
+ * and prefer to unique identifier based solely on the specifier basename for instance
+ */
+
+import { createRequire } from "node:module"
+import { readFileSync, urlToFilename } from "@jsenv/filesystem"
+
+import { requireBabelPlugin } from "@jsenv/babel-plugins"
+import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+import { injectQueryParams } from "@jsenv/utils/urls/url_utils.js"
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+import { composeTwoSourcemaps } from "@jsenv/utils/sourcemap/sourcemap_composition_v3.js"
+
+import { fetchOriginalUrlInfo } from "../fetch_original_url_info.js"
+import { babelPluginTransformImportMetaUrl } from "./helpers/babel_plugin_transform_import_meta_url.js"
+import { jsenvPluginScriptTypeModuleAsClassic } from "./jsenv_plugin_script_type_module_as_classic.js"
+import { jsenvPluginWorkersTypeModuleAsClassic } from "./jsenv_plugin_workers_type_module_as_classic.js"
+
+const require = createRequire(import.meta.url)
+
+export const jsenvPluginAsJsClassic = ({ systemJsInjection }) => {
+  const systemJsClientFileUrl = new URL("./client/s.js", import.meta.url).href
+
+  return [
+    asJsClassic({ systemJsInjection, systemJsClientFileUrl }),
+    jsenvPluginScriptTypeModuleAsClassic({
+      systemJsInjection,
+      systemJsClientFileUrl,
+      generateJsClassicFilename,
+    }),
+    jsenvPluginWorkersTypeModuleAsClassic({
+      generateJsClassicFilename,
+    }),
+  ]
+}
+
+const asJsClassic = ({ systemJsInjection, systemJsClientFileUrl }) => {
+  return {
+    name: "jsenv:as_js_classic",
+    appliesDuring: "*",
+    // forward ?as_js_classic to referenced urls
+    normalizeUrl: (reference, context) => {
+      // We want to propagate transformation of js module to js classic
+      // but only for import specifier (static/dynamic import + re-export)
+      // All other references won't get the ?as_js_classic
+      // otherwise we could try to transform inline ressources, specifiers inside new URL(). ...
+      if (
+        reference.type !== "js_import_export" &&
+        reference.subtype !== "system_register_arg" &&
+        reference.subtype !== "system_import_arg"
+      ) {
+        return null
+      }
+      const parentUrlInfo = context.urlGraph.getUrlInfo(reference.parentUrl)
+      if (
+        !parentUrlInfo ||
+        !new URL(parentUrlInfo.url).searchParams.has("as_js_classic")
+      ) {
+        return null
+      }
+      const urlTransformed = injectQueryParams(reference.url, {
+        as_js_classic: "",
+      })
+      reference.filename = generateJsClassicFilename(reference.url)
+      return urlTransformed
+    },
+    fetchUrlContent: async (urlInfo, context) => {
+      const originalUrlInfo = await fetchOriginalUrlInfo({
+        urlInfo,
+        context,
+        searchParam: "as_js_classic",
+        // override the expectedType to "js_module"
+        // because when there is ?as_js_classic it means the underlying ressource
+        // is a js_module
+        expectedType: "js_module",
+      })
+      if (!originalUrlInfo) {
+        return null
+      }
+      const isJsEntryPoint =
+        // in general html files are entry points
+        // but during build js can be sepcified as an entry point
+        // (meaning there is no html file where we can inject systemjs)
+        // in that case we need to inject systemjs in the js file
+        originalUrlInfo.data.isEntryPoint ||
+        // In thoose case we need to inject systemjs the worker js file
+        originalUrlInfo.data.isWebWorkerEntryPoint
+      // if it's an entry point without dependency (it does not use import)
+      // then we can use UMD, otherwise we have to use systemjs
+      // because it is imported by systemjs
+      const jsClassicFormat =
+        isJsEntryPoint && !originalUrlInfo.data.usesImport ? "umd" : "system"
+      const { content, sourcemap } = await convertJsModuleToJsClassic({
+        systemJsInjection,
+        systemJsClientFileUrl,
+        urlInfo: originalUrlInfo,
+        isJsEntryPoint,
+        jsClassicFormat,
+      })
+      urlInfo.data.jsClassicFormat = jsClassicFormat
+      return {
+        type: "js_classic",
+        contentType: "text/javascript",
+        content,
+        sourcemap,
+      }
+    },
+  }
+}
+
+const generateJsClassicFilename = (url) => {
+  const filename = urlToFilename(url)
+  const [basename, extension] = splitFileExtension(filename)
+  return `${basename}.es5${extension}`
+}
+
+const splitFileExtension = (filename) => {
+  const dotLastIndex = filename.lastIndexOf(".")
+  if (dotLastIndex === -1) {
+    return [filename, ""]
+  }
+  return [filename.slice(0, dotLastIndex), filename.slice(dotLastIndex)]
+}
+
+const convertJsModuleToJsClassic = async ({
+  systemJsInjection,
+  systemJsClientFileUrl,
+  urlInfo,
+  isJsEntryPoint,
+  jsClassicFormat,
+}) => {
+  const { code, map } = await applyBabelPlugins({
+    babelPlugins: [
+      ...(jsClassicFormat === "system"
+        ? [
+            // propposal-dynamic-import required with systemjs for babel8:
+            // https://github.com/babel/babel/issues/10746
+            require("@babel/plugin-proposal-dynamic-import"),
+            [
+              requireBabelPlugin("babel-plugin-transform-async-to-promises"),
+              {
+                topLevelAwait: "return",
+              },
+            ],
+            require("@babel/plugin-transform-modules-systemjs"),
+          ]
+        : [
+            [
+              requireBabelPlugin("babel-plugin-transform-async-to-promises"),
+              {
+                topLevelAwait: "simple",
+              },
+            ],
+            babelPluginTransformImportMetaUrl,
+            require("@babel/plugin-transform-modules-umd"),
+          ]),
+    ],
+    urlInfo,
+  })
+  if (systemJsInjection && jsClassicFormat === "system" && isJsEntryPoint) {
+    const magicSource = createMagicSource(code)
+    const systemjsCode = readFileSync(systemJsClientFileUrl, { as: "string" })
+    magicSource.prepend(`${systemjsCode}\n\n`)
+    const { content, sourcemap } = magicSource.toContentAndSourcemap()
+    return {
+      content,
+      sourcemap: await composeTwoSourcemaps(map, sourcemap),
+    }
+  }
+  return {
+    content: code,
+    sourcemap: map,
+  }
+}

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

@@ -0,0 +1,256 @@
+import {
+  getHtmlNodeAttributeByName,
+  getHtmlNodeTextNode,
+  parseHtmlString,
+  removeHtmlNodeAttributeByName,
+  assignHtmlNodeAttributes,
+  stringifyHtmlAst,
+  visitHtmlAst,
+  htmlNodePosition,
+  setHtmlNodeGeneratedText,
+  injectScriptAsEarlyAsPossible,
+  createHtmlNode,
+} from "@jsenv/utils/html_ast/html_ast.js"
+import { generateInlineContentUrl } from "@jsenv/utils/urls/inline_content_url_generator.js"
+import { injectQueryParamsIntoSpecifier } from "@jsenv/utils/urls/url_utils.js"
+
+export const jsenvPluginScriptTypeModuleAsClassic = ({
+  systemJsInjection,
+  systemJsClientFileUrl,
+  generateJsClassicFilename,
+}) => {
+  return {
+    name: "jsenv:script_type_module_as_classic",
+    appliesDuring: "*",
+    transformUrlContent: {
+      html: async (urlInfo, context) => {
+        if (
+          context.isSupportedOnCurrentClients("script_type_module") &&
+          context.isSupportedOnCurrentClients("import_dynamic")
+        ) {
+          return null
+        }
+        const htmlAst = parseHtmlString(urlInfo.content)
+        const preloadAsScriptNodes = []
+        const modulePreloadNodes = []
+        const moduleScriptNodes = []
+        const classicScriptNodes = []
+        const visitLinkNodes = (node) => {
+          if (node.nodeName !== "link") {
+            return
+          }
+          const relAttribute = getHtmlNodeAttributeByName(node, "rel")
+          const rel = relAttribute ? relAttribute.value : undefined
+          if (rel === "modulepreload") {
+            modulePreloadNodes.push(node)
+            return
+          }
+          if (rel === "preload") {
+            const asAttribute = getHtmlNodeAttributeByName(node, "as")
+            const as = asAttribute ? asAttribute.value : undefined
+            if (as === "script") {
+              preloadAsScriptNodes.push(node)
+            }
+            return
+          }
+        }
+        const visitScriptNodes = (node) => {
+          if (node.nodeName !== "script") {
+            return
+          }
+          const typeAttribute = getHtmlNodeAttributeByName(node, "type")
+          const type = typeAttribute ? typeAttribute.value : undefined
+          if (type === "module") {
+            moduleScriptNodes.push(node)
+            return
+          }
+          if (type === undefined || type === "text/javascript") {
+            classicScriptNodes.push(node)
+            return
+          }
+        }
+        visitHtmlAst(htmlAst, (node) => {
+          visitLinkNodes(node)
+          visitScriptNodes(node)
+        })
+
+        const classicScriptUrls = []
+        const moduleScriptUrls = []
+        classicScriptNodes.forEach((classicScriptNode) => {
+          const srcAttribute = getHtmlNodeAttributeByName(
+            classicScriptNode,
+            "src",
+          )
+          if (srcAttribute) {
+            const url = new URL(srcAttribute.value, urlInfo.url).href
+            classicScriptUrls.push(url)
+          }
+        })
+        moduleScriptNodes.forEach((moduleScriptNode) => {
+          const srcAttribute = getHtmlNodeAttributeByName(
+            moduleScriptNode,
+            "src",
+          )
+          if (srcAttribute) {
+            const url = new URL(srcAttribute.value, urlInfo.url).href
+            moduleScriptUrls.push(url)
+          }
+        })
+
+        const jsModuleUrls = []
+        const getReferenceAsJsClassic = async (reference) => {
+          const [newReference, newUrlInfo] = context.referenceUtils.update(
+            reference,
+            {
+              expectedType: "js_classic",
+              specifier: injectQueryParamsIntoSpecifier(reference.specifier, {
+                as_js_classic: "",
+              }),
+              filename: generateJsClassicFilename(reference.url),
+            },
+          )
+          const jsModuleUrl = newUrlInfo.url
+          if (!jsModuleUrls.includes(jsModuleUrl)) {
+            jsModuleUrls.push(newUrlInfo.url)
+            // 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({
+              reference: newReference,
+              urlInfo: newUrlInfo,
+            })
+          }
+          return [newReference, newUrlInfo]
+        }
+        const actions = []
+        preloadAsScriptNodes.forEach((preloadAsScriptNode) => {
+          const hrefAttribute = getHtmlNodeAttributeByName(
+            preloadAsScriptNode,
+            "href",
+          )
+          const href = hrefAttribute.value
+          const url = new URL(href, urlInfo.url).href
+          const expectedScriptType = moduleScriptUrls.includes(url)
+            ? "module"
+            : "classic"
+          // keep in mind:
+          // 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
+          if (expectedScriptType === "module") {
+            actions.push(async () => {
+              const [newReference] = await getReferenceAsJsClassic(
+                context.referenceUtils.findByGeneratedSpecifier(href),
+              )
+              assignHtmlNodeAttributes(preloadAsScriptNode, {
+                href: newReference.generatedSpecifier,
+              })
+              removeHtmlNodeAttributeByName(preloadAsScriptNode, "crossorigin")
+            })
+          }
+        })
+        modulePreloadNodes.forEach((modulePreloadNode) => {
+          const hrefAttribute = getHtmlNodeAttributeByName(
+            modulePreloadNode,
+            "href",
+          )
+          const href = hrefAttribute.value
+          actions.push(async () => {
+            const [newReference] = await getReferenceAsJsClassic(
+              context.referenceUtils.findByGeneratedSpecifier(href),
+            )
+            assignHtmlNodeAttributes(modulePreloadNode, {
+              rel: "preload",
+              as: "script",
+              href: newReference.generatedSpecifier,
+            })
+          })
+        })
+        moduleScriptNodes.forEach((moduleScriptNode) => {
+          const srcAttribute = getHtmlNodeAttributeByName(
+            moduleScriptNode,
+            "src",
+          )
+          if (srcAttribute) {
+            actions.push(async () => {
+              const specifier = srcAttribute.value
+              const [newReference] = await getReferenceAsJsClassic(
+                context.referenceUtils.findByGeneratedSpecifier(specifier),
+              )
+              removeHtmlNodeAttributeByName(moduleScriptNode, "type")
+              srcAttribute.value = newReference.generatedSpecifier
+            })
+            return
+          }
+          const textNode = getHtmlNodeTextNode(moduleScriptNode)
+          actions.push(async () => {
+            const { line, column, lineEnd, columnEnd, isOriginal } =
+              htmlNodePosition.readNodePosition(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",
+              // we remove 1 to the line because imagine the following html:
+              // <script>console.log('ok')</script>
+              // -> content starts same line as <script>
+              line: line - 1,
+              column,
+              isOriginalPosition: isOriginal,
+              specifier: inlineScriptUrl,
+              contentType: "application/javascript",
+              content: textNode.value,
+            })
+            const [, newUrlInfo] = await getReferenceAsJsClassic(
+              inlineReference,
+            )
+            removeHtmlNodeAttributeByName(moduleScriptNode, "type")
+            setHtmlNodeGeneratedText(moduleScriptNode, {
+              generatedText: newUrlInfo.content,
+              generatedBy: "jsenv:script_type_module_as_classic",
+            })
+          })
+        })
+
+        if (actions.length === 0) {
+          return null
+        }
+        await Promise.all(actions.map((action) => action()))
+        if (systemJsInjection) {
+          const needsSystemJs = jsModuleUrls.some(
+            (jsModuleUrl) =>
+              context.urlGraph.getUrlInfo(jsModuleUrl).data.jsClassicFormat ===
+              "system",
+          )
+          if (needsSystemJs) {
+            const [systemJsReference] = context.referenceUtils.inject({
+              type: "script_src",
+              expectedType: "js_classic",
+              specifier: systemJsClientFileUrl,
+            })
+            injectScriptAsEarlyAsPossible(
+              htmlAst,
+              createHtmlNode({
+                "tagName": "script",
+                "src": systemJsReference.generatedSpecifier,
+                "injected-by": "jsenv:script_type_module_as_classic",
+              }),
+            )
+          }
+        }
+        return stringifyHtmlAst(htmlAst)
+      },
+    },
+  }
+}

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

@@ -0,0 +1,139 @@
+import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+import { injectQueryParamsIntoSpecifier } from "@jsenv/utils/urls/url_utils.js"
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+import {
+  analyzeNewWorkerOrNewSharedWorker,
+  analyzeServiceWorkerRegisterCall,
+} from "@jsenv/utils/js_ast/js_static_analysis.js"
+
+// TODO: handle also service worker and shared worker in this plugin
+export const jsenvPluginWorkersTypeModuleAsClassic = ({
+  generateJsClassicFilename,
+}) => {
+  const transformJsWorkerTypes = async (urlInfo, context) => {
+    const workersToTranspile = getWorkersToTranspile(urlInfo, context)
+    if (
+      !workersToTranspile.worker &&
+      !workersToTranspile.serviceWorker &&
+      !workersToTranspile.sharedServiceWorker
+    ) {
+      return null
+    }
+    const { metadata } = await applyBabelPlugins({
+      babelPlugins: [
+        [
+          babelPluginMetadataWorkerMentions,
+          {
+            workersToTranspile,
+            isJsModule: urlInfo.type === "js_module",
+          },
+        ],
+      ],
+      urlInfo,
+    })
+    const { workerMentions } = metadata
+    const magicSource = createMagicSource(urlInfo.content)
+    workerMentions.forEach((workerMention) => {
+      if (workerMention.expectedType !== "js_module") {
+        return
+      }
+      const specifier = workerMention.specifier
+      const reference = context.referenceUtils.findByGeneratedSpecifier(
+        JSON.stringify(specifier),
+      )
+      const [newReference] = context.referenceUtils.update(reference, {
+        expectedType: "js_classic",
+        specifier: injectQueryParamsIntoSpecifier(specifier, {
+          as_js_classic: "",
+        }),
+        filename: generateJsClassicFilename(reference.url),
+      })
+      magicSource.replace({
+        start: workerMention.start,
+        end: workerMention.end,
+        replacement: newReference.generatedSpecifier,
+      })
+      magicSource.replace({
+        start: workerMention.typeArgNode.value.start,
+        end: workerMention.typeArgNode.value.end,
+        replacement: JSON.stringify("classic"),
+      })
+    })
+    return magicSource.toContentAndSourcemap()
+  }
+
+  return {
+    name: "jsenv:workers_type_module_as_classic",
+    appliesDuring: "*",
+    transformUrlContent: {
+      js_module: transformJsWorkerTypes,
+      js_classic: transformJsWorkerTypes,
+    },
+  }
+}
+
+const getWorkersToTranspile = (urlInfo, context) => {
+  let worker = false
+  let serviceWorker = false
+  let sharedWorker = false
+  for (const reference of urlInfo.references) {
+    if (reference.expectedType !== "js_module") {
+      continue
+    }
+    if (
+      reference.expectedSubtype === "worker" &&
+      !context.isSupportedOnCurrentClients("worker_type_module")
+    ) {
+      worker = true
+    }
+    if (
+      reference.expectedSubtype === "service_worker" &&
+      !context.isSupportedOnCurrentClients("service_worker_type_module")
+    ) {
+      serviceWorker = true
+    }
+    if (
+      reference.expectedSubtype === "shared_worker" &&
+      !context.isSupportedOnCurrentClients("shared_worker_type_module")
+    ) {
+      sharedWorker = true
+    }
+  }
+  return { worker, serviceWorker, sharedWorker }
+}
+
+const babelPluginMetadataWorkerMentions = (
+  _,
+  { workersToTranspile, isJsModule },
+) => {
+  return {
+    name: "metadata-worker-mentions",
+    visitor: {
+      Program(programPath, state) {
+        const workerMentions = []
+        const visitors = {
+          NewExpression: (path) => {
+            if (workersToTranspile.worker || workersToTranspile.sharedWorker) {
+              const mentions = analyzeNewWorkerOrNewSharedWorker(path, {
+                isJsModule,
+              })
+              if (mentions) {
+                workerMentions.push(...mentions)
+              }
+            }
+          },
+        }
+        if (workersToTranspile.serviceWorker) {
+          visitors.CallExpression = (path) => {
+            const mentions = analyzeServiceWorkerRegisterCall(path)
+            if (mentions) {
+              workerMentions.push(...mentions)
+            }
+          }
+        }
+        programPath.traverse(visitors)
+        state.file.metadata.workerMentions = workerMentions
+      },
+    },
+  }
+}

package/src/{omega/core_plugins/babel/babel_helper → plugins/transpilation/babel/helpers}/babel_plugin_babel_helpers_as_jsenv_imports.js

@@ -1,11 +1,10 @@
 import { pathToFileURL } from "node:url"
 
 import { injectImport } from "@jsenv/utils/js_ast/babel_utils.js"
-
 import {
   getBabelHelperFileUrl,
   babelHelperNameFromUrl,
-} from "./babel_helper_directory.js"
+} from "@jsenv/babel-plugins/main.js"
 
 // named import approach found here:
 // https://github.com/rollup/rollup-plugin-babel/blob/18e4232a450f320f44c651aa8c495f21c74d59ac/src/helperPlugin.js#L1