@jsenv/plugin-toolbar 0.1.13 → 0.1.15

package/dist/html/toolbar.html

@@ -1,4 +1,6 @@
-<!DOCTYPE html><html><head>
+<!DOCTYPE html>
+<html>
+  <head>
     <title>Jsenv toolbar</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf-8">
@@ -311,6 +313,5 @@
       </svg>
     </div>
     <script type="module" src="../js/toolbar_core.js" data-jsenv-force-inline="" no-html-supervisor=""></script>
-  
-
-</body></html>
+  </body>
+</html>

package/dist/jsenv_plugin_toolbar.js

@@ -1,4 +1,4 @@
-import { parseHtmlString, injectScriptNodeAsEarlyAsPossible, createHtmlNode, stringifyHtmlAst } from "@jsenv/ast";
+import { parseHtmlString, injectHtmlNodeAsEarlyAsPossible, createHtmlNode, stringifyHtmlAst } from "@jsenv/ast";
 
 const jsenvPluginToolbar = ({
   logLevel = "warn",
@@ -30,20 +30,19 @@ const jsenvPluginToolbar = ({
           expectedType: "html",
           specifier: toolbarHtmlClientFileUrl
         });
-        injectScriptNodeAsEarlyAsPossible(htmlAst, createHtmlNode({
+        injectHtmlNodeAsEarlyAsPossible(htmlAst, createHtmlNode({
           tagName: "script",
           type: "module",
-          textContent: `
-import { injectToolbar } from ${toolbarInjectorReference.generatedSpecifier}
-injectToolbar(${JSON.stringify({
-            toolbarUrl: toolbarClientFileReference.generatedSpecifier,
+          textContent: generateCodeToInjectToolbar({
+            toolbarInjectorReference,
+            toolbarClientFileReference,
             logLevel,
             theme,
             opened,
             autoreload,
             animationsEnabled,
             notificationsEnabled
-          }, null, "  ")})`
+          })
         }), "jsenv:toolbar");
         const htmlModified = stringifyHtmlAst(htmlAst);
         return {
@@ -53,5 +52,29 @@ injectToolbar(${JSON.stringify({
     }
   };
 };
+const generateCodeToInjectToolbar = ({
+  toolbarInjectorReference,
+  toolbarClientFileReference,
+  logLevel,
+  theme,
+  opened,
+  autoreload,
+  animationsEnabled,
+  notificationsEnabled
+}) => {
+  const from = toolbarInjectorReference.generatedSpecifier;
+  const paramsSource = JSON.stringify({
+    toolbarUrl: toolbarClientFileReference.generatedSpecifier,
+    logLevel,
+    theme,
+    opened,
+    autoreload,
+    animationsEnabled,
+    notificationsEnabled
+  }, null, "  ");
+  return `import { injectToolbar } from ${from}
+
+injectToolbar(${paramsSource});`;
+};
 
 export { jsenvPluginToolbar };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@jsenv/plugin-toolbar",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/jsenv/jsenv-core",
+    "url": "https://github.com/jsenv/core",
     "directory": "packages/jsenv-plugin-toolbar"
   },
   "publishConfig": {
@@ -26,7 +26,7 @@
     "/src/"
   ],
   "dependencies": {
-    "@jsenv/ast": "3.0.6",
+    "@jsenv/ast": "3.0.8",
     "@preact/signals": "1.1.3"
   },
   "scripts": {

package/src/client/core/animation_actions.js

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

package/src/client/core/animation_effects.js

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

package/src/client/core/animation_signals.js

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

package/src/client/core/changes_actions.js

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

package/src/client/core/changes_signals.js

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

package/src/client/core/execution_actions.js

@@ -1,50 +1,50 @@
-import { executionTooltipOpenedSignal } from "./execution_signals.js"
-import { notify } from "./notification_actions.js"
+import { executionTooltipOpenedSignal } from "./execution_signals.js";
+import { notify } from "./notification_actions.js";
 
 export const openExecutionTooltip = () => {
-  executionTooltipOpenedSignal.value = true
-}
+  executionTooltipOpenedSignal.value = true;
+};
 
 export const closeExecutionTooltip = () => {
-  executionTooltipOpenedSignal.value = false
-}
+  executionTooltipOpenedSignal.value = false;
+};
 
 export const notifyExecutionResult = (execution, previousExecution) => {
-  const executedFileRelativeUrl = window.location.href
+  const executedFileRelativeUrl = window.location.href;
   const notificationOptions = {
     lang: "en",
     icon: getFaviconHref(),
     clickToFocus: true,
     clickToClose: true,
-  }
+  };
   if (execution.status === "failed") {
     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 === "failed") {
     notify("Fixed", {
       ...notificationOptions,
       body: `${executedFileRelativeUrl} execution fixed.`,
-    })
+    });
   }
-}
+};
 
 const getFaviconHref = () => {
-  const link = document.querySelector('link[rel="icon"]')
-  return link ? link.href : undefined
-}
+  const link = document.querySelector('link[rel="icon"]');
+  return link ? link.href : undefined;
+};

