@jsenv/core 24.0.2 → 24.2.2

package/src/dev_server.js

@@ -15,16 +15,21 @@ import {
   computeOutDirectoryRelativeUrl,
 } from "./internal/compiling/startCompileServer.js"
 import { jsenvExplorableConfig } from "./jsenvExplorableConfig.js"
+import {
+  redirectorHtmlFileInfo,
+  redirectorJsFileInfo,
+} from "./internal/dev_server/redirector/redirector_file_info.js"
+import {
+  exploringIndexHtmlFileInfo,
+  exploringIndexJsFileInfo,
+} from "@jsenv/core/src/internal/dev_server/exploring/exploring_file_info.js"
+import { toolbarJsFileInfo } from "@jsenv/core/src/internal/dev_server/toolbar/toolbar_file_info.js"
 import {
   sourcemapMainFileInfo,
   sourcemapMappingFileInfo,
-  jsenvExploringRedirectorHtmlFileInfo,
-  jsenvExploringRedirectorJsFileInfo,
-  jsenvExploringIndexHtmlFileInfo,
-  jsenvExploringIndexJsFileInfo,
-  jsenvToolbarJsFileInfo,
 } from "./internal/jsenvInternalFiles.js"
 import { jsenvRuntimeSupportDuringDev } from "./jsenvRuntimeSupportDuringDev.js"
