@jsenv/core 27.0.0-alpha.5 → 27.0.0-alpha.50

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

@@ -30,8 +30,7 @@ import {
   getHtmlNodeAttributeByName,
   htmlNodePosition,
   removeHtmlNodeAttributeByName,
-  setHtmlNodeText,
-  assignHtmlNodeAttributes,
+  setHtmlNodeGeneratedText,
   getHtmlNodeTextNode,
   removeHtmlNode,
 } from "@jsenv/utils/html_ast/html_ast.js"
@@ -59,16 +58,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,12 +90,9 @@ export const jsenvPluginImportmap = () => {
         }
       },
     },
-    transform: {
-      html: async (
-        { url, content, references },
-        { scenario, cook, urlGraph, referenceUtils },
-      ) => {
-        const htmlAst = parseHtmlString(content)
+    transformUrlContent: {
+      html: async (htmlUrlInfo, context) => {
+        const htmlAst = parseHtmlString(htmlUrlInfo.content)
         const importmap = findNode(htmlAst, (node) => {
           if (node.nodeName !== "script") {
             return false
@@ -108,7 +104,7 @@ export const jsenvPluginImportmap = () => {
           return true
         })
         if (!importmap) {
-          onHtmlImportmapParsed(null, url)
+          onHtmlImportmapParsed(null, htmlUrlInfo.url)
           return null
         }
         const handleInlineImportmap = async (importmap, textNode) => {
@@ -117,7 +113,7 @@ export const jsenvPluginImportmap = () => {
               preferOriginal: true,
             })
           const inlineImportmapUrl = generateInlineContentUrl({
-            url,
+            url: htmlUrlInfo.url,
             extension: ".importmap",
             line,
             column,
@@ -125,21 +121,27 @@ 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,
             })
-          await cook({
+          await context.cook({
             reference: inlineImportmapReference,
             urlInfo: inlineImportmapUrlInfo,
           })
-          setHtmlNodeText(importmap, inlineImportmapUrlInfo.content)
-          onHtmlImportmapParsed(JSON.parse(inlineImportmapUrlInfo.content), url)
+          setHtmlNodeGeneratedText(importmap, {
+            generatedText: inlineImportmapUrlInfo.content,
+            generatedBy: "jsenv:importmap",
+          })
+          onHtmlImportmapParsed(
+            JSON.parse(inlineImportmapUrlInfo.content),
+            htmlUrlInfo.url,
+          )
         }
         const handleImportmapWithSrc = async (importmap, src) => {
           // Browser would throw on remote importmap
@@ -147,35 +149,39 @@ 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({
             reference: importmapReference,
             urlInfo: importmapUrlInfo,
           })
-          onHtmlImportmapParsed(JSON.parse(importmapUrlInfo.content), url)
+          onHtmlImportmapParsed(
+            JSON.parse(importmapUrlInfo.content),
+            htmlUrlInfo.url,
+          )
           removeHtmlNodeAttributeByName(importmap, "src")
-          assignHtmlNodeAttributes(importmap, {
-            "content-src": src,
-            "inlined-by": "jsenv:importmap",
+          setHtmlNodeGeneratedText(importmap, {
+            generatedText: importmapUrlInfo.content,
+            generatedBy: "jsenv:importmap",
+            generatedFromSrc: src,
           })
-          setHtmlNodeText(importmap, importmapUrlInfo.content)
 
           const { line, column, lineEnd, columnEnd, isOriginal } =
             htmlNodePosition.readNodePosition(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,
@@ -200,7 +206,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/jsenv_plugin_inject_globals.js

@@ -0,0 +1,67 @@
+import {
+  parseHtmlString,
+  injectScriptAsEarlyAsPossible,
+  createHtmlNode,
+  stringifyHtmlAst,
+} from "@jsenv/utils/html_ast/html_ast.js"
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+import { isWebWorkerUrlInfo } from "@jsenv/core/src/omega/web_workers.js"
+
+export const jsenvPluginInjectGlobals = (globals = {}) => {
+  if (Object.keys(globals).length === 0) {
+    return []
+  }
+
+  const globalInjectorOnHtmlEntryPoint = (urlInfo) => {
+    if (!urlInfo.data.isEntryPoint) {
+      return null
+    }
+    // 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,
+    })
+    injectScriptAsEarlyAsPossible(
+      htmlAst,
+      createHtmlNode({
+        "tagName": "script",
+        "textContent": generateClientCodeForGlobals({
+          globals,
+          isWebWorker: false,
+        }),
+        "injected-by": "jsenv:inject_globals",
+      }),
+    )
+    return stringifyHtmlAst(htmlAst)
+  }
+
+  const globalsInjectorOnJsEntryPoints = (urlInfo) => {
+    if (!urlInfo.data.isEntryPoint && !urlInfo.data.isWebWorkerEntryPoint) {
+      return null
+    }
+    const magicSource = createMagicSource(urlInfo.content)
+    magicSource.append(
+      generateClientCodeForGlobals({
+        globals,
+        isWebWorker: isWebWorkerUrlInfo(urlInfo),
+      }),
+    )
+    return magicSource.toContentAndSourcemap()
+  }
+
+  return {
+    name: "jsenv:inject_globals",
+    appliesDuring: "*",
+    transformUrlContent: {
+      html: globalInjectorOnHtmlEntryPoint,
+      js_classic: globalsInjectorOnJsEntryPoints,
+      js_module: globalsInjectorOnJsEntryPoints,
+    },
+  }
+}
+
+const generateClientCodeForGlobals = ({ isWebWorker = false, globals }) => {
+  const globalName = isWebWorker ? "self" : "window"
+  return `Object.assign(${globalName}, ${JSON.stringify(globals, null, "  ")});`
+}

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

@@ -1,42 +1,46 @@
 import { DataUrl } from "@jsenv/utils/urls/data_url.js"
-import { ContentType } from "@jsenv/utils/src/content_type.js"
+import { CONTENT_TYPE } from "@jsenv/utils/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
+      const {
+        contentType,
+        base64Flag,
+        data: urlData,
+      } = DataUrl.parse(urlInfo.url)
+      urlInfo.data.base64Flag = base64Flag
       return {
         contentType,
         content: contentFromUrlData({ contentType, base64Flag, urlData }),
       }
     },
-    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({
+        const urlInfo = context.urlGraph.getUrlInfo(reference.url)
+        await context.cook({
           reference,
           urlInfo,
         })
         if (urlInfo.originalContent === urlInfo.content) {
-          return reference.url
+          return reference.generatedUrl
         }
         const specifier = DataUrl.stringify({
           contentType: urlInfo.contentType,
@@ -52,7 +56,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/{omega/core_plugins/inline/jsenv_plugin_js_and_css_inside_html.js → plugins/inline/jsenv_plugin_html_inline_content.js}

@@ -5,19 +5,19 @@ import {
   getHtmlNodeTextNode,
   htmlNodePosition,
   parseScriptNode,
-  setHtmlNodeText,
+  setHtmlNodeGeneratedText,
   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"
+import { CONTENT_TYPE } from "@jsenv/utils/content_type/content_type.js"
 
-export const jsenvPluginJsAndCssInsideHtml = () => {
+export const jsenvPluginHtmlInlineContent = ({ analyzeConvertedScripts }) => {
   return {
-    name: "jsenv:js_and_css_inside_html",
+    name: "jsenv:html_inline_content",
     appliesDuring: "*",
-    transform: {
-      html: async ({ url, content }, { cook, referenceUtils }) => {
-        const htmlAst = parseHtmlString(content)
+    transformUrlContent: {
+      html: async (urlInfo, context) => {
+        const htmlAst = parseHtmlString(urlInfo.content)
         const actions = []
         const handleInlineStyle = (node) => {
           if (node.nodeName !== "style") {
@@ -33,7 +33,7 @@ export const jsenvPluginJsAndCssInsideHtml = () => {
                 preferOriginal: true,
               })
             const inlineStyleUrl = generateInlineContentUrl({
-              url,
+              url: urlInfo.url,
               extension: ".css",
               line,
               column,
@@ -41,23 +41,27 @@ export const jsenvPluginJsAndCssInsideHtml = () => {
               columnEnd,
             })
             const [inlineStyleReference, inlineStyleUrlInfo] =
-              referenceUtils.foundInline({
+              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>
-                line: line - 1,
-                column,
-                isOriginal,
+                specifierLine: line - 1,
+                specifierColumn: column,
                 specifier: inlineStyleUrl,
                 contentType: "text/css",
                 content: textNode.value,
               })
-            await cook({
+            await context.cook({
               reference: inlineStyleReference,
               urlInfo: inlineStyleUrlInfo,
             })
-            setHtmlNodeText(node, inlineStyleUrlInfo.content)
+            setHtmlNodeGeneratedText(node, {
+              generatedText: inlineStyleUrlInfo.content,
+              generatedBy: "jsenv:html_inline_content",
+            })
           })
         }
         const handleInlineScript = (node) => {
@@ -68,14 +72,19 @@ export const jsenvPluginJsAndCssInsideHtml = () => {
           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
+          // 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 = getHtmlNodeAttributeByName(node, "generated-by")
+          if (generatedBy) {
+            if (generatedBy.value === "jsenv:script_type_module_as_classic") {
+              if (!analyzeConvertedScripts) {
+                return
+              }
+            }
+            if (generatedBy.value === "jsenv:html_supervisor") {
+              return
+            }
           }
           actions.push(async () => {
             const scriptCategory = parseScriptNode(node)
@@ -83,41 +92,57 @@ export const jsenvPluginJsAndCssInsideHtml = () => {
               htmlNodePosition.readNodePosition(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,
-              extension: scriptCategory === "importmap" ? ".importmap" : ".js",
+              url: urlInfo.url,
+              extension: CONTENT_TYPE.asFileExtension(contentType),
               line,
               column,
               lineEnd,
               columnEnd,
             })
-            if (scriptCategory === "classic") {
-              inlineScriptUrl = injectQueryParams(inlineScriptUrl, {
-                js_classic: "",
-              })
-            }
             const [inlineScriptReference, inlineScriptUrlInfo] =
-              referenceUtils.foundInline({
+              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>
-                line: line - 1,
-                column,
-                isOriginal,
+                specifierLine: line - 1,
+                specifierColumn: column,
+                isOriginalPosition: isOriginal,
                 specifier: inlineScriptUrl,
-                contentType:
-                  scriptCategory === "importmap"
-                    ? "application/importmap+json"
-                    : "application/javascript",
+                contentType,
                 content: textNode.value,
               })
-            await cook({
+
+            await context.cook({
               reference: inlineScriptReference,
               urlInfo: inlineScriptUrlInfo,
             })
-            setHtmlNodeText(node, inlineScriptUrlInfo.content)
+            setHtmlNodeGeneratedText(node, {
+              generatedText: inlineScriptUrlInfo.content,
+              generatedBy: "jsenv:html_inline_content",
+            })
           })
         }
         visitHtmlAst(htmlAst, (node) => {
@@ -127,11 +152,7 @@ export const jsenvPluginJsAndCssInsideHtml = () => {
         if (actions.length === 0) {
           return null
         }
-        await Promise.all(
-          actions.map(async (action) => {
-            await action()
-          }),
-        )
+        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 {
+        contentType: urlInfo.contentType,
+        // we want to fetch the original content otherwise we might re-cook
+        // content already cooked
+        content: urlInfo.originalContent,
+      }
+    },
+  }
+}

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

@@ -4,7 +4,7 @@ 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,17 +15,17 @@ 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({
+          const urlInfo = context.urlGraph.getUrlInfo(reference.url)
+          await context.cook({
             reference,
             urlInfo,
           })