@jsenv/core 26.0.1 → 27.0.0-alpha.2

package/src/omega/core_plugins/import_meta_scenarios/jsenv_plugin_import_meta_scenarios.js

@@ -0,0 +1,80 @@
+/*
+ * Source code can contain the following
+ * - import.meta.dev
+ * - import.meta.test
+ * - import.meta.build
+ * They are either:
+ * - replaced by true: When scenario matches (import.meta.dev and it's the dev server)
+ * - left as is to be evaluated to undefined (import.meta.test but it's the dev server)
+ * - replaced by undefined (import.meta.dev but it's build; the goal is to ensure it's tree-shaked)
+ */
+
+import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+
+import { collectProgramImportMetas } from "@jsenv/utils/js_ast/program_import_metas.js"
+
+export const jsenvPluginImportMetaScenarios = () => {
+  return {
+    name: "jsenv:import_meta_scenario",
+    appliesDuring: "*",
+    transform: {
+      js_module: async ({ url, content }, { scenario }) => {
+        const { metadata } = await applyBabelPlugins({
+          babelPlugins: [babelPluginMetadataImportMetaScenarios],
+          url,
+          content,
+        })
+        const { dev = [], test = [], build = [] } = metadata.importMetaScenarios
+        const replacements = []
+        const replace = (path, value) => {
+          replacements.push({ path, value })
+        }
+        if (scenario === "dev") {
+          dev.forEach((path) => {
+            replace(path, true)
+          })
+        } else if (scenario === "test") {
+          test.forEach((path) => {
+            replace(path, true)
+          })
+        } else if (scenario === "build") {
+          dev.forEach((path) => {
+            replace(path, undefined)
+          })
+          test.forEach((path) => {
+            replace(path, undefined)
+          })
+          build.forEach((path) => {
+            replace(path, true)
+          })
+        }
+        const magicSource = createMagicSource(content)
+        replacements.forEach(({ path, value }) => {
+          magicSource.replace({
+            start: path.node.start,
+            end: path.node.end,
+            replacement: value,
+          })
+        })
+        return magicSource.toContentAndSourcemap()
+      },
+    },
+  }
+}
+
+const babelPluginMetadataImportMetaScenarios = () => {
+  return {
+    name: "metadata-import-meta-scenarios",
+    visitor: {
+      Program(programPath, state) {
+        const importMetas = collectProgramImportMetas(programPath)
+        state.file.metadata.importMetaScenarios = {
+          dev: importMetas.dev,
+          test: importMetas.test,
+          build: importMetas.build,
+        }
+      },
+    },
+  }
+}

package/src/omega/core_plugins/importmap/jsenv_plugin_importmap.js

