@jsenv/plugin-toolbar 0.1.1 → 0.1.2

package/dist/js/document_execution_indicator.js

@@ -0,0 +1,62 @@
+import { effect } from "./signals.mjs";
+import { executionSignal, executionTooltipOpenedSignal } from "./execution_signals.js";
+import { closeExecutionTooltip, openExecutionTooltip } from "./execution_actions.js";
+import { removeForceHideElement } from "./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);
+  });
+  effect(() => {
+    const executionTooltipOpened = executionTooltipOpenedSignal.value;
+    if (executionTooltipOpened) {
+      executionIndicator.setAttribute("data-tooltip-visible", "");
+    } else {
+      executionIndicator.removeAttribute("data-tooltip-visible");
+    }
+  });
+};
+const updateExecutionIndicator = ({
+  status,
+  startTime,
+  endTime
+} = {}) => {
+  enableVariant(executionIndicator, {
+    execution: status
+  });
+  const variantNode = executionIndicator.querySelector("[data-when-active]");
+  variantNode.querySelector("button").onclick = () => {
+    const executionTooltipOpened = executionTooltipOpenedSignal.value;
+    if (executionTooltipOpened) {
+      closeExecutionTooltip();
+    } else {
+      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`;
+  }
+  if (status === "errored") {
+    return `Execution failed in ${endTime - startTime}ms`;
+  }
+  if (status === "running") {
+    return "Executing...";
+  }
+  return "";
+};

package/dist/js/document_index_link.js

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

package/dist/js/dom.js

@@ -0,0 +1,48 @@
+export const getToolbarIframe = () => {
+  const iframes = Array.from(window.parent.document.querySelectorAll("iframe"));
+  return iframes.find(iframe => iframe.contentWindow === window);
+};
+export const forceHideElement = element => {
+  element.setAttribute("data-force-hide", "");
+};
+export const removeForceHideElement = element => {
+  element.removeAttribute("data-force-hide");
+};
+export 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());
+  };
+};
+export const setAttributes = (element, attributes) => {
+  Object.keys(attributes).forEach(name => {
+    element.setAttribute(name, attributes[name]);
+  });
+};
+export const getDocumentScroll = () => {
+  return {
+    x: document.documentElement.scrollLeft,
+    y: document.documentElement.scrollTop
+  };
+};
+export const activateToolbarSection = element => {
+  element.setAttribute("data-active", "");
+};
+export const deactivateToolbarSection = element => {
+  element.removeAttribute("data-active");
+};

package/dist/js/execution_actions.js

@@ -0,0 +1,46 @@
+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/dist/js/execution_effects.js

@@ -0,0 +1,16 @@
+import { effect } from "./signals.mjs";
+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/dist/js/execution_signals.js

@@ -0,0 +1,17 @@
+import { signal } from "./signals.mjs";
+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/dist/js/hooks.mjs

@@ -0,0 +1,185 @@
+import { options as n } from "./preact.mjs";
+var t,
+  r,
+  u,
+  i,
+  o = 0,
+  f = [],
+  c = [],
+  e = n.__b,
+  a = n.__r,
+  v = n.diffed,
+  l = n.__c,
+  m = n.unmount;
+function d(t, u) {
+  n.__h && n.__h(r, t, o || u), o = 0;
+  var i = r.__H || (r.__H = {
+    __: [],
+    __h: []
+  });
+  return t >= i.__.length && i.__.push({
+    __V: c
+  }), i.__[t];
+}
+function p(n) {
+  return o = 1, y(B, n);
+}
+function y(n, u, i) {
+  var o = d(t++, 2);
+  if (o.t = n, !o.__c && (o.__ = [i ? i(u) : B(void 0, u), function (n) {
+    var t = o.__N ? o.__N[0] : o.__[0],
+      r = o.t(t, n);
+    t !== r && (o.__N = [r, o.__[1]], o.__c.setState({}));
+  }], o.__c = r, !r.u)) {
+    r.u = !0;
+    var f = r.shouldComponentUpdate;
+    r.shouldComponentUpdate = function (n, t, r) {
+      if (!o.__c.__H) return !0;
+      var u = o.__c.__H.__.filter(function (n) {
+        return n.__c;
+      });
+      if (u.every(function (n) {
+        return !n.__N;
+      })) return !f || f.call(this, n, t, r);
+      var i = !1;
+      return u.forEach(function (n) {
+        if (n.__N) {
+          var t = n.__[0];
+          n.__ = n.__N, n.__N = void 0, t !== n.__[0] && (i = !0);
+        }
+      }), !(!i && o.__c.props === n) && (!f || f.call(this, n, t, r));
+    };
+  }
+  return o.__N || o.__;
+}
+function h(u, i) {
+  var o = d(t++, 3);
+  !n.__s && z(o.__H, i) && (o.__ = u, o.i = i, r.__H.__h.push(o));
+}
+function s(u, i) {
+  var o = d(t++, 4);
+  !n.__s && z(o.__H, i) && (o.__ = u, o.i = i, r.__h.push(o));
+}
+function _(n) {
+  return o = 5, F(function () {
+    return {
+      current: n
+    };
+  }, []);
+}
+function A(n, t, r) {
+  o = 6, s(function () {
+    return "function" == typeof n ? (n(t()), function () {
+      return n(null);
+    }) : n ? (n.current = t(), function () {
+      return n.current = null;
+    }) : void 0;
+  }, null == r ? r : r.concat(n));
+}
+function F(n, r) {
+  var u = d(t++, 7);
+  return z(u.__H, r) ? (u.__V = n(), u.i = r, u.__h = n, u.__V) : u.__;
+}
+function T(n, t) {
+  return o = 8, F(function () {
+    return n;
+  }, t);
+}
+function q(n) {
+  var u = r.context[n.__c],
+    i = d(t++, 9);
+  return i.c = n, u ? (null == i.__ && (i.__ = !0, u.sub(r)), u.props.value) : n.__;
+}
+function x(t, r) {
+  n.useDebugValue && n.useDebugValue(r ? r(t) : t);
+}
+function P(n) {
+  var u = d(t++, 10),
+    i = p();
+  return u.__ = n, r.componentDidCatch || (r.componentDidCatch = function (n, t) {
+    u.__ && u.__(n, t), i[1](n);
+  }), [i[0], function () {
+    i[1](void 0);
+  }];
+}
+function V() {
+  var n = d(t++, 11);
+  if (!n.__) {
+    for (var u = r.__v; null !== u && !u.__m && null !== u.__;) u = u.__;
+    var i = u.__m || (u.__m = [0, 0]);
+    n.__ = "P" + i[0] + "-" + i[1]++;
+  }
+  return n.__;
+}
+function b() {
+  for (var t; t = f.shift();) if (t.__P && t.__H) try {
+    t.__H.__h.forEach(k), t.__H.__h.forEach(w), t.__H.__h = [];
+  } catch (r) {
+    t.__H.__h = [], n.__e(r, t.__v);
+  }
+}
+n.__b = function (n) {
+  r = null, e && e(n);
+}, n.__r = function (n) {
+  a && a(n), t = 0;
+  var i = (r = n.__c).__H;
+  i && (u === r ? (i.__h = [], r.__h = [], i.__.forEach(function (n) {
+    n.__N && (n.__ = n.__N), n.__V = c, n.__N = n.i = void 0;
+  })) : (i.__h.forEach(k), i.__h.forEach(w), i.__h = [])), u = r;
+}, n.diffed = function (t) {
+  v && v(t);
+  var o = t.__c;
+  o && o.__H && (o.__H.__h.length && (1 !== f.push(o) && i === n.requestAnimationFrame || ((i = n.requestAnimationFrame) || j)(b)), o.__H.__.forEach(function (n) {
+    n.i && (n.__H = n.i), n.__V !== c && (n.__ = n.__V), n.i = void 0, n.__V = c;
+  })), u = r = null;
+}, n.__c = function (t, r) {
+  r.some(function (t) {
+    try {
+      t.__h.forEach(k), t.__h = t.__h.filter(function (n) {
+        return !n.__ || w(n);
+      });
+    } catch (u) {
+      r.some(function (n) {
+        n.__h && (n.__h = []);
+      }), r = [], n.__e(u, t.__v);
+    }
+  }), l && l(t, r);
+}, n.unmount = function (t) {
+  m && m(t);
+  var r,
+    u = t.__c;
+  u && u.__H && (u.__H.__.forEach(function (n) {
+    try {
+      k(n);
+    } catch (n) {
+      r = n;
+    }
+  }), u.__H = void 0, r && n.__e(r, u.__v));
+};
+var g = "function" == typeof requestAnimationFrame;
+function j(n) {
+  var t,
+    r = function () {
+      clearTimeout(u), g && cancelAnimationFrame(t), setTimeout(n);
+    },
+    u = setTimeout(r, 100);
+  g && (t = requestAnimationFrame(r));
+}
+function k(n) {
+  var t = r,
+    u = n.__c;
+  "function" == typeof u && (n.__c = void 0, u()), r = t;
+}
+function w(n) {
+  var t = r;
+  n.__c = n.__(), r = t;
+}
+function z(n, t) {
+  return !n || n.length !== t.length || t.some(function (t, r) {
+    return t !== n[r];
+  });
+}
+function B(n, t) {
+  return "function" == typeof t ? t(n) : t;
+}
+export { T as useCallback, q as useContext, x as useDebugValue, h as useEffect, P as useErrorBoundary, V as useId, A as useImperativeHandle, s as useLayoutEffect, F as useMemo, y as useReducer, _ as useRef, p as useState };

package/dist/js/iframe_to_parent_href.js

@@ -0,0 +1,10 @@
+export const setLinkHrefForParentWindow = (a, href) => {
+  a.href = href;
+  a.onclick = e => {
+    if (e.ctrlKey || e.metaKey) {
+      return;
+    }
+    e.preventDefault();
+    window.parent.location.href = href;
+  };
+};

package/dist/js/notification_actions.js

@@ -0,0 +1,60 @@
+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/dist/js/notification_context.js

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

package/dist/js/notification_effects.js

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

package/dist/js/notification_signals.js

@@ -0,0 +1,5 @@
+import { signal } from "./signals.mjs";
+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/dist/js/parent_window_actions.js

@@ -0,0 +1,39 @@
+import { parentWindowReloader } from "./parent_window_context.js";
+export const sendEventToParent = (name, data) => {
+  window.parent.postMessage({
+    __jsenv__: {
+      event: name,
+      data
+    }
+  }, "*");
+};
+export 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);
+  };
+};
+export const enableAutoreload = () => {
+  parentWindowReloader.autoreload.enable();
+};
+export const disableAutoreload = () => {
+  parentWindowReloader.autoreload.disable();
+};

package/dist/js/parent_window_context.js

@@ -0,0 +1,6 @@
+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/dist/js/parent_window_effects.js

@@ -0,0 +1,15 @@
+import { addExternalCommandCallback, sendEventToParent } from "./parent_window_actions.js";
+import { animationsEnabledSignal } from "./animation_signals.js";
+import { initToolbarUI } from "./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/dist/js/parent_window_signals.js

@@ -0,0 +1,25 @@
+import { signal } from "./signals.mjs";
+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];
+  };
+}