@jsenv/core 27.0.0-alpha.9 → 27.0.0-alpha.92

package/src/{omega/core_plugins → plugins}/importmap/jsenv_plugin_importmap.js

@@ -22,20 +22,18 @@ import {
   composeTwoImportMaps,
   normalizeImportMap,
 } from "@jsenv/importmap"
-
+import { generateInlineContentUrl } from "@jsenv/urls"
 import {
   parseHtmlString,
   stringifyHtmlAst,
-  findNode,
-  getHtmlNodeAttributeByName,
-  htmlNodePosition,
-  removeHtmlNodeAttributeByName,
+  findHtmlNode,
+  getHtmlNodeAttribute,
+  setHtmlNodeAttributes,
+  getHtmlNodePosition,
+  getHtmlNodeText,
   setHtmlNodeText,
-  assignHtmlNodeAttributes,
-  getHtmlNodeTextNode,
   removeHtmlNode,
-} from "@jsenv/utils/html_ast/html_ast.js"
-import { generateInlineContentUrl } from "@jsenv/utils/urls/inline_content_url_generator.js"
+} from "@jsenv/ast"
 
 export const jsenvPluginImportmap = () => {
   let finalImportmap = null
@@ -59,16 +57,16 @@ export const jsenvPluginImportmap = () => {
   return {
     name: "jsenv:importmap",
     appliesDuring: "*",
-    resolve: {
-      js_import_export: ({ parentUrl, specifier }) => {
+    resolveUrl: {
+      js_import_export: (reference) => {
         if (!finalImportmap) {
           return null
         }
         try {
           let fromMapping = false
           const result = resolveImport({
-            specifier,
-            importer: parentUrl,
+            specifier: reference.specifier,
+            importer: reference.parentUrl,
             importMap: finalImportmap,
             onImportMapping: () => {
               fromMapping = true
@@ -91,33 +89,30 @@ export const jsenvPluginImportmap = () => {
         }
       },
     },
-    transform: {
-      html: async (
-        { url, content, references },
-        { scenario, cook, urlGraph, referenceUtils },
-      ) => {
-        const htmlAst = parseHtmlString(content)
-        const importmap = findNode(htmlAst, (node) => {
+    transformUrlContent: {
+      html: async (htmlUrlInfo, context) => {
+        const htmlAst = parseHtmlString(htmlUrlInfo.content)
+        const importmap = findHtmlNode(htmlAst, (node) => {
           if (node.nodeName !== "script") {
             return false
           }
-          const typeAttribute = getHtmlNodeAttributeByName(node, "type")
-          if (!typeAttribute || typeAttribute.value !== "importmap") {
+          const type = getHtmlNodeAttribute(node, "type")
+          if (type === undefined || type !== "importmap") {
             return false
           }
           return true
         })
         if (!importmap) {
-          onHtmlImportmapParsed(null, url)
+          onHtmlImportmapParsed(null, htmlUrlInfo.url)
           return null
         }
-        const handleInlineImportmap = async (importmap, textNode) => {
+        const handleInlineImportmap = async (importmap, htmlNodeText) => {
           const { line, column, lineEnd, columnEnd, isOriginal } =
-            htmlNodePosition.readNodePosition(importmap, {
+            getHtmlNodePosition(importmap, {
               preferOriginal: true,
             })
           const inlineImportmapUrl = generateInlineContentUrl({
-            url,
+            url: htmlUrlInfo.url,
             extension: ".importmap",
             line,
             column,
@@ -125,21 +120,26 @@ export const jsenvPluginImportmap = () => {
             columnEnd,
           })
           const [inlineImportmapReference, inlineImportmapUrlInfo] =
-            referenceUtils.foundInline({
+            context.referenceUtils.foundInline({
               type: "script_src",
-              line: line - 1,
-              column,
-              isOriginal,
+              isOriginalPosition: isOriginal,
+              specifierLine: line - 1,
+              specifierColumn: column,
               specifier: inlineImportmapUrl,
               contentType: "application/importmap+json",
-              content: textNode.value,
+              content: htmlNodeText,
             })
-          await cook({
+          await context.cook(inlineImportmapUrlInfo, {
             reference: inlineImportmapReference,
-            urlInfo: inlineImportmapUrlInfo,
           })
           setHtmlNodeText(importmap, inlineImportmapUrlInfo.content)
-          onHtmlImportmapParsed(JSON.parse(inlineImportmapUrlInfo.content), url)
+          setHtmlNodeAttributes(importmap, {
+            "generated-by": "jsenv:importmap",
+          })
+          onHtmlImportmapParsed(
+            JSON.parse(inlineImportmapUrlInfo.content),
+            htmlUrlInfo.url,
+          )
         }
         const handleImportmapWithSrc = async (importmap, src) => {
           // Browser would throw on remote importmap
@@ -147,35 +147,38 @@ export const jsenvPluginImportmap = () => {
           // 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 importmapReference =
+            context.referenceUtils.findByGeneratedSpecifier(src)
+          const importmapUrlInfo = context.urlGraph.getUrlInfo(
+            importmapReference.url,
           )
-          const importmapUrlInfo = urlGraph.getUrlInfo(importmapReference.url)
-          await cook({
+          await context.cook(importmapUrlInfo, {
             reference: importmapReference,
-            urlInfo: importmapUrlInfo,
-          })
-          onHtmlImportmapParsed(JSON.parse(importmapUrlInfo.content), url)
-          removeHtmlNodeAttributeByName(importmap, "src")
-          assignHtmlNodeAttributes(importmap, {
-            "content-src": src,
-            "inlined-by": "jsenv:importmap",
           })
+          onHtmlImportmapParsed(
+            JSON.parse(importmapUrlInfo.content),
+            htmlUrlInfo.url,
+          )
           setHtmlNodeText(importmap, importmapUrlInfo.content)
+          setHtmlNodeAttributes(importmap, {
+            "src": undefined,
+            "generated-by": "jsenv:importmap",
+            "generated-from-src": src,
+          })
 
           const { line, column, lineEnd, columnEnd, isOriginal } =
-            htmlNodePosition.readNodePosition(importmap, {
+            getHtmlNodePosition(importmap, {
               preferOriginal: true,
             })
           const inlineImportmapUrl = generateInlineContentUrl({
-            url,
+            url: htmlUrlInfo.url,
             extension: ".importmap",
             line,
             column,
             lineEnd,
             columnEnd,
           })
-          referenceUtils.becomesInline(importmapReference, {
+          context.referenceUtils.becomesInline(importmapReference, {
             line: line - 1,
             column,
             isOriginal,
@@ -185,14 +188,13 @@ export const jsenvPluginImportmap = () => {
           })
         }
 
-        const srcAttribute = getHtmlNodeAttributeByName(importmap, "src")
-        const src = srcAttribute ? srcAttribute.value : undefined
+        const src = getHtmlNodeAttribute(importmap, "src")
         if (src) {
           await handleImportmapWithSrc(importmap, src)
         } else {
-          const textNode = getHtmlNodeTextNode(importmap)
-          if (textNode) {
-            await handleInlineImportmap(importmap, textNode)
+          const htmlNodeText = getHtmlNodeText(importmap)
+          if (htmlNodeText) {
+            await handleInlineImportmap(importmap, htmlNodeText)
           }
         }
         // once this plugin knows the importmap, it will use it
@@ -200,7 +202,7 @@ export const jsenvPluginImportmap = () => {
         // 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") {
+        if (context.scenario === "build") {
           removeHtmlNode(importmap)
         }
         return {

package/src/plugins/inject_globals/inject_globals.js

@@ -0,0 +1,57 @@
+import { createMagicSource } from "@jsenv/sourcemap"
+import {
+  parseHtmlString,
+  injectScriptNodeAsEarlyAsPossible,
+  createHtmlNode,
+  stringifyHtmlAst,
+} from "@jsenv/ast"
+
+export const injectGlobals = (urlInfo, globals) => {
+  if (urlInfo.type === "html") {
+    return globalInjectorOnHtml(urlInfo, globals)
+  }
+  if (urlInfo.type === "js_classic" || urlInfo.type === "js_module") {
+    return globalsInjectorOnJs(urlInfo, globals)
+  }
+  throw new Error(`cannot inject globals into "${urlInfo.type}"`)
+}
+
+const globalInjectorOnHtml = async (urlInfo, globals) => {
+  // ideally we would inject an importmap but browser support is too low
+  // (even worse for worker/service worker)
+  // so for now we inject code into entry points
+  const htmlAst = parseHtmlString(urlInfo.content, {
+    storeOriginalPositions: false,
+  })
+  const clientCode = generateClientCodeForGlobals({
+    globals,
+    isWebWorker: false,
+  })
+  injectScriptNodeAsEarlyAsPossible(
+    htmlAst,
+    createHtmlNode({
+      "tagName": "script",
+      "textContent": clientCode,
+      "injected-by": "jsenv:inject_globals",
+    }),
+  )
+  return stringifyHtmlAst(htmlAst)
+}
+
+const globalsInjectorOnJs = async (urlInfo, globals) => {
+  const clientCode = generateClientCodeForGlobals({
+    globals,
+    isWebWorker:
+      urlInfo.subtype === "worker" ||
+      urlInfo.subtype === "service_worker" ||
+      urlInfo.subtype === "shared_worker",
+  })
+  const magicSource = createMagicSource(urlInfo.content)
+  magicSource.prepend(clientCode)
+  return magicSource.toContentAndSourcemap()
+}
+
+const generateClientCodeForGlobals = ({ isWebWorker = false, globals }) => {
+  const globalName = isWebWorker ? "self" : "window"
+  return `Object.assign(${globalName}, ${JSON.stringify(globals, null, "  ")});`
+}

package/src/plugins/inject_globals/jsenv_plugin_inject_globals.js

@@ -0,0 +1,24 @@
+import { injectGlobals } from "./inject_globals.js"
+
+export const jsenvPluginInjectGlobals = (urlAssociations) => {
+  return {
+    name: "jsenv:inject_globals",
+    appliesDuring: "*",
+    transformUrlContent: async (urlInfo) => {
+      const url = Object.keys(urlAssociations).find((url) => {
+        return url === urlInfo.url
+      })
+      if (!url) {
+        return null
+      }
+      let globals = urlAssociations[url]
+      if (typeof globals === "function") {
+        globals = await globals()
+      }
+      if (Object.keys(globals).length === 0) {
+        return null
+      }
+      return injectGlobals(urlInfo, globals)
+    },
+  }
+}

package/src/{omega/core_plugins → plugins}/inline/jsenv_plugin_data_urls.js

@@ -1,45 +1,46 @@
-import { DataUrl } from "@jsenv/utils/urls/data_url.js"
-import { ContentType } from "@jsenv/utils/src/content_type.js"
+import { DATA_URL } from "@jsenv/urls"
+import { CONTENT_TYPE } from "@jsenv/utils/src/content_type/content_type.js"
 
 export const jsenvPluginDataUrls = () => {
   return {
     name: "jsenv:data_urls",
     appliesDuring: "*",
-    resolve: ({ specifier }) => {
-      if (!specifier.startsWith("data:")) {
+    resolveUrl: (reference) => {
+      if (!reference.specifier.startsWith("data:")) {
         return null
       }
-      return specifier
+      return reference.specifier
     },
-    load: ({ url, data }) => {
-      if (!url.startsWith("data:")) {
+    fetchUrlContent: (urlInfo) => {
+      if (!urlInfo.url.startsWith("data:")) {
         return null
       }
-      const { contentType, base64Flag, data: urlData } = DataUrl.parse(url)
-      data.base64Flag = base64Flag
-      return {
+      const {
         contentType,
+        base64Flag,
+        data: urlData,
+      } = DATA_URL.parse(urlInfo.url)
+      urlInfo.data.base64Flag = base64Flag
+      return {
         content: contentFromUrlData({ contentType, base64Flag, urlData }),
+        contentType,
       }
     },
-    formatReferencedUrl: (reference, { urlGraph, cook }) => {
-      if (!reference.url.startsWith("data:")) {
+    formatUrl: (reference, context) => {
+      if (!reference.generatedUrl.startsWith("data:")) {
         return null
       }
       if (reference.type === "sourcemap_comment") {
         return null
       }
       return (async () => {
-        const urlInfo = urlGraph.getUrlInfo(reference.url)
-        await cook({
-          reference,
-          urlInfo,
-        })
+        const urlInfo = context.urlGraph.getUrlInfo(reference.url)
+        await context.cook(urlInfo, { reference })
         if (urlInfo.originalContent === urlInfo.content) {
-          return reference.url
+          return reference.generatedUrl
         }
-        const specifier = DataUrl.stringify({
-          contentType: urlInfo.contentType,
+        const specifier = DATA_URL.stringify({
+          contentType: urlInfo.headers["content-type"],
           base64Flag: urlInfo.data.base64Flag,
           data: urlInfo.data.base64Flag
             ? dataToBase64(urlInfo.content)
@@ -52,7 +53,7 @@ export const jsenvPluginDataUrls = () => {
 }
 
 const contentFromUrlData = ({ contentType, base64Flag, urlData }) => {
-  if (ContentType.isTextual(contentType)) {
+  if (CONTENT_TYPE.isTextual(contentType)) {
     if (base64Flag) {
       return base64ToString(urlData)
     }

package/src/plugins/inline/jsenv_plugin_html_inline_content.js

@@ -0,0 +1,159 @@
+import { generateInlineContentUrl } from "@jsenv/urls"
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  visitHtmlNodes,
+  getHtmlNodeText,
+  getHtmlNodePosition,
+  analyzeScriptNode,
+  setHtmlNodeAttributes,
+  setHtmlNodeText,
+  getHtmlNodeAttribute,
+} from "@jsenv/ast"
+import { CONTENT_TYPE } from "@jsenv/utils/src/content_type/content_type.js"
+
+export const jsenvPluginHtmlInlineContent = ({ analyzeConvertedScripts }) => {
+  return {
+    name: "jsenv:html_inline_content",
+    appliesDuring: "*",
+    transformUrlContent: {
+      html: async (urlInfo, context) => {
+        const htmlAst = parseHtmlString(urlInfo.content)
+        const actions = []
+        const handleInlineStyle = (node) => {
+          const htmlNodeText = getHtmlNodeText(node)
+          if (!htmlNodeText) {
+            return
+          }
+          actions.push(async () => {
+            const { line, column, lineEnd, columnEnd, isOriginal } =
+              getHtmlNodePosition(node, {
+                preferOriginal: true,
+              })
+            const inlineStyleUrl = generateInlineContentUrl({
+              url: urlInfo.url,
+              extension: ".css",
+              line,
+              column,
+              lineEnd,
+              columnEnd,
+            })
+            const [inlineStyleReference, inlineStyleUrlInfo] =
+              context.referenceUtils.foundInline({
+                type: "link_href",
+                expectedType: "css",
+                isOriginalPosition: isOriginal,
+                // we remove 1 to the line because imagine the following html:
+                // <style>body { color: red; }</style>
+                // -> content starts same line as <style>
+                specifierLine: line - 1,
+                specifierColumn: column,
+                specifier: inlineStyleUrl,
+                contentType: "text/css",
+                content: htmlNodeText,
+              })
+            await context.cook(inlineStyleUrlInfo, {
+              reference: inlineStyleReference,
+            })
+            setHtmlNodeText(node, inlineStyleUrlInfo.content)
+            setHtmlNodeAttributes(node, {
+              "generated-by": "jsenv:html_inline_content",
+            })
+          })
+        }
+        const handleInlineScript = (node) => {
+          const htmlNodeText = getHtmlNodeText(node)
+          if (!htmlNodeText) {
+            return
+          }
+          // If the inline script was already handled by an other plugin, ignore it
+          // - we want to preserve inline scripts generated by html supervisor during dev
+          // - we want to avoid cooking twice a script during build
+          const generatedBy = getHtmlNodeAttribute(node, "generated-by")
+          if (
+            generatedBy === "jsenv:as_js_classic_html" &&
+            !analyzeConvertedScripts
+          ) {
+            return
+          }
+          if (generatedBy === "jsenv:html_supervisor") {
+            return
+          }
+          actions.push(async () => {
+            const scriptCategory = analyzeScriptNode(node)
+            const { line, column, lineEnd, columnEnd, isOriginal } =
+              getHtmlNodePosition(node, {
+                preferOriginal: true,
+              })
+            // from MDN about [type] attribute:
+            // "Any other value: The embedded content is treated as a data block
+            // which won't be processed by the browser. Developers must use a valid MIME type
+            // that is not a JavaScript MIME type to denote data blocks.
+            // The src attribute will be ignored."
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type
+            const isJs =
+              scriptCategory === "classic" || scriptCategory === "module"
+            const isImportmap = scriptCategory === "importmap"
+            const contentType = isJs
+              ? "text/javascript"
+              : isImportmap
+              ? "application/importmap+json"
+              : scriptCategory
+
+            let inlineScriptUrl = generateInlineContentUrl({
+              url: urlInfo.url,
+              extension: CONTENT_TYPE.asFileExtension(contentType),
+              line,
+              column,
+              lineEnd,
+              columnEnd,
+            })
+            const [inlineScriptReference, inlineScriptUrlInfo] =
+              context.referenceUtils.foundInline({
+                node,
+                type: "script_src",
+                expectedType: {
+                  classic: "js_classic",
+                  module: "js_module",
+                  importmap: "importmap",
+                }[scriptCategory],
+                // 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,
+                isOriginalPosition: isOriginal,
+                specifier: inlineScriptUrl,
+                contentType,
+                content: htmlNodeText,
+              })
+
+            await context.cook(inlineScriptUrlInfo, {
+              reference: inlineScriptReference,
+            })
+            setHtmlNodeText(node, inlineScriptUrlInfo.content)
+            setHtmlNodeAttributes(node, {
+              "generated-by": "jsenv:html_inline_content",
+            })
+          })
+        }
+        visitHtmlNodes(htmlAst, {
+          style: (node) => {
+            handleInlineStyle(node)
+          },
+          script: (node) => {
+            handleInlineScript(node)
+          },
+        })
+        if (actions.length === 0) {
+          return null
+        }
+        await Promise.all(actions.map((action) => action()))
+        const htmlModified = stringifyHtmlAst(htmlAst)
+        return {
+          content: htmlModified,
+        }
+      },
+    },
+  }
+}

package/src/plugins/inline/jsenv_plugin_inline.js

@@ -0,0 +1,36 @@
+import { jsenvPluginHtmlInlineContent } from "./jsenv_plugin_html_inline_content.js"
+import { jsenvPluginJsInlineContent } from "./jsenv_plugin_js_inline_content.js"
+import { jsenvPluginDataUrls } from "./jsenv_plugin_data_urls.js"
+import { jsenvPluginInlineQueryParam } from "./jsenv_plugin_inline_query_param.js"
+
+export const jsenvPluginInline = ({
+  fetchInlineUrls = true,
+  analyzeConvertedScripts = false,
+  allowEscapeForVersioning = false,
+} = {}) => {
+  return [
+    ...(fetchInlineUrls ? [jsenvPluginInlineUrls()] : []),
+    jsenvPluginHtmlInlineContent({ analyzeConvertedScripts }),
+    jsenvPluginJsInlineContent({ allowEscapeForVersioning }),
+    jsenvPluginDataUrls(),
+    jsenvPluginInlineQueryParam(),
+  ]
+}
+
+const jsenvPluginInlineUrls = () => {
+  return {
+    name: "jsenv:inline_urls",
+    appliesDuring: "*",
+    fetchUrlContent: (urlInfo) => {
+      if (!urlInfo.isInline) {
+        return null
+      }
+      return {
+        // we want to fetch the original content otherwise we might re-cook
+        // content already cooked
+        content: urlInfo.originalContent,
+        contentType: urlInfo.contentType,
+      }
+    },
+  }
+}

package/src/{omega/core_plugins → plugins}/inline/jsenv_plugin_inline_query_param.js

@@ -1,10 +1,10 @@
-import { DataUrl } from "@jsenv/utils/urls/data_url.js"
+import { DATA_URL } from "@jsenv/urls"
 
 export const jsenvPluginInlineQueryParam = () => {
   return {
     name: "jsenv:inline_query_param",
     appliesDuring: "*",
-    formatReferencedUrl: {
+    formatUrl: {
       // <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
@@ -15,21 +15,18 @@ export const jsenvPluginInlineQueryParam = () => {
       // 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' })
+      // const blob = new Blob(workerText, { type: 'text/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")) {
+      "*": (reference, context) => {
+        if (!reference.searchParams.has("inline")) {
           return null
         }
         return (async () => {
-          const urlInfo = urlGraph.getUrlInfo(reference.url)
-          await cook({
-            reference,
-            urlInfo,
-          })
-          const specifier = DataUrl.stringify({
+          const urlInfo = context.urlGraph.getUrlInfo(reference.url)
+          await context.cook(urlInfo, { reference })
+          const specifier = DATA_URL.stringify({
             mediaType: urlInfo.contentType,
             base64Flag: true,
             data: Buffer.from(urlInfo.content).toString("base64"),