@jsenv/core 24.0.0 → 24.2.0

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({
@@ -239,14 +240,14 @@ export const startCompileServer = async ({
     })
     customServices = {
       ...customServices,
-      "service:sse": serveSSEForLivereload,
+      "jsenv:sse": serveSSEForLivereload,
     }
   } else {
     const roomWhenLivereloadIsDisabled = createSSERoom()
     roomWhenLivereloadIsDisabled.open()
     customServices = {
       ...customServices,
-      "service:sse": (request) => {
+      "jsenv:sse": (request) => {
         const { accept } = request.headers
         if (!accept || !accept.includes("text/event-stream")) {
           return null
@@ -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,
             }),
         }
@@ -389,6 +393,7 @@ export const startCompileServer = async ({
     ...compileServer,
     compileServerGroupMap,
     babelPluginMap,
+    projectFileRequestedCallback,
   }
 }
 
@@ -582,6 +587,9 @@ const setupServerSentEventsForLivereload = ({
   const projectFileAdded = createCallbackList()
 
   const projectFileRequestedCallback = (relativeUrl, request) => {
+    if (relativeUrl[0] === "/") {
+      relativeUrl = relativeUrl.slice(1)
+    }
     const url = `${projectDirectoryUrl}${relativeUrl}`
 
     if (
@@ -627,62 +635,82 @@ const setupServerSentEventsForLivereload = ({
     clearTimeout(timeout)
   })
 
-  const getDependencySet = (mainRelativeUrl) => {
-    if (trackerMap.has(mainRelativeUrl)) {
-      return trackerMap.get(mainRelativeUrl)
+  const startTrackingRoot = (rootFile) => {
+    stopTrackingRoot(rootFile)
+    const set = new Set()
+    set.add(rootFile)
+    const depInfo = {
+      set,
+      cleanup: [],
+    }
+    trackerMap.set(rootFile, depInfo)
+    return depInfo
+  }
+  const addStopTrackingCalback = (rootFile, callback) => {
+    trackerMap.get(rootFile).cleanup.push(callback)
+  }
+  const stopTrackingRoot = (rootFile) => {
+    const depInfo = trackerMap.get(rootFile)
+    if (depInfo) {
+      depInfo.cleanup.forEach((cb) => {
+        cb()
+      })
+      trackerMap.delete(rootFile)
     }
-    const dependencySet = new Set()
-    dependencySet.add(mainRelativeUrl)
-    trackerMap.set(mainRelativeUrl, dependencySet)
-    return dependencySet
+  }
+  const isDependencyOf = (file, rootFile) => {
+    const depInfo = trackerMap.get(rootFile)
+    return depInfo && depInfo.set.has(file)
+  }
+  const markAsDependencyOf = (file, rootFile) => {
+    trackerMap.get(rootFile).set.add(file)
   }
 
   // each time a file is requested for the first time its dependencySet is computed
-  projectFileRequested.add(({ relativeUrl: mainRelativeUrl }) => {
+  projectFileRequested.add((requestInfo) => {
+    const rootRelativeUrl = requestInfo.relativeUrl
     // for now no use case of livereloading on node.js
     // and for browsers only html file can be main files
     // this avoid collecting dependencies of non html files that will never be used
-    if (!mainRelativeUrl.endsWith(".html")) {
+    if (!rootRelativeUrl.endsWith(".html")) {
       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
-    const dependencySet = new Set()
-    dependencySet.add(mainRelativeUrl)
-    trackerMap.set(mainRelativeUrl, dependencySet)
+    startTrackingRoot(rootRelativeUrl)
 
     const removeDependencyRequestedCallback = projectFileRequested.add(
       ({ relativeUrl, request }) => {
-        if (dependencySet.has(relativeUrl)) {
+        if (isDependencyOf(relativeUrl, rootRelativeUrl)) {
           return
         }
-
         const dependencyReport = reportDependency(
           relativeUrl,
-          mainRelativeUrl,
+          rootRelativeUrl,
           request,
         )
         if (dependencyReport.dependency === false) {
           livereloadLogger.debug(
-            `${relativeUrl} not a dependency of ${mainRelativeUrl} because ${dependencyReport.reason}`,
+            `${relativeUrl} not a dependency of ${rootRelativeUrl} because ${dependencyReport.reason}`,
           )
           return
         }
-
         livereloadLogger.debug(
-          `${relativeUrl} is a dependency of ${mainRelativeUrl} because ${dependencyReport.reason}`,
+          `${relativeUrl} is a dependency of ${rootRelativeUrl} because ${dependencyReport.reason}`,
         )
-        dependencySet.add(relativeUrl)
+        markAsDependencyOf(relativeUrl, rootRelativeUrl)
       },
     )
-    const removeMainRemovedCallback = projectFileRemoved.add((relativeUrl) => {
-      if (relativeUrl === mainRelativeUrl) {
-        removeDependencyRequestedCallback()
-        removeMainRemovedCallback()
-        trackerMap.delete(mainRelativeUrl)
+    addStopTrackingCalback(rootRelativeUrl, removeDependencyRequestedCallback)
+    const removeRootRemovedCallback = projectFileRemoved.add((relativeUrl) => {
+      if (relativeUrl === rootRelativeUrl) {
+        stopTrackingRoot(rootRelativeUrl)
+        livereloadLogger.debug(`${rootRelativeUrl} removed -> stop tracking it`)
       }
     })
+    addStopTrackingCalback(rootRelativeUrl, removeRootRemovedCallback)
   })
 
   const trackMainAndDependencies = (
@@ -692,20 +720,17 @@ const setupServerSentEventsForLivereload = ({
     livereloadLogger.debug(`track ${mainRelativeUrl} and its dependencies`)
 
     const removeModifiedCallback = projectFileModified.add((relativeUrl) => {
-      const dependencySet = getDependencySet(mainRelativeUrl)
-      if (dependencySet.has(relativeUrl)) {
+      if (isDependencyOf(relativeUrl, mainRelativeUrl)) {
         modified(relativeUrl)
       }
     })
     const removeRemovedCallback = projectFileRemoved.add((relativeUrl) => {
-      const dependencySet = getDependencySet(mainRelativeUrl)
-      if (dependencySet.has(relativeUrl)) {
+      if (isDependencyOf(relativeUrl, mainRelativeUrl)) {
         removed(relativeUrl)
       }
     })
     const removeAddedCallback = projectFileAdded.add((relativeUrl) => {
-      const dependencySet = getDependencySet(mainRelativeUrl)
-      if (dependencySet.has(relativeUrl)) {
+      if (isDependencyOf(relativeUrl, mainRelativeUrl)) {
         added(relativeUrl)
       }
     })
@@ -744,14 +769,6 @@ const setupServerSentEventsForLivereload = ({
 
     const { referer } = request.headers
     if (referer) {
-      const { origin } = request
-      // referer is likely the dev server
-      if (referer !== origin && !urlIsInsideOf(referer, origin)) {
-        return {
-          dependency: false,
-          reason: "referer is an other origin",
-        }
-      }
       // here we know the referer is inside compileServer
       const refererRelativeUrl = urlToOriginalRelativeUrl(
         referer,
@@ -764,7 +781,7 @@ const setupServerSentEventsForLivereload = ({
         for (const tracker of trackerMap) {
           if (
             tracker[0] === mainRelativeUrl &&
-            tracker[1].has(refererRelativeUrl)
+            tracker[1].set.has(refererRelativeUrl)
           ) {
             return {
               dependency: true,
@@ -893,8 +910,7 @@ const createSourceFileService = ({
   projectFileCacheStrategy,
 }) => {
   return async (request) => {
-    const { ressource } = request
-    const relativeUrl = ressource.slice(1)
+    const relativeUrl = request.pathname.slice(1)
     projectFileRequestedCallback(relativeUrl, request)
 
     const responsePromise = fetchFileSystem(

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,
+}