@jsenv/core 28.0.2 → 28.1.0

package/src/omega/kitchen.js

@@ -143,12 +143,12 @@ export const createKitchen = ({
     newReference.original = reference.original || reference
     //  newReference.isEntryPoint = reference.isEntryPoint
   }
-  const resolveReference = (reference) => {
+  const resolveReference = (reference, context = kitchenContext) => {
     try {
       let resolvedUrl = pluginController.callHooksUntil(
         "resolveUrl",
         reference,
-        kitchenContext,
+        context,
       )
       if (!resolvedUrl) {
         throw new Error(`NO_RESOLVE`)
@@ -158,7 +158,7 @@ export const createKitchen = ({
       pluginController.callHooks(
         "redirectUrl",
         reference,
-        kitchenContext,
+        context,
         (returnValue) => {
           const normalizedReturnValue = normalizeUrl(returnValue)
           if (normalizedReturnValue === reference.url) {
@@ -178,7 +178,7 @@ export const createKitchen = ({
       }
 
       const urlInfo = urlGraph.reuseOrCreateUrlInfo(reference.url)
-      applyReferenceEffectsOnUrlInfo(reference, urlInfo, kitchenContext)
+      applyReferenceEffectsOnUrlInfo(reference, urlInfo, context)
 
       // This hook must touch reference.generatedUrl, NOT reference.url
       // And this is because this hook inject query params used to:
@@ -189,7 +189,7 @@ export const createKitchen = ({
       pluginController.callHooks(
         "transformUrlSearchParams",
         reference,
-        kitchenContext,
+        context,
         (returnValue) => {
           Object.keys(returnValue).forEach((key) => {
             referenceUrlObject.searchParams.set(key, returnValue[key])
@@ -200,7 +200,7 @@ export const createKitchen = ({
       const returnValue = pluginController.callHooksUntil(
         "formatUrl",
         reference,
-        kitchenContext,
+        context,
       )
       reference.generatedSpecifier = returnValue || reference.generatedUrl
       reference.generatedSpecifier = urlSpecifierEncoding.encode(reference)
@@ -386,7 +386,7 @@ export const createKitchen = ({
           ...props,
         })
         references.push(reference)
-        const referencedUrlInfo = resolveReference(reference)
+        const referencedUrlInfo = resolveReference(reference, context)
         return [reference, referencedUrlInfo]
       }
       const referenceUtils = {
@@ -460,7 +460,7 @@ export const createKitchen = ({
           })
           references[index] = nextReference
           mutateReference(previousReference, nextReference)
-          const newUrlInfo = resolveReference(nextReference)
+          const newUrlInfo = resolveReference(nextReference, context)
           const currentUrlInfo = context.urlGraph.getUrlInfo(
             currentReference.url,
           )
@@ -677,7 +677,10 @@ export const createKitchen = ({
     await context.fetchUrlContent(originalUrlInfo, {
       reference: originalReference,
     })
-    if (originalUrlInfo.dependents.size === 0) {
+    if (
+      originalUrlInfo.dependents.size === 0
+      // && context.scenarios.build
+    ) {
       context.urlGraph.deleteUrlInfo(originalUrlInfo.url)
     }
     return originalUrlInfo

package/src/omega/omega_server.js

@@ -30,7 +30,7 @@ export const startOmegaServer = async ({
 
   plugins,
   urlAnalysis,
-  htmlSupervisor,
+  supervisor,
   nodeEsmResolution,
   fileSystemMagicResolution,
   transpilation,
@@ -92,7 +92,7 @@ export const startOmegaServer = async ({
 
           plugins,
           urlAnalysis,
-          htmlSupervisor,
+          supervisor,
           nodeEsmResolution,
           fileSystemMagicResolution,
           transpilation,

package/src/omega/server/file_service.js

@@ -25,7 +25,7 @@ export const createFileService = ({
 
   plugins,
   urlAnalysis,
-  htmlSupervisor,
+  supervisor,
   nodeEsmResolution,
   fileSystemMagicResolution,
   transpilation,
@@ -118,7 +118,7 @@ export const createFileService = ({
           runtimeCompat,
 
           urlAnalysis,
-          htmlSupervisor,
+          supervisor,
           nodeEsmResolution,
           fileSystemMagicResolution,
           transpilation,

package/src/omega/url_graph/url_info_transformations.js

@@ -81,6 +81,9 @@ export const createUrlInfoTransformer = ({
     if (!SOURCEMAP.enabledOnContentType(urlInfo.contentType)) {
       return
     }
+    if (urlInfo.generatedUrl.startsWith("data:")) {
+      return
+    }
     // sourcemap is a special kind of reference:
     // It's a reference to a content generated dynamically the content itself.
     // For this reason sourcemap are not added to urlInfo.references
@@ -173,7 +176,11 @@ export const createUrlInfoTransformer = ({
     if (transformations) {
       await applyIntermediateTransformations(urlInfo, transformations)
     }
-    if (sourcemapsEnabled && urlInfo.sourcemap) {
+    if (
+      sourcemapsEnabled &&
+      urlInfo.sourcemap &&
+      !urlInfo.generatedUrl.startsWith("data:")
+    ) {
       // during build this function can be called after the file is cooked
       // - to update content and sourcemap after "optimize" hook
       // - to inject versioning into the entry point content

package/src/plugins/autoreload/client/reload.js

@@ -32,7 +32,20 @@ export const getDOMNodesUsingUrl = (urlToReload) => {
     nodes.push({
       node,
       reload: () => {
-        node[attributeName] = injectQuery(attribute, { hmr: Date.now() })
+        if (node.nodeName === "SCRIPT") {
+          const copy = document.createElement("script")
+          Array.from(node.attributes).forEach((attribute) => {
+            copy.setAttribute(attribute.nodeName, attribute.nodeValue)
+          })
+          copy.src = injectQuery(node.src, { hmr: Date.now() })
+          if (node.parentNode) {
+            node.parentNode.replaceChild(copy, node)
+          } else {
+            document.body.appendChild(copy)
+          }
+        } else {
+          node[attributeName] = injectQuery(attribute, { hmr: Date.now() })
+        }
       },
     })
   }
@@ -46,17 +59,17 @@ export const getDOMNodesUsingUrl = (urlToReload) => {
   })
   Array.from(document.querySelectorAll("script")).forEach((script) => {
     visitNodeAttributeAsUrl(script, "src")
-    const generatedFromSrc = script.getAttribute("generated-from-src")
-    if (generatedFromSrc) {
-      const generatedFromUrl = new URL(generatedFromSrc, window.location.origin)
+    const inlinedFromSrc = script.getAttribute("inlined-from-src")
+    if (inlinedFromSrc) {
+      const inlinedFromUrl = new URL(inlinedFromSrc, window.location.origin)
         .href
-      if (shouldReloadUrl(generatedFromUrl)) {
+      if (shouldReloadUrl(inlinedFromUrl)) {
         nodes.push({
           node: script,
           reload: () =>
-            window.__html_supervisor__.reloadSupervisedScript({
+            window.__supervisor__.reloadSupervisedScript({
               type: script.type,
-              src: generatedFromSrc,
+              src: inlinedFromSrc,
             }),
         })
       }

package/src/plugins/autoreload/jsenv_plugin_autoreload_client.js

@@ -25,11 +25,11 @@ export const jsenvPluginAutoreloadClient = () => {
         injectScriptNodeAsEarlyAsPossible(
           htmlAst,
           createHtmlNode({
-            "tagName": "script",
-            "type": "module",
-            "src": autoreloadClientReference.generatedSpecifier,
-            "injected-by": "jsenv:autoreload_client",
+            tagName: "script",
+            type: "module",
+            src: autoreloadClientReference.generatedSpecifier,
           }),
+          "jsenv:autoreload_client",
         )
         const htmlModified = stringifyHtmlAst(htmlAst)
         return {

package/src/plugins/import_meta_hot/html_hot_dependencies.js

@@ -48,7 +48,7 @@ export const collectHotDataFromHtmlAst = (htmlAst) => {
       })
       visitUrlSpecifierAttribute({
         node,
-        attributeName: "generated-from-href",
+        attributeName: "inlined-from-href",
         hotAccepted,
       })
     }
@@ -60,7 +60,7 @@ export const collectHotDataFromHtmlAst = (htmlAst) => {
       })
       visitUrlSpecifierAttribute({
         node,
-        attributeName: "generated-from-src",
+        attributeName: "inlined-from-src",
         hotAccepted,
       })
     }

package/src/plugins/importmap/jsenv_plugin_importmap.js

@@ -134,7 +134,8 @@ export const jsenvPluginImportmap = () => {
           })
           setHtmlNodeText(importmap, inlineImportmapUrlInfo.content)
           setHtmlNodeAttributes(importmap, {
-            "generated-by": "jsenv:importmap",
+            "jsenv-plugin-owner": "jsenv:importmap",
+            "jsenv-plugin-action": "content_cooked",
           })
           onHtmlImportmapParsed(
             JSON.parse(inlineImportmapUrlInfo.content),
@@ -162,8 +163,9 @@ export const jsenvPluginImportmap = () => {
           setHtmlNodeText(importmap, importmapUrlInfo.content)
           setHtmlNodeAttributes(importmap, {
             "src": undefined,
-            "generated-by": "jsenv:importmap",
-            "generated-from-src": src,
+            "jsenv-plugin-owner": "jsenv:importmap",
+            "jsenv-plugin-action": "inlined",
+            "inlined-from-src": src,
           })
 
           const { line, column, lineEnd, columnEnd, isOriginal } =

package/src/plugins/inject_globals/inject_globals.js

@@ -30,10 +30,10 @@ const globalInjectorOnHtml = async (urlInfo, globals) => {
   injectScriptNodeAsEarlyAsPossible(
     htmlAst,
     createHtmlNode({
-      "tagName": "script",
-      "textContent": clientCode,
-      "injected-by": "jsenv:inject_globals",
+      tagName: "script",
+      textContent: clientCode,
     }),
+    "jsenv:inject_globals",
   )
   return stringifyHtmlAst(htmlAst)
 }

package/src/plugins/inline/jsenv_plugin_data_urls.js

@@ -40,7 +40,7 @@ export const jsenvPluginDataUrls = () => {
           return reference.generatedUrl
         }
         const specifier = DATA_URL.stringify({
-          contentType: urlInfo.headers["content-type"],
+          contentType: urlInfo.contentType,
           base64Flag: urlInfo.data.base64Flag,
           data: urlInfo.data.base64Flag
             ? dataToBase64(urlInfo.content)

package/src/plugins/inline/jsenv_plugin_html_inline_content.js

@@ -59,7 +59,8 @@ export const jsenvPluginHtmlInlineContent = ({ analyzeConvertedScripts }) => {
               })
               setHtmlNodeText(styleNode, inlineStyleUrlInfo.content)
               setHtmlNodeAttributes(styleNode, {
-                "generated-by": "jsenv:html_inline_content",
+                "jsenv-plugin-owner": "jsenv:html_inline_content",
+                "jsenv-plugin-action": "content_cooked",
               })
             })
           },
@@ -71,14 +72,17 @@ export const jsenvPluginHtmlInlineContent = ({ analyzeConvertedScripts }) => {
             // 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(scriptNode, "generated-by")
+            const jsenvPluginOwner = getHtmlNodeAttribute(
+              scriptNode,
+              "jsenv-plugin-owner",
+            )
             if (
-              generatedBy === "jsenv:as_js_classic_html" &&
+              jsenvPluginOwner === "jsenv:as_js_classic_html" &&
               !analyzeConvertedScripts
             ) {
               return
             }
-            if (generatedBy === "jsenv:html_supervisor") {
+            if (jsenvPluginOwner === "jsenv:supervisor") {
               return
             }
             actions.push(async () => {
@@ -117,7 +121,8 @@ export const jsenvPluginHtmlInlineContent = ({ analyzeConvertedScripts }) => {
               })
               setHtmlNodeText(scriptNode, inlineScriptUrlInfo.content)
               setHtmlNodeAttributes(scriptNode, {
-                "generated-by": "jsenv:html_inline_content",
+                "jsenv-plugin-owner": "jsenv:html_inline_content",
+                "jsenv-plugin-action": "content_cooked",
                 ...(extension
                   ? { type: type === "js_module" ? "module" : undefined }
                   : {}),

package/src/plugins/plugins.js

@@ -7,7 +7,7 @@ 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 { jsenvPluginHtmlSupervisor } from "./html_supervisor/jsenv_plugin_html_supervisor.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"
 import { jsenvPluginTranspilation } from "./transpilation/jsenv_plugin_transpilation.js"
@@ -27,7 +27,7 @@ export const getCorePlugins = ({
   runtimeCompat,
 
   urlAnalysis = {},
-  htmlSupervisor,
+  supervisor,
   nodeEsmResolution = true,
   fileSystemMagicResolution,
   directoryReferenceAllowed,
@@ -40,8 +40,8 @@ export const getCorePlugins = ({
   clientFilesPruneCallbackList,
   explorer,
 } = {}) => {
-  if (htmlSupervisor === true) {
-    htmlSupervisor = {}
+  if (supervisor === true) {
+    supervisor = {}
   }
   if (nodeEsmResolution === true) {
     nodeEsmResolution = {}
@@ -56,7 +56,7 @@ export const getCorePlugins = ({
   return [
     jsenvPluginUrlAnalysis({ rootDirectoryUrl, ...urlAnalysis }),
     jsenvPluginTranspilation(transpilation),
-    ...(htmlSupervisor ? [jsenvPluginHtmlSupervisor(htmlSupervisor)] : []), // before inline as it turns inline <script> into <script src>
+    ...(supervisor ? [jsenvPluginSupervisor(supervisor)] : []), // before inline as it turns inline <script> into <script src>
     jsenvPluginImportmap(),
     // before node esm to handle bare specifiers
     // + before node esm to handle importmap before inline content

package/src/plugins/server_events/jsenv_plugin_server_events_client_injection.js

@@ -32,11 +32,11 @@ export const jsenvPluginServerEventsClientInjection = () => {
         injectScriptNodeAsEarlyAsPossible(
           htmlAst,
           createHtmlNode({
-            "tagName": "script",
-            "type": "module",
-            "src": serverEventsClientFileReference.generatedSpecifier,
-            "injected-by": "jsenv:server_events",
+            tagName: "script",
+            type: "module",
+            src: serverEventsClientFileReference.generatedSpecifier,
           }),
+          "jsenv:server_events",
         )
         const htmlModified = stringifyHtmlAst(htmlAst)
         return {

package/src/plugins/supervisor/client/script_type_module_supervisor.js

@@ -0,0 +1,108 @@
+let previousExecutionPromise
+
+// https://twitter.com/damienmaillard/status/1554752482273787906
+const isWebkitOrSafari =
+  typeof window.webkitConvertPointFromNodeToPage === "function"
+
+export const superviseScriptTypeModule = async ({ src, async }) => {
+  const execute = isWebkitOrSafari
+    ? createExecuteWithDynamicImport({ src })
+    : createExecuteWithScript({ src })
+  const startExecution = () => {
+    const execution = window.__supervisor__.createExecution({
+      src,
+      type: "js_module",
+      execute,
+    })
+    return execution.start()
+  }
+  if (async) {
+    startExecution()
+    return
+  }
+  // there is guaranteed execution order for non async script type="module"
+  // see https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6#typemodule-vs-non-module-typetextjavascript-vs-script-nomodule
+  if (previousExecutionPromise) {
+    await previousExecutionPromise
+    previousExecutionPromise = null
+  }
+  previousExecutionPromise = startExecution()
+}
+
+const createExecuteWithScript = ({ src }) => {
+  const currentScript = document.querySelector(
+    `script[type="module"][inlined-from-src="${src}"]`,
+  )
+  const parentNode = currentScript.parentNode
+  let nodeToReplace
+  let currentScriptClone
+
+  return async ({ isReload }) => {
+    const urlObject = new URL(src, window.location)
+    const loadPromise = new Promise((resolve, reject) => {
+      currentScriptClone = document.createElement("script")
+      Array.from(currentScript.attributes).forEach((attribute) => {
+        currentScriptClone.setAttribute(attribute.nodeName, attribute.nodeValue)
+      })
+      if (isReload) {
+        urlObject.searchParams.set("hmr", Date.now())
+        nodeToReplace = currentScriptClone
+        currentScriptClone.src = urlObject.href
+      } else {
+        currentScriptClone.removeAttribute("jsenv-plugin-owner")
+        currentScriptClone.removeAttribute("jsenv-plugin-action")
+        currentScriptClone.removeAttribute("inlined-from-src")
+        currentScriptClone.removeAttribute("original-position")
+        currentScriptClone.removeAttribute("original-src-position")
+        nodeToReplace = currentScript
+        currentScriptClone.src = src
+      }
+      currentScriptClone.addEventListener("error", reject)
+      currentScriptClone.addEventListener("load", resolve)
+      parentNode.replaceChild(currentScriptClone, nodeToReplace)
+    })
+    try {
+      await loadPromise
+    } catch (e) {
+      // eslint-disable-next-line no-throw-literal
+      throw {
+        message: `Failed to fetch module: ${urlObject.href}`,
+        reportedBy: "script_error_event",
+        url: urlObject.href,
+        // window.error won't be dispatched for this error
+        needsReport: true,
+      }
+    }
+    // do not resolve right away, wait for top level execution
+    try {
+      const namespace = await import(urlObject.href)
+      return namespace
+    } catch (e) {
+      e.reportedBy = "dynamic_import"
+      throw e
+    }
+  }
+}
+
+const createExecuteWithDynamicImport = ({ src }) => {
+  return async ({ isReload }) => {
+    const urlObject = new URL(src, window.location)
+    if (isReload) {
+      urlObject.searchParams.set("hmr", Date.now())
+    }
+    try {
+      const namespace = await import(urlObject.href)
+      return namespace
+    } catch (e) {
+      e.reportedBy = "dynamic_import"
+      // dynamic import would hide the error to the browser
+      // so it must be re-reported using window.reportError
+      if (typeof window.reportError === "function") {
+        window.reportError(e)
+      } else {
+        console.error(e)
+      }
+      throw e
+    }
+  }
+}