@@ -0,0 +1,212 @@
+/*
+ * Plugin to read and apply importmap files found in html files.
+ * - feeds importmap files to jsenv kitchen
+ * - use importmap to resolve import (when there is one + fallback to other resolution mecanism)
+ * - inline importmap with [src=""]
+ *
+ * A correct importmap resolution should scope importmap resolution per html file.
+ * It would be doable by adding ?html_id to each js file in order to track
+ * the html file importing it.
+ * Considering it happens only when all the following conditions are met:
+ * - 2+ html files are using an importmap
+ * - the importmap used is not the same
+ * - the importmap contain conflicting mappings
+ * - these html files are both executed during the same scenario (dev, test, build)
+ * And that it would be ugly to see ?html_id all over the place
+ * -> The importmap resolution implemented here takes a shortcut and does the following:
+ * - All importmap found are merged into a single one that is applied to every import specifiers
+ */
+
+import {
+  resolveImport,
+  composeTwoImportMaps,
+  normalizeImportMap,
+} from "@jsenv/importmap"
+
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  findNode,
+  getHtmlNodeAttributeByName,
+  htmlNodePosition,
+  removeHtmlNodeAttributeByName,
+  setHtmlNodeText,
+  assignHtmlNodeAttributes,
+  getHtmlNodeTextNode,
+  removeHtmlNode,
+} from "@jsenv/utils/html_ast/html_ast.js"
+import { generateInlineContentUrl } from "@jsenv/utils/urls/inline_content_url_generator.js"
+
+export const jsenvPluginImportmap = () => {
+  let finalImportmap = null
+  const importmaps = {}
+  const onHtmlImportmapParsed = (importmap, htmlUrl) => {
+    importmaps[htmlUrl] = importmap
+      ? normalizeImportMap(importmap, htmlUrl)
+      : null
+    finalImportmap = Object.keys(importmaps).reduce((previous, url) => {
+      const importmap = importmaps[url]
+      if (!previous) {
+        return importmap
+      }
+      if (!importmap) {
+        return previous
+      }
+      return composeTwoImportMaps(previous, importmap)
+    }, null)
+  }
+
+  return {
+    name: "jsenv:importmap",
+    appliesDuring: "*",
+    resolve: {
+      js_import_export: ({ parentUrl, specifier }) => {
+        if (!finalImportmap) {
+          return null
+        }
+        try {
+          let fromMapping = false
+          const result = resolveImport({
+            specifier,
+            importer: parentUrl,
+            importMap: finalImportmap,
+            onImportMapping: () => {
+              fromMapping = true
+            },
+          })
+          if (fromMapping) {
+            return result
+          }
+          return null
+        } catch (e) {
+          if (e.message.includes("bare specifier")) {
+            // in theory we should throw to be compliant with web behaviour
+            // but for now it's simpler to return null
+            // and let a chance to other plugins to handle the bare specifier
+            // (node esm resolution)
+            // and we want importmap to be prio over node esm so we cannot put this plugin after
+            return null
+          }
+          throw e
+        }
+      },
+    },
+    transform: {
+      html: async (
+        { url, content, references },
+        { scenario, cook, urlGraph, referenceUtils },
+      ) => {
+        const htmlAst = parseHtmlString(content)
+        const importmap = findNode(htmlAst, (node) => {
+          if (node.nodeName !== "script") {
+            return false
+          }
+          const typeAttribute = getHtmlNodeAttributeByName(node, "type")
+          if (!typeAttribute || typeAttribute.value !== "importmap") {
+            return false
+          }
+          return true
+        })
+        if (!importmap) {
+          onHtmlImportmapParsed(null, url)
+          return null
+        }
+        const handleInlineImportmap = async (importmap, textNode) => {
+          const { line, column, lineEnd, columnEnd, isOriginal } =
+            htmlNodePosition.readNodePosition(importmap, {
+              preferOriginal: true,
+            })
+          const inlineImportmapUrl = generateInlineContentUrl({
+            url,
+            extension: ".importmap",
+            line,
+            column,
+            lineEnd,
+            columnEnd,
+          })
+          const [inlineImportmapReference, inlineImportmapUrlInfo] =
+            referenceUtils.foundInline({
+              type: "script_src",
+              line: line - 1,
+              column,
+              isOriginal,
+              specifier: inlineImportmapUrl,
+              contentType: "application/importmap+json",
+              content: textNode.value,
+            })
+          await cook({
+            reference: inlineImportmapReference,
+            urlInfo: inlineImportmapUrlInfo,
+          })
+          setHtmlNodeText(importmap, inlineImportmapUrlInfo.content)
+          onHtmlImportmapParsed(JSON.parse(inlineImportmapUrlInfo.content), url)
+        }
+        const handleImportmapWithSrc = async (importmap, src) => {
+          // Browser would throw on remote importmap
+          // and won't sent a request to the server for it
+          // We must precook the importmap to know its content and inline it into the HTML
+          // In this situation the ref to the importmap was already discovered
+          // when parsing the HTML
+          const importmapReference = references.find(
+            (reference) => reference.url === src,
+          )
+          const importmapUrlInfo = urlGraph.getUrlInfo(importmapReference.url)
+          await cook({
+            reference: importmapReference,
+            urlInfo: importmapUrlInfo,
+          })
+          onHtmlImportmapParsed(JSON.parse(importmapUrlInfo.content), url)
+          removeHtmlNodeAttributeByName(importmap, "src")
+          assignHtmlNodeAttributes(importmap, {
+            "content-src": src,
+            "inlined-by": "jsenv:importmap",
+          })
+          setHtmlNodeText(importmap, importmapUrlInfo.content)
+
+          const { line, column, lineEnd, columnEnd, isOriginal } =
+            htmlNodePosition.readNodePosition(importmap, {
+              preferOriginal: true,
+            })
+          const inlineImportmapUrl = generateInlineContentUrl({
+            url,
+            extension: ".importmap",
+            line,
+            column,
+            lineEnd,
+            columnEnd,
+          })
+          referenceUtils.becomesInline(importmapReference, {
+            line: line - 1,
+            column,
+            isOriginal,
+            specifier: inlineImportmapUrl,
+            contentType: "application/importmap+json",
+            content: importmapUrlInfo.content,
+          })
+        }
+
+        const srcAttribute = getHtmlNodeAttributeByName(importmap, "src")
+        const src = srcAttribute ? srcAttribute.value : undefined
+        if (src) {
+          await handleImportmapWithSrc(importmap, src)
+        } else {
+          const textNode = getHtmlNodeTextNode(importmap)
+          if (textNode) {
+            await handleInlineImportmap(importmap, textNode)
+          }
+        }
+        // once this plugin knows the importmap, it will use it
+        // to map imports. These import specifiers will be normalized
+        // by "formatReferencedUrl" making the importmap presence useless.
+        // In dev/test we keep importmap into the HTML to see it even if useless
+        // Duing build we get rid of it
+        if (scenario === "build") {
+          removeHtmlNode(importmap)
+        }
+        return {
+          content: stringifyHtmlAst(htmlAst),
+        }
+      },
+    },
+  }
+}