package/src/client/core/execution_effects.js

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

package/src/client/core/execution_signals.js

@@ -1,19 +1,19 @@
-import { signal } from "@preact/signals"
+import { signal } from "@preact/signals";
 
-export const executionTooltipOpenedSignal = signal(false)
+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 }
-  })
+    executionSignal.value = { status, startTime, endTime };
+  });

package/src/client/core/notification_actions.js

@@ -1,32 +1,32 @@
-import { notificationAPIDetected } from "./notification_context.js"
+import { notificationAPIDetected } from "./notification_context.js";
 import {
   notificationsEnabledSignal,
   notificationPermissionSignal,
-} from "./notification_signals.js"
+} from "./notification_signals.js";
 
 export const enableNotifications = () => {
-  notificationsEnabledSignal.value = true
-}
+  notificationsEnabledSignal.value = true;
+};
 
 export const disableNotifications = () => {
-  notificationsEnabledSignal.value = false
-}
+  notificationsEnabledSignal.value = false;
+};
 
-const arrayOfOpenedNotifications = []
+const arrayOfOpenedNotifications = [];
 export const notify = notificationAPIDetected
   ? async (
       title,
       { clickToFocus = false, clickToClose = false, ...options } = {},
     ) => {
-      const notificationsEnabled = notificationsEnabledSignal.value
+      const notificationsEnabled = notificationsEnabledSignal.value;
       if (!notificationsEnabled) {
-        return null
+        return null;
       }
       if (Notification.permission !== "granted") {
-        return null
+        return null;
       }
-      const notification = new Notification(title, options)
-      arrayOfOpenedNotifications.push(notification)
+      const notification = new Notification(title, options);
+      arrayOfOpenedNotifications.push(notification);
       notification.onclick = () => {
         // but if the user navigated inbetween
         // focusing window will show something else
@@ -36,36 +36,36 @@ export const notify = notificationAPIDetected
         // 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()
-      }
+        if (clickToFocus) window.focus();
+        if (clickToClose) notification.close();
+      };
       notification.onclose = () => {
-        const index = arrayOfOpenedNotifications.indexOf(notification)
+        const index = arrayOfOpenedNotifications.indexOf(notification);
         if (index > -1) {
-          arrayOfOpenedNotifications.splice(index, 1)
+          arrayOfOpenedNotifications.splice(index, 1);
         }
-      }
-      return notification
+      };
+      return notification;
     }
-  : () => {}
+  : () => {};
 
 export const closeAllNotifications = () => {
   // slice because arrayOfOpenedNotifications can be mutated while looping
   arrayOfOpenedNotifications.slice().forEach((notification) => {
-    notification.close()
-  })
-}
+    notification.close();
+  });
+};
 
-let requestPromise
+let requestPromise;
 export const requestPermission = notificationAPIDetected
   ? async () => {
       if (requestPromise) {
-        await requestPromise
-        return
+        await requestPromise;
+        return;
       }
-      requestPromise = Notification.requestPermission()
-      await requestPromise
-      requestPromise = undefined
-      notificationPermissionSignal.value = Notification.permission
+      requestPromise = Notification.requestPermission();
+      await requestPromise;
+      requestPromise = undefined;
+      notificationPermissionSignal.value = Notification.permission;
     }
-  : () => Promise.resolve()
+  : () => Promise.resolve();

package/src/client/core/notification_context.js

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

package/src/client/core/notification_effects.js

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

package/src/client/core/notification_signals.js

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

package/src/client/core/parent_window_actions.js

