@jsenv/plugin-toolbar 0.1.15 → 1.0.2

package/README.md

@@ -0,0 +1,3 @@
+# @jsenv/plugin-toolbar [![npm package](https://img.shields.io/npm/v/@jsenv/plugin-toolbar.svg?logo=npm&label=package)](https://www.npmjs.com/package/@jsenv/plugin-toolbar)
+
+[Documentation](<https://github.com/jsenv/core/wiki/A)-Getting-started>) · [Changelog](./CHANGELOG.md)

package/dist/html/toolbar.html

@@ -235,6 +235,25 @@
                     Toggle light/dark mode on jsenv toolbar.
                   </div>
                 </div>
+
+                <div class="settings_box_item" id="ribbon_box" style="display: none">
+                  <div class="category_title">
+                    <svg width="20px" height="20px" viewBox="0 0 448 512">
+                      <path d="M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58l-38.46 144.8z"></path>
+                    </svg>
+                    Ribbon
+                  </div>
+                  <label class="switch" data-contains-hidden-input="">
+                    <input id="checkbox_dark_theme" type="checkbox">
+                    <div>
+                      <div class="slider"></div>
+                      <div class="square"></div>
+                    </div>
+                  </label>
+                  <div class="category_subtitle">
+                    Toggle dev ribbon visibility
+                  </div>
+                </div>
               </div>
             </div>
           </div>

package/dist/js/toolbar_core.js

@@ -1,8 +1,8 @@
 var l$2;
 l$2 = {
   __e: function (n, l, u, i) {
-    for (var t, r, o; l = l.__;) if ((t = l.__c) && !t.__) try {
-      if ((r = t.constructor) && null != r.getDerivedStateFromError && (t.setState(r.getDerivedStateFromError(n)), o = t.__d), null != t.componentDidCatch && (t.componentDidCatch(n, i || {}), o = t.__d), o) return t.__E = t;
+    for (var t, o, r; l = l.__;) if ((t = l.__c) && !t.__) try {
+      if ((o = t.constructor) && null != o.getDerivedStateFromError && (t.setState(o.getDerivedStateFromError(n)), r = t.__d), null != t.componentDidCatch && (t.componentDidCatch(n, i || {}), r = t.__d), r) return t.__E = t;
     } catch (l) {
       n = l;
     }
@@ -50,7 +50,7 @@ l$2.__b = function (n) {
   var i = (r$1 = n.__c).__H;
   i && (u$1 === r$1 ? (i.__h = [], r$1.__h = [], i.__.forEach(function (n) {
     n.__N && (n.__ = n.__N), n.__V = c$2, n.__N = n.i = void 0;
-  })) : (i.__h.forEach(k), i.__h.forEach(w$1), i.__h = [])), u$1 = r$1;
+  })) : (i.__h.forEach(k), i.__h.forEach(w$1), i.__h = [], t$1 = 0)), u$1 = r$1;
 }, l$2.diffed = function (t) {
   v$1 && v$1(t);
   var o = t.__c;
@@ -748,24 +748,24 @@ const notifyExecutionResult = (execution, previousExecution) => {
       if (previousExecution.status === "completed") {
         notify("Broken", {
           ...notificationOptions,
-          body: `${executedFileRelativeUrl} execution now failing.`
+          body: "".concat(executedFileRelativeUrl, " execution now failing.")
         });
       } else {
         notify("Still failing", {
           ...notificationOptions,
-          body: `${executedFileRelativeUrl} execution still failing.`
+          body: "".concat(executedFileRelativeUrl, " execution still failing.")
         });
       }
     } else {
       notify("Failing", {
         ...notificationOptions,
-        body: `${executedFileRelativeUrl} execution failed.`
+        body: "".concat(executedFileRelativeUrl, " execution failed.")
       });
     }
   } else if (previousExecution && previousExecution.status === "failed") {
     notify("Fixed", {
       ...notificationOptions,
-      body: `${executedFileRelativeUrl} execution fixed.`
+      body: "".concat(executedFileRelativeUrl, " execution fixed.")
     });
   }
 };