+import { eventSourceClientFileInfo } from "./internal/dev_server/event_source_client/event_source_client_file_info.js"
 
 export const startDevServer = async ({
   signal = new AbortController().signal,
@@ -41,7 +46,7 @@ export const startDevServer = async ({
   projectDirectoryUrl,
   explorableConfig = jsenvExplorableConfig,
   mainFileRelativeUrl = urlToRelativeUrl(
-    jsenvExploringIndexHtmlFileInfo.url,
+    exploringIndexHtmlFileInfo.sourceUrl,
     projectDirectoryUrl,
   ),
   jsenvDirectoryRelativeUrl,
@@ -59,6 +64,7 @@ export const startDevServer = async ({
   sourcemapMethod,
   customCompilers,
   livereloadWatchConfig,
+  livereloadLogLevel,
   jsenvDirectoryClean,
 }) => {
   projectDirectoryUrl = assertProjectDirectoryUrl({ projectDirectoryUrl })
@@ -70,23 +76,6 @@ export const startDevServer = async ({
     outDirectoryName,
   })
 
-  const redirectFiles = createRedirectFilesService({
-    projectDirectoryUrl,
-    outDirectoryRelativeUrl,
-    mainFileRelativeUrl,
-  })
-  const serveExploringData = createExploringDataService({
-    projectDirectoryUrl,
-    outDirectoryRelativeUrl,
-    explorableConfig,
-    livereloading,
-  })
-  const serveExplorableListAsJson = createExplorableListAsJsonService({
-    projectDirectoryUrl,
-    outDirectoryRelativeUrl,
-    explorableConfig,
-  })
-
   const compileServer = await startCompileServer({
     signal,
     handleSIGINT,
@@ -101,13 +90,35 @@ export const startDevServer = async ({
     plugins,
     customServices: {
       ...customServices,
-      "jsenv:redirector": redirectFiles,
-      "jsenv:exploring-data": serveExploringData,
-      "jsenv:explorables": serveExplorableListAsJson,
+      "jsenv:redirector": createRedirectorService({
+        projectDirectoryUrl,
+        mainFileRelativeUrl,
+      }),
+      "jsenv:event_source_client": createEventSourceClientService({
+        projectDirectoryUrl,
+      }),
+      "jsenv:exploring_index": createExploringIndexService({
+        projectDirectoryUrl,
+      }),
+      "jsenv:exploring_json": createExploringJsonService({
+        projectDirectoryUrl,
+        outDirectoryRelativeUrl,
+        explorableConfig,
+        livereloading,
+      }),
+      "jsenv:explorables_json": createExplorableJsonService({
+        projectDirectoryUrl,
+        outDirectoryRelativeUrl,
+        explorableConfig,
+      }),
+      "jsenv:toolbar": createToolbarService({
+        projectDirectoryUrl,
+      }),
     },
 
     projectDirectoryUrl,
     livereloadSSE: livereloading,
+    jsenvEventSourceClientInjection: true,
     jsenvToolbarInjection: jsenvToolbar,
     jsenvDirectoryRelativeUrl,
     outDirectoryName,
@@ -120,78 +131,99 @@ export const startDevServer = async ({
     babelPluginMap,
     runtimeSupport: runtimeSupportDuringDev,
     livereloadWatchConfig,
+    livereloadLogLevel,
     jsenvDirectoryClean,
   })
 
   return compileServer
 }
 
-const createRedirectFilesService = ({
+const createRedirectorService = ({
   projectDirectoryUrl,
   mainFileRelativeUrl,
 }) => {
-  const jsenvExploringRedirectorHtmlRelativeUrlForProject = urlToRelativeUrl(
-    jsenvExploringRedirectorHtmlFileInfo.url,
+  const jsenvRedirectorHtmlRelativeUrlForProject = urlToRelativeUrl(
+    redirectorHtmlFileInfo.sourceUrl,
     projectDirectoryUrl,
   )
-  const jsenvExploringRedirectorJsBuildRelativeUrlForProject = urlToRelativeUrl(
-    jsenvExploringRedirectorJsFileInfo.jsenvBuildUrl,
+  const jsenvRedirectorJsBuildRelativeUrlForProject = urlToRelativeUrl(
+    redirectorJsFileInfo.buildUrl,
     projectDirectoryUrl,
   )
-  const jsenvExploringJsBuildRelativeUrlForProject = urlToRelativeUrl(
-    jsenvExploringIndexJsFileInfo.jsenvBuildUrl,
-    projectDirectoryUrl,
-  )
-  const jsenvToolbarJsBuildRelativeUrlForProject = urlToRelativeUrl(
-    jsenvToolbarJsFileInfo.jsenvBuildUrl,
-    projectDirectoryUrl,
-  )
-
   return setupRoutes({
     "/": (request) => {
       const redirectTarget = mainFileRelativeUrl
-      const jsenvExploringRedirectorHtmlServerUrl = `${request.origin}/${jsenvExploringRedirectorHtmlRelativeUrlForProject}?redirect=${redirectTarget}`
       return {
         status: 307,
         headers: {
-          location: jsenvExploringRedirectorHtmlServerUrl,
+          location: `${request.origin}/${jsenvRedirectorHtmlRelativeUrlForProject}?redirect=${redirectTarget}`,
         },
       }
     },
     "/.jsenv/redirect/:rest*": (request) => {
       const redirectTarget = request.ressource.slice("/.jsenv/redirect/".length)
-      const jsenvExploringRedirectorHtmlServerUrl = `${request.origin}/${jsenvExploringRedirectorHtmlRelativeUrlForProject}?redirect=${redirectTarget}`
       return {
         status: 307,
         headers: {
-          location: jsenvExploringRedirectorHtmlServerUrl,
+          location: `${
+            request.origin
+          }/${jsenvRedirectorHtmlRelativeUrlForProject}?redirect=${encodeURIComponent(
+            redirectTarget,
+          )}`,
         },
       }
     },
-    "/.jsenv/exploring.redirector.js": (request) => {
-      const jsenvExploringRedirectorBuildServerUrl = `${request.origin}/${jsenvExploringRedirectorJsBuildRelativeUrlForProject}`
+    "/.jsenv/redirector.js": (request) => {
       return {
         status: 307,
         headers: {
-          location: jsenvExploringRedirectorBuildServerUrl,
+          location: `${request.origin}/${jsenvRedirectorJsBuildRelativeUrlForProject}`,
         },
       }
     },
-    "/.jsenv/exploring.index.js": (request) => {
-      const jsenvExploringJsBuildServerUrl = `${request.origin}/${jsenvExploringJsBuildRelativeUrlForProject}`
+  })
+}
+
+const createEventSourceClientService = ({ projectDirectoryUrl }) => {
+  const eventSourceClientBuildRelativeUrlForProject = urlToRelativeUrl(
+    eventSourceClientFileInfo.buildUrl,
+    projectDirectoryUrl,
+  )
+  return setupRoutes({
+    "/.jsenv/event_source_client.js": (request) => {
       return {
         status: 307,
         headers: {
-          location: jsenvExploringJsBuildServerUrl,
+          location: `${request.origin}/${eventSourceClientBuildRelativeUrlForProject}`,
         },
       }
     },
-    "/.jsenv/toolbar.main.js": (request) => {
-      const jsenvToolbarJsBuildServerUrl = `${request.origin}/${jsenvToolbarJsBuildRelativeUrlForProject}`
+    // unfortunately browser resolves sourcemap to url before redirection (not after).
+    // It means browser tries to load source map from "/.jsenv/jsenv-toolbar.js.map"
+    // we could also inline sourcemap but it's not yet possible
+    // inside buildProject
+    "/.jsenv/event_source_client.js.map": (request) => {
       return {
         status: 307,
         headers: {
-          location: jsenvToolbarJsBuildServerUrl,
+          location: `${request.origin}/${eventSourceClientBuildRelativeUrlForProject}.map`,
+        },
+      }
+    },
+  })
+}
+
+const createExploringIndexService = ({ projectDirectoryUrl }) => {
+  const jsenvExploringJsBuildRelativeUrlForProject = urlToRelativeUrl(
+    exploringIndexJsFileInfo.buildUrl,
+    projectDirectoryUrl,
+  )
+  return setupRoutes({
+    "/.jsenv/exploring.index.js": (request) => {
+      return {
+        status: 307,
+        headers: {
+          location: `${request.origin}/${jsenvExploringJsBuildRelativeUrlForProject}`,
         },
       }
     },
@@ -207,18 +239,37 @@ const createRedirectFilesService = ({
         },
       }
     },
+  })
+}
+
+const createToolbarService = ({ projectDirectoryUrl }) => {
+  const toolbarJsBuildRelativeUrlForProject = urlToRelativeUrl(
+    toolbarJsFileInfo.buildUrl,
+    projectDirectoryUrl,
+  )
+
+  return setupRoutes({
+    "/.jsenv/toolbar.main.js": (request) => {
+      const jsenvToolbarJsBuildServerUrl = `${request.origin}/${toolbarJsBuildRelativeUrlForProject}`
+      return {
+        status: 307,
+        headers: {
+          location: jsenvToolbarJsBuildServerUrl,
+        },
+      }
+    },
     "/.jsenv/jsenv_toolbar.js.map": (request) => {
       return {
         status: 307,
         headers: {
-          location: `${request.origin}/${jsenvToolbarJsBuildRelativeUrlForProject}.map`,
+          location: `${request.origin}/${toolbarJsBuildRelativeUrlForProject}.map`,
         },
       }
     },
   })
 }
 
-const createExploringDataService = ({
+const createExploringJsonService = ({
   projectDirectoryUrl,
   outDirectoryRelativeUrl,
   explorableConfig,
@@ -237,7 +288,7 @@ const createExploringDataService = ({
           projectDirectoryUrl,
         ),
         exploringHtmlFileRelativeUrl: urlToRelativeUrl(
-          jsenvExploringIndexHtmlFileInfo.url,
+          exploringIndexHtmlFileInfo.sourceUrl,
           projectDirectoryUrl,
         ),
         sourcemapMainFileRelativeUrl: urlToRelativeUrl(
@@ -266,7 +317,7 @@ const createExploringDataService = ({
   }
 }
 
-const createExplorableListAsJsonService = ({
+const createExplorableJsonService = ({
   projectDirectoryUrl,
   outDirectoryRelativeUrl,
   explorableConfig,

package/src/internal/compiling/compile-directory/getOrGenerateCompiledFile.js

@@ -127,8 +127,7 @@ const computeCompileReport = async ({
       logger.warn(`WARNING: meta.sources is empty for ${compiledFileUrl}`)
     }
 
-    const metaIsValid = cacheValidity.meta.isValid
-
+    const metaIsValid = cacheValidity.meta ? cacheValidity.meta.isValid : false
     const [compileTiming, compileResult] = await timeFunction("compile", () =>
       callCompile({
         logger,

package/src/internal/compiling/compileFile.js

@@ -19,6 +19,7 @@ export const compileFile = async ({
   projectFileRequestedCallback = () => {},
   request,
   pushResponse,
+  importmapInfos,
   compile,
   compileCacheStrategy,
   compileCacheSourcesValidation,
@@ -106,30 +107,29 @@ export const compileFile = async ({
       )
     })
 
-    if (
-      request.http2 &&
-      // js resolution is special, we cannot just do resolveUrl of the import specifier
-      // because there can be importmap (bare specifier, import without extension, custom remapping, ...)
-      // And we would push 404 to the browser
-      // Until we implement import map resolution pushing ressource for js imports is disabled
-      compileResult.contentType !== "application/javascript"
-    ) {
-      compileResult.dependencies.forEach((dependency) => {
-        const requestUrl = resolveUrl(request.ressource, request.origin)
-        const dependencyUrl = resolveUrl(dependency, requestUrl)
-        if (!urlIsInsideOf(dependencyUrl, request.origin)) {
-          // ignore external urls
-          return
-        }
-        if (dependencyUrl.startsWith("data:")) {
-          return
-        }
-        const dependencyRelativeUrl = urlToRelativeUrl(
-          dependencyUrl,
-          request.origin,
-        )
-        pushResponse({ path: `/${dependencyRelativeUrl}` })
+    if (request.http2) {
+      const dependencyResolver = getDependencyResolver({
+        compileResult,
+        importmapInfos,
+        request,
       })
+      if (dependencyResolver) {
+        compileResult.dependencies.forEach((dependency) => {
+          const dependencyUrl = dependencyResolver.resolve(dependency)
+          if (!urlIsInsideOf(dependencyUrl, request.origin)) {
+            // ignore external urls
+            return
+          }
+          if (dependencyUrl.startsWith("data:")) {
+            return
+          }
+          const dependencyRelativeUrl = urlToRelativeUrl(
+            dependencyUrl,
+            request.origin,
+          )
+          pushResponse({ path: `/${dependencyRelativeUrl}` })
+        })
+      }
     }
 
     // when a compiled version of the source file was just created or updated
@@ -229,3 +229,31 @@ export const compileFile = async ({
     return convertFileSystemErrorToResponseProperties(error)
   }
 }
+
+const getDependencyResolver = ({ compileResult, importmapInfos, request }) => {
+  const importmapKeys = Object.keys(importmapInfos)
+  const requestUrl = resolveUrl(request.ressource, request.origin)
+
+  if (
+    compileResult.contentType === "application/javascript" &&
+    // we cannot trust importmapKeys because when html is restored from cache
+    // it would be empty
+    importmapKeys.length > 0
+  ) {
+    // js resolution is special, we cannot just do resolveUrl of the import specifier
+    // because there can be importmap (bare specifier, import without extension, custom remapping, ...)
+    // And we would push 404 to the browser
+    // BUT I tried to push everything to the browser and it was a big fail:
+    // server is trying to push streams but browser rejects most push streams
+    // either because main file is already fetched or an other file request the same ressource
+    return null
+  }
+
+  return {
+    type: "url_resolution",
+    resolve: (dependency) => {
+      const dependencyUrl = resolveUrl(dependency, requestUrl)
+      return dependencyUrl
+    },
+  }
+}

package/src/internal/compiling/createCompiledFileService.js

@@ -48,6 +48,7 @@ export const createCompiledFileService = ({
   groupMap,
   customCompilers,
 
+  jsenvEventSourceClientInjection,
   jsenvToolbarInjection,
 
   projectFileRequestedCallback,
@@ -80,6 +81,8 @@ export const createCompiledFileService = ({
     projectDirectoryUrl,
   )
 
+  const importmapInfos = {}
+
   return (request, { pushResponse, redirectRequest }) => {
     const { origin, ressource } = request
     // we use "ressourceToPathname" to remove eventual query param from the url
@@ -167,6 +170,7 @@ export const createCompiledFileService = ({
       projectFileRequestedCallback,
       request,
       pushResponse,
+      importmapInfos,
       compile: ({ code }) => {
         return compiler({
           logger,
@@ -194,7 +198,11 @@ export const createCompiledFileService = ({
 
           sourcemapMethod,
           sourcemapExcludeSources,
+          jsenvEventSourceClientInjection,
           jsenvToolbarInjection,
+          onHtmlImportmapInfo: ({ htmlUrl, importmapInfo }) => {
+            importmapInfos[htmlUrl] = importmapInfo
+          },
         })
       },
     })

package/src/internal/compiling/html_source_file_service.js

@@ -22,11 +22,13 @@ import { moveImportMap } from "@jsenv/importmap"
 import { createDetailedMessage } from "@jsenv/logger"
 
 import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
+import { jsenvBrowserSystemFileInfo } from "@jsenv/core/src/internal/jsenvInternalFiles.js"
+import { redirectorHtmlFileInfo } from "@jsenv/core/src/internal/dev_server/redirector/redirector_file_info.js"
+import { eventSourceClientFileInfo } from "@jsenv/core/src/internal/dev_server/event_source_client/event_source_client_file_info.js"
 import {
-  jsenvToolbarHtmlFileInfo,
-  jsenvBrowserSystemFileInfo,
-  jsenvToolbarInjectorFileInfo,
-} from "@jsenv/core/src/internal/jsenvInternalFiles.js"
+  toolbarInjectorFileInfo,
+  toolbarHtmlFileInfo,
+} from "@jsenv/core/src/internal/dev_server/toolbar/toolbar_file_info.js"
 import { stringifyDataUrl } from "@jsenv/core/src/internal/dataUrl.utils.js"
 import {
   parseHtmlString,
@@ -45,8 +47,10 @@ import {
 export const createTransformHtmlSourceFileService = ({
   logger,
   projectDirectoryUrl,
+  projectFileRequestedCallback,
   inlineImportMapIntoHTML,
   jsenvScriptInjection,
+  jsenvEventSourceClientInjection,
   jsenvToolbarInjection,
 }) => {
   /**
@@ -93,6 +97,7 @@ export const createTransformHtmlSourceFileService = ({
       }
       throw e
     }
+    projectFileRequestedCallback(relativeUrl, request)
     htmlInlineScriptMap.forEach((inlineScript, inlineScriptUrl) => {
       if (inlineScript.htmlFileUrl === fileUrl) {
         htmlInlineScriptMap.delete(inlineScriptUrl)
@@ -107,6 +112,7 @@ export const createTransformHtmlSourceFileService = ({
       pushResponse,
       inlineImportMapIntoHTML,
       jsenvScriptInjection,
+      jsenvEventSourceClientInjection,
       jsenvToolbarInjection,
       onInlineModuleScript: ({ scriptContent, scriptIdentifier }) => {
         const inlineScriptUrl = resolveUrl(scriptIdentifier, fileUrl)
@@ -138,8 +144,11 @@ const transformHTMLSourceFile = async ({
   inlineImportMapIntoHTML,
   jsenvScriptInjection,
   jsenvToolbarInjection,
+  jsenvEventSourceClientInjection,
   onInlineModuleScript = () => {},
 }) => {
+  fileUrl = urlWithoutSearch(fileUrl)
+
   const htmlAst = parseHtmlString(fileContent)
   if (inlineImportMapIntoHTML) {
     await inlineImportmapScripts({
@@ -154,23 +163,42 @@ const transformHTMLSourceFile = async ({
     jsenvBrowserSystemFileInfo.jsenvBuildUrl,
     projectDirectoryUrl,
   )
-  const jsenvToolbarInjectorBuildRelativeUrlForProject = urlToRelativeUrl(
-    jsenvToolbarInjectorFileInfo.jsenvBuildUrl,
+  const eventSourceClientBuildRelativeUrlForProject = urlToRelativeUrl(
+    eventSourceClientFileInfo.buildUrl,
+    projectDirectoryUrl,
+  )
+  const toolbarInjectorBuildRelativeUrlForProject = urlToRelativeUrl(
+    toolbarInjectorFileInfo.buildUrl,
     projectDirectoryUrl,
   )
   manipulateHtmlAst(htmlAst, {
     scriptInjections: [
-      ...(fileUrl !== jsenvToolbarHtmlFileInfo.url && jsenvScriptInjection
+      ...(fileUrl !== toolbarHtmlFileInfo.sourceUrl &&
+      fileUrl !== redirectorHtmlFileInfo.sourceUrl &&
+      jsenvScriptInjection
         ? [
             {
               src: `/${jsenvBrowserBuildUrlRelativeToProject}`,
             },
           ]
         : []),
-      ...(fileUrl !== jsenvToolbarHtmlFileInfo.url && jsenvToolbarInjection
+      ...(fileUrl !== toolbarHtmlFileInfo.sourceUrl &&
+      fileUrl !== redirectorHtmlFileInfo.sourceUrl &&
+      jsenvEventSourceClientInjection
+        ? [
+            {
+              src: `/${eventSourceClientBuildRelativeUrlForProject}`,
+            },
+          ]
+        : []),
+      ...(fileUrl !== toolbarHtmlFileInfo.sourceUrl &&
+      fileUrl !== redirectorHtmlFileInfo.sourceUrl &&
+      jsenvToolbarInjection
         ? [
             {
-              src: `/${jsenvToolbarInjectorBuildRelativeUrlForProject}`,
+              src: `/${toolbarInjectorBuildRelativeUrlForProject}`,
+              defer: "",
+              async: "",
             },
           ]
         : []),
@@ -401,3 +429,9 @@ const getJsenvForceInlineAttribute = (htmlNode) => {
   )
   return jsenvForceInlineAttribute
 }
+
+const urlWithoutSearch = (url) => {
+  const urlObject = new URL(url)
+  urlObject.search = ""
+  return urlObject.href
+}