@@ -1,4 +1,4 @@
-import { parentWindowReloader } from "./parent_window_context.js"
+import { parentWindowReloader } from "./parent_window_context.js";
 
 export const sendEventToParent = (name, data) => {
   window.parent.postMessage(
@@ -9,35 +9,35 @@ export const sendEventToParent = (name, data) => {
       },
     },
     "*",
-  )
-}
+  );
+};
 
 export const addExternalCommandCallback = (command, callback) => {
   const messageEventCallback = (messageEvent) => {
-    const { data } = messageEvent
+    const { data } = messageEvent;
     if (typeof data !== "object") {
-      return
+      return;
     }
-    const { __jsenv__ } = data
+    const { __jsenv__ } = data;
     if (!__jsenv__) {
-      return
+      return;
     }
     if (__jsenv__.command !== command) {
-      return
+      return;
     }
-    callback(...__jsenv__.args)
-  }
+    callback(...__jsenv__.args);
+  };
 
-  window.addEventListener("message", messageEventCallback)
+  window.addEventListener("message", messageEventCallback);
   return () => {
-    window.removeEventListener("message", messageEventCallback)
-  }
-}
+    window.removeEventListener("message", messageEventCallback);
+  };
+};
 
 export const enableAutoreload = () => {
-  parentWindowReloader.autoreload.enable()
-}
+  parentWindowReloader.autoreload.enable();
+};
 
 export const disableAutoreload = () => {
-  parentWindowReloader.autoreload.disable()
-}
+  parentWindowReloader.autoreload.disable();
+};

package/src/client/core/parent_window_context.js

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

package/src/client/core/parent_window_effects.js

@@ -1,20 +1,20 @@
 import {
   addExternalCommandCallback,
   sendEventToParent,
-} from "./parent_window_actions.js"
-import { animationsEnabledSignal } from "./animation_signals.js"
-import { initToolbarUI } from "../ui/toolbar_ui.js"
+} 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
+  const animationsEnabled = animationsEnabledSignal.value;
   if (animationsEnabled) {
-    animationsEnabledSignal.value = false
+    animationsEnabledSignal.value = false;
   }
-  initToolbarUI()
+  initToolbarUI();
   if (animationsEnabled) {
-    animationsEnabledSignal.value = true
+    animationsEnabledSignal.value = true;
   }
-})
+});
 
-sendEventToParent("toolbar_ready")
+sendEventToParent("toolbar_ready");

package/src/client/core/parent_window_signals.js

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

package/src/client/core/server_actions.js

@@ -1,9 +1,9 @@
-import { serverTooltipOpenedSignal } from "./server_signals.js"
+import { serverTooltipOpenedSignal } from "./server_signals.js";
 
 export const openServerTooltip = () => {
-  serverTooltipOpenedSignal.value = true
-}
+  serverTooltipOpenedSignal.value = true;
+};
 
 export const closeServerTooltip = () => {
-  serverTooltipOpenedSignal.value = false
-}
+  serverTooltipOpenedSignal.value = false;
+};

package/src/client/core/server_effects.js

@@ -1,11 +1,11 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
-import { serverConnectionSignal } from "./server_signals.js"
-import { openServerTooltip } from "./server_actions.js"
+import { serverConnectionSignal } from "./server_signals.js";
+import { openServerTooltip } from "./server_actions.js";
 
 effect(() => {
-  const serverConnection = serverConnectionSignal.value
+  const serverConnection = serverConnectionSignal.value;
   if (serverConnection === "connecting" || serverConnection === "closed") {
-    openServerTooltip()
+    openServerTooltip();
   }
-})
+});

package/src/client/core/server_signals.js

@@ -1,12 +1,12 @@
-import { signal } from "@preact/signals"
+import { signal } from "@preact/signals";
 
-export const serverTooltipOpenedSignal = signal(false)
+export const serverTooltipOpenedSignal = signal(false);
 
-export const serverConnectionSignal = signal("default")
-const serverEvents = window.__server_events__
+export const serverConnectionSignal = signal("default");
+const serverEvents = window.__server_events__;
 if (serverEvents) {
   serverEvents.readyState.onchange = () => {
-    serverConnectionSignal.value = serverEvents.readyState.value
-  }
-  serverConnectionSignal.value = serverEvents.readyState.value
+    serverConnectionSignal.value = serverEvents.readyState.value;
+  };
+  serverConnectionSignal.value = serverEvents.readyState.value;
 }