@jsenv/plugin-toolbar 0.1.14 → 1.0.1

package/src/client/toolbar_injector.js

@@ -1,4 +1,4 @@
-const jsenvLogoSvgUrl = new URL("./ui/jsenv_logo.svg", import.meta.url)
+const jsenvLogoSvgUrl = new URL("./ui/jsenv_logo.svg", import.meta.url);
 
 export const injectToolbar = async ({
   toolbarUrl,
@@ -11,21 +11,21 @@ export const injectToolbar = async ({
 }) => {
   if (document.readyState !== "complete") {
     await new Promise((resolve) => {
-      window.addEventListener("load", resolve)
-    })
+      window.addEventListener("load", resolve);
+    });
   }
   await new Promise((resolve) => {
     if (window.requestIdleCallback) {
-      window.requestIdleCallback(resolve, { timeout: 400 })
+      window.requestIdleCallback(resolve, { timeout: 400 });
     } else {
-      window.requestAnimationFrame(resolve)
+      window.requestAnimationFrame(resolve);
     }
-  })
-  const placeholder = getToolbarPlaceholder()
+  });
+  const placeholder = getToolbarPlaceholder();
 
-  const iframe = document.createElement("iframe")
-  iframe.setAttribute("tabindex", -1)
-  iframe.setAttribute("allowtransparency", true)
+  const iframe = document.createElement("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, {
@@ -40,51 +40,51 @@ export const injectToolbar = async ({
     "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)
+  });
+  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", "")
+    toolbarUrlObject.searchParams.set("opened", "");
   }
   if (autoreload) {
-    toolbarUrlObject.searchParams.set("autoreload", "")
+    toolbarUrlObject.searchParams.set("autoreload", "");
   }
   if (animationsEnabled) {
-    toolbarUrlObject.searchParams.set("animationsEnabled", "")
+    toolbarUrlObject.searchParams.set("animationsEnabled", "");
   }
   if (notificationsEnabled) {
-    toolbarUrlObject.searchParams.set("notificationsEnabled", "")
+    toolbarUrlObject.searchParams.set("notificationsEnabled", "");
   }
   // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
-  iframe.setAttribute("src", toolbarUrlObject.href)
-  iframe.name = "jsenv toolbar"
-  placeholder.parentNode.replaceChild(iframe, placeholder)
+  iframe.setAttribute("src", toolbarUrlObject.href);
+  iframe.name = "jsenv toolbar";
+  placeholder.parentNode.replaceChild(iframe, placeholder);
 
   const listenToolbarStateChange = (callback) => {
-    return addToolbarEventCallback(iframe, "toolbar_state_change", callback)
-  }
+    return addToolbarEventCallback(iframe, "toolbar_state_change", callback);
+  };
 
   const cleanupInitOnReady = addToolbarEventCallback(
     iframe,
     "toolbar_ready",
     () => {
-      cleanupInitOnReady()
-      sendCommandToToolbar(iframe, "initToolbar")
+      cleanupInitOnReady();
+      sendCommandToToolbar(iframe, "initToolbar");
       setTimeout(() => {
         listenToolbarStateChange(({ animationsEnabled }) => {
           if (animationsEnabled) {
-            iframe.style.transitionDuration = "300ms"
+            iframe.style.transitionDuration = "300ms";
           } else {
-            iframe.style.transitionDuration = "0s"
+            iframe.style.transitionDuration = "0s";
           }
-        })
-      })
+        });
+      });
     },
-  )
+  );
 