@@ -1279,7 +1279,7 @@ const renderDocumentIndexLink = () => {
 };
 
 const enableVariant = (rootNode, variables) => {
-  const nodesNotMatching = Array.from(rootNode.querySelectorAll(`[${attributeIndicatingACondition}]`));
+  const nodesNotMatching = Array.from(rootNode.querySelectorAll("[".concat(attributeIndicatingACondition, "]")));
   nodesNotMatching.forEach(nodeNotMatching => {
     const conditionAttributeValue = nodeNotMatching.getAttribute(attributeIndicatingACondition);
     const matches = testCondition(conditionAttributeValue, variables);
@@ -1287,7 +1287,7 @@ const enableVariant = (rootNode, variables) => {
       renameAttribute(nodeNotMatching, attributeIndicatingACondition, attributeIndicatingAMatch);
     }
   });
-  const nodesMatching = Array.from(rootNode.querySelectorAll(`[${attributeIndicatingAMatch}]`));
+  const nodesMatching = Array.from(rootNode.querySelectorAll("[".concat(attributeIndicatingAMatch, "]")));
   nodesMatching.forEach(nodeMatching => {
     const conditionAttributeValue = nodeMatching.getAttribute(attributeIndicatingAMatch);
     const matches = testCondition(conditionAttributeValue, variables);
@@ -1325,8 +1325,8 @@ const parseCondition = conditionAttributeValue => {
     value: conditionAttributeValue.slice(colonIndex + 1)
   };
 };
-const attributeIndicatingACondition = `data-when`;
-const attributeIndicatingAMatch = `data-when-active`;
+const attributeIndicatingACondition = "data-when";
+const attributeIndicatingAMatch = "data-when-active";
 const renameAttribute = (node, name, newName) => {
   node.setAttribute(newName, node.getAttribute(name));
   node.removeAttribute(name);
@@ -1379,10 +1379,10 @@ const computeText = ({
   endTime
 }) => {
   if (status === "completed") {
-    return `Execution completed in ${endTime - startTime}ms`;
+    return "Execution completed in ".concat(endTime - startTime, "ms");
   }
   if (status === "failed") {
-    return `Execution failed in ${endTime - startTime}ms`;
+    return "Execution failed in ".concat(endTime - startTime, "ms");
   }
   if (status === "running") {
     return "Executing...";
@@ -1468,9 +1468,9 @@ const computeTooltipText = ({
 }) => {
   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)\">".concat(changesCount, "<a> changes to apply");
 };
 
 const parentServerEvents = window.parent.__server_events__;
@@ -1546,7 +1546,7 @@ const renderToolbarAutoreloadSetting = () => {
 };
 const disableAutoreloadSetting = () => {
   document.querySelector(".settings_autoreload").setAttribute("data-disabled", "true");
-  document.querySelector(".settings_autoreload").setAttribute("title", `Autoreload not enabled on server`);
+  document.querySelector(".settings_autoreload").setAttribute("title", "Autoreload not enabled on server");
   document.querySelector("#toggle_autoreload").disabled = true;
 };
 
@@ -1641,7 +1641,7 @@ const renderToolbarNotificationSetting = () => {
 const applyNotificationNotAvailableEffects = () => {
   const notifSetting = document.querySelector(".settings_notification");
   notifSetting.setAttribute("data-disabled", "true");
-  notifSetting.setAttribute("title", `Notification not available in the browser`);
+  notifSetting.setAttribute("title", "Notification not available in the browser");
   notifCheckbox.disabled = true;
 };
 const applyNotificationDefaultEffects = () => {
@@ -1654,7 +1654,7 @@ const applyNotificationDeniedEffects = () => {
   applyNotificationNOTGrantedEffects();
   const notifSetting = document.querySelector(".settings_notification");
   notifSetting.setAttribute("data-disabled", "true");
-  notifSetting.setAttribute("title", `Notification denied`);
+  notifSetting.setAttribute("title", "Notification denied");
 };
 const applyNotificationGrantedEffects = () => {
   enableVariant(document.querySelector(".notification_text"), {
@@ -1701,6 +1701,33 @@ const renderToolbarThemeSetting = () => {
   };
 };
 
+const ribbonDisplayedSignal = u(typeof stateFromLocalStorage.ribbonDisplayed === "boolean" ? stateFromLocalStorage.ribbonDisplayed : true);
+
+const ribbonBox = document.querySelector("#ribbon_box");
+const ribbonCheckbox = ribbonBox.querySelector("input");
+const renderToolbarRibbonSetting = () => {
+  const ribbonContainer = window.parent.document.querySelector("#jsenv_ribbon_container");
+  if (ribbonContainer) {
+    ribbonBox.style.display = "block";
+    b(() => {
+      const ribbonDisplayed = ribbonDisplayedSignal.value;
+      ribbonCheckbox.checked = ribbonDisplayed;
+      if (ribbonDisplayed) {
+        ribbonContainer.style.display = "block";
+      } else {
+        ribbonContainer.style.display = "none";
+      }
+    });
+    ribbonCheckbox.onchange = () => {
+      if (ribbonCheckbox.checked) {
+        ribbonDisplayedSignal.value = true;
+      } else {
+        ribbonDisplayedSignal.value = false;
+      }
+    };
+  }
+};
+
 const renderToolbarSettings = () => {
   document.querySelector("#settings_open_button").onclick = toggleSettings;
   document.querySelector("#settings_close_button").onclick = toggleSettings;
@@ -1709,6 +1736,7 @@ const renderToolbarSettings = () => {
   renderToolbarAnimationSetting();
   renderToolbarNotificationSetting();
   renderToolbarThemeSetting();
+  renderToolbarRibbonSetting();
   b(() => {
     const settingsOpened = settingsOpenedSignal.value;
     if (settingsOpened) {
@@ -1797,11 +1825,13 @@ const toolbarStateSignal = w(() => {
   const theme = themeSignal.value;
   const animationsEnabled = animationsEnabledSignal.value;
   const notificationsEnabled = notificationsEnabledSignal.value;
+  const ribbonDisplayed = ribbonDisplayedSignal.value;
   return {
     opened,
     theme,
     animationsEnabled,
-    notificationsEnabled
+    notificationsEnabled,
+    ribbonDisplayed
   };
 });
 

package/dist/js/toolbar_injector.js

@@ -80,52 +80,7 @@ const injectToolbar = async ({
     });
   });
   const div = document.createElement("div");
-  div.innerHTML = `
-<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 {
-      display: block;
-      overflow: hidden;
-      position: fixed;
-      z-index: 1000;
-      bottom: -32px;
-      right: 20px;
-      height: 40px;
-      width: 40px;
-      padding: 0;
-      margin: 0;
-      border-radius: 5px 5px 0 0;
-      border: 1px solid rgba(0, 0, 0, 0.33);
-      border-bottom: none;
-      box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);
-      background: transparent;
-      text-align: center;
-      transition: 600ms;
-    }
-
-    #jsenv_toolbar_trigger:hover {
-      cursor: pointer;
-    }
-
-    #jsenv_toolbar_trigger[data-expanded] {
-      bottom: 0;
-    }
-
-    #jsenv_toolbar_trigger_icon {
-      width: 35px;
-      height: 35px;
-      opacity: 0;
-      transition: 600ms;
-    }
-
-    #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {
-      opacity: 1;
-    }
-  </style>
-</div>`;
+  div.innerHTML = "\n<div id=\"jsenv_toolbar_trigger\" style=\"display:none\">\n  <svg id=\"jsenv_toolbar_trigger_icon\">\n    <use xlink:href=\"".concat(jsenvLogoSvgUrl, "#jsenv_logo\"></use>\n  </svg>\n  <style>\n    #jsenv_toolbar_trigger {\n      display: block;\n      overflow: hidden;\n      position: fixed;\n      z-index: 1000;\n      bottom: -32px;\n      right: 20px;\n      height: 40px;\n      width: 40px;\n      padding: 0;\n      margin: 0;\n      border-radius: 5px 5px 0 0;\n      border: 1px solid rgba(0, 0, 0, 0.33);\n      border-bottom: none;\n      box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);\n      background: transparent;\n      text-align: center;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger:hover {\n      cursor: pointer;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] {\n      bottom: 0;\n    }\n\n    #jsenv_toolbar_trigger_icon {\n      width: 35px;\n      height: 35px;\n      opacity: 0;\n      transition: 600ms;\n    }\n\n    #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {\n      opacity: 1;\n    }\n  </style>\n</div>");
   const toolbarTrigger = div.firstElementChild;
   iframe.parentNode.appendChild(toolbarTrigger);
   let timer;

package/dist/jsenv_plugin_toolbar.js

@@ -72,9 +72,7 @@ const generateCodeToInjectToolbar = ({
     animationsEnabled,
     notificationsEnabled
   }, null, "  ");
-  return `import { injectToolbar } from ${from}
-
-injectToolbar(${paramsSource});`;
+  return "import { injectToolbar } from ".concat(from, "\n\ninjectToolbar(").concat(paramsSource, ");");
 };
 
 export { jsenvPluginToolbar };

package/package.json

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

package/src/client/core/ribbon_signals.js

@@ -0,0 +1,9 @@
+import { signal } from "@preact/signals";
+
+import { stateFromLocalStorage } from "./toolbar_state_context.js";
+
+export const ribbonDisplayedSignal = signal(
+  typeof stateFromLocalStorage.ribbonDisplayed === "boolean"
+    ? stateFromLocalStorage.ribbonDisplayed
+    : true,
+);

package/src/client/core/toolbar_state_signals.js

@@ -4,17 +4,20 @@ import { openedSignal } from "./toolbar_open_signals.js";
 import { themeSignal } from "./theme_signals.js";
 import { animationsEnabledSignal } from "./animation_signals.js";
 import { notificationsEnabledSignal } from "./notification_signals.js";
+import { ribbonDisplayedSignal } from "./ribbon_signals.js";
 
 export const toolbarStateSignal = computed(() => {
   const opened = openedSignal.value;
   const theme = themeSignal.value;
   const animationsEnabled = animationsEnabledSignal.value;
   const notificationsEnabled = notificationsEnabledSignal.value;
+  const ribbonDisplayed = ribbonDisplayedSignal.value;
 
   return {
     opened,
     theme,
     animationsEnabled,
     notificationsEnabled,
+    ribbonDisplayed,
   };
 });

package/src/client/toolbar.html

@@ -347,6 +347,31 @@
                     Toggle light/dark mode on jsenv toolbar.
                   </div>
                 </div>
+
+                <div
+                  class="settings_box_item"
+                  id="ribbon_box"
+                  style="display: none"
+                >
+                  <div class="category_title">
+                    <svg width="20px" height="20px" viewBox="0 0 448 512">
+                      <path
+                        d="M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58l-38.46 144.8z"
+                      ></path>
+                    </svg>
+                    Ribbon
+                  </div>
+                  <label class="switch" data-contains-hidden-input>
+                    <input id="checkbox_dark_theme" type="checkbox" />
+                    <div>
+                      <div class="slider"></div>
+                      <div class="square"></div>
+                    </div>
+                  </label>
+                  <div class="category_subtitle">
+                    Toggle dev ribbon visibility
+                  </div>
+                </div>
               </div>
             </div>
           </div>

package/src/client/ui/toolbar_settings/toolbar_ribbon_setting.js

@@ -0,0 +1,33 @@
+import { effect } from "@preact/signals";
+
+import { ribbonDisplayedSignal } from "../../core/ribbon_signals.js";
+
+const ribbonBox = document.querySelector("#ribbon_box");
+const ribbonCheckbox = ribbonBox.querySelector("input");
+
+export const renderToolbarRibbonSetting = () => {
+  const ribbonContainer = window.parent.document.querySelector(
+    "#jsenv_ribbon_container",
+  );
+  if (ribbonContainer) {
+    ribbonBox.style.display = "block";
+    effect(() => {
+      const ribbonDisplayed = ribbonDisplayedSignal.value;
+      ribbonCheckbox.checked = ribbonDisplayed;
+
+      if (ribbonDisplayed) {
+        ribbonContainer.style.display = "block";
+      } else {
+        ribbonContainer.style.display = "none";
+      }
+    });
+
+    ribbonCheckbox.onchange = () => {
+      if (ribbonCheckbox.checked) {
+        ribbonDisplayedSignal.value = true;
+      } else {
+        ribbonDisplayedSignal.value = false;
+      }
+    };
+  }
+};

package/src/client/ui/toolbar_settings/toolbar_settings.js

@@ -11,6 +11,7 @@ import { renderToolbarAutoreloadSetting } from "./toolbar_autoreload_setting.js"
 import { renderToolbarAnimationSetting } from "./toolbar_animation_setting.js";
 import { renderToolbarNotificationSetting } from "./toolbar_notification_setting.js";
 import { renderToolbarThemeSetting } from "./toolbar_theme_setting.js";
+import { renderToolbarRibbonSetting } from "./toolbar_ribbon_setting.js";
 
 export const renderToolbarSettings = () => {
   document.querySelector("#settings_open_button").onclick = toggleSettings;
@@ -21,6 +22,7 @@ export const renderToolbarSettings = () => {
   renderToolbarAnimationSetting();
   renderToolbarNotificationSetting();
   renderToolbarThemeSetting();
+  renderToolbarRibbonSetting();
 
   effect(() => {
     const settingsOpened = settingsOpenedSignal.value;