@jsenv/core 34.2.1 → 34.3.0

package/src/plugins/{inline/jsenv_plugin_inline_query_param.js → inlining/jsenv_plugin_inlining_as_data_url.js}

@@ -1,16 +1,10 @@
 import { DATA_URL } from "@jsenv/urls"
 
-export const jsenvPluginInlineQueryParam = () => {
+export const jsenvPluginInliningAsDataUrl = () => {
   return {
-    name: "jsenv:inline_query_param",
+    name: "jsenv:inlining_as_data_url",
     appliesDuring: "*",
     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
-      "link_href": () => null,
-      "style": () => null,
-      "script": () => 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
@@ -21,7 +15,20 @@ export const jsenvPluginInlineQueryParam = () => {
       // in any case the recommended way is to use an url
       // to benefit from shared worker and reuse worker between tabs
       "*": (reference, context) => {
-        if (!reference.searchParams.has("inline")) {
+        if (
+          !reference.original ||
+          !reference.original.searchParams.has("inline")
+        ) {
+          return null
+        }
+        // <link rel="stylesheet"> and <script> can be inlined in the html
+        if (
+          reference.type === "link_href" &&
+          reference.subtype === "stylesheet"
+        ) {
+          return null
+        }
+        if (reference.type === "script") {
           return null
         }
         return (async () => {

package/src/plugins/inlining/jsenv_plugin_inlining_into_html.js

@@ -0,0 +1,149 @@
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  visitHtmlNodes,
+  getHtmlNodeText,
+  analyzeScriptNode,
+  getHtmlNodeAttribute,
+  setHtmlNodeAttributes,
+  setHtmlNodeText,
+  getHtmlNodePosition,
+} from "@jsenv/ast"
+
+export const jsenvPluginInliningIntoHtml = () => {
+  return {
+    name: "jsenv:inlining_into_html",
+    appliesDuring: "*",
+    transformUrlContent: {
+      html: async (urlInfo, context) => {
+        const htmlAst = parseHtmlString(urlInfo.content)
+        const mutations = []
+        const actions = []
+
+        const onStyleSheet = (linkNode, { href }) => {
+          const linkReference = context.referenceUtils.find(
+            (ref) =>
+              ref.generatedSpecifier === href &&
+              ref.type === "link_href" &&
+              ref.subtype === "stylesheet",
+          )
+          if (
+            !linkReference.original ||
+            !linkReference.original.searchParams.has("inline")
+          ) {
+            return
+          }
+          const linkUrlInfo = context.urlGraph.getUrlInfo(linkReference.url)
+          actions.push(async () => {
+            await context.cook(linkUrlInfo, {
+              reference: linkReference,
+            })
+            const { line, column, isOriginal } = getHtmlNodePosition(linkNode, {
+              preferOriginal: true,
+            })
+            context.referenceUtils.becomesInline(linkReference, {
+              line: line - 1,
+              column,
+              isOriginal,
+              specifier: linkReference.generatedSpecifier,
+              content: linkUrlInfo.content,
+              contentType: linkUrlInfo.contentType,
+            })
+            mutations.push(() => {
+              setHtmlNodeAttributes(linkNode, {
+                "inlined-from-href": href,
+                "href": undefined,
+                "rel": undefined,
+                "type": undefined,
+                "as": undefined,
+                "crossorigin": undefined,
+                "integrity": undefined,
+                "jsenv-inlined-by": "jsenv:inlining_into_html",
+              })
+              linkNode.nodeName = "style"
+              linkNode.tagName = "style"
+              setHtmlNodeText(linkNode, linkUrlInfo.content, {
+                indentation: "auto",
+              })
+            })
+          })
+        }
+        const onScriptWithSrc = (scriptNode, { src }) => {
+          const scriptReference = context.referenceUtils.find(
+            (ref) => ref.generatedSpecifier === src && ref.type === "script",
+          )
+          if (
+            !scriptReference.original ||
+            !scriptReference.original.searchParams.has("inline")
+          ) {
+            return
+          }
+          const scriptUrlInfo = context.urlGraph.getUrlInfo(scriptReference.url)
+          actions.push(async () => {
+            await context.cook(scriptUrlInfo, {
+              reference: scriptReference,
+            })
+            const { line, column, isOriginal } = getHtmlNodePosition(
+              scriptNode,
+              {
+                preferOriginal: true,
+              },
+            )
+            context.referenceUtils.becomesInline(scriptReference, {
+              line: line - 1,
+              column,
+              isOriginal,
+              specifier: scriptReference.generatedSpecifier,
+              content: scriptUrlInfo.content,
+              contentType: scriptUrlInfo.contentType,
+            })
+            mutations.push(() => {
+              setHtmlNodeAttributes(scriptNode, {
+                "inlined-from-src": src,
+                "src": undefined,
+                "crossorigin": undefined,
+                "integrity": undefined,
+                "jsenv-inlined-by": "jsenv:inlining_into_html",
+              })
+              setHtmlNodeText(scriptNode, scriptUrlInfo.content, {
+                indentation: "auto",
+              })
+            })
+          })
+        }
+
+        visitHtmlNodes(htmlAst, {
+          link: (linkNode) => {
+            const rel = getHtmlNodeAttribute(linkNode, "rel")
+            if (rel !== "stylesheet") {
+              return
+            }
+            const href = getHtmlNodeAttribute(linkNode, "href")
+            if (!href) {
+              return
+            }
+            onStyleSheet(linkNode, { href })
+          },
+          script: (scriptNode) => {
+            const { type } = analyzeScriptNode(scriptNode)
+            const scriptNodeText = getHtmlNodeText(scriptNode)
+            if (scriptNodeText) {
+              return
+            }
+            const src = getHtmlNodeAttribute(scriptNode, "src")
+            if (!src) {
+              return
+            }
+            onScriptWithSrc(scriptNode, { type, src })
+          },
+        })
+        if (actions.length > 0) {
+          await Promise.all(actions.map((action) => action()))
+        }
+        mutations.forEach((mutation) => mutation())
+        const htmlModified = stringifyHtmlAst(htmlAst)
+        return htmlModified
+      },
+    },
+  }
+}

package/src/plugins/plugins.js

@@ -4,7 +4,8 @@ import { jsenvPluginUrlResolution } from "./url_resolution/jsenv_plugin_url_reso
 import { jsenvPluginUrlVersion } from "./url_version/jsenv_plugin_url_version.js"
 import { jsenvPluginFileUrls } from "./file_urls/jsenv_plugin_file_urls.js"
 import { jsenvPluginHttpUrls } from "./http_urls/jsenv_plugin_http_urls.js"
-import { jsenvPluginInline } from "./inline/jsenv_plugin_inline.js"
+import { jsenvPluginInlineContentAnalysis } from "./inline_content_analysis/jsenv_plugin_inline_content_analysis.js"
+import { jsenvPluginInlining } from "./inlining/jsenv_plugin_inlining.js"
 import { jsenvPluginSupervisor } from "./supervisor/jsenv_plugin_supervisor.js"
 import { jsenvPluginCommonJsGlobals } from "./commonjs_globals/jsenv_plugin_commonjs_globals.js"
 import { jsenvPluginImportMetaScenarios } from "./import_meta_scenarios/jsenv_plugin_import_meta_scenarios.js"
@@ -31,6 +32,7 @@ export const getCorePlugins = ({
   directoryReferenceAllowed,
   supervisor,
   transpilation = true,
+  inlining = true,
 
   clientAutoreload = false,
   clientFileChangeCallbackList,
@@ -66,7 +68,8 @@ export const getCorePlugins = ({
     jsenvPluginImportmap(),
     // before node esm to handle bare specifiers
     // + before node esm to handle importmap before inline content
-    jsenvPluginInline(), // before "file urls" to resolve and load inline urls
+    jsenvPluginInlineContentAnalysis(), // before "file urls" to resolve and load inline urls
+    ...(inlining ? [jsenvPluginInlining()] : []),
     ...(supervisor ? [jsenvPluginSupervisor(supervisor)] : []), // after inline as it needs inline script to be cooked
     jsenvPluginFileUrls({
       directoryReferenceAllowed,

package/src/plugins/ribbon/jsenv_plugin_ribbon.js

@@ -47,16 +47,17 @@ export const jsenvPluginRibbon = ({
           null,
           "  ",
         )
-        const scriptNode = createHtmlNode({
-          tagName: "script",
-          type: "module",
-          textContent: `
-  import { injectRibbon } from "${ribbonClientFileReference.generatedSpecifier}"
-  
-  injectRibbon(${paramsJson})
-`,
-        })
-        injectHtmlNode(htmlAst, scriptNode, "jsenv:ribbon")
+        injectHtmlNode(
+          htmlAst,
+          createHtmlNode({
+            tagName: "script",
+            type: "module",
+            textContent: `import { injectRibbon } from "${ribbonClientFileReference.generatedSpecifier}"
+
+injectRibbon(${paramsJson});`,
+          }),
+          "jsenv:ribbon",
+        )
         return stringifyHtmlAst(htmlAst)
       },
     },

package/src/plugins/server_events/jsenv_plugin_server_events_client_injection.js

@@ -6,7 +6,7 @@
 import {
   parseHtmlString,
   stringifyHtmlAst,
-  injectScriptNodeAsEarlyAsPossible,
+  injectHtmlNodeAsEarlyAsPossible,
   createHtmlNode,
 } from "@jsenv/ast"
 
@@ -30,7 +30,7 @@ export const jsenvPluginServerEventsClientInjection = () => {
             specifier: serverEventsClientFileUrl,
           },
         )
-        injectScriptNodeAsEarlyAsPossible(
+        injectHtmlNodeAsEarlyAsPossible(
           htmlAst,
           createHtmlNode({
             tagName: "script",

package/src/plugins/supervisor/html_supervisor_injection.js

@@ -52,7 +52,7 @@ import {
   getHtmlNodeAttribute,
   setHtmlNodeAttributes,
   analyzeScriptNode,
-  injectScriptNodeAsEarlyAsPossible,
+  injectHtmlNodeAsEarlyAsPossible,
   createHtmlNode,
   getHtmlNodePosition,
   getHtmlNodeText,
@@ -125,7 +125,9 @@ export const injectSupervisorIntoHTML = async (
           src: inlineScriptSrc,
         })
         mutations.push(() => {
-          setHtmlNodeText(scriptNode, remoteJsSupervised)
+          setHtmlNodeText(scriptNode, remoteJsSupervised, {
+            indentation: "auto",
+          })
           setHtmlNodeAttributes(scriptNode, {
             "jsenv-cooked-by": "jsenv:supervisor",
             "src": undefined,
@@ -144,7 +146,9 @@ export const injectSupervisorIntoHTML = async (
               inlineSrc: inlineScriptSrc,
             })
             mutations.push(() => {
-              setHtmlNodeText(scriptNode, inlineJsSupervised)
+              setHtmlNodeText(scriptNode, inlineJsSupervised, {
+                indentation: "auto",
+              })
               setHtmlNodeAttributes(scriptNode, {
                 "jsenv-cooked-by": "jsenv:supervisor",
               })
@@ -171,7 +175,7 @@ export const injectSupervisorIntoHTML = async (
         src,
       })
       mutations.push(() => {
-        setHtmlNodeText(scriptNode, remoteJsSupervised)
+        setHtmlNodeText(scriptNode, remoteJsSupervised, { indentation: "auto" })
         setHtmlNodeAttributes(scriptNode, {
           "jsenv-cooked-by": "jsenv:supervisor",
           "src": undefined,
@@ -204,6 +208,10 @@ export const injectSupervisorIntoHTML = async (
         }
         const src = getHtmlNodeAttribute(scriptNode, "src")
         if (src) {
+          const urlObject = new URL(src, "http://example.com")
+          if (urlObject.searchParams.has("inline")) {
+            return
+          }
           handleScriptWithSrc(scriptNode, { type, src })
           return
         }
@@ -219,27 +227,22 @@ export const injectSupervisorIntoHTML = async (
         rootDirectoryUrl: webServer.rootDirectoryUrl,
         scriptInfos,
       },
-      "        ",
+      "  ",
     )
-    injectScriptNodeAsEarlyAsPossible(
+    injectHtmlNodeAsEarlyAsPossible(
       htmlAst,
       createHtmlNode({
         tagName: "script",
-        textContent: `
-      window.__supervisor__.setup({
-        ${setupParamsSource}
-      })
-      `,
+        textContent: `window.__supervisor__.setup({${setupParamsSource}})`,
       }),
       "jsenv:supervisor",
     )
-    const supervisorScript = createHtmlNode({
-      tagName: "script",
-      src: supervisorScriptSrc,
-    })
-    injectScriptNodeAsEarlyAsPossible(
+    injectHtmlNodeAsEarlyAsPossible(
       htmlAst,
-      supervisorScript,
+      createHtmlNode({
+        tagName: "script",
+        src: supervisorScriptSrc,
+      }),
       "jsenv:supervisor",
     )
   }
@@ -268,14 +271,9 @@ const stringifyParams = (params, prefix = "") => {
 }
 
 const generateCodeToSuperviseScriptWithSrc = ({ type, src }) => {
+  const srcEncoded = JSON.stringify(src)
   if (type === "js_module") {
-    return `
-        window.__supervisor__.superviseScriptTypeModule(${JSON.stringify(
-          src,
-        )}, (url) => import(url));
-    `
+    return `window.__supervisor__.superviseScriptTypeModule(${srcEncoded}, (url) => import(url));`
   }
-  return `
-        window.__supervisor__.superviseScript(${JSON.stringify(src)});
-    `
+  return `window.__supervisor__.superviseScript(${srcEncoded});`
 }

package/src/plugins/transpilation/import_assertions/jsenv_plugin_import_assertions.js

@@ -36,10 +36,25 @@ export const jsenvPluginImportAssertions = ({
   }
   const turnIntoJsModuleProxy = (reference, type) => {
     reference.mutation = (magicSource) => {
-      magicSource.remove({
-        start: reference.assertNode.start,
-        end: reference.assertNode.end,
-      })
+      const { assertNode } = reference
+      if (reference.subtype === "import_dynamic") {
+        const assertPropertyNode = assertNode.properties.find(
+          (prop) => prop.key.name === "assert",
+        )
+        const assertPropertyValue = assertPropertyNode.value
+        const typePropertyNode = assertPropertyValue.properties.find(
+          (prop) => prop.key.name === "type",
+        )
+        magicSource.remove({
+          start: typePropertyNode.start,
+          end: typePropertyNode.end,
+        })
+      } else {
+        magicSource.remove({
+          start: assertNode.start,
+          end: assertNode.end,
+        })
+      }
     }
     const newUrl = injectQueryParams(reference.url, {
       [`as_${type}_module`]: "",
@@ -88,7 +103,7 @@ export const jsenvPluginImportAssertions = ({
 
 const jsenvPluginAsModules = () => {
   const inlineContentClientFileUrl = new URL(
-    "../../inline/client/inline_content.js",
+    "../../inline_content_analysis/client/inline_content.js",
     import.meta.url,
   ).href
 

package/src/plugins/transpilation/js_module_fallback/jsenv_plugin_js_module_fallback_inside_html.js

@@ -13,7 +13,7 @@ import {
   getHtmlNodeAttribute,
   setHtmlNodeAttributes,
   analyzeScriptNode,
-  injectScriptNodeAsEarlyAsPossible,
+  injectHtmlNodeAsEarlyAsPossible,
   createHtmlNode,
 } from "@jsenv/ast"
 import { injectQueryParams, urlToRelativeUrl } from "@jsenv/urls"
@@ -202,7 +202,7 @@ export const jsenvPluginJsModuleFallbackInsideHtml = ({
               await context.cook(systemJsUrlInfo, {
                 reference: systemJsReference,
               })
-              injectScriptNodeAsEarlyAsPossible(
+              injectHtmlNodeAsEarlyAsPossible(
                 htmlAst,
                 createHtmlNode({
                   tagName: "script",

package/src/plugins/transpilation/js_module_fallback/jsenv_plugin_js_module_fallback_on_workers.js

@@ -2,13 +2,13 @@
  * when {type: "module"} cannot be used on web workers:
  * - new Worker("worker.js", { type: "module" })
  *   transformed into
- *   new Worker("worker.js?as_js_classic", { type: " lassic" })
+ *   new Worker("worker.js?js_module_fallback", { type: " lassic" })
  * - navigator.serviceWorker.register("service_worker.js", { type: "module" })
  *   transformed into
- *   navigator.serviceWorker.register("service_worker.js?as_js_classic", { type: "classic" })
+ *   navigator.serviceWorker.register("service_worker.js?js_module_fallback", { type: "classic" })
  * - new SharedWorker("shared_worker.js", { type: "module" })
  *   transformed into
- *   new SharedWorker("shared_worker.js?as_js_classic", { type: "classic" })
+ *   new SharedWorker("shared_worker.js?js_module_fallback", { type: "classic" })
  */
 
 import { injectQueryParams } from "@jsenv/urls"

package/src/plugins/url_analysis/html/html_urls.js

@@ -208,7 +208,7 @@ const visitHtmlUrls = ({ url, htmlAst }) => {
       if (type === "text") {
         // ignore <script type="whatever" src="./file.js">
         // per HTML spec https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type
-        // this will be handled by jsenv_plugin_html_inline_content
+        // this will be handled by jsenv_plugin_html_inline_content_analysis
         return
       }
       visitAttributeAsUrlSpecifier({