@jsenv/core 24.2.2 → 24.4.0

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>

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

@@ -1,6 +1,10 @@
 import { fetchExploringJson } from "@jsenv/core/src/internal/dev_server/exploring/fetchExploringJson.js"
 import { setAttributes, setStyles } from "./util/dom.js"
 
+// eslint-disable-next-line no-undef
+const TOOLBAR_BUILD_RELATIVE_URL = __TOOLBAR_BUILD_RELATIVE_URL_
+const jsenvLogoSvgUrl = new URL("./jsenv-logo.svg", import.meta.url)
+
 const injectToolbar = async () => {
   await new Promise((resolve) => {
     if (window.requestIdleCallback) {
@@ -40,7 +44,7 @@ const injectToolbar = async () => {
   })
   const iframeLoadedPromise = iframeToLoadedPromise(iframe)
   const jsenvToolbarHtmlServerUrl = resolveUrl(
-    "./src/internal/dev_server/toolbar/toolbar.html",
+    TOOLBAR_BUILD_RELATIVE_URL,
     jsenvDirectoryServerUrl,
   )
   // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
@@ -50,40 +54,11 @@ const injectToolbar = async () => {
   await iframeLoadedPromise
   iframe.removeAttribute("tabindex")
 
-  const listenToolbarIframeEvent = (event, fn) => {
-    window.addEventListener(
-      "message",
-      (messageEvent) => {
-        const { data } = messageEvent
-        if (typeof data !== "object") return
-        const { jsenv } = data
-        if (!jsenv) return
-        const { type } = data
-        if (type !== event) return
-        fn(data.value)
-      },
-      false,
-    )
-  }
-
-  listenToolbarIframeEvent("toolbar-visibility-change", (visible) => {
-    if (visible) {
-      hideToolbarTrigger()
-    } else {
-      showToolbarTrigger()
-    }
-  })
-
   const div = document.createElement("div")
-  const jsenvLogoUrl = resolveUrl(
-    "./src/internal/dev_server/toolbar/jsenv-logo.svg",
-    jsenvDirectoryServerUrl,
-  )
-  const jsenvLogoSvgSrc = jsenvLogoUrl
   div.innerHTML = `
 <div id="jsenv-toolbar-trigger">
   <svg id="jsenv-toolbar-trigger-icon">
-    <use xlink:href="${jsenvLogoSvgSrc}#jsenv-logo"></use>
+    <use xlink:href="${jsenvLogoSvgUrl}#jsenv-logo"></use>
   </svg>
   <style>
     #jsenv-toolbar-trigger {
@@ -148,7 +123,7 @@ const injectToolbar = async () => {
     collapseToolbarTrigger()
   }
   toolbarTrigger.onclick = () => {
-    window.__jsenv__.toolbar.show()
+    sendCommandToToolbar(iframe, "showToolbar")
   }
 
   const showToolbarTrigger = () => {
@@ -166,13 +141,56 @@ const injectToolbar = async () => {
   const collapseToolbarTrigger = () => {
     toolbarTrigger.removeAttribute("data-expanded", "")
   }
-  hideToolbarTrigger()
 
-  iframe.contentWindow.renderToolbar()
+  hideToolbarTrigger()
+  addToolbarEventCallback(iframe, "toolbar-visibility-change", (visible) => {
+    if (visible) {
+      hideToolbarTrigger()
+    } else {
+      showToolbarTrigger()
+    }
+  })
+  addToolbarEventCallback(iframe, "toolbar_ready", () => {
+    sendCommandToToolbar(iframe, "renderToolbar")
+  })
 
   return iframe
 }
 
+const addToolbarEventCallback = (iframe, eventName, callback) => {
+  const messageEventCallback = (messageEvent) => {
+    const { data } = messageEvent
+    if (typeof data !== "object") {
+      return
+    }
+    const { __jsenv__ } = data
+    if (!__jsenv__) {
+      return
+    }
+    if (__jsenv__.event !== eventName) {
+      return
+    }
+    callback(__jsenv__.data)
+  }
+
+  window.addEventListener("message", messageEventCallback, false)
+  return () => {
+    window.removeEventListener("message", messageEventCallback, false)
+  }
+}
+
+const sendCommandToToolbar = (iframe, command, ...args) => {
+  iframe.contentWindow.postMessage(
+    {
+      __jsenv__: {
+        command,
+        args,
+      },
+    },
+    window.origin,
+  )
+}
+
 const getToolbarPlaceholder = () => {
   const placeholder = queryPlaceholder()
   if (placeholder) {
@@ -188,8 +206,9 @@ const getToolbarPlaceholder = () => {
   return createTooolbarPlaceholder()
 }
 
-const queryPlaceholder = () =>
-  document.querySelector("[data-jsenv-toolbar-placeholder]")
+const queryPlaceholder = () => {
+  return document.querySelector("[data-jsenv-toolbar-placeholder]")
+}
 
 const createTooolbarPlaceholder = () => {
   const placeholder = document.createElement("span")

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

@@ -4,7 +4,6 @@ import { urlToRelativeUrl } from "@jsenv/filesystem/src/urlToRelativeUrl.js"
 import { fetchExploringJson } from "../exploring/fetchExploringJson.js"
 import { startJavaScriptAnimation } from "../toolbar/util/animation.js"
 import "./focus/toolbar.focus.js"
-import { renderBackToListInToolbar } from "./backtolist/toolbar.backtolist.js"
 import {
   getToolbarIframe,
   deactivateToolbarSection,
@@ -45,16 +44,6 @@ const renderToolbar = async () => {
     hideSettings()
   }
 
-  const toolbarElement = document.querySelector("#toolbar")
-  exposeOnParentWindow({
-    toolbar: {
-      element: toolbarElement,
-      show: showToolbar,
-      hide: () => hideToolbar(),
-      toggle: toogleToolbar,
-    },
-  })
-
   const toolbarVisible = toolbarVisibilityPreference.has()
     ? toolbarVisibilityPreference.get()
     : true
@@ -65,11 +54,6 @@ const renderToolbar = async () => {
     hideToolbar({ animate: false })
   }
 
-  renderBackToListInToolbar({
-    outDirectoryRelativeUrl,
-    exploringHtmlFileRelativeUrl: exploringConfig.exploringHtmlFileRelativeUrl,
-  })
-
   renderToolbarNotification()
   makeToolbarResponsive()
   renderToolbarSettings()
@@ -91,16 +75,6 @@ const renderToolbar = async () => {
     toogleToolbar()
 }
 
-const exposeOnParentWindow = (object) => {
-  let { __jsenv__ } = window.parent
-  if (!__jsenv__) {
-    __jsenv__ = {}
-    window.parent.__jsenv__ = {}
-  }
-
-  Object.assign(__jsenv__, object)
-}
-
 const toogleToolbar = () => {
   if (toolbarIsVisible()) {
     hideToolbar()
@@ -213,15 +187,55 @@ const getCompileGroup = ({
   }
 }
 
-const sendEventToParent = (type, value) => {
+const addExternalCommandCallback = (command, callback) => {
+  const messageEventCallback = (messageEvent) => {
+    const { data } = messageEvent
+    if (typeof data !== "object") {
+      return
+    }
+    const { __jsenv__ } = data
+    if (!__jsenv__) {
+      return
+    }
+
+    if (__jsenv__.command !== command) {
+      return
+    }
+
+    callback(...__jsenv__.args)
+  }
+
+  window.addEventListener("message", messageEventCallback)
+  return () => {
+    window.removeEventListener("message", messageEventCallback)
+  }
+}
+
+const sendEventToParent = (name, data) => {
   window.parent.postMessage(
     {
-      jsenv: true,
-      type,
-      value,
+      __jsenv__: {
+        event: name,
+        data,
+      },
     },
     "*",
   )
 }
 
-window.renderToolbar = renderToolbar
+window.toolbar = {
+  render: renderToolbar,
+  show: showToolbar,
+  hide: () => hideToolbar(),
+}
+
+addExternalCommandCallback("renderToolbar", () => {
+  renderToolbar()
+})
+addExternalCommandCallback("showToolbar", () => {
+  showToolbar()
+})
+addExternalCommandCallback("hideToolbar", () => {
+  hideToolbar()
+})
+sendEventToParent("toolbar_ready")

package/src/internal/dev_server/toolbar/util/fetching.js

@@ -6,7 +6,7 @@ const fetchPolyfill = async (...args) => {
 }
 
 const loadPolyfill = memoize(() =>
-  import("../../../browser-utils/fetchUsingXHR.js"),
+  import("../../../browser_utils/fetchUsingXHR.js"),
 )
 
 export const fetchUrl =

package/src/internal/executing/executeConcurrently.js

@@ -11,7 +11,7 @@ import {
   normalizeStructuredMetaMap,
   urlToMeta,
 } from "@jsenv/filesystem"
-import { Abort } from "@jsenv/abort"
+import { Abort, createCallbackListNotifiedOnce } from "@jsenv/abort"
 
 import { launchAndExecute } from "../executing/launchAndExecute.js"
 import { reportToCoverage } from "./coverage/reportToCoverage.js"
@@ -27,14 +27,14 @@ export const executeConcurrently = async (
     launchAndExecuteLogLevel,
 
     projectDirectoryUrl,
-    compileServerOrigin,
-    outDirectoryRelativeUrl,
+    compileServer,
 
     babelPluginMap,
 
     defaultMsAllocatedPerExecution = 30000,
     cooldownBetweenExecutions = 0,
     maxExecutionsInParallel = 1,
+    stopAfterExecute,
     completedExecutionLogMerging,
     completedExecutionLogAbbreviation,
 
@@ -138,6 +138,8 @@ export const executeConcurrently = async (
   let timedoutCount = 0
   let erroredCount = 0
   let completedCount = 0
+  const stopAfterAllExecutionCallbackList = createCallbackListNotifiedOnce()
+
   const executionsDone = await executeInParallel({
     multipleExecutionsOperation,
     maxExecutionsInParallel,
@@ -154,12 +156,7 @@ export const executeConcurrently = async (
         measurePerformance: false,
         collectPerformance: false,
         captureConsole: true,
-        // stopAfterExecute: true to ensure runtime is stopped once executed
-        // because we have what we wants: execution is completed and
-        // we have associated coverage and capturedConsole
-        // passsing false means all node process and browsers launched stays opened
-        // (can eventually be used for debug)
-        stopAfterExecute: true,
+        stopAfterExecute,
         stopAfterExecuteReason: "execution-done",
         allocatedMs: defaultMsAllocatedPerExecution,
         ...paramsFromStep,
@@ -206,11 +203,14 @@ export const executeConcurrently = async (
           coverageTempDirectoryUrl,
           runtimeParams: {
             projectDirectoryUrl,
-            compileServerOrigin,
-            outDirectoryRelativeUrl,
+            compileServerOrigin: compileServer.origin,
+            compileServerId: compileServer.id,
+            outDirectoryRelativeUrl: compileServer.outDirectoryRelativeUrl,
+
             collectCoverage: coverage,
             coverageIgnorePredicate,
             coverageForceIstanbul,
+            stopAfterAllExecutionCallbackList,
             ...executionParams.runtimeParams,
           },
           executeParams: {
@@ -282,6 +282,10 @@ export const executeConcurrently = async (
     },
   })
 
+  if (stopAfterExecute) {
+    stopAfterAllExecutionCallbackList.notify()
+  }
+
   const summaryCounts = reportToSummary(report)
 
   const summary = {

package/src/internal/executing/executePlan.js

@@ -26,6 +26,7 @@ export const executePlan = async (
 
     defaultMsAllocatedPerExecution,
     maxExecutionsInParallel,
+    stopAfterExecute,
     cooldownBetweenExecutions,
     completedExecutionLogMerging,
     completedExecutionLogAbbreviation,
@@ -146,8 +147,7 @@ export const executePlan = async (
       launchAndExecuteLogLevel,
 
       projectDirectoryUrl,
-      compileServerOrigin: compileServer.origin,
-      outDirectoryRelativeUrl: compileServer.outDirectoryRelativeUrl,
+      compileServer,
 
       // not sure we actually have to pass import params to executeConcurrently
       importResolutionMethod,
@@ -157,6 +157,7 @@ export const executePlan = async (
 
       defaultMsAllocatedPerExecution,
       maxExecutionsInParallel,
+      stopAfterExecute,
       cooldownBetweenExecutions,
       completedExecutionLogMerging,
       completedExecutionLogAbbreviation,

package/src/internal/generateGroupMap/one_runtime_compat.js

@@ -1,4 +1,4 @@
-import { findHighestVersion } from "../semantic-versioning/index.js"
+import { findHighestVersion } from "../semantic_versioning/index.js"
 
 export const createOneRuntimeCompat = ({
   runtimeName,

package/src/internal/generateGroupMap/runtime_compat_composition.js

@@ -1,4 +1,4 @@
-import { findHighestVersion } from "../semantic-versioning/index.js"
+import { findHighestVersion } from "../semantic_versioning/index.js"
 
 export const composeMinRuntimeVersions = (
   firstMinRuntimeVersions,

package/src/internal/generateGroupMap/runtime_support.js

@@ -1,4 +1,4 @@
-import { findLowestVersion } from "../semantic-versioning/findLowestVersion.js"
+import { findLowestVersion } from "../semantic_versioning/findLowestVersion.js"
 
 export const isNodePartOfSupportedRuntimes = (runtimeSupport) => {
   return Boolean(runtimeSupport.node)

package/src/internal/jsenvInternalFiles.js

@@ -14,32 +14,6 @@ export const jsenvNodeSystemFileInfo = {
   ),
 }
 
-export const jsenvBrowserSystemFileInfo = {
-  jsenvRelativeUrl: "./src/internal/browser-launcher/jsenv-browser-system.js",
-  jsenvBuildRelativeUrl: "./jsenv_browser_system.js",
-  jsenvBuildUrl: resolveUrl(
-    "./dist/jsenv_browser_system.js",
-    jsenvCoreDirectoryUrl,
-  ),
-}
-
-export const jsenvCompileProxyHtmlFileInfo = {
-  jsenvRelativeUrl: "./src/internal/browser-launcher/jsenv_compile_proxy.html",
-  url: resolveUrl(
-    "./src/internal/browser-launcher/jsenv_compile_proxy.html",
-    jsenvCoreDirectoryUrl,
-  ),
-}
-
-export const jsenvCompileProxyFileInfo = {
-  jsenvRelativeUrl: "./src/internal/browser-launcher/jsenv_compile_proxy.js",
-  jsenvBuildRelativeUrl: "./jsenv_compile_proxy.js",
-  jsenvBuildUrl: resolveUrl(
-    "./dist/jsenv_compile_proxy.js",
-    jsenvCoreDirectoryUrl,
-  ),
-}
-
 export const sourcemapMainFileInfo = {
   url: fileSystemPathToUrl(require.resolve("source-map/dist/source-map.js")),
 }

package/src/internal/jsenv_builds.js

@@ -0,0 +1,19 @@
+import { readFile } from "@jsenv/filesystem"
+
+import { jsenvCoreDirectoryUrl } from "./jsenvCoreDirectoryUrl.js"
+
+export const getJsenvBuildUrl = async (buildRelativeUrlWithoutHash) => {
+  try {
+    const manifest = await readFile(
+      new URL("./dist/manifest.json", jsenvCoreDirectoryUrl),
+      { as: "json" },
+    )
+    const buildRelativeUrl = manifest[buildRelativeUrlWithoutHash]
+    return new URL(buildRelativeUrl, jsenvCoreDirectoryUrl).href
+  } catch (e) {
+    if (e.code === "ENOENT") {
+      return null
+    }
+    throw e
+  }
+}