package/src/omega/core_plugins/inline/client/inline_content.js

@@ -0,0 +1,6 @@
+function InlineContent(content, { type = "text/plain" }) {
+  this.text = content
+  this.type = type
+}
+
+export { InlineContent }

package/src/omega/core_plugins/inline/jsenv_plugin_data_urls.js

@@ -0,0 +1,70 @@
+import { DataUrl } from "@jsenv/utils/urls/data_url.js"
+import { ContentType } from "@jsenv/utils/src/content_type.js"
+
+export const jsenvPluginDataUrls = () => {
+  return {
+    name: "jsenv:data_urls",
+    appliesDuring: "*",
+    resolve: ({ specifier }) => {
+      if (!specifier.startsWith("data:")) {
+        return null
+      }
+      return specifier
+    },
+    load: ({ url, data }) => {
+      if (!url.startsWith("data:")) {
+        return null
+      }
+      const { contentType, base64Flag, data: urlData } = DataUrl.parse(url)
+      data.base64Flag = base64Flag
+      return {
+        contentType,
+        content: contentFromUrlData({ contentType, base64Flag, urlData }),
+      }
+    },
+    formatReferencedUrl: (reference, { urlGraph, cook }) => {
+      if (!reference.url.startsWith("data:")) {
+        return null
+      }
+      if (reference.type === "sourcemap_comment") {
+        return null
+      }
+      return (async () => {
+        const urlInfo = urlGraph.getUrlInfo(reference.url)
+        await cook({
+          reference,
+          urlInfo,
+        })
+        if (urlInfo.originalContent === urlInfo.content) {
+          return reference.url
+        }
+        const specifier = DataUrl.stringify({
+          contentType: urlInfo.contentType,
+          base64Flag: urlInfo.data.base64Flag,
+          data: urlInfo.data.base64Flag
+            ? dataToBase64(urlInfo.content)
+            : String(urlInfo.content),
+        })
+        return specifier
+      })()
+    },
+  }
+}
+
+const contentFromUrlData = ({ contentType, base64Flag, urlData }) => {
+  if (ContentType.isTextual(contentType)) {
+    if (base64Flag) {
+      return base64ToString(urlData)
+    }
+    return urlData
+  }
+  if (base64Flag) {
+    return base64ToBuffer(urlData)
+  }
+  return Buffer.from(urlData)
+}
+
+const base64ToBuffer = (base64String) => Buffer.from(base64String, "base64")
+const base64ToString = (base64String) =>
+  Buffer.from(base64String, "base64").toString("utf8")
+const dataToBase64 = (data) => Buffer.from(data).toString("base64")

