@jsenv/plugin-toolbar 1.5.12 → 1.5.15

package/dist/js/toolbar_core.js

@@ -313,24 +313,26 @@ 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;
-  });
+  const restoreCallbackSet = new Set();
+  for (const key of Object.keys(styles)) {
+    const inlineValue = element.style[key];
+    restoreCallbackSet.add(() => {
+      if (inlineValue === "") {
+        element.style.removeProperty(key);
+      } else {
+        element.style[key] = inlineValue;
+      }
+    });
+  }
+  for (const key of Object.keys(styles)) {
+    const value = styles[key];
+    element.style[key] = value;
+  }
   return () => {
-    restoreStyles.forEach(restore => restore());
+    for (const restoreCallback of restoreCallbackSet) {
+      restoreCallback();
+    }
+    restoreCallbackSet.clear();
   };
 };
 const activateToolbarSection = element => {

package/dist/js/toolbar_injector.js

@@ -185,8 +185,8 @@ const appendIntoRespectingLineBreaksAndIndentation = (node, parentNode, {
   parentNode.appendChild(document.createTextNode("\n".concat(indentMinusOne)));
 };
 const createToolbarTriggerNode = () => {
-  const css = /* css */"\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    }";
-  const html = /* html */" <div id=\"jsenv_toolbar_trigger\" style=\"display:none\">\n    <style>".concat(css, "</style>\n    <svg id=\"jsenv_toolbar_trigger_icon\">\n      <use xlink:href=\"").concat(jsenvLogoSvgUrl, "#jsenv_logo\"></use>\n    </svg>\n  </div>");
+  const css = /* css */"\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  ";
+  const html = /* html */" <div\n      id=\"jsenv_toolbar_trigger\"\n      style=\"display:none\"\n    >\n      <style>\n        ".concat(css, "\n      </style>\n      <svg id=\"jsenv_toolbar_trigger_icon\">\n        <use xlink:href=\"").concat(jsenvLogoSvgUrl, "#jsenv_logo\"></use>\n      </svg>\n    </div>");
   class JsenvToolbarTriggerHtmlElement extends HTMLElement {
     constructor() {
       super();

package/dist/jsenv_plugin_toolbar_node_modules.js

@@ -150,6 +150,15 @@ function o(i) {
   }
 }
 let n, s;
+function h(i) {
+  const t = n;
+  n = void 0;
+  try {
+    return i();
+  } finally {
+    n = t;
+  }
+}
 let r = 0,
   f = 0,
   e = 0;
@@ -185,21 +194,27 @@ function c(i) {
     return t;
   }
 }
-function u(i) {
+function u(i, t) {
   this.v = i;
   this.i = 0;
   this.n = void 0;
   this.t = void 0;
+  this.W = null == t ? void 0 : t.watched;
+  this.Z = null == t ? void 0 : t.unwatched;
 }
 u.prototype.brand = i;
 u.prototype.h = function () {
   return true;
 };
 u.prototype.S = function (i) {
-  if (this.t !== i && void 0 === i.e) {
-    i.x = this.t;
-    if (void 0 !== this.t) this.t.e = i;
+  const t = this.t;
+  if (t !== i && void 0 === i.e) {
+    i.x = t;
     this.t = i;
+    if (void 0 !== t) t.e = i;else h(() => {
+      var i;
+      null == (i = this.W) || i.call(this);
+    });
   }
 };
 u.prototype.U = function (i) {
@@ -214,7 +229,13 @@ u.prototype.U = function (i) {
       o.e = t;
       i.x = void 0;
     }
-    if (i === this.t) this.t = o;
+    if (i === this.t) {
+      this.t = o;
+      if (void 0 === o) h(() => {
+        var i;
+        null == (i = this.Z) || i.call(this);
+      });
+    }
   }
 };
 u.prototype.subscribe = function (i) {
@@ -268,8 +289,8 @@ Object.defineProperty(u.prototype, "value", {
     }
   }
 });
-function d$1(i) {
-  return new u(i);
+function d$1(i, t) {
+  return new u(i, t);
 }
 function v$1(i) {
   for (let t = i.s; void 0 !== t; t = t.n) if (t.S.i !== t.i || !t.S.h() || t.S.i !== t.i) return true;
@@ -303,14 +324,17 @@ function y(i) {
   }
   i.s = t;
 }
-function a$1(i) {
+function a$1(i, t) {
   u.call(this, void 0);
   this.x = i;
   this.s = void 0;
   this.g = e - 1;
   this.f = 4;
+  this.W = null == t ? void 0 : t.watched;
+  this.Z = null == t ? void 0 : t.unwatched;
 }
-(a$1.prototype = new u()).h = function () {
+a$1.prototype = new u();
+a$1.prototype.h = function () {
   this.f &= -3;
   if (1 & this.f) return false;
   if (32 == (36 & this.f)) return true;
@@ -374,8 +398,8 @@ Object.defineProperty(a$1.prototype, "value", {
     return this.v;
   }
 });
-function w$1(i) {
-  return new a$1(i);
+function w$1(i, t) {
+  return new a$1(i, t);
 }
 function _$1(i) {
   const o = i.u;
@@ -451,6 +475,9 @@ b$1.prototype.d = function () {
   this.f |= 8;
   if (!(1 & this.f)) g$1(this);
 };
+b$1.prototype.dispose = function () {
+  this.d();
+};
 function E(i) {
   const t = new b$1(i);
   try {

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "@jsenv/plugin-toolbar",
-  "version": "1.5.12",
-  "license": "MIT",
+  "version": "1.5.15",
   "repository": {
     "type": "git",
     "url": "https://github.com/jsenv/core",
     "directory": "packages/related/plugin-toolbar"
   },
-  "publishConfig": {
-    "access": "public"
-  },
+  "license": "MIT",
   "type": "module",
   "exports": {
     ".": {
@@ -26,19 +23,22 @@
     "/src/"
   ],
   "scripts": {
-    "eslint": "npx eslint . --ext=.js,.mjs,.cjs,.html",
     "build": "node ./scripts/build.mjs",
+    "eslint": "npx eslint . --ext=.js,.mjs,.cjs,.html",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@jsenv/ast": "6.7.3"
+    "@jsenv/ast": "6.7.7"
   },
   "devDependencies": {
-    "@preact/signals": "2.0.4",
     "@jsenv/core": "../../",
-    "@jsenv/utils": "../../tooling/utils",
     "@jsenv/filesystem": "../../tooling/filesystem",
     "@jsenv/plugin-toolbar": "./",
+    "@jsenv/utils": "../../tooling/utils",
+    "@preact/signals": "2.0.4",
     "playwright": "1.52.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/client/toolbar_injector.js

@@ -243,13 +243,19 @@ const createToolbarTriggerNode = () => {
 
     #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {
       opacity: 1;
-    }`;
-  const html = /* html */ ` <div id="jsenv_toolbar_trigger" style="display:none">
-    <style>${css}</style>
-    <svg id="jsenv_toolbar_trigger_icon">
-      <use xlink:href="${jsenvLogoSvgUrl}#jsenv_logo"></use>
-    </svg>
-  </div>`;
+    }
+  `;
+  const html = /* html */ ` <div
+      id="jsenv_toolbar_trigger"
+      style="display:none"
+    >
+      <style>
+        ${css}
+      </style>
+      <svg id="jsenv_toolbar_trigger_icon">
+        <use xlink:href="${jsenvLogoSvgUrl}#jsenv_logo"></use>
+      </svg>
+    </div>`;
 
   class JsenvToolbarTriggerHtmlElement extends HTMLElement {
     constructor() {

package/src/client/ui/util/dom.js

@@ -12,26 +12,27 @@ export const removeForceHideElement = (element) => {
 };
 
 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;
-  });
+  const restoreCallbackSet = new Set();
+
+  for (const key of Object.keys(styles)) {
+    const inlineValue = element.style[key];
+    restoreCallbackSet.add(() => {
+      if (inlineValue === "") {
+        element.style.removeProperty(key);
+      } else {
+        element.style[key] = inlineValue;
+      }
+    });
+  }
+  for (const key of Object.keys(styles)) {
+    const value = styles[key];
+    element.style[key] = value;
+  }
   return () => {
-    restoreStyles.forEach((restore) => restore());
+    for (const restoreCallback of restoreCallbackSet) {
+      restoreCallback();
+    }
+    restoreCallbackSet.clear();
   };
 };