@jsenv/core 25.6.2 → 27.0.0-alpha.0

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/core/packages/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,
+        }
+      },
+    },
+  }
+}

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

@@ -0,0 +1,210 @@
+/*
+ * Needs to be updated so that it sill works in the following cases:
+ * - templates literals transformed to regular stuff by babel
+ * - tagged name renamed by rollup
+ * - the template named is minified by terser
+ * In the cases above I must remain capable to recoginize the template literal
+ * to be able to update the urls inside (and even version the urls)
+ * because url versioning happens after minification it can be challenging
+ *
+ * TODO: use "keep_classnames" https://github.com/terser/terser#compress-options
+ * so that new InlineContent can be recognized after minification
+ */
+
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+import { JS_QUOTES } from "@jsenv/utils/string/js_quotes.js"
+import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+import { generateInlineContentUrl } from "@jsenv/utils/urls/inline_content_url_generator.js"
+
+export const jsenvPluginNewInlineContent = ({ allowEscapeForVersioning }) => {
+  return {
+    name: "jsenv:new_inline_content",
+    appliesDuring: "*",
+    transform: {
+      js_module: async (
+        { url, generatedUrl, content, originalContent },
+        { referenceUtils, cook, isSupportedOnRuntime },
+      ) => {
+        const { metadata } = await applyBabelPlugins({
+          babelPlugins: [babelPluginMetadataInlineContentCalls],
+          url,
+          generatedUrl,
+          content,
+        })
+        const { inlineContentCalls } = metadata
+        if (inlineContentCalls.length === 0) {
+          return null
+        }
+        const magicSource = createMagicSource(content)
+        await inlineContentCalls.reduce(async (previous, inlineContentCall) => {
+          await previous
+          const inlineUrl = generateInlineContentUrl({
+            url,
+            extension: {
+              "application/json": ".json",
+              "text/css": ".css",
+              "text/plain": ".txt",
+              "application/octet-stream": "",
+            }[inlineContentCall.contentType],
+            line: inlineContentCall.line,
+            column: inlineContentCall.column,
+            lineEnd: inlineContentCall.lineEnd,
+            columnEnd: inlineContentCall.columnEnd,
+          })
+          let { quote } = inlineContentCall
+          if (
+            quote === "`" &&
+            !isSupportedOnRuntime("transform-template-literals")
+          ) {
+            // if quote is "`" and template literals are not supported
+            // we'll use a regular string (single or double quote)
+            // when rendering the string
+            quote = JS_QUOTES.pickBest(inlineContentCall.content)
+          }
+          const [inlineReference, inlineUrlInfo] = referenceUtils.foundInline({
+            type: "js_inline_content",
+            isOriginal: content === originalContent,
+            line: inlineContentCall.line,
+            column: inlineContentCall.column,
+            specifier: inlineUrl,
+            contentType: inlineContentCall.contentType,
+            content: inlineContentCall.content,
+          })
+          inlineUrlInfo.jsQuote = quote
+          inlineReference.escape = (value) =>
+            JS_QUOTES.escapeSpecialChars(value.slice(1, -1), { quote })
+          await cook({
+            reference: inlineReference,
+            urlInfo: inlineUrlInfo,
+          })
+          magicSource.replace({
+            start: inlineContentCall.start,
+            end: inlineContentCall.end,
+            replacement: JS_QUOTES.escapeSpecialChars(inlineUrlInfo.content, {
+              quote,
+              allowEscapeForVersioning,
+            }),
+          })
+        }, Promise.resolve())
+        return magicSource.toContentAndSourcemap()
+      },
+    },
+  }
+}
+
+const babelPluginMetadataInlineContentCalls = () => {
+  return {
+    name: "metadata-inline-content-calls",
+    visitor: {
+      Program: (programPath, state) => {
+        const inlineContentCalls = []
+        programPath.traverse({
+          NewExpression: (path) => {
+            const newInlineContentCall = parseAsNewInlineContentCall(path)
+            if (newInlineContentCall) {
+              inlineContentCalls.push(newInlineContentCall)
+            }
+          },
+        })
+        state.file.metadata.inlineContentCalls = inlineContentCalls
+      },
+    },
+  }
+}
+
+const parseAsNewInlineContentCall = (path) => {
+  const node = path.node
+  if (node.callee.type === "Identifier") {
+    // terser rename import to use a shorter name
+    const name = getOriginalName(path, node.callee.name)
+    if (name !== "InlineContent") {
+      return null
+    }
+  } else if (node.callee.id) {
+    // terser might combine new InlineContent('') declaration and usage
+    if (node.callee.id.type !== "Identifier") {
+      return null
+    }
+    const name = getOriginalName(path, node.callee.id.name)
+    if (name !== "InlineContent") {
+      return null
+    }
+  }
+  if (node.arguments.length !== 2) {
+    return null
+  }
+  const [firstArg, secondArg] = node.arguments
+  if (secondArg.type !== "ObjectExpression") {
+    return null
+  }
+  const typePropertyNode = secondArg.properties.find((property) => {
+    return (
+      property.key.type === "Identifier" &&
+      property.key.name === "type" &&
+      property.type === "ObjectProperty" &&
+      property.value.type === "StringLiteral"
+    )
+  })
+  if (!typePropertyNode) {
+    return null
+  }
+  const type = typePropertyNode.value.value
+  if (firstArg.type === "StringLiteral") {
+    const position = getNodePosition(firstArg)
+    return {
+      nodeType: "StringLiteral",
+      quote: firstArg.extra.raw[0],
+      contentType: type,
+      content: firstArg.value,
+      ...position,
+    }
+  }
+  if (firstArg.type === "TemplateLiteral") {
+    const quasis = firstArg.quasis
+    if (quasis.length !== 1) {
+      return null
+    }
+    const templateElementNode = quasis[0]
+    const position = getNodePosition(firstArg)
+    return {
+      nodeType: "TemplateLiteral",
+      quote: "`",
+      contentType: type,
+      content: templateElementNode.value.cooked,
+      ...position,
+    }
+  }
+  return null
+}
+
+const getNodePosition = (node) => {
+  return {
+    start: node.start,
+    end: node.end,
+    line: node.loc.start.line,
+    column: node.loc.start.column,
+    lineEnd: node.loc.end.line,
+    columnEnd: node.loc.end.column,
+  }
+}
+
+const getOriginalName = (path, name) => {
+  const binding = path.scope.getBinding(name)
+  if (!binding) {
+    return name
+  }
+  if (binding.path.type === "ImportSpecifier") {
+    const importedName = binding.path.node.imported.name
+    if (name === importedName) {
+      return name
+    }
+    return getOriginalName(path, importedName)
+  }
+  if (binding.path.type === "VariableDeclarator") {
+    if (binding.path.node.init.type === "Identifier") {
+      const previousName = binding.path.node.init.name
+      return getOriginalName(path, previousName)
+    }
+  }
+  return name
+}

