@jsenv/core 24.2.2 → 24.4.0

package/src/internal/compiling/html_source_file_service.js

@@ -21,14 +21,12 @@ import {
 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 {
-  toolbarInjectorFileInfo,
-  toolbarHtmlFileInfo,
-} from "@jsenv/core/src/internal/dev_server/toolbar/toolbar_file_info.js"
+  BROWSER_RUNTIME_BUILD_URL,
+  EVENT_SOURCE_CLIENT_BUILD_URL,
+  TOOLBAR_INJECTOR_BUILD_URL,
+} from "@jsenv/core/dist/build_manifest.js"
+import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
 import { stringifyDataUrl } from "@jsenv/core/src/internal/dataUrl.utils.js"
 import {
   parseHtmlString,
@@ -43,6 +41,9 @@ import {
   setHtmlNodeText,
   getUniqueNameForInlineHtmlNode,
 } from "./compileHtml.js"
+import { jsenvCoreDirectoryUrl } from "../jsenvCoreDirectoryUrl.js"
+
+const jsenvDistDirectoryUrl = new URL("./dist/", jsenvCoreDirectoryUrl).href
 
 export const createTransformHtmlSourceFileService = ({
   logger,
@@ -70,6 +71,10 @@ export const createTransformHtmlSourceFileService = ({
     const relativeUrl = ressource.slice(1)
     const fileUrl = resolveUrl(relativeUrl, projectDirectoryUrl)
 
+    if (urlIsInsideOf(fileUrl, jsenvDistDirectoryUrl)) {
+      return null
+    }
+
     const inlineScript = htmlInlineScriptMap.get(fileUrl)
     if (inlineScript) {
       return {
@@ -159,41 +164,38 @@ const transformHTMLSourceFile = async ({
     })
   }
 
-  const jsenvBrowserBuildUrlRelativeToProject = urlToRelativeUrl(
-    jsenvBrowserSystemFileInfo.jsenvBuildUrl,
+  const browserRuntimeBuildUrlRelativeToProject = urlToRelativeUrl(
+    BROWSER_RUNTIME_BUILD_URL,
     projectDirectoryUrl,
   )
+
   const eventSourceClientBuildRelativeUrlForProject = urlToRelativeUrl(
-    eventSourceClientFileInfo.buildUrl,
+    EVENT_SOURCE_CLIENT_BUILD_URL,
     projectDirectoryUrl,
   )
+
   const toolbarInjectorBuildRelativeUrlForProject = urlToRelativeUrl(
-    toolbarInjectorFileInfo.buildUrl,
+    TOOLBAR_INJECTOR_BUILD_URL,
     projectDirectoryUrl,
   )
+
   manipulateHtmlAst(htmlAst, {
     scriptInjections: [
-      ...(fileUrl !== toolbarHtmlFileInfo.sourceUrl &&
-      fileUrl !== redirectorHtmlFileInfo.sourceUrl &&
-      jsenvScriptInjection
+      ...(jsenvScriptInjection
         ? [
             {
-              src: `/${jsenvBrowserBuildUrlRelativeToProject}`,
+              src: `/${browserRuntimeBuildUrlRelativeToProject}`,
             },
           ]
         : []),
-      ...(fileUrl !== toolbarHtmlFileInfo.sourceUrl &&
-      fileUrl !== redirectorHtmlFileInfo.sourceUrl &&
-      jsenvEventSourceClientInjection
+      ...(jsenvEventSourceClientInjection
         ? [
             {
               src: `/${eventSourceClientBuildRelativeUrlForProject}`,
             },
           ]
         : []),
-      ...(fileUrl !== toolbarHtmlFileInfo.sourceUrl &&
-      fileUrl !== redirectorHtmlFileInfo.sourceUrl &&
-      jsenvToolbarInjection
+      ...(jsenvToolbarInjection
         ? [
             {
               src: `/${toolbarInjectorBuildRelativeUrlForProject}`,

package/src/internal/compiling/jsenvCompilerForHtml.js

@@ -2,14 +2,14 @@ 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 {
-  toolbarInjectorFileInfo,
-  toolbarHtmlFileInfo,
-} from "@jsenv/core/src/internal/dev_server/toolbar/toolbar_file_info.js"
+  BROWSER_RUNTIME_BUILD_URL,
+  EVENT_SOURCE_CLIENT_BUILD_URL,
+  TOOLBAR_INJECTOR_BUILD_URL,
+} from "@jsenv/core/dist/build_manifest.js"
 import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
 import { getDefaultImportMap } from "@jsenv/core/src/internal/import-resolution/importmap-default.js"
+
 import {
   setJavaScriptSourceMappingUrl,
   sourcemapToBase64Url,
@@ -54,16 +54,18 @@ export const compileHtml = async ({
   jsenvToolbarInjection,
   onHtmlImportmapInfo,
 }) => {
-  const jsenvBrowserBuildUrlRelativeToProject = urlToRelativeUrl(
-    jsenvBrowserSystemFileInfo.jsenvBuildUrl,
+  const browserRuntimeBuildUrlRelativeToProject = urlToRelativeUrl(
+    BROWSER_RUNTIME_BUILD_URL,
     projectDirectoryUrl,
   )
+
   const eventSourceClientBuildRelativeUrlForProject = urlToRelativeUrl(
-    eventSourceClientFileInfo.buildUrl,
+    EVENT_SOURCE_CLIENT_BUILD_URL,
     projectDirectoryUrl,
   )
+
   const toolbarInjectorBuildRelativeUrlForProject = urlToRelativeUrl(
-    toolbarInjectorFileInfo.buildUrl,
+    TOOLBAR_INJECTOR_BUILD_URL,
     projectDirectoryUrl,
   )
 
@@ -74,26 +76,23 @@ export const compileHtml = async ({
     await mutateRessourceHints(htmlAst)
   }
 
-  const urlNoSearch = urlWithoutSearch(url)
-
   manipulateHtmlAst(htmlAst, {
     scriptInjections: [
-      ...(urlNoSearch !== toolbarHtmlFileInfo.sourceUrl && jsenvScriptInjection
+      ...(jsenvScriptInjection
         ? [
             {
-              src: `/${jsenvBrowserBuildUrlRelativeToProject}`,
+              src: `/${browserRuntimeBuildUrlRelativeToProject}`,
             },
           ]
         : []),
-      ...(urlNoSearch !== toolbarHtmlFileInfo.sourceUrl &&
-      jsenvEventSourceClientInjection
+      ...(jsenvEventSourceClientInjection
         ? [
             {
               src: `/${eventSourceClientBuildRelativeUrlForProject}`,
             },
           ]
         : []),
-      ...(urlNoSearch !== toolbarHtmlFileInfo.sourceUrl && jsenvToolbarInjection
+      ...(jsenvToolbarInjection
         ? [
             {
               src: `/${toolbarInjectorBuildRelativeUrlForProject}`,
@@ -405,9 +404,3 @@ 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

@@ -29,12 +29,16 @@ import {
   createCallbackListNotifiedOnce,
 } from "@jsenv/abort"
 
+import {
+  TOOLBAR_INJECTOR_BUILD_URL,
+  EVENT_SOURCE_CLIENT_BUILD_URL,
+  BROWSER_RUNTIME_BUILD_URL,
+} from "@jsenv/core/dist/build_manifest.js"
 import { generateGroupMap } from "@jsenv/core/src/internal/generateGroupMap/generateGroupMap.js"
 import { isBrowserPartOfSupportedRuntimes } from "@jsenv/core/src/internal/generateGroupMap/runtime_support.js"
 import { loadBabelPluginMapFromFile } from "./load_babel_plugin_map_from_file.js"
 import { extractSyntaxBabelPluginMap } from "./babel_plugins.js"
 import {
-  jsenvCompileProxyFileInfo,
   sourcemapMainFileInfo,
   sourcemapMappingFileInfo,
 } from "../jsenvInternalFiles.js"
@@ -47,6 +51,8 @@ import { createCompiledFileService } from "./createCompiledFileService.js"
 import { urlIsCompilationAsset } from "./compile-directory/compile-asset.js"
 import { createTransformHtmlSourceFileService } from "./html_source_file_service.js"
 
+let compileServerId = 0
+
 export const startCompileServer = async ({
   signal = new AbortController().signal,
   handleSIGINT,
@@ -295,9 +301,6 @@ export const startCompileServer = async ({
       outDirectoryUrl,
       compileServerMetaFileInfo,
     }),
-    "service: compile proxy": createCompileProxyService({
-      projectDirectoryUrl,
-    }),
     "service:compiled file": createCompiledFileService({
       logger,
 
@@ -388,6 +391,7 @@ export const startCompileServer = async ({
   })
 
   return {
+    id: compileServerId++,
     jsenvDirectoryRelativeUrl,
     outDirectoryRelativeUrl,
     ...compileServer,
@@ -913,15 +917,24 @@ const createSourceFileService = ({
     const relativeUrl = request.pathname.slice(1)
     projectFileRequestedCallback(relativeUrl, request)
 
-    const responsePromise = fetchFileSystem(
-      new URL(request.ressource.slice(1), projectDirectoryUrl),
-      {
-        headers: request.headers,
-        etagEnabled: projectFileCacheStrategy === "etag",
-        mtimeEnabled: projectFileCacheStrategy === "mtime",
-      },
+    const fileUrl = new URL(request.ressource.slice(1), projectDirectoryUrl)
+      .href
+    const fileIsInsideJsenvDistDirectory = urlIsInsideOf(
+      fileUrl,
+      new URL("./dist/", jsenvCoreDirectoryUrl),
     )
 
+    const responsePromise = fetchFileSystem(fileUrl, {
+      headers: request.headers,
+      etagEnabled: projectFileCacheStrategy === "etag",
+      mtimeEnabled: projectFileCacheStrategy === "mtime",
+      ...(fileIsInsideJsenvDistDirectory
+        ? {
+            cacheControl: `private,max-age=${60 * 60 * 24 * 30},immutable`,
+          }
+        : {}),
+    })
+
     return responsePromise
   }
 }
@@ -965,6 +978,12 @@ const createCompileServerMetaFileInfo = ({
     sourcemapMappingFileInfo.url,
     projectDirectoryUrl,
   )
+  // The object below must list everything that can influence how the
+  // compiled files are generated. So that the cahce for those generated files is
+  // not reused when it should not
+  // In some cases the parameters influences only a subset of files and ideally
+  // this parameter should somehow invalidate a subset of the cache
+  // To keep things simple these parameters currently invalidates the whole cache
   const compileServerMeta = {
     jsenvDirectoryRelativeUrl,
     outDirectoryRelativeUrl,
@@ -983,8 +1002,15 @@ const createCompileServerMetaFileInfo = ({
     sourcemapMappingFileRelativeUrl,
     errorStackRemapping: true,
 
+    // used to consider the logic generating files may have changed
     jsenvCorePackageVersion,
+
+    // impact only HTML files
     jsenvToolbarInjection,
+    TOOLBAR_INJECTOR_BUILD_URL,
+    EVENT_SOURCE_CLIENT_BUILD_URL,
+    BROWSER_RUNTIME_BUILD_URL,
+
     env,
   }
   return {
@@ -1054,27 +1080,6 @@ const createCompileServerMetaService = ({
   }
 }
 
-const createCompileProxyService = ({ projectDirectoryUrl }) => {
-  const jsenvCompileProxyRelativeUrlForProject = urlToRelativeUrl(
-    jsenvCompileProxyFileInfo.jsenvBuildUrl,
-    projectDirectoryUrl,
-  )
-
-  return (request) => {
-    if (request.ressource === "/.jsenv/jsenv_compile_proxy.js") {
-      const jsenvCompileProxyBuildServerUrl = `${request.origin}/${jsenvCompileProxyRelativeUrlForProject}`
-      return {
-        status: 307,
-        headers: {
-          location: jsenvCompileProxyBuildServerUrl,
-        },
-      }
-    }
-
-    return null
-  }
-}
-
 const readPackage = (packagePath) => {
   const buffer = readFileSync(packagePath)
   const string = String(buffer)

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

@@ -11,21 +11,34 @@ export const createEventSourceConnection = (
   }
 
   const eventSourceOrigin = new URL(eventSourceUrl).origin
+  Object.keys(events).forEach((eventName) => {
+    const eventCallback = events[eventName]
+    events[eventName] = (e) => {
+      if (e.origin === eventSourceOrigin) {
+        if (e.lastEventId) {
+          lastEventId = e.lastEventId
+        }
+        eventCallback(e)
+      }
+    }
+  })
 
   let connectionStatus = "default"
   let connectionStatusChangeCallback = () => {}
-  let disconnect = () => {}
+  let _disconnect = () => {}
 
   const goToStatus = (newStatus) => {
-    connectionStatus = newStatus
-    connectionStatusChangeCallback()
+    if (newStatus !== connectionStatus) {
+      connectionStatus = newStatus
+      connectionStatusChangeCallback()
+    }
   }
 
   const attemptConnection = (url) => {
     const eventSource = new EventSource(url, {
       withCredentials: true,
     })
-    disconnect = () => {
+    _disconnect = () => {
       if (
         connectionStatus !== "connecting" &&
         connectionStatus !== "connected"
@@ -37,6 +50,9 @@ export const createEventSourceConnection = (
       }
       eventSource.onerror = undefined
       eventSource.close()
+      Object.keys(events).forEach((eventName) => {
+        eventSource.removeEventListener(eventName, events[eventName])
+      })
       goToStatus("disconnected")
     }
     let retryCount = 0
@@ -45,7 +61,7 @@ export const createEventSourceConnection = (
       if (errorEvent.target.readyState === EventSource.CONNECTING) {
         if (retryCount > retryMaxAttempt) {
           console.info(`could not connect after ${retryMaxAttempt} attempt`)
-          disconnect()
+          _disconnect()
           return
         }
 
@@ -57,7 +73,7 @@ export const createEventSourceConnection = (
             console.info(
               `could not connect in less than ${retryAllocatedMs} ms`,
             )
-            disconnect()
+            _disconnect()
             return
           }
         }
@@ -68,7 +84,7 @@ export const createEventSourceConnection = (
       }
 
       if (errorEvent.target.readyState === EventSource.CLOSED) {
-        disconnect()
+        _disconnect()
         return
       }
     }
@@ -76,14 +92,7 @@ export const createEventSourceConnection = (
       goToStatus("connected")
     }
     Object.keys(events).forEach((eventName) => {
-      eventSource.addEventListener(eventName, (e) => {
-        if (e.origin === eventSourceOrigin) {
-          if (e.lastEventId) {
-            lastEventId = e.lastEventId
-          }
-          events[eventName](e)
-        }
-      })
+      eventSource.addEventListener(eventName, events[eventName])
     })
     if (!events.hasOwnProperty("welcome")) {
       eventSource.addEventListener("welcome", (e) => {
@@ -107,21 +116,21 @@ export const createEventSourceConnection = (
   }
 
   const removePageUnloadListener = listenPageUnload(() => {
-    disconnect()
+    _disconnect()
   })
 
   const destroy = () => {
     removePageUnloadListener()
-    disconnect()
+    _disconnect()
   }
 
   return {
     getConnectionStatus: () => connectionStatus,
-    setConnectionStatusCallback: (callback) => {
+    setConnectionStatusChangeCallback: (callback) => {
       connectionStatusChangeCallback = callback
     },
     connect,
-    disconnect,
+    disconnect: () => _disconnect(),
     destroy,
   }
 }

package/src/internal/dev_server/exploring/exploring.html

@@ -35,7 +35,12 @@
           <div id="explorables-header">
             <div id="explorables_header_and_menu">
               <h2 style="white-space: nowrap">
-                <svg id="fileIconSvgConfig" viewBox="0 0 24 24">
+                <svg
+                  id="fileIconSvgConfig"
+                  viewBox="0 0 24 24"
+                  width="32"
+                  height="32"
+                >
                   <path d="M0 0h24v24H0V0z" fill="none" />
                   <path
                     d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"
@@ -69,6 +74,6 @@
         </section>
       </article>
     </div>
-    <script src="/.jsenv/exploring.index.js"></script>
+    <script type="module" src="./exploring.js"></script>
   </body>
 </html>

package/src/internal/dev_server/exploring/fetchExploringJson.js

@@ -1,6 +1,4 @@
-import { createDetailedMessage } from "@jsenv/logger"
-
-import { fetchJson } from "../../browser-utils/fetchJson.js"
+import { fetchJson } from "../../browser_utils/fetchJson.js"
 
 export const fetchExploringJson = async ({ signal } = {}) => {
   try {
@@ -13,12 +11,9 @@ export const fetchExploringJson = async ({ signal } = {}) => {
       throw e
     }
     throw new Error(
-      createDetailedMessage(
-        `Cannot communicate with exploring server due to a network error`,
-        {
-          ["error stack"]: e.stack,
-        },
-      ),
+      `Cannot communicate with exploring server due to a network error
+--- error stack ---
+${e.stack}`,
     )
   }
 }

package/src/internal/dev_server/redirector/redirector.html

@@ -1,13 +1,48 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Exploring redirector</title>
+    <title>Jsenv redirector</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta charset="utf-8" />
     <link rel="icon" href="data:," />
   </head>
 
   <body>
-    <script src="/.jsenv/redirector.js"></script>
+    <script
+      type="importmap"
+      src="../../../../node_resolution.importmap"
+    ></script>
+    <script type="module">
+      import { scanBrowserRuntimeFeatures } from "../../browser_feature_detection/browser_feature_detection.js"
+
+      const redirect = async () => {
+        const redirectTarget = new URLSearchParams(window.location.search).get(
+          "redirect",
+        )
+        const browserRuntimeFeaturesReport = await scanBrowserRuntimeFeatures({
+          failFastOnFeatureDetection: true,
+        })
+
+        const href = `${getDirectoryUrl(
+          browserRuntimeFeaturesReport,
+        )}${redirectTarget}`
+        // It's IMPORTANT to use location.replace and NOT location.href = url
+        // otherwise it would break the back button
+        window.location.replace(href)
+      }
+
+      const getDirectoryUrl = ({
+        canAvoidCompilation,
+        outDirectoryRelativeUrl,
+        compileId,
+      }) => {
+        if (canAvoidCompilation) {
+          return `/`
+        }
+        return `/${outDirectoryRelativeUrl}${compileId}/`
+      }
+
+      redirect()
+    </script>
   </body>
 </html>

package/src/internal/dev_server/toolbar/compilation/toolbar.compilation.js

@@ -1,4 +1,4 @@
-import { scanBrowserRuntimeFeatures } from "../../../runtime/createBrowserRuntime/scanBrowserRuntimeFeatures.js"
+import { scanBrowserRuntimeFeatures } from "../../../browser_feature_detection/browser_feature_detection.js"
 import { removeForceHideElement } from "../util/dom.js"
 import { enableVariant } from "../variant/variant.js"
 
@@ -133,8 +133,7 @@ const getBrowserSupportMessage = ({
 }) => {
   const parts = []
 
-  const { importmapSupported } = featuresReport
-  if (importmapSupported) {
+  if (featuresReport.importmap) {
     if (!missingOnly) {
       if (inlineImportMapIntoHTML) {
         parts.push(`importmaps are supported (only when inlined in html files)`)
@@ -146,8 +145,7 @@ const getBrowserSupportMessage = ({
     parts.push(`importmaps are not supported`)
   }
 
-  const { dynamicImportSupported } = featuresReport
-  if (dynamicImportSupported) {
+  if (featuresReport.dynamicImport) {
     if (!missingOnly) {
       parts.push(`dynamic imports are supported`)
     }
@@ -155,8 +153,7 @@ const getBrowserSupportMessage = ({
     parts.push(`dynamic imports are not supported`)
   }
 
-  const { topLevelAwaitSupported } = featuresReport
-  if (topLevelAwaitSupported) {
+  if (featuresReport.topLevelAwait) {
     if (!missingOnly) {
       parts.push(`top level await is supported`)
     }

package/src/internal/dev_server/toolbar/eventsource/toolbar.eventsource.js

@@ -15,9 +15,9 @@ export const initToolbarEventSource = ({ livereloading }) => {
   if (!livereloadingAvailableOnServer) {
     disableLivereloadSetting()
   }
-  parentEventSourceClient.setConnectionStatusChangeCallback = () => {
+  parentEventSourceClient.setConnectionStatusChangeCallback(() => {
     updateEventSourceIndicator()
-  }
+  })
   const livereloadCheckbox = document.querySelector("#toggle-livereload")
   livereloadCheckbox.checked = parentEventSourceClient.isLivereloadEnabled()
   livereloadCheckbox.onchange = () => {