package/src/omega/core_plugins/inline/jsenv_plugin_inline.js

@@ -0,0 +1,13 @@
+import { jsenvPluginJsAndCssInsideHtml } from "./jsenv_plugin_js_and_css_inside_html.js"
+import { jsenvPluginNewInlineContent } from "./jsenv_plugin_new_inline_content.js"
+import { jsenvPluginDataUrls } from "./jsenv_plugin_data_urls.js"
+import { jsenvPluginInlineQueryParam } from "./jsenv_plugin_inline_query_param.js"
+
+export const jsenvPluginInline = ({ allowEscapeForVersioning } = {}) => {
+  return [
+    jsenvPluginJsAndCssInsideHtml(),
+    jsenvPluginNewInlineContent({ allowEscapeForVersioning }),
+    jsenvPluginDataUrls(),
+    jsenvPluginInlineQueryParam(),
+  ]
+}

package/src/omega/core_plugins/inline/jsenv_plugin_inline_query_param.js

@@ -0,0 +1,42 @@
+import { DataUrl } from "@jsenv/utils/urls/data_url.js"
+
+export const jsenvPluginInlineQueryParam = () => {
+  return {
+    name: "jsenv:inline_query_param",
+    appliesDuring: "*",
+    formatReferencedUrl: {
+      // <link> and <script> can be inlined in the html
+      // this should be done during dev and postbuild but not build
+      // so that the bundled file gets inlined and not the entry point
+      "link_href": () => null,
+      "script_src": () => null,
+      // if the referenced url is a worker we could use
+      // https://www.oreilly.com/library/view/web-workers/9781449322120/ch04.html
+      // but maybe we should rather use ?object_url
+      // or people could do this:
+      // import workerText from './worker.js?text'
+      // const blob = new Blob(workerText, { type: 'application/javascript' })
+      // window.URL.createObjectURL(blob)
+      // in any case the recommended way is to use an url
+      // to benefit from shared worker and reuse worker between tabs
+      "*": (reference, { urlGraph, cook }) => {
+        if (!new URL(reference.url).searchParams.has("inline")) {
+          return null
+        }
+        return (async () => {
+          const urlInfo = urlGraph.getUrlInfo(reference.url)
+          await cook({
+            reference,
+            urlInfo,
+          })
+          const specifier = DataUrl.stringify({
+            mediaType: urlInfo.contentType,
+            base64Flag: true,
+            data: Buffer.from(urlInfo.content).toString("base64"),
+          })
+          return specifier
+        })()
+      },
+    },
+  }
+}

package/src/omega/core_plugins/inline/jsenv_plugin_js_and_css_inside_html.js