package/src/omega/core_plugins/leading_slash/jsenv_plugin_leading_slash.js

@@ -0,0 +1,12 @@
+export const jsenvPluginLeadingSlash = () => {
+  return {
+    name: "jsenv:leading_slash",
+    appliesDuring: "*",
+    resolve: ({ specifier }, { rootDirectoryUrl }) => {
+      if (specifier[0] !== "/") {
+        return null
+      }
+      return new URL(specifier.slice(1), rootDirectoryUrl).href
+    },
+  }
+}

package/src/omega/core_plugins/node_esm_resolution/jsenv_plugin_node_esm_resolution.js

@@ -0,0 +1,77 @@
+/*
+ * - should I restore eventual search params lost during node esm resolution
+ * - what about symlinks?
+ *   It feels like I should apply symlink (when we don't want to preserve them)
+ *   once a file:/// url is found, regardless
+ *   if that comes from node resolution or anything else (not even magic resolution)
+ *   it should likely be an other plugin happening after the others
+ */
+
+import {
+  applyNodeEsmResolution,
+  lookupPackageScope,
+  readPackageJson,
+} from "@jsenv/node-esm-resolution"
+
+export const jsenvPluginNodeEsmResolution = ({
+  // https://nodejs.org/api/esm.html#resolver-algorithm-specification
+  packageConditions = ["browser", "import"],
+} = {}) => {
+  const nodeEsmResolution = {
+    name: "jsenv:node_esm_resolve",
+    appliesDuring: "*",
+    resolve: {
+      js_import_export: ({ parentUrl, specifier }) => {
+        const { url } = applyNodeEsmResolution({
+          conditions: packageConditions,
+          parentUrl,
+          specifier,
+        })
+        return url
+      },
+    },
+    load: ({ url }) => {
+      if (url.startsWith("file:///@ignore/")) {
+        return {
+          content: "export default {}",
+        }
+      }
+      return null
+    },
+  }
+
+  const packageVersionInUrl = {
+    name: "jsenv:package_url_version",
+    appliesDuring: {
+      dev: true,
+      test: true,
+    },
+    transformReferencedUrl: ({ url }, { rootDirectoryUrl }) => {
+      if (!url.startsWith("file:")) {
+        return null
+      }
+      // without this check a file inside a project without package.json
+      // could be considered as a node module if there is a ancestor package.json
+      // but we want to version only node modules
+      if (!url.includes("/node_modules/")) {
+        return null
+      }
+      const urlObject = new URL(url)
+      if (urlObject.searchParams.has("v")) {
+        return null
+      }
+      const packageUrl = lookupPackageScope(url)
+      if (!packageUrl) {
+        return null
+      }
+      if (packageUrl === rootDirectoryUrl) {
+        return null
+      }
+      const packageVersion = readPackageJson(packageUrl).version
+      urlObject.searchParams.set("v", packageVersion)
+      return urlObject.href
+    },
+  }
+
+  return [nodeEsmResolution, packageVersionInUrl]
+}

