@jsenv/plugin-toolbar 0.0.1 → 0.1.1

package/dist/js/toolbar_injector.js

@@ -1,101 +1,12 @@
-const updateIframeOverflowOnParentWindow = () => {
-  if (!window.parent) {
-    // can happen while parent iframe reloads
-    return;
-  }
-  const aTooltipIsOpened = document.querySelector("[data-tooltip-visible]") || document.querySelector("[data-tooltip-auto-visible]");
-  const settingsAreOpened = document.querySelector("#settings[data-active]");
-  if (aTooltipIsOpened || settingsAreOpened) {
-    enableIframeOverflowOnParentWindow();
-  } else {
-    disableIframeOverflowOnParentWindow();
-  }
-};
-let iframeOverflowEnabled = false;
-const enableIframeOverflowOnParentWindow = () => {
-  if (iframeOverflowEnabled) return;
-  iframeOverflowEnabled = true;
-  const iframe = getToolbarIframe();
-  const transitionDuration = iframe.style.transitionDuration;
-  setStyles(iframe, {
-    "height": "100%",
-    "transition-duration": "0ms"
-  });
-  if (transitionDuration) {
-    setTimeout(() => {
-      setStyles(iframe, {
-        "transition-duration": transitionDuration
-      });
-    });
-  }
-};
-const disableIframeOverflowOnParentWindow = () => {
-  if (!iframeOverflowEnabled) return;
-  iframeOverflowEnabled = false;
-  const iframe = getToolbarIframe();
-  const transitionDuration = iframe.style.transitionDuration;
-  setStyles(iframe, {
-    "height": "40px",
-    "transition-duration": "0ms"
-  });
-  if (transitionDuration) {
-    setTimeout(() => {
-      setStyles(iframe, {
-        "transition-duration": transitionDuration
-      });
-    });
-  }
-};
-const getToolbarIframe = () => {
-  const iframes = Array.from(window.parent.document.querySelectorAll("iframe"));
-  return iframes.find(iframe => iframe.contentWindow === window);
-};
-const forceHideElement = element => {
-  element.setAttribute("data-force-hide", "");
-};
-const removeForceHideElement = element => {
-  element.removeAttribute("data-force-hide");
-};
-const setStyles = (element, styles) => {
-  const elementStyle = element.style;
-  const restoreStyles = Object.keys(styles).map(styleName => {
-    let restore;
-    if (styleName in elementStyle) {
-      const currentStyle = elementStyle[styleName];
-      restore = () => {
-        elementStyle[styleName] = currentStyle;
-      };
-    } else {
-      restore = () => {
-        delete elementStyle[styleName];
-      };
-    }
-    elementStyle[styleName] = styles[styleName];
-    return restore;
-  });
-  return () => {
-    restoreStyles.forEach(restore => restore());
-  };
-};
-const setAttributes = (element, attributes) => {
-  Object.keys(attributes).forEach(name => {
-    element.setAttribute(name, attributes[name]);
-  });
-};
-const toolbarSectionIsActive = element => {
-  return element.hasAttribute("data-active");
-};
-const activateToolbarSection = element => {
-  element.setAttribute("data-active", "");
-};
-const deactivateToolbarSection = element => {
-  element.removeAttribute("data-active");
-};
-
 const jsenvLogoSvgUrl = new URL("../other/jsenv_logo.svg", import.meta.url);
 const injectToolbar = async ({
   toolbarUrl,
-  logs = false
+  logLevel,
+  theme,
+  opened,
+  autoreload,
+  animationsEnabled,
+  notificationsEnabled
 }) => {
   if (document.readyState !== "complete") {
     await new Promise(resolve => {
@@ -113,13 +24,11 @@ const injectToolbar = async ({
   });
   const placeholder = getToolbarPlaceholder();
   const iframe = document.createElement("iframe");
-  setAttributes(iframe, {
-    tabindex: -1,
-    // sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",
-    // allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr",
-    allowtransparency: true
-  });
-  setStyles(iframe, {
+  iframe.setAttribute("tabindex", -1);
+  iframe.setAttribute("allowtransparency", true);
+  // sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",
+  // allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr",
+  Object.assign(iframe.style, {
     "position": "fixed",
     "zIndex": 1000,
     "bottom": 0,
@@ -128,29 +37,56 @@ const injectToolbar = async ({
     "height": 0,
     /* ensure toolbar children are not focusable when hidden */
     "visibility": "hidden",
-    "transition-duration": "300ms",
+    "transition-duration": "0",
     "transition-property": "height, visibility",
     "border": "none"
   });
   const iframeLoadedPromise = iframeToLoadedPromise(iframe);
+  const toolbarUrlObject = new URL(toolbarUrl, window.location.href);
+  toolbarUrlObject.searchParams.set("logLevel", logLevel);
+  toolbarUrlObject.searchParams.set("theme", theme);
+  if (opened) {
+    toolbarUrlObject.searchParams.set("opened", "");
+  }
+  if (autoreload) {
+    toolbarUrlObject.searchParams.set("autoreload", "");
+  }
+  if (animationsEnabled) {
+    toolbarUrlObject.searchParams.set("animationsEnabled", "");
+  }
+  if (notificationsEnabled) {
+    toolbarUrlObject.searchParams.set("notificationsEnabled", "");
+  }
   // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
-  iframe.setAttribute("src", toolbarUrl);
+  iframe.setAttribute("src", toolbarUrlObject.href);
+  iframe.name = "jsenv toolbar";
   placeholder.parentNode.replaceChild(iframe, placeholder);
-  addToolbarEventCallback(iframe, "toolbar_ready", () => {
-    sendCommandToToolbar(iframe, "renderToolbar", {
-      logs
+  const listenToolbarStateChange = callback => {
+    return addToolbarEventCallback(iframe, "toolbar_state_change", callback);
+  };
+  const cleanupInitOnReady = addToolbarEventCallback(iframe, "toolbar_ready", () => {
+    cleanupInitOnReady();
+    sendCommandToToolbar(iframe, "initToolbar");
+    setTimeout(() => {
+      listenToolbarStateChange(({
+        animationsEnabled
+      }) => {
+        if (animationsEnabled) {
+          iframe.style.transitionDuration = "300ms";
+        } else {
+          iframe.style.transitionDuration = "0s";
+        }
+      });
     });
   });
-  await iframeLoadedPromise;
-  iframe.removeAttribute("tabindex");
   const div = document.createElement("div");
   div.innerHTML = `
-<div id="jsenv-toolbar-trigger">
-  <svg id="jsenv-toolbar-trigger-icon">
+<div id="jsenv_toolbar_trigger" style="display:none">
+  <svg id="jsenv_toolbar_trigger_icon">
     <use xlink:href="${jsenvLogoSvgUrl}#jsenv_logo"></use>
   </svg>
   <style>
-    #jsenv-toolbar-trigger {
+    #jsenv_toolbar_trigger {
       display: block;
       overflow: hidden;
       position: fixed;
@@ -170,22 +106,22 @@ const injectToolbar = async ({
       transition: 600ms;
     }
 
-    #jsenv-toolbar-trigger:hover {
+    #jsenv_toolbar_trigger:hover {
       cursor: pointer;
     }
 
-    #jsenv-toolbar-trigger[data-expanded] {
+    #jsenv_toolbar_trigger[data-expanded] {
       bottom: 0;
     }
 
-    #jsenv-toolbar-trigger-icon {
+    #jsenv_toolbar_trigger_icon {
       width: 35px;
       height: 35px;
       opacity: 0;
       transition: 600ms;
     }
 
-    #jsenv-toolbar-trigger[data-expanded] #jsenv-toolbar-trigger-icon {
+    #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {
       opacity: 1;
     }
   </style>
@@ -211,7 +147,7 @@ const injectToolbar = async ({
     collapseToolbarTrigger();
   };
   toolbarTrigger.onclick = () => {
-    sendCommandToToolbar(iframe, "showToolbar");
+    sendCommandToToolbar(iframe, "openToolbar");
   };
   const showToolbarTrigger = () => {
     toolbarTrigger.style.display = "block";
@@ -225,14 +161,17 @@ const injectToolbar = async ({
   const collapseToolbarTrigger = () => {
     toolbarTrigger.removeAttribute("data-expanded", "");
   };
-  hideToolbarTrigger();
-  addToolbarEventCallback(iframe, "toolbar-visibility-change", visible => {
-    if (visible) {
+  listenToolbarStateChange(({
+    opened
+  }) => {
+    if (opened) {
       hideToolbarTrigger();
     } else {
       showToolbarTrigger();
     }
   });
+  await iframeLoadedPromise;
+  iframe.removeAttribute("tabindex");
   return iframe;
 };
 const addToolbarEventCallback = (iframe, eventName, callback) => {
@@ -297,4 +236,4 @@ const iframeToLoadedPromise = iframe => {
   });
 };
 
-export { activateToolbarSection as a, deactivateToolbarSection as d, forceHideElement as f, getToolbarIframe as g, injectToolbar, removeForceHideElement as r, setStyles as s, toolbarSectionIsActive as t, updateIframeOverflowOnParentWindow as u };
+export { injectToolbar };

package/dist/jsenv_plugin_toolbar.js

@@ -1,7 +1,12 @@
 import { parseHtmlString, injectScriptNodeAsEarlyAsPossible, createHtmlNode, stringifyHtmlAst } from "@jsenv/ast";
 
 const jsenvPluginToolbar = ({
-  logs = false
+  logLevel = "warn",
+  theme = "dark",
+  opened = false,
+  autoreload = true,
+  animationsEnabled = true,
+  notificationsEnabled = true
 } = {}) => {
   const toolbarInjectorClientFileUrl = new URL("./js/toolbar_injector.js", import.meta.url).href;
   const toolbarHtmlClientFileUrl = new URL("./html/toolbar.html", import.meta.url).href;
@@ -9,22 +14,18 @@ const jsenvPluginToolbar = ({
     name: "jsenv:toolbar",
     appliesDuring: "dev",
     transformUrlContent: {
-      html: ({
-        url,
-        content
-      }, {
-        referenceUtils
-      }) => {
-        if (url === toolbarHtmlClientFileUrl) {
+      html: (urlInfo, context) => {
+        if (urlInfo.url.startsWith(toolbarHtmlClientFileUrl)) {
+          urlInfo.data.isJsenvToolbar = true;
           return null;
         }
-        const htmlAst = parseHtmlString(content);
-        const [toolbarInjectorReference] = referenceUtils.inject({
+        const htmlAst = parseHtmlString(urlInfo.content);
+        const [toolbarInjectorReference] = context.referenceUtils.inject({
           type: "js_import",
           expectedType: "js_module",
           specifier: toolbarInjectorClientFileUrl
         });
-        const [toolbarClientFileReference] = referenceUtils.inject({
+        const [toolbarClientFileReference] = context.referenceUtils.inject({
           type: "iframe_src",
           expectedType: "html",
           specifier: toolbarHtmlClientFileUrl
@@ -36,7 +37,12 @@ const jsenvPluginToolbar = ({
 import { injectToolbar } from ${toolbarInjectorReference.generatedSpecifier}
 injectToolbar(${JSON.stringify({
             toolbarUrl: toolbarClientFileReference.generatedSpecifier,
-            logs
+            logLevel,
+            theme,
+            opened,
+            autoreload,
+            animationsEnabled,
+            notificationsEnabled
           }, null, "  ")})`
         }), "jsenv:toolbar");
         const htmlModified = stringifyHtmlAst(htmlAst);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/plugin-toolbar",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -21,10 +21,17 @@
     "./*": "./*"
   },
   "main": "./src/main.js",
+  "files": [
+    "/dist/",
+    "/src/"
+  ],
   "dependencies": {
-    "@jsenv/ast": "1.4.7"
+    "@jsenv/ast": "1.4.8",
+    "@preact/signals": "1.1.2"
   },
   "scripts": {
-    "build": "node ./scripts/build.mjs"
+    "eslint": "npx eslint . --ext=.js,.mjs,.cjs,.html",
+    "build": "node ./scripts/build.mjs",
+    "prepublishOnly": "npm run build"
   }
 }

package/src/client/core/animation_actions.js

@@ -0,0 +1,8 @@
+import { animationsEnabledSignal } from "./animation_signals.js"
+
+export const enableAnimations = () => {
+  animationsEnabledSignal.value = true
+}
+export const disableAnimations = () => {
+  animationsEnabledSignal.value = false
+}

package/src/client/core/animation_effects.js

@@ -0,0 +1,12 @@
+import { effect } from "@preact/signals"
+
+import { animationsEnabledSignal } from "./animation_signals.js"
+
+effect(() => {
+  const animationsEnabled = animationsEnabledSignal.value
+  if (animationsEnabled) {
+    document.documentElement.removeAttribute("data-animation-disabled")
+  } else {
+    document.documentElement.setAttribute("data-animation-disabled", "")
+  }
+})

package/src/client/core/animation_signals.js

@@ -0,0 +1,12 @@
+import { signal } from "@preact/signals"
+
+import { paramsFromParentWindow } from "./parent_window_context.js"
+import { stateFromLocalStorage } from "./toolbar_state_context.js"
+
+export const animationsEnabledSignal = signal(
+  typeof stateFromLocalStorage.animationsEnabled === "boolean"
+    ? stateFromLocalStorage.animationsEnabled
+    : typeof paramsFromParentWindow.animationsEnabled === "boolean"
+    ? paramsFromParentWindow.animationsEnabled
+    : false,
+)

package/src/client/core/changes_actions.js

@@ -0,0 +1,9 @@
+import { changesTooltipOpenedSignal } from "./changes_signals.js"
+
+export const openChangesToolip = () => {
+  changesTooltipOpenedSignal.value = true
+}
+
+export const closeChangesToolip = () => {
+  changesTooltipOpenedSignal.value = false
+}

package/src/client/core/changes_signals.js

@@ -0,0 +1,3 @@
+import { signal } from "@preact/signals"
+
+export const changesTooltipOpenedSignal = signal(false)

package/src/client/core/execution_actions.js

@@ -0,0 +1,50 @@
+import { executionTooltipOpenedSignal } from "./execution_signals.js"
+import { notify } from "./notification_actions.js"
+
+export const openExecutionTooltip = () => {
+  executionTooltipOpenedSignal.value = true
+}
+
+export const closeExecutionTooltip = () => {
+  executionTooltipOpenedSignal.value = false
+}
+
+export const notifyExecutionResult = (execution, previousExecution) => {
+  const executedFileRelativeUrl = window.location.href
+  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 getFaviconHref = () => {
+  const link = document.querySelector('link[rel="icon"]')
+  return link ? link.href : undefined
+}

package/src/client/core/execution_effects.js

@@ -0,0 +1,22 @@
+import { effect } from "@preact/signals"
+
+import {
+  executionSignal,
+  previousExecutionSignal,
+} from "./execution_signals.js"
+import { notifyExecutionResult } from "./execution_actions.js"
+
+effect(() => {
+  const execution = executionSignal.value
+  if (execution) {
+    sessionStorage.setItem(window.location.href, JSON.stringify(execution))
+  }
+})
+
+effect(() => {
+  const execution = executionSignal.value
+  const previousExecution = previousExecutionSignal.value
+  if (execution) {
+    notifyExecutionResult(execution, previousExecution)
+  }
+})

package/src/client/core/execution_signals.js

@@ -0,0 +1,19 @@
+import { signal } from "@preact/signals"
+
+export const executionTooltipOpenedSignal = signal(false)
+
+export const executionSignal = signal({
+  status: "running",
+})
+
+export const previousExecutionSignal = signal(
+  sessionStorage.hasOwnProperty(window.location.href)
+    ? JSON.parse(sessionStorage.getItem(window.location.href))
+    : null,
+)
+
+window.parent.__supervisor__
+  .getDocumentExecutionResult()
+  .then(({ status, startTime, endTime }) => {
+    executionSignal.value = { status, startTime, endTime }
+  })

package/src/client/core/notification_actions.js

@@ -0,0 +1,71 @@
+import { notificationAPIDetected } from "./notification_context.js"
+import {
+  notificationsEnabledSignal,
+  notificationPermissionSignal,
+} from "./notification_signals.js"
+
+export const enableNotifications = () => {
+  notificationsEnabledSignal.value = true
+}
+
+export const disableNotifications = () => {
+  notificationsEnabledSignal.value = false
+}
+
+const arrayOfOpenedNotifications = []
+export const notify = notificationAPIDetected
+  ? async (
+      title,
+      { clickToFocus = false, clickToClose = false, ...options } = {},
+    ) => {
+      const notificationsEnabled = notificationsEnabledSignal.value
+      if (!notificationsEnabled) {
+        return null
+      }
+      if (Notification.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
+    }
+  : () => {}
+
+export const closeAllNotifications = () => {
+  // slice because arrayOfOpenedNotifications can be mutated while looping
+  arrayOfOpenedNotifications.slice().forEach((notification) => {
+    notification.close()
+  })
+}
+
+let requestPromise
+export const requestPermission = notificationAPIDetected
+  ? async () => {
+      if (requestPromise) {
+        await requestPromise
+        return
+      }
+      requestPromise = Notification.requestPermission()
+      await requestPromise
+      requestPromise = undefined
+      notificationPermissionSignal.value = Notification.permission
+    }
+  : () => Promise.resolve()

package/src/client/core/notification_context.js

@@ -0,0 +1 @@
+export const notificationAPIDetected = typeof window.Notification === "function"

package/src/client/core/notification_effects.js

@@ -0,0 +1,11 @@
+import { effect } from "@preact/signals"
+
+import { notificationsEnabledSignal } from "./notification_signals.js"
+import { closeAllNotifications } from "./notification_actions.js"
+
+effect(() => {
+  const notificationsEnabled = notificationsEnabledSignal.value
+  if (!notificationsEnabled) {
+    closeAllNotifications()
+  }
+})

package/src/client/core/notification_signals.js

@@ -0,0 +1,13 @@
+import { signal } from "@preact/signals"
+
+import { paramsFromParentWindow } from "./parent_window_context.js"
+import { stateFromLocalStorage } from "./toolbar_state_context.js"
+
+export const notificationsEnabledSignal = signal(
+  typeof stateFromLocalStorage.notificationsEnabled === "boolean"
+    ? stateFromLocalStorage.notificationsEnabled
+    : typeof paramsFromParentWindow.notificationsEnabled === "boolean"
+    ? paramsFromParentWindow.notificationsEnabled
+    : false,
+)
+export const notificationPermissionSignal = signal(Notification.permission)

package/src/client/{communication/parent_window_communication.js → core/parent_window_actions.js}

@@ -1,3 +1,5 @@
+import { parentWindowReloader } from "./parent_window_context.js"
+
 export const sendEventToParent = (name, data) => {
   window.parent.postMessage(
     {
@@ -31,3 +33,11 @@ export const addExternalCommandCallback = (command, callback) => {
     window.removeEventListener("message", messageEventCallback)
   }
 }
+
+export const enableAutoreload = () => {
+  parentWindowReloader.autoreload.enable()
+}
+
+export const disableAutoreload = () => {
+  parentWindowReloader.autoreload.disable()
+}

package/src/client/core/parent_window_context.js

@@ -0,0 +1,7 @@
+export const paramsFromParentWindow = {}
+const searchParams = new URLSearchParams(window.location.search)
+searchParams.forEach((value, key) => {
+  paramsFromParentWindow[key] = value === "" ? true : value
+})
+
+export const parentWindowReloader = window.parent.__reloader__

package/src/client/core/parent_window_effects.js

@@ -0,0 +1,20 @@
+import {
+  addExternalCommandCallback,
+  sendEventToParent,
+} from "./parent_window_actions.js"
+import { animationsEnabledSignal } from "./animation_signals.js"
+import { initToolbarUI } from "../ui/toolbar_ui.js"
+
+addExternalCommandCallback("initToolbar", () => {
+  // for the first render, force disable animations
+  const animationsEnabled = animationsEnabledSignal.value
+  if (animationsEnabled) {
+    animationsEnabledSignal.value = false
+  }
+  initToolbarUI()
+  if (animationsEnabled) {
+    animationsEnabledSignal.value = true
+  }
+})
+
+sendEventToParent("toolbar_ready")

package/src/client/core/parent_window_signals.js

@@ -0,0 +1,34 @@
+import { signal } from "@preact/signals"
+
+import {
+  paramsFromParentWindow,
+  parentWindowReloader,
+} from "./parent_window_context.js"
+
+export const autoreloadEnabledSignal = signal(false)
+export const reloaderStatusSignal = signal("idle")
+export const changesSignal = signal(0)
+
+if (parentWindowReloader) {
+  if (
+    !parentWindowReloader.autoreload.enabled &&
+    paramsFromParentWindow.autoreload
+  ) {
+    autoreloadEnabledSignal.value = true
+  } else {
+    autoreloadEnabledSignal.value = parentWindowReloader.autoreload.enabled
+  }
+  parentWindowReloader.autoreload.onchange = () => {
+    autoreloadEnabledSignal.value = parentWindowReloader.autoreload.enabled
+  }
+  reloaderStatusSignal.value = parentWindowReloader.status.value
+  const onchange = parentWindowReloader.status.onchange
+  parentWindowReloader.status.onchange = () => {
+    onchange()
+    reloaderStatusSignal.value = parentWindowReloader.status.value
+  }
+  changesSignal.value = parentWindowReloader.changes.value
+  parentWindowReloader.changes.onchange = () => {
+    changesSignal.value = [...parentWindowReloader.changes.value]
+  }
+}