-  const div = document.createElement("div")
+  const div = document.createElement("div");
   div.innerHTML = `
 <div id="jsenv_toolbar_trigger" style="display:none">
   <svg id="jsenv_toolbar_trigger_icon">
@@ -130,82 +130,82 @@ export const injectToolbar = async ({
       opacity: 1;
     }
   </style>
-</div>`
-  const toolbarTrigger = div.firstElementChild
-  iframe.parentNode.appendChild(toolbarTrigger)
+</div>`;
+  const toolbarTrigger = div.firstElementChild;
+  iframe.parentNode.appendChild(toolbarTrigger);
 
-  let timer
+  let timer;
   toolbarTrigger.onmouseenter = () => {
-    toolbarTrigger.setAttribute("data-animate", "")
-    timer = setTimeout(expandToolbarTrigger, 500)
-  }
+    toolbarTrigger.setAttribute("data-animate", "");
+    timer = setTimeout(expandToolbarTrigger, 500);
+  };
   toolbarTrigger.onmouseleave = () => {
-    clearTimeout(timer)
-    collapseToolbarTrigger()
-  }
+    clearTimeout(timer);
+    collapseToolbarTrigger();
+  };
   toolbarTrigger.onfocus = () => {
-    toolbarTrigger.removeAttribute("data-animate")
-    expandToolbarTrigger()
-  }
+    toolbarTrigger.removeAttribute("data-animate");
+    expandToolbarTrigger();
+  };
   toolbarTrigger.onblur = () => {
-    toolbarTrigger.removeAttribute("data-animate")
-    clearTimeout(timer)
-    collapseToolbarTrigger()
-  }
+    toolbarTrigger.removeAttribute("data-animate");
+    clearTimeout(timer);
+    collapseToolbarTrigger();
+  };
   toolbarTrigger.onclick = () => {
-    sendCommandToToolbar(iframe, "openToolbar")
-  }
+    sendCommandToToolbar(iframe, "openToolbar");
+  };
 
   const showToolbarTrigger = () => {
-    toolbarTrigger.style.display = "block"
-  }
+    toolbarTrigger.style.display = "block";
+  };
 
   const hideToolbarTrigger = () => {
-    toolbarTrigger.style.display = "none"
-  }
+    toolbarTrigger.style.display = "none";
+  };
 
   const expandToolbarTrigger = () => {
-    toolbarTrigger.setAttribute("data-expanded", "")
-  }
+    toolbarTrigger.setAttribute("data-expanded", "");
+  };
 
   const collapseToolbarTrigger = () => {
-    toolbarTrigger.removeAttribute("data-expanded", "")
-  }
+    toolbarTrigger.removeAttribute("data-expanded", "");
+  };
 
   listenToolbarStateChange(({ opened }) => {
     if (opened) {
-      hideToolbarTrigger()
+      hideToolbarTrigger();
     } else {
-      showToolbarTrigger()
+      showToolbarTrigger();
     }
-  })
+  });
 
-  await iframeLoadedPromise
-  iframe.removeAttribute("tabindex")
+  await iframeLoadedPromise;
+  iframe.removeAttribute("tabindex");
 
-  return iframe
-}
+  return iframe;
+};
 
 const addToolbarEventCallback = (iframe, eventName, 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__.event !== eventName) {
-      return
+      return;
     }
-    callback(__jsenv__.data)
-  }
-  window.addEventListener("message", messageEventCallback, false)
+    callback(__jsenv__.data);
+  };
+  window.addEventListener("message", messageEventCallback, false);
   return () => {
-    window.removeEventListener("message", messageEventCallback, false)
-  }
-}
+    window.removeEventListener("message", messageEventCallback, false);
+  };
+};
 
 const sendCommandToToolbar = (iframe, command, ...args) => {
   iframe.contentWindow.postMessage(
@@ -216,40 +216,40 @@ const sendCommandToToolbar = (iframe, command, ...args) => {
       },
     },
     window.origin,
-  )
-}
+  );
+};
 
 const getToolbarPlaceholder = () => {
-  const placeholder = queryPlaceholder()
+  const placeholder = queryPlaceholder();
   if (placeholder) {
     if (document.body.contains(placeholder)) {
-      return placeholder
+      return placeholder;
     }
     // otherwise iframe would not be visible because in <head>
     console.warn(
       "element with [data-jsenv-toolbar-placeholder] must be inside document.body",
-    )
-    return createTooolbarPlaceholder()
+    );
+    return createTooolbarPlaceholder();
   }
-  return createTooolbarPlaceholder()
-}
+  return createTooolbarPlaceholder();
+};
 
 const queryPlaceholder = () => {
-  return document.querySelector("[data-jsenv-toolbar-placeholder]")
-}
+  return document.querySelector("[data-jsenv-toolbar-placeholder]");
+};
 
 const createTooolbarPlaceholder = () => {
-  const placeholder = document.createElement("span")
-  document.body.appendChild(placeholder)
-  return placeholder
-}
+  const placeholder = document.createElement("span");
+  document.body.appendChild(placeholder);
+  return placeholder;
+};
 
 const iframeToLoadedPromise = (iframe) => {
   return new Promise((resolve) => {
     const onload = () => {
-      iframe.removeEventListener("load", onload, true)
-      resolve()
-    }
-    iframe.addEventListener("load", onload, true)
-  })
-}
+      iframe.removeEventListener("load", onload, true);
+      resolve();
+    };
+    iframe.addEventListener("load", onload, true);
+  });
+};

package/src/client/ui/changes_indicator/changes_indicator.js

@@ -1,66 +1,66 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
-import { parentWindowReloader } from "../../core/parent_window_context.js"
+import { parentWindowReloader } from "../../core/parent_window_context.js";
 import {
   autoreloadEnabledSignal,
   changesSignal,
-} from "../../core/parent_window_signals.js"
-import { changesTooltipOpenedSignal } from "../../core/changes_signals.js"
+} from "../../core/parent_window_signals.js";
+import { changesTooltipOpenedSignal } from "../../core/changes_signals.js";
 import {
   openChangesToolip,
   closeChangesToolip,
-} from "../../core/changes_actions.js"
-import { enableVariant } from "../variant.js"
+} from "../../core/changes_actions.js";
+import { enableVariant } from "../variant.js";
 
-const changesIndicator = document.querySelector("#changes_indicator")
+const changesIndicator = document.querySelector("#changes_indicator");
 
 export const renderChangesIndicator = () => {
   effect(() => {
-    const autoreloadEnabled = autoreloadEnabledSignal.value
-    const changes = changesSignal.value
-    const changeCount = changes.length
+    const autoreloadEnabled = autoreloadEnabledSignal.value;
+    const changes = changesSignal.value;
+    const changeCount = changes.length;
     enableVariant(changesIndicator, {
       changes: !autoreloadEnabled && changeCount ? "yes" : "no",
-    })
+    });
     if (changeCount) {
       changesIndicator.querySelector(".tooltip_text").innerHTML =
-        computeTooltipText({ changes })
+        computeTooltipText({ changes });
       changesIndicator.querySelector(".tooltip_text a").onclick = () => {
         // eslint-disable-next-line no-alert
-        window.alert(JSON.stringify(changes, null, "  "))
-        console.log(changes)
-      }
-      changesIndicator.querySelector(".changes_text").innerHTML = changeCount
+        window.alert(JSON.stringify(changes, null, "  "));
+        console.log(changes);
+      };
+      changesIndicator.querySelector(".changes_text").innerHTML = changeCount;
     }
-  })
+  });
 
   changesIndicator.querySelector(".tooltip_action").onclick = () => {
-    parentWindowReloader.reload()
-  }
+    parentWindowReloader.reload();
+  };
 
   effect(() => {
-    const changesTooltipOpened = changesTooltipOpenedSignal.value
+    const changesTooltipOpened = changesTooltipOpenedSignal.value;
     if (changesTooltipOpened) {
-      changesIndicator.setAttribute("data-tooltip-visible", "")
+      changesIndicator.setAttribute("data-tooltip-visible", "");
     } else {
-      changesIndicator.removeAttribute("data-tooltip-visible")
+      changesIndicator.removeAttribute("data-tooltip-visible");
     }
-  })
-  const button = changesIndicator.querySelector("button")
+  });
+  const button = changesIndicator.querySelector("button");
   button.onclick = () => {
-    const changesTooltipOpened = changesTooltipOpenedSignal.value
+    const changesTooltipOpened = changesTooltipOpenedSignal.value;
     if (changesTooltipOpened) {
-      closeChangesToolip()
+      closeChangesToolip();
     } else {
-      openChangesToolip()
+      openChangesToolip();
     }
-  }
-}
+  };
+};
 
 const computeTooltipText = ({ changes }) => {
-  const changesCount = changes.length
+  const changesCount = changes.length;
   if (changesCount === 1) {
-    return `There is <a href="javascript:void(0)">1</a> change to apply`
+    return `There is <a href="javascript:void(0)">1</a> change to apply`;
   }
-  return `There is  <a href="javascript:void(0)">${changesCount}<a> changes to apply`
-}
+  return `There is  <a href="javascript:void(0)">${changesCount}<a> changes to apply`;
+};

package/src/client/ui/document_execution_indicator/document_execution_indicator.js

@@ -1,66 +1,66 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
 import {
   executionSignal,
   executionTooltipOpenedSignal,
-} from "../../core/execution_signals.js"
+} from "../../core/execution_signals.js";
 import {
   closeExecutionTooltip,
   openExecutionTooltip,
-} from "../../core/execution_actions.js"
-import { removeForceHideElement } from "../util/dom.js"
-import { enableVariant } from "../variant.js"
+} from "../../core/execution_actions.js";
+import { removeForceHideElement } from "../util/dom.js";
+import { enableVariant } from "../variant.js";
 
 const executionIndicator = document.querySelector(
   "#document_execution_indicator",
-)
+);
 
 export const renderDocumentExecutionIndicator = async () => {
   removeForceHideElement(
     document.querySelector("#document_execution_indicator"),
-  )
+  );
   effect(() => {
-    const execution = executionSignal.value
-    updateExecutionIndicator(execution)
-  })
+    const execution = executionSignal.value;
+    updateExecutionIndicator(execution);
+  });
   effect(() => {
-    const executionTooltipOpened = executionTooltipOpenedSignal.value
+    const executionTooltipOpened = executionTooltipOpenedSignal.value;
     if (executionTooltipOpened) {
-      executionIndicator.setAttribute("data-tooltip-visible", "")
+      executionIndicator.setAttribute("data-tooltip-visible", "");
     } else {
-      executionIndicator.removeAttribute("data-tooltip-visible")
+      executionIndicator.removeAttribute("data-tooltip-visible");
     }
-  })
-}
+  });
+};
 
 const updateExecutionIndicator = ({ status, startTime, endTime } = {}) => {
-  enableVariant(executionIndicator, { execution: status })
-  const variantNode = executionIndicator.querySelector("[data-when-active]")
+  enableVariant(executionIndicator, { execution: status });
+  const variantNode = executionIndicator.querySelector("[data-when-active]");
   variantNode.querySelector("button").onclick = () => {
-    const executionTooltipOpened = executionTooltipOpenedSignal.value
+    const executionTooltipOpened = executionTooltipOpenedSignal.value;
     if (executionTooltipOpened) {
-      closeExecutionTooltip()
+      closeExecutionTooltip();
     } else {
-      openExecutionTooltip()
+      openExecutionTooltip();
     }
-  }
+  };
   variantNode.querySelector(".tooltip").textContent = computeText({
     status,
     startTime,
     endTime,
-  })
-}
+  });
+};
 
 // relative time: https://github.com/tc39/proposal-intl-relative-time/issues/118
 const computeText = ({ status, startTime, endTime }) => {
   if (status === "completed") {
-    return `Execution completed in ${endTime - startTime}ms`
+    return `Execution completed in ${endTime - startTime}ms`;
   }
   if (status === "failed") {
-    return `Execution failed in ${endTime - startTime}ms`
+    return `Execution failed in ${endTime - startTime}ms`;
   }
   if (status === "running") {
-    return "Executing..."
+    return "Executing...";
   }
-  return ""
-}
+  return "";
+};

package/src/client/ui/document_index_link/document_index_link.js

@@ -1,8 +1,8 @@
-import { setLinkHrefForParentWindow } from "../util/iframe_to_parent_href.js"
+import { setLinkHrefForParentWindow } from "../util/iframe_to_parent_href.js";
 
 export const renderDocumentIndexLink = () => {
   setLinkHrefForParentWindow(
     document.querySelector("#document_index_link"),
     "/",
-  )
-}
+  );
+};

package/src/client/ui/server_indicator/server_indicator.js

@@ -1,62 +1,62 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
 import {
   serverConnectionSignal,
   serverTooltipOpenedSignal,
-} from "../../core/server_signals.js"
+} from "../../core/server_signals.js";
 import {
   openServerTooltip,
   closeServerTooltip,
-} from "../../core/server_actions.js"
-import { removeForceHideElement } from "../util/dom.js"
-import { enableVariant } from "../variant.js"
+} from "../../core/server_actions.js";
+import { removeForceHideElement } from "../util/dom.js";
+import { enableVariant } from "../variant.js";
 
-const parentServerEvents = window.parent.__server_events__
-const serverEvents = window.__server_events__
-const serverIndicator = document.querySelector("#server_indicator")
+const parentServerEvents = window.parent.__server_events__;
+const serverEvents = window.__server_events__;
+const serverIndicator = document.querySelector("#server_indicator");
 
 export const renderServerIndicator = () => {
-  removeForceHideElement(document.querySelector("#server_indicator"))
+  removeForceHideElement(document.querySelector("#server_indicator"));
   effect(() => {
-    const serverConnection = serverConnectionSignal.value
-    updateServerIndicator(serverConnection)
-  })
+    const serverConnection = serverConnectionSignal.value;
+    updateServerIndicator(serverConnection);
+  });
   effect(() => {
-    const serverTooltipOpened = serverTooltipOpenedSignal.value
+    const serverTooltipOpened = serverTooltipOpenedSignal.value;
     if (serverTooltipOpened) {
-      serverIndicator.setAttribute("data-tooltip-visible", "")
+      serverIndicator.setAttribute("data-tooltip-visible", "");
     } else {
-      serverIndicator.removeAttribute("data-tooltip-visible")
+      serverIndicator.removeAttribute("data-tooltip-visible");
     }
-  })
-}
+  });
+};
 
 const updateServerIndicator = (connectionState) => {
-  enableVariant(serverIndicator, { connectionState })
+  enableVariant(serverIndicator, { connectionState });
   const variantNode = document.querySelector(
     "#server_indicator > [data-when-active]",
-  )
+  );
   variantNode.querySelector("button").onclick = () => {
-    const serverTooltipOpened = serverTooltipOpenedSignal.value
+    const serverTooltipOpened = serverTooltipOpenedSignal.value;
     if (serverTooltipOpened) {
-      closeServerTooltip()
+      closeServerTooltip();
     } else {
-      openServerTooltip()
+      openServerTooltip();
     }
-  }
+  };
   if (connectionState === "connecting") {
     variantNode.querySelector("a").onclick = () => {
       if (parentServerEvents) {
-        parentServerEvents.disconnect()
+        parentServerEvents.disconnect();
       }
-      serverEvents.disconnect()
-    }
+      serverEvents.disconnect();
+    };
   } else if (connectionState === "closed") {
     variantNode.querySelector("a").onclick = () => {
       if (parentServerEvents) {
-        parentServerEvents.connect()
+        parentServerEvents.connect();
       }
-      serverEvents.connect()
-    }
+      serverEvents.connect();
+    };
   }
-}
+};

package/src/client/ui/toolbar_close_button/toolbar_close_button.js

@@ -1,5 +1,5 @@
-import { openedSignal } from "../../core/toolbar_open_signals.js"
-import { openToolbar, closeToolbar } from "../../core/toolbar_open_actions.js"
+import { openedSignal } from "../../core/toolbar_open_signals.js";
+import { openToolbar, closeToolbar } from "../../core/toolbar_open_actions.js";
 
 export const renderToolbarCloseButton = () => {
   // if user click enter or space quickly while closing toolbar
@@ -7,9 +7,9 @@ export const renderToolbarCloseButton = () => {
   // that's why I used toggleToolbar and not hideToolbar
   document.querySelector("#toolbar_close_button").onclick = () => {
     if (openedSignal.value) {
-      closeToolbar()
+      closeToolbar();
     } else {
-      openToolbar()
+      openToolbar();
     }
-  }
-}
+  };
+};