package/src/omega/core_plugins/url_resolution/jsenv_plugin_url_resolution.js

@@ -0,0 +1,28 @@
+export const jsenvPluginUrlResolution = () => {
+  const urlResolver = ({ parentUrl, specifier }) => {
+    return new URL(specifier, parentUrl).href
+  }
+  return {
+    name: "jsenv:url_resolution",
+    appliesDuring: "*",
+    resolve: {
+      "entry_point": urlResolver,
+      "js_import_export": urlResolver,
+      "link_href": urlResolver,
+      "script_src": urlResolver,
+      "a_href": urlResolver,
+      "iframe_src": urlResolver,
+      "img_src": urlResolver,
+      "img_srcset": urlResolver,
+      "source_src": urlResolver,
+      "source_srcset": urlResolver,
+      "image_href": urlResolver,
+      "use_href": urlResolver,
+      "css_@import": urlResolver,
+      "css_url": urlResolver,
+      "sourcemap_comment": urlResolver,
+      "js_import_meta_url_pattern": urlResolver,
+      "js_inline_content": urlResolver,
+    },
+  }
+}

package/src/omega/core_plugins/url_version/jsenv_plugin_url_version.js

@@ -0,0 +1,50 @@
+export const jsenvPluginUrlVersion = ({
+  longTermCache = false, // will become true once things get more stable
+} = {}) => {
+  return {
+    name: "jsenv:url_version",
+    appliesDuring: "*", // maybe only during dev?
+    normalize: ({ url }) => {
+      // "v" search param goal is to enable long-term cache
+      // for server response headers
+      // it is also used by hmr to bypass browser cache
+      // this goal is achieved when we reach this part of the code
+      // We get rid of this params so that urlGraph and other parts of the code
+      // recognize the url (it is not considered as a different url)
+      const urlObject = new URL(url)
+      urlObject.searchParams.delete("v")
+      return urlObject.href
+    },
+    transformReferencedUrl: ({ url, data }) => {
+      if (!data.version) {
+        return null
+      }
+      const urlObject = new URL(url)
+      if (urlObject.searchParams.has("v")) {
+        return null
+      }
+      urlObject.searchParams.set("v", data.version)
+      return urlObject.href
+    },
+    augmentResponse: ({ url }) => {
+      if (!longTermCache) {
+        return null
+      }
+      const urlObject = new URL(url)
+      if (!urlObject.searchParams.has("v")) {
+        return null
+      }
+      if (urlObject.searchParams.has("hmr")) {
+        return null
+      }
+      // When url is versioned put it in browser cache for 30 days
+      return {
+        headers: {
+          "cache-control": `private,max-age=${SECONDS_IN_30_DAYS},immutable`,
+        },
+      }
+    },
+  }
+}
+
+const SECONDS_IN_30_DAYS = 60 * 60 * 24 * 30

