@jsenv/core 24.2.1 → 24.3.3

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 = () => {

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

@@ -1,25 +1,56 @@
 import { createPreference } from "../util/preferences.js"
+import { enableVariant } from "../variant/variant.js"
 
+const notificationAvailable = typeof window.Notification === "function"
 const notificationPreference = createPreference("notification")
 
 const arrayOfOpenedNotifications = []
 export const renderToolbarNotification = () => {
   const notifCheckbox = document.querySelector("#toggle-notifs")
-  notifCheckbox.checked = getNotificationPreference()
-  notifCheckbox.onchange = () => {
-    setNotificationPreference(notifCheckbox.checked)
-    if (notifCheckbox.checked) {
-      // request permission early
-      // especially useful on firefox where you can request permission
-      // only inside a user generated event such as this onchange handler
-      requestPermission()
-    } else {
-      // slice because arrayOfOpenedNotifications can be mutated while looping
-      arrayOfOpenedNotifications.slice().forEach((notification) => {
-        notification.close()
-      })
+  if (!notificationAvailable) {
+    const notifSetting = document.querySelector(".settings-notification")
+    notifSetting.setAttribute("data-disabled", "true")
+    notifSetting.setAttribute(
+      "title",
+      `Notification not available in the browser`,
+    )
+    notifCheckbox.disabled = true
+    return
+  }
+
+  const updatePermission = () => {
+    if (Notification.permission === "denied") {
+      const notifSetting = document.querySelector(".settings-notification")
+      notifSetting.setAttribute("data-disabled", "true")
+      notifSetting.setAttribute("title", `Notification denied`)
+      notifCheckbox.disabled = true
+      return
+    }
+
+    notifCheckbox.checked = getNotificationPreference()
+    notifCheckbox.onchange = () => {
+      setNotificationPreference(notifCheckbox.checked)
+      if (!notifCheckbox.checked) {
+        // slice because arrayOfOpenedNotifications can be mutated while looping
+        arrayOfOpenedNotifications.slice().forEach((notification) => {
+          notification.close()
+        })
+      }
+    }
+    const notifPermission = Notification.permission
+    enableVariant(document.querySelector(".notification-text"), {
+      notif_permission: notifPermission === "granted" ? "yes" : "no",
+    })
+    if (notifPermission === "default") {
+      document.querySelector("a.request_notification_permission").onclick =
+        () => {
+          requestPermission().then(() => {
+            updatePermission()
+          })
+        }
     }
   }
+  updatePermission()
 }
 
 export const notifyExecutionResult = (
@@ -64,8 +95,6 @@ export const notifyExecutionResult = (
   }
 }
 
-const notificationAvailable = typeof window.Notification === "function"
-
 const getNotificationPreference = () =>
   notificationPreference.has() ? notificationPreference.get() : true
 
@@ -76,46 +105,48 @@ const getFaviconHref = () => {
   return link ? link.href : undefined
 }
 
+let permission = "default"
+
 const notify = notificationAvailable
   ? async (
       title,
       { clickToFocus = false, clickToClose = false, ...options } = {},
     ) => {
-      const permission = await requestPermission()
-      if (permission === "granted") {
-        const notification = new Notification(title, options)
-        arrayOfOpenedNotifications.push(notification)
-        notification.onclick = () => {
-          // but if the user navigated inbetween
-          // focusing window will show something else
-          // in that case it could be great to do something
-          // maybe like showing a message saying this execution
-          // is no longer visible
-          // we could also navigauate to this file execution but
-          // there is no guarantee re-executing the file would give same output
-          // and it would also trigger an other notification
-          if (clickToFocus) window.focus()
-          if (clickToClose) notification.close()
-        }
-        notification.onclose = () => {
-          const index = arrayOfOpenedNotifications.indexOf(notification)
-          if (index > -1) {
-            arrayOfOpenedNotifications.splice(index, 1)
-          }
+      if (permission !== "granted") {
+        return null
+      }
+
+      const notification = new Notification(title, options)
+      arrayOfOpenedNotifications.push(notification)
+      notification.onclick = () => {
+        // but if the user navigated inbetween
+        // focusing window will show something else
+        // in that case it could be great to do something
+        // maybe like showing a message saying this execution
+        // is no longer visible
+        // we could also navigauate to this file execution but
+        // there is no guarantee re-executing the file would give same output
+        // and it would also trigger an other notification
+        if (clickToFocus) window.focus()
+        if (clickToClose) notification.close()
+      }
+      notification.onclose = () => {
+        const index = arrayOfOpenedNotifications.indexOf(notification)
+        if (index > -1) {
+          arrayOfOpenedNotifications.splice(index, 1)
         }
-        return notification
       }
-      return null
+      return notification
     }
   : () => {}
 
-let permissionPromise
+let requestPromise
 const requestPermission = notificationAvailable
   ? async () => {
-      if (permissionPromise) return permissionPromise
-      permissionPromise = Notification.requestPermission()
-      const permission = await permissionPromise
-      permissionPromise = undefined
+      if (requestPromise) return requestPromise
+      requestPromise = Notification.requestPermission()
+      permission = await requestPromise
+      requestPromise = undefined
       return permission
     }
-  : () => Promise.resolve("denied")
+  : () => Promise.resolve("default")

package/src/internal/dev_server/toolbar/toolbar.html

@@ -5,7 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta charset="utf-8" />
     <link rel="icon" href="data:," />
-    <link rel="stylesheet" type="text/css" href="./toolbar.main.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="./toolbar.main.css"
+      data-jsenv-force-inline
+    />
   </head>
   <body>
     <div id="toolbar-overlay"></div>
@@ -13,7 +18,7 @@
     <div id="toolbar">
       <div id="toolbar-wrapper">
         <section id="file-list-link" data-responsive-toolbar-element>
-          <a class="toolbar-icon-wrapper" href="">
+          <a class="toolbar-icon-wrapper" href="/">
             <svg
               id="fileIconSvg"
               class="iconToolbar"
@@ -251,7 +256,7 @@
             </div>
             <div id="settings-box-body">
               <div class="settings-box-items-wrapper">
-                <div class="settings-box-item">
+                <div class="settings-box-item settings-notification">
                   <div class="category-title">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -274,6 +279,14 @@
                   </label>
                   <div class="category-subtitle">
                     Send system notification when execution fails or is fixed.
+                    <div class="notification-text">
+                      <a
+                        data-when="notif_permission:no"
+                        class="request_notification_permission"
+                        href="javascript:void(0);"
+                        >Enable notification</a
+                      >
+                    </div>
                   </div>
                 </div>
                 <div class="settings-box-item settings-livereload">
@@ -526,7 +539,7 @@
     <!--
      Reusable svg(s)
     -->
-    <div style="display: none">
+    <div style="display: none; position: absolute">
       <svg
         id="loading_svg"
         xmlns="http://www.w3.org/2000/svg"
@@ -551,6 +564,19 @@
     module approach wil be faster because
     no compilation will be necessary
     -->
-    <script src="/.jsenv/toolbar.main.js"></script>
+    <script
+      type="importmap"
+      src="../../../../node_resolution.importmap"
+    ></script>
+    <script>
+      // here we should create something like window.toolbar = {}
+      // and a promise the toolbar injector can listen to act on the toolbar
+      // or we could just consider all communication should pass by postmessage
+    </script>
+    <script
+      type="module"
+      src="./toolbar.main.js"
+      data-jsenv-force-inline
+    ></script>
   </body>
 </html>