@@ -0,0 +1,142 @@
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  visitHtmlAst,
+  getHtmlNodeTextNode,
+  htmlNodePosition,
+  parseScriptNode,
+  setHtmlNodeText,
+  getHtmlNodeAttributeByName,
+} from "@jsenv/utils/html_ast/html_ast.js"
+import { injectQueryParams } from "@jsenv/utils/urls/url_utils.js"
+import { generateInlineContentUrl } from "@jsenv/utils/urls/inline_content_url_generator.js"
+
+export const jsenvPluginJsAndCssInsideHtml = () => {
+  return {
+    name: "jsenv:js_and_css_inside_html",
+    appliesDuring: "*",
+    transform: {
+      html: async ({ url, content }, { cook, referenceUtils }) => {
+        const htmlAst = parseHtmlString(content)
+        const actions = []
+        const handleInlineStyle = (node) => {
+          if (node.nodeName !== "style") {
+            return
+          }
+          const textNode = getHtmlNodeTextNode(node)
+          if (!textNode) {
+            return
+          }
+          actions.push(async () => {
+            const { line, column, lineEnd, columnEnd, isOriginal } =
+              htmlNodePosition.readNodePosition(node, {
+                preferOriginal: true,
+              })
+            const inlineStyleUrl = generateInlineContentUrl({
+              url,
+              extension: ".css",
+              line,
+              column,
+              lineEnd,
+              columnEnd,
+            })
+            const [inlineStyleReference, inlineStyleUrlInfo] =
+              referenceUtils.foundInline({
+                type: "link_href",
+                // we remove 1 to the line because imagine the following html:
+                // <style>body { color: red; }</style>
+                // -> content starts same line as <style>
+                line: line - 1,
+                column,
+                isOriginal,
+                specifier: inlineStyleUrl,
+                contentType: "text/css",
+                content: textNode.value,
+              })
+            await cook({
+              reference: inlineStyleReference,
+              urlInfo: inlineStyleUrlInfo,
+            })
+            setHtmlNodeText(node, inlineStyleUrlInfo.content)
+          })
+        }
+        const handleInlineScript = (node) => {
+          if (node.nodeName !== "script") {
+            return
+          }
+          const textNode = getHtmlNodeTextNode(node)
+          if (!textNode) {
+            return
+          }
+          const contentSrc = getHtmlNodeAttributeByName(node, "content-src")
+          if (contentSrc) {
+            // it's inline but there is a corresponding "src" somewhere
+            // - for instance the importmap was inlined by importmap plugin
+            //   in that case the content is already cooked and can be kept as it is
+            // - any other logic that would turn a remote script into some content
+            //   but don't want to cook the content
+            return
+          }
+          actions.push(async () => {
+            const scriptCategory = parseScriptNode(node)
+            const { line, column, lineEnd, columnEnd, isOriginal } =
+              htmlNodePosition.readNodePosition(node, {
+                preferOriginal: true,
+              })
+            let inlineScriptUrl = generateInlineContentUrl({
+              url,
+              extension: scriptCategory === "importmap" ? ".importmap" : ".js",
+              line,
+              column,
+              lineEnd,
+              columnEnd,
+            })
+            if (scriptCategory === "classic") {
+              inlineScriptUrl = injectQueryParams(inlineScriptUrl, {
+                js_classic: "",
+              })
+            }
+            const [inlineScriptReference, inlineScriptUrlInfo] =
+              referenceUtils.foundInline({
+                node,
+                type: "script_src",
+                // 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,
+                isOriginal,
+                specifier: inlineScriptUrl,
+                contentType:
+                  scriptCategory === "importmap"
+                    ? "application/importmap+json"
+                    : "application/javascript",
+                content: textNode.value,
+              })
+            await cook({
+              reference: inlineScriptReference,
+              urlInfo: inlineScriptUrlInfo,
+            })
+            setHtmlNodeText(node, inlineScriptUrlInfo.content)
+          })
+        }
+        visitHtmlAst(htmlAst, (node) => {
+          handleInlineStyle(node)
+          handleInlineScript(node)
+        })
+        if (actions.length === 0) {
+          return null
+        }
+        await Promise.all(
+          actions.map(async (action) => {
+            await action()
+          }),
+        )
+        const htmlModified = stringifyHtmlAst(htmlAst)
+        return {
+          content: htmlModified,
+        }
+      },
+    },
+  }
+}