@jsenv/core 24.0.2 → 24.2.2

package/src/internal/compiling/jsenvCompilerForHtml.js

@@ -2,11 +2,12 @@ import { resolveUrl, urlToRelativeUrl } from "@jsenv/filesystem"
 import { moveImportMap, composeTwoImportMaps } from "@jsenv/importmap"
 import { createDetailedMessage } from "@jsenv/logger"
 
+import { jsenvBrowserSystemFileInfo } from "@jsenv/core/src/internal/jsenvInternalFiles.js"
+import { eventSourceClientFileInfo } from "@jsenv/core/src/internal/dev_server/event_source_client/event_source_client_file_info.js"
 import {
-  jsenvBrowserSystemFileInfo,
-  jsenvToolbarHtmlFileInfo,
-  jsenvToolbarInjectorFileInfo,
-} from "@jsenv/core/src/internal/jsenvInternalFiles.js"
+  toolbarInjectorFileInfo,
+  toolbarHtmlFileInfo,
+} from "@jsenv/core/src/internal/dev_server/toolbar/toolbar_file_info.js"
 import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
 import { getDefaultImportMap } from "@jsenv/core/src/internal/import-resolution/importmap-default.js"
 import {
@@ -49,14 +50,20 @@ export const compileHtml = async ({
   sourcemapMethod,
 
   jsenvScriptInjection = true,
+  jsenvEventSourceClientInjection,
   jsenvToolbarInjection,
+  onHtmlImportmapInfo,
 }) => {
   const jsenvBrowserBuildUrlRelativeToProject = urlToRelativeUrl(
     jsenvBrowserSystemFileInfo.jsenvBuildUrl,
     projectDirectoryUrl,
   )
-  const jsenvToolbarInjectorBuildRelativeUrlForProject = urlToRelativeUrl(
-    jsenvToolbarInjectorFileInfo.jsenvBuildUrl,
+  const eventSourceClientBuildRelativeUrlForProject = urlToRelativeUrl(
+    eventSourceClientFileInfo.buildUrl,
+    projectDirectoryUrl,
+  )
+  const toolbarInjectorBuildRelativeUrlForProject = urlToRelativeUrl(
+    toolbarInjectorFileInfo.buildUrl,
     projectDirectoryUrl,
   )
 
@@ -67,74 +74,158 @@ export const compileHtml = async ({
     await mutateRessourceHints(htmlAst)
   }
 
+  const urlNoSearch = urlWithoutSearch(url)
+
   manipulateHtmlAst(htmlAst, {
     scriptInjections: [
-      ...(url !== jsenvToolbarHtmlFileInfo.url && jsenvScriptInjection
+      ...(urlNoSearch !== toolbarHtmlFileInfo.sourceUrl && jsenvScriptInjection
         ? [
             {
               src: `/${jsenvBrowserBuildUrlRelativeToProject}`,
             },
           ]
         : []),
-      ...(url !== jsenvToolbarHtmlFileInfo.url && jsenvToolbarInjection
+      ...(urlNoSearch !== toolbarHtmlFileInfo.sourceUrl &&
+      jsenvEventSourceClientInjection
         ? [
             {
-              src: `/${jsenvToolbarInjectorBuildRelativeUrlForProject}`,
+              src: `/${eventSourceClientBuildRelativeUrlForProject}`,
+            },
+          ]
+        : []),
+      ...(urlNoSearch !== toolbarHtmlFileInfo.sourceUrl && jsenvToolbarInjection
+        ? [
+            {
+              src: `/${toolbarInjectorBuildRelativeUrlForProject}`,
+              defer: "",
+              async: "",
             },
           ]
         : []),
     ],
   })
 
+  let sources = []
+  let sourcesContent = []
   const { scripts } = parseHtmlAstRessources(htmlAst)
-  const htmlDependencies = collectHtmlDependenciesFromAst(htmlAst)
-
-  let hasImportmap = false
-  const inlineScriptsContentMap = {}
-  const importmapsToInline = []
+  let importmapInfo = null
   scripts.forEach((script) => {
     const typeAttribute = getHtmlNodeAttributeByName(script, "type")
-    const srcAttribute = getHtmlNodeAttributeByName(script, "src")
-
-    // importmap
     if (typeAttribute && typeAttribute.value === "importmap") {
-      hasImportmap = true
-
-      if (srcAttribute) {
-        if (moduleOutFormat === "systemjs") {
-          typeAttribute.value = "jsenv-importmap"
-          return // no need to inline
+      if (importmapInfo) {
+        console.error("HTML file must contain max 1 importmap")
+      } else {
+        const srcAttribute = getHtmlNodeAttributeByName(script, "src")
+        const src = srcAttribute ? srcAttribute.value : ""
+        if (src) {
+          importmapInfo = {
+            script,
+            url: resolveUrl(src, url),
+            loadAsText: async () => {
+              const importMapResponse = await fetchUrl(importmapInfo.url)
+              if (importMapResponse.status !== 200) {
+                logger.warn(
+                  createDetailedMessage(
+                    importMapResponse.status === 404
+                      ? `importmap script file cannot be found.`
+                      : `importmap script file unexpected response status (${importMapResponse.status}).`,
+                    {
+                      "importmap url": importmapInfo.url,
+                      "html url": url,
+                    },
+                  ),
+                )
+                return "{}"
+              }
+              const importmapAsText = await importMapResponse.text()
+              sources.push(importmapInfo.url)
+              sourcesContent.push(importmapAsText)
+
+              const importMapMoved = moveImportMap(
+                JSON.parse(importmapAsText),
+                importmapInfo.url,
+                url,
+              )
+              const compiledImportmapAsText = JSON.stringify(
+                importMapMoved,
+                null,
+                "  ",
+              )
+              return compiledImportmapAsText
+            },
+          }
+        } else {
+          importmapInfo = {
+            script,
+            url: compiledUrl,
+            loadAsText: () => getHtmlNodeTextNode(script).value,
+          }
         }
-
-        // we force inline because browsers supporting importmap supports only when they are inline
-        importmapsToInline.push({
-          script,
-          src: srcAttribute.value,
-        })
-        return
-      }
-
-      const defaultImportMap = getDefaultImportMap({
-        importMapFileUrl: compiledUrl,
-        projectDirectoryUrl,
-        compileDirectoryRelativeUrl: `${outDirectoryRelativeUrl}${compileId}/`,
-      })
-      const inlineImportMap = JSON.parse(getHtmlNodeTextNode(script).value)
-      const mappings = composeTwoImportMaps(defaultImportMap, inlineImportMap)
-      if (moduleOutFormat === "systemjs") {
-        typeAttribute.value = "jsenv-importmap"
       }
-      setHtmlNodeText(script, JSON.stringify(mappings, null, "  "))
-      return
     }
+  })
+  if (importmapInfo) {
+    const htmlImportMap = JSON.parse(await importmapInfo.loadAsText())
+    const importMapFromJsenv = getDefaultImportMap({
+      importMapFileUrl: compiledUrl,
+      projectDirectoryUrl,
+      compileDirectoryRelativeUrl: `${outDirectoryRelativeUrl}${compileId}/`,
+    })
+    const mappings = composeTwoImportMaps(importMapFromJsenv, htmlImportMap)
+    const importmapAsText = JSON.stringify(mappings, null, "  ")
+    replaceHtmlNode(
+      importmapInfo.script,
+      `<script type="${
+        moduleOutFormat === "systemjs" ? "jsenv-importmap" : "importmap"
+      }">${importmapAsText}</script>`,
+      {
+        attributesToIgnore: ["src"],
+      },
+    )
+    importmapInfo.inlinedFrom = importmapInfo.url
+    importmapInfo.url = compiledUrl
+    importmapInfo.text = importmapAsText
+  } else {
+    // inject a default importmap
+    const defaultImportMap = getDefaultImportMap({
+      importMapFileUrl: compiledUrl,
+      projectDirectoryUrl,
+      compileDirectoryRelativeUrl: `${outDirectoryRelativeUrl}${compileId}/`,
+    })
+    const importmapAsText = JSON.stringify(defaultImportMap, null, "  ")
+    manipulateHtmlAst(htmlAst, {
+      scriptInjections: [
+        {
+          type:
+            moduleOutFormat === "systemjs" ? "jsenv-importmap" : "importmap",
+          // in case there is no importmap, force the presence
+          // so that '@jsenv/core/' are still remapped
+          text: importmapAsText,
+        },
+      ],
+    })
+    importmapInfo = {
+      url: compiledUrl,
+      text: importmapAsText,
+    }
+  }
+  onHtmlImportmapInfo({
+    htmlUrl: url,
+    importmapInfo,
+  })
 
+  const htmlDependencies = collectHtmlDependenciesFromAst(htmlAst)
+  const inlineScriptsContentMap = {}
+  scripts.forEach((script) => {
+    const typeAttribute = getHtmlNodeAttributeByName(script, "type")
+    const srcAttribute = getHtmlNodeAttributeByName(script, "src")
+    const src = srcAttribute ? srcAttribute.value : ""
     // remote module script
-    if (typeAttribute && typeAttribute.value === "module" && srcAttribute) {
+    if (typeAttribute && typeAttribute.value === "module" && src) {
       if (moduleOutFormat === "systemjs") {
         removeHtmlNodeAttribute(script, typeAttribute)
       }
       removeHtmlNodeAttribute(script, srcAttribute)
-      const src = srcAttribute.value
       const jsenvMethod =
         moduleOutFormat === "systemjs"
           ? "executeFileUsingSystemJs"
@@ -174,66 +265,6 @@ export const compileHtml = async ({
       return
     }
   })
-
-  if (hasImportmap === false) {
-    const defaultImportMap = getDefaultImportMap({
-      importMapFileUrl: compiledUrl,
-      projectDirectoryUrl,
-      compileDirectoryRelativeUrl: `${outDirectoryRelativeUrl}${compileId}/`,
-    })
-    manipulateHtmlAst(htmlAst, {
-      scriptInjections: [
-        {
-          type:
-            moduleOutFormat === "systemjs" ? "jsenv-importmap" : "importmap",
-          // in case there is no importmap, force the presence
-          // so that '@jsenv/core/' are still remapped
-          text: JSON.stringify(defaultImportMap, null, "  "),
-        },
-      ],
-    })
-  }
-
-  await Promise.all(
-    importmapsToInline.map(async ({ script, src }) => {
-      const importMapUrl = resolveUrl(src, url)
-      const importMapResponse = await fetchUrl(importMapUrl)
-      if (importMapResponse.status !== 200) {
-        logger.warn(
-          createDetailedMessage(
-            importMapResponse.status === 404
-              ? `Cannot inline importmap script because file cannot be found.`
-              : `Cannot inline importmap script due to unexpected response status (${importMapResponse.status}).`,
-            {
-              "importmap script src": src,
-              "importmap url": importMapUrl,
-              "html url": url,
-            },
-          ),
-        )
-        return
-      }
-
-      const importMapContent = await importMapResponse.json()
-      const importMapInlined = moveImportMap(
-        importMapContent,
-        importMapUrl,
-        url,
-      )
-      replaceHtmlNode(
-        script,
-        `<script type="importmap">${JSON.stringify(
-          importMapInlined,
-          null,
-          "  ",
-        )}</script>`,
-        {
-          attributesToIgnore: ["src"],
-        },
-      )
-    }),
-  )
-
   const htmlAfterTransformation = stringifyHtmlAst(htmlAst)
 
   let assets = []
@@ -303,12 +334,14 @@ export const compileHtml = async ({
       }
     }),
   )
+  sources.push(url)
+  sourcesContent.push(code)
 
   return {
     contentType: "text/html",
     compiledSource: htmlAfterTransformation,
-    sources: [url],
-    sourcesContent: [code],
+    sources,
+    sourcesContent,
     assets,
     assetsContent,
     dependencies: htmlDependencies.map(({ specifier }) => {
@@ -372,3 +405,9 @@ const mutateRessourceHints = async (htmlAst) => {
   )
   mutations.forEach((mutation) => mutation())
 }
+
+const urlWithoutSearch = (url) => {
+  const urlObject = new URL(url)
+  urlObject.search = ""
+  return urlObject.href
+}

package/src/internal/compiling/startCompileServer.js

@@ -104,8 +104,9 @@ export const startCompileServer = async ({
   plugins,
   livereloadSSE = false,
   transformHtmlSourceFiles = true,
-  jsenvToolbarInjection = false,
   jsenvScriptInjection = true,
+  jsenvEventSourceClientInjection = false,
+  jsenvToolbarInjection = false,
   inlineImportMapIntoHTML = true,
 }) => {
   assertArguments({
@@ -312,6 +313,7 @@ export const startCompileServer = async ({
       customCompilers,
       moduleOutFormat,
       importMetaFormat,
+      jsenvEventSourceClientInjection,
       jsenvToolbarInjection,
 
       projectFileRequestedCallback,
@@ -327,8 +329,10 @@ export const startCompileServer = async ({
             createTransformHtmlSourceFileService({
               logger,
               projectDirectoryUrl,
+              projectFileRequestedCallback,
               inlineImportMapIntoHTML,
               jsenvScriptInjection,
+              jsenvEventSourceClientInjection,
               jsenvToolbarInjection,
             }),
         }
@@ -583,6 +587,9 @@ const setupServerSentEventsForLivereload = ({
   const projectFileAdded = createCallbackList()
 
   const projectFileRequestedCallback = (relativeUrl, request) => {
+    if (relativeUrl[0] === "/") {
+      relativeUrl = relativeUrl.slice(1)
+    }
     const url = `${projectDirectoryUrl}${relativeUrl}`
 
     if (
@@ -669,6 +676,7 @@ const setupServerSentEventsForLivereload = ({
       return
     }
 
+    livereloadLogger.debug(`${rootRelativeUrl} requested -> start tracking it`)
     // when a file is requested, always rebuild its dependency in case it has changed
     // since the last time it was requested
     startTrackingRoot(rootRelativeUrl)
@@ -699,6 +707,7 @@ const setupServerSentEventsForLivereload = ({
     const removeRootRemovedCallback = projectFileRemoved.add((relativeUrl) => {
       if (relativeUrl === rootRelativeUrl) {
         stopTrackingRoot(rootRelativeUrl)
+        livereloadLogger.debug(`${rootRelativeUrl} removed -> stop tracking it`)
       }
     })
     addStopTrackingCalback(rootRelativeUrl, removeRootRemovedCallback)

package/src/internal/dev_server/event_source_client/event_source_client.js

@@ -0,0 +1,63 @@
+/* eslint-env browser */
+
+import { createEventSourceConnection } from "./event_source_connection.js"
+import {
+  getFileChanges,
+  addFileChange,
+  setFileChangeCallback,
+  reloadIfNeeded,
+} from "./file_changes.js"
+import {
+  isLivereloadEnabled,
+  setLivereloadPreference,
+} from "./livereload_preference.js"
+
+const eventsourceConnection = createEventSourceConnection(
+  document.location.href,
+  {
+    "file-added": ({ data }) => {
+      addFileChange({
+        file: data,
+        eventType: "added",
+      })
+    },
+    "file-modified": ({ data }) => {
+      addFileChange({
+        file: data,
+        eventType: "modified",
+      })
+    },
+    "file-removed": ({ data }) => {
+      addFileChange({
+        file: data,
+        eventType: "removed",
+      })
+    },
+  },
+  {
+    retryMaxAttempt: Infinity,
+    retryAllocatedMs: 20 * 1000,
+  },
+)
+
+const {
+  connect,
+  disconnect,
+  setConnectionStatusChangeCallback,
+  getConnectionStatus,
+} = eventsourceConnection
+
+connect()
+
+window.__jsenv_event_source_client__ = {
+  connect,
+  disconnect,
+  getConnectionStatus,
+  setConnectionStatusChangeCallback,
+  getFileChanges,
+  addFileChange,
+  setFileChangeCallback,
+  reloadIfNeeded,
+  isLivereloadEnabled,
+  setLivereloadPreference,
+}

package/src/internal/dev_server/event_source_client/event_source_client_file_info.js

@@ -0,0 +1,17 @@
+import { jsenvCoreDirectoryUrl } from "@jsenv/core/src/internal/jsenvCoreDirectoryUrl.js"
+
+const sourceRelativeUrl =
+  "./src/internal/dev_server/event_source_client/event_source_client.js"
+const buildRelativeUrl = "./jsenv_event_source_client.js"
+const sourceUrl = new URL(sourceRelativeUrl, jsenvCoreDirectoryUrl).href
+const buildUrl = new URL(
+  "./dist/jsenv_event_source_client.js",
+  jsenvCoreDirectoryUrl,
+)
+
+export const eventSourceClientFileInfo = {
+  sourceRelativeUrl,
+  buildRelativeUrl,
+  sourceUrl,
+  buildUrl,
+}

package/src/internal/{toolbar/eventsource/connectEventSource.js → dev_server/event_source_client/event_source_connection.js}

@@ -1,15 +1,9 @@
-export const connectEventSource = (
+/* eslint-env browser */
+
+export const createEventSourceConnection = (
   eventSourceUrl,
   events = {},
-  {
-    connecting = () => {},
-    connected = () => {},
-    cancelled = () => {},
-    failed = () => {},
-    retryMaxAttempt = Infinity,
-    retryAllocatedMs = Infinity,
-    lastEventId,
-  } = {},
+  { retryMaxAttempt = Infinity, retryAllocatedMs = Infinity, lastEventId } = {},
 ) => {
   const { EventSource } = window
   if (typeof EventSource !== "function") {
@@ -18,82 +12,40 @@ export const connectEventSource = (
 
   const eventSourceOrigin = new URL(eventSourceUrl).origin
 
-  // will be either abort, disconnect or a third function calling cancelled
-  // depending on connectionStatus
-  let cancelCurrentConnection = () => {}
+  let connectionStatus = "default"
+  let connectionStatusChangeCallback = () => {}
+  let disconnect = () => {}
 
-  const reconnect = () => {
-    attemptConnection(
-      lastEventId
-        ? addLastEventIdIntoUrlSearchParams(eventSourceUrl, lastEventId)
-        : eventSourceUrl,
-    )
+  const goToStatus = (newStatus) => {
+    connectionStatus = newStatus
+    connectionStatusChangeCallback()
   }
 
   const attemptConnection = (url) => {
     const eventSource = new EventSource(url, {
       withCredentials: true,
     })
-
-    let connectionStatus = "connecting"
-    const abort = () => {
-      if (connectionStatus !== "connecting") {
-        console.warn(`abort ignored because connection is ${connectionStatus}`)
+    disconnect = () => {
+      if (
+        connectionStatus !== "connecting" &&
+        connectionStatus !== "connected"
+      ) {
+        console.warn(
+          `disconnect() ignored because connection is ${connectionStatus}`,
+        )
         return
       }
-      connectionStatus = "aborted"
       eventSource.onerror = undefined
       eventSource.close()
-      cancelled({ connect: reconnect })
-    }
-    cancelCurrentConnection = abort
-    connecting({ cancel: abort })
-
-    eventSource.onopen = () => {
-      connectionStatus = "connected"
-      const disconnect = () => {
-        if (connectionStatus !== "connected") {
-          console.warn(
-            `disconnect ignored because connection is ${connectionStatus}`,
-          )
-          return
-        }
-        connectionStatus = "disconnected"
-        eventSource.onerror = undefined
-        eventSource.close()
-        cancelled({ connect: reconnect })
-      }
-      cancelCurrentConnection = disconnect
-      connected({ cancel: disconnect })
+      goToStatus("disconnected")
     }
-
     let retryCount = 0
     let firstRetryMs = Date.now()
-
     eventSource.onerror = (errorEvent) => {
-      const considerFailed = () => {
-        connectionStatus = "disconnected"
-        failed({
-          cancel: () => {
-            if (connectionStatus !== "failed") {
-              console.warn(
-                `disable ignored because connection is ${connectionStatus}`,
-              )
-              return
-            }
-            connectionStatus = "disabled"
-            cancelled({ connect: reconnect })
-          },
-          connect: reconnect,
-        })
-      }
-
       if (errorEvent.target.readyState === EventSource.CONNECTING) {
         if (retryCount > retryMaxAttempt) {
           console.info(`could not connect after ${retryMaxAttempt} attempt`)
-          eventSource.onerror = undefined
-          eventSource.close()
-          considerFailed()
+          disconnect()
           return
         }
 
@@ -105,24 +57,24 @@ export const connectEventSource = (
             console.info(
               `could not connect in less than ${retryAllocatedMs} ms`,
             )
-            eventSource.onerror = undefined
-            eventSource.close()
-            considerFailed()
+            disconnect()
             return
           }
         }
 
-        connectionStatus = "connecting"
         retryCount++
-        connecting({ cancel: abort })
+        goToStatus("connecting")
         return
       }
 
       if (errorEvent.target.readyState === EventSource.CLOSED) {
-        considerFailed()
+        disconnect()
         return
       }
     }
+    eventSource.onopen = () => {
+      goToStatus("connected")
+    }
     Object.keys(events).forEach((eventName) => {
       eventSource.addEventListener(eventName, (e) => {
         if (e.origin === eventSourceOrigin) {
@@ -140,21 +92,38 @@ export const connectEventSource = (
         }
       })
     }
+    goToStatus("connecting")
   }
 
-  attemptConnection(eventSourceUrl)
-  const disconnect = () => {
-    cancelCurrentConnection()
+  let connect = () => {
+    attemptConnection(eventSourceUrl)
+    connect = () => {
+      attemptConnection(
+        lastEventId
+          ? addLastEventIdIntoUrlSearchParams(eventSourceUrl, lastEventId)
+          : eventSourceUrl,
+      )
+    }
   }
 
   const removePageUnloadListener = listenPageUnload(() => {
     disconnect()
   })
 
-  return () => {
+  const destroy = () => {
     removePageUnloadListener()
     disconnect()
   }
+
+  return {
+    getConnectionStatus: () => connectionStatus,
+    setConnectionStatusCallback: (callback) => {
+      connectionStatusChangeCallback = callback
+    },
+    connect,
+    disconnect,
+    destroy,
+  }
 }
 
 const addLastEventIdIntoUrlSearchParams = (url, lastEventId) => {