@jsenv/core 24.1.0-alpha.0 → 24.3.1

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

@@ -0,0 +1,152 @@
+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")
+  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 = (
+  executedFileRelativeUrl,
+  execution,
+  previousExecution,
+) => {
+  const notificationEnabled = getNotificationPreference()
+  if (!notificationEnabled) return
+
+  const notificationOptions = {
+    lang: "en",
+    icon: getFaviconHref(),
+    clickToFocus: true,
+    clickToClose: true,
+  }
+
+  if (execution.status === "errored") {
+    if (previousExecution) {
+      if (previousExecution.status === "completed") {
+        notify("Broken", {
+          ...notificationOptions,
+          body: `${executedFileRelativeUrl} execution now failing.`,
+        })
+      } else {
+        notify("Still failing", {
+          ...notificationOptions,
+          body: `${executedFileRelativeUrl} execution still failing.`,
+        })
+      }
+    } else {
+      notify("Failing", {
+        ...notificationOptions,
+        body: `${executedFileRelativeUrl} execution failed.`,
+      })
+    }
+  } else if (previousExecution && previousExecution.status === "errored") {
+    notify("Fixed", {
+      ...notificationOptions,
+      body: `${executedFileRelativeUrl} execution fixed.`,
+    })
+  }
+}
+
+const getNotificationPreference = () =>
+  notificationPreference.has() ? notificationPreference.get() : true
+
+const setNotificationPreference = (value) => notificationPreference.set(value)
+
+const getFaviconHref = () => {
+  const link = document.querySelector('link[rel="icon"]')
+  return link ? link.href : undefined
+}
+
+let permission = "default"
+
+const notify = notificationAvailable
+  ? async (
+      title,
+      { clickToFocus = false, clickToClose = false, ...options } = {},
+    ) => {
+      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
+    }
+  : () => {}
+
+let requestPromise
+const requestPermission = notificationAvailable
+  ? async () => {
+      if (requestPromise) return requestPromise
+      requestPromise = Notification.requestPermission()
+      permission = await requestPromise
+      requestPromise = undefined
+      return permission
+    }
+  : () => Promise.resolve("default")

package/src/internal/{toolbar → 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"
@@ -130,9 +135,9 @@
               </svg>
             </button>
           </div>
-          <div data-when="eventsource:failed">
+          <div data-when="eventsource:disconnected">
             <div class="tooltip">
-              Cannot connect to server
+              Disconnected from server
               <br />
               <div class="tooltipAction">
                 <a href="javascript:void(0);">
@@ -147,7 +152,7 @@
                       d="M16 9v4.66l-3.5 3.51V19h-1v-1.83L8 13.65V9h8m0-6h-2v4h-4V3H8v4h-.01C6.9 6.99 6 7.89 6 8.98v5.52L9.5 18v3h5v-3l3.5-3.51V9c0-1.1-.9-2-2-2V3z"
                     />
                   </svg>
-                  retry
+                  connect
                 </a>
               </div>
             </div>
@@ -155,7 +160,7 @@
               <svg>
                 <circle
                   class="eventsource-circle"
-                  data-variant="failed"
+                  data-variant="off"
                   cx="20"
                   cy="20"
                   r="5"
@@ -218,39 +223,6 @@
               </svg>
             </button>
           </div>
-          <div data-when="eventsource:disabled">
-            <div class="tooltip">
-              Disconnected from server
-              <br />
-              <div class="tooltipAction">
-                <a href="javascript:void(0);">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    id="powerIconSvg"
-                    class="tooltipIcon"
-                  >
-                    <path d="M0 0h24v24H0V0z" fill="none" />
-                    <path
-                      d="M16 9v4.66l-3.5 3.51V19h-1v-1.83L8 13.65V9h8m0-6h-2v4h-4V3H8v4h-.01C6.9 6.99 6 7.89 6 8.98v5.52L9.5 18v3h5v-3l3.5-3.51V9c0-1.1-.9-2-2-2V3z"
-                    />
-                  </svg>
-                  connect
-                </a>
-              </div>
-            </div>
-            <button>
-              <svg>
-                <circle
-                  class="eventsource-circle"
-                  data-variant="off"
-                  cx="20"
-                  cy="20"
-                  r="5"
-                />
-              </svg>
-            </button>
-          </div>
         </section>
 
         <section id="settings" data-responsive-toolbar-element>
@@ -284,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"
@@ -307,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">
@@ -559,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"
@@ -584,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/{toolbar → dev_server/toolbar}/toolbar.injector.js

@@ -1,94 +1,9 @@
-import { fetchExploringJson } from "@jsenv/core/src/internal/exploring/fetchExploringJson.js"
+import { fetchExploringJson } from "@jsenv/core/src/internal/dev_server/exploring/fetchExploringJson.js"
 import { setAttributes, setStyles } from "./util/dom.js"
 
-/*
-We must connect to livereload server asap so that if a file is modified
-while page is loading we are notified of it.
-
-Otherwise it's possible that a file is loaded and used by browser then its modified before
-livereload connection is established.
-
-When toolbar is loaded it will open an other connection to server sent events and close this one.
-*/
-const connectLivereload = () => {
-  const { EventSource } = window
-  if (typeof EventSource !== "function") {
-    return () => {}
-  }
-
-  const getLivereloadPreference = () => {
-    return localStorage.hasOwnProperty("livereload")
-      ? JSON.parse(localStorage.getItem("livereload"))
-      : true
-  }
-
-  const url = document.location.href
-  let isOpen = false
-  let lastEventId
-  const latestChangeMap = {}
-
-  const events = {
-    "file-modified": ({ data }) => {
-      latestChangeMap[data] = "modified"
-      if (getLivereloadPreference()) {
-        window.location.reload(true)
-      }
-    },
-    "file-removed": ({ data }) => {
-      latestChangeMap[data] = "removed"
-      if (getLivereloadPreference()) {
-        window.location.reload(true)
-      }
-    },
-    "file-added": ({ data }) => {
-      latestChangeMap[data] = "added"
-      if (getLivereloadPreference()) {
-        window.location.reload(true)
-      }
-    },
-  }
-
-  const eventSourceOrigin = new URL(url).origin
-  const eventSource = new EventSource(url, {
-    withCredentials: true,
-  })
-
-  const disconnect = () => {
-    eventSource.close()
-  }
-
-  eventSource.onopen = () => {
-    isOpen = true
-  }
-
-  eventSource.onerror = (errorEvent) => {
-    if (errorEvent.target.readyState === EventSource.CLOSED) {
-      isOpen = false
-    }
-  }
-
-  Object.keys(events).forEach((eventName) => {
-    eventSource.addEventListener(eventName, (e) => {
-      if (e.origin === eventSourceOrigin) {
-        if (e.lastEventId) {
-          lastEventId = e.lastEventId
-        }
-        events[eventName](e)
-      }
-    })
-  })
-
-  return () => {
-    return {
-      isOpen,
-      latestChangeMap,
-      lastEventId,
-      disconnect,
-    }
-  }
-}
-// eslint-disable-next-line camelcase
-window.__jsenv_eventsource__ = connectLivereload()
+// 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) => {
@@ -129,7 +44,7 @@ const injectToolbar = async () => {
   })
   const iframeLoadedPromise = iframeToLoadedPromise(iframe)
   const jsenvToolbarHtmlServerUrl = resolveUrl(
-    "./src/internal/toolbar/toolbar.html",
+    TOOLBAR_BUILD_RELATIVE_URL,
     jsenvDirectoryServerUrl,
   )
   // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
@@ -139,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/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 {
@@ -237,7 +123,7 @@ const injectToolbar = async () => {
     collapseToolbarTrigger()
   }
   toolbarTrigger.onclick = () => {
-    window.__jsenv__.toolbar.show()
+    sendCommandToToolbar(iframe, "showToolbar")
   }
 
   const showToolbarTrigger = () => {
@@ -255,13 +141,54 @@ 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()
+    }
+  })
+  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) {
@@ -277,8 +204,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/{toolbar → 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,54 @@ 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
+addExternalCommandCallback("renderToolbar", () => {
+  renderToolbar()
+})
+addExternalCommandCallback("showToolbar", () => {
+  showToolbar()
+})
+addExternalCommandCallback("hideToolbar", () => {
+  hideToolbar()
+})
+
+window.toolbar = {
+  render: renderToolbar,
+  show: showToolbar,
+  hide: () => hideToolbar(),
+}

package/src/internal/{toolbar → dev_server/toolbar}/util/fetching.js

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