package/src/omega/core_plugins.js

@@ -0,0 +1,39 @@
+import { jsenvPluginLeadingSlash } from "./core_plugins/leading_slash/jsenv_plugin_leading_slash.js"
+import { jsenvPluginImportmap } from "./core_plugins/importmap/jsenv_plugin_importmap.js"
+import { jsenvPluginUrlResolution } from "./core_plugins/url_resolution/jsenv_plugin_url_resolution.js"
+import { jsenvPluginNodeEsmResolution } from "./core_plugins/node_esm_resolution/jsenv_plugin_node_esm_resolution.js"
+import { jsenvPluginUrlVersion } from "./core_plugins/url_version/jsenv_plugin_url_version.js"
+import { jsenvPluginFileUrls } from "./core_plugins/file_urls/jsenv_plugin_file_urls.js"
+import { jsenvPluginFileSystemMagic } from "./core_plugins/filesystem_magic/jsenv_plugin_filesystem_magic.js"
+import { jsenvPluginInline } from "./core_plugins/inline/jsenv_plugin_inline.js"
+import { jsenvPluginHtmlSupervisor } from "./core_plugins/html_supervisor/jsenv_plugin_html_supervisor.js"
+import { jsenvPluginCommonJsGlobals } from "./core_plugins/commonjs_globals/jsenv_plugin_commonjs_globals.js"
+import { jsenvPluginImportAssertions } from "./core_plugins/import_assertions/jsenv_plugin_import_assertions.js"
+import { jsenvPluginImportMetaScenarios } from "./core_plugins/import_meta_scenarios/jsenv_plugin_import_meta_scenarios.js"
+import { jsenvPluginBabel } from "./core_plugins/babel/jsenv_plugin_babel.js"
+
+export const getCorePlugins = ({
+  htmlSupervisor,
+  nodeEsmResolution,
+  fileSystemMagicResolution,
+  babel,
+} = {}) => {
+  const asFewAsPossible = false // useful during dev
+  return [
+    ...(asFewAsPossible ? [] : [jsenvPluginImportAssertions()]),
+    ...(asFewAsPossible ? [] : [jsenvPluginHtmlSupervisor(htmlSupervisor)]), // before inline as it turns inline <script> into <script src>
+    ...(asFewAsPossible ? [] : [jsenvPluginInline()]), // before "file urls" to resolve and load inline urls
+    jsenvPluginImportmap(), // before node esm to handle bare specifiers before node esm
+    jsenvPluginFileUrls(),
+    jsenvPluginLeadingSlash(),
+    jsenvPluginNodeEsmResolution(nodeEsmResolution), // before url resolution to handle "js_import_export" resolution
+    jsenvPluginUrlResolution(),
+    ...(asFewAsPossible
+      ? []
+      : [jsenvPluginFileSystemMagic(fileSystemMagicResolution)]),
+    jsenvPluginUrlVersion(),
+    ...(asFewAsPossible ? [] : [jsenvPluginCommonJsGlobals()]),
+    ...(asFewAsPossible ? [] : [jsenvPluginImportMetaScenarios()]),
+    jsenvPluginBabel(babel),
+  ]
+}