@schukai/monster 4.148.7 → 4.148.9

package/test/cases/components/form/control-bar.mjs

@@ -1439,7 +1439,7 @@ describe("ControlBar", function () {
     }
   });
 
-  it("should keep the overflow switch stable across the switch-width threshold", async function () {
+  it("should produce the same overflow layout across repeated switch-width threshold crossings", async function () {
     const OriginalResizeObserver = window.ResizeObserver;
     const originalGlobalResizeObserver = globalThis.ResizeObserver;
     const originalRequestAnimationFrame = window.requestAnimationFrame;
@@ -1524,7 +1524,11 @@ describe("ControlBar", function () {
       );
       Object.defineProperty(switchButton, "offsetWidth", {
         configurable: true,
-        value: 20,
+        get: () =>
+          switchButton.hasAttribute("hidden") ||
+          switchButton.classList.contains("hidden")
+            ? 0
+            : 20,
       });
 
       await flushFrames();
@@ -1538,25 +1542,25 @@ describe("ControlBar", function () {
       wrapperWidth = 155;
       resizeObserver.triggerResize([{ target: wrapper }]);
       await flushFrames();
-      expect(switchButton.hasAttribute("hidden")).to.be.false;
-      expect(document.getElementById("threshold-three").getAttribute("slot")).to
-        .equal("popper");
+      expect(switchButton.hasAttribute("hidden")).to.be.true;
+      expect(document.getElementById("threshold-three").hasAttribute("slot")).to
+        .be.false;
 
-      wrapperWidth = 175;
+      wrapperWidth = 145;
       resizeObserver.triggerResize([{ target: wrapper }]);
       await flushFrames();
       expect(switchButton.hasAttribute("hidden")).to.be.false;
       expect(document.getElementById("threshold-three").getAttribute("slot")).to
         .equal("popper");
 
-      wrapperWidth = 190;
+      wrapperWidth = 155;
       resizeObserver.triggerResize([{ target: wrapper }]);
       await flushFrames();
       expect(switchButton.hasAttribute("hidden")).to.be.true;
       expect(document.getElementById("threshold-three").hasAttribute("slot")).to
         .be.false;
 
-      wrapperWidth = 160;
+      wrapperWidth = 145;
       resizeObserver.triggerResize([{ target: wrapper }]);
       await flushFrames();
       expect(switchButton.hasAttribute("hidden")).to.be.false;
@@ -1570,6 +1574,201 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should not count rendered padding and borders twice when controls fit", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="border-box-wrapper">
+          <monster-control-bar id="border-box-bar">
+            <button id="border-box-one" style="padding: 10px; border: 2px solid">One</button>
+            <button id="border-box-two" style="padding: 10px; border: 2px solid">Two</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("border-box-wrapper");
+      const bar = document.getElementById("border-box-bar");
+      const buttons = [
+        document.getElementById("border-box-one"),
+        document.getElementById("border-box-two"),
+      ];
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 130,
+      });
+
+      for (const button of buttons) {
+        Object.defineProperty(button, "offsetWidth", {
+          configurable: true,
+          value: 60,
+        });
+        Object.defineProperty(button, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        button.getBoundingClientRect = () => ({
+          width: 60,
+          height: 30,
+          top: 0,
+          right: 60,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        get: () =>
+          switchButton.hasAttribute("hidden") ||
+          switchButton.classList.contains("hidden")
+            ? 0
+            : 20,
+      });
+
+      await flushFrames();
+
+      expect(switchButton.hasAttribute("hidden")).to.be.true;
+      expect(buttons.every((button) => !button.hasAttribute("slot"))).to.be.true;
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should recalculate overflow when a visible control width changes", async function () {
+    const OriginalResizeObserver = window.ResizeObserver;
+    const originalGlobalResizeObserver = globalThis.ResizeObserver;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    class TrackingResizeObserver extends ResizeObserverMock {
+      static instances = [];
+
+      constructor(callback) {
+        super(callback);
+        TrackingResizeObserver.instances.push(this);
+      }
+    }
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.ResizeObserver = TrackingResizeObserver;
+      globalThis.ResizeObserver = TrackingResizeObserver;
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="item-resize-wrapper">
+          <monster-control-bar id="item-resize-bar">
+            <button id="item-resize-one">One</button>
+            <button id="item-resize-two">Two</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("item-resize-wrapper");
+      const bar = document.getElementById("item-resize-bar");
+      const buttons = [
+        document.getElementById("item-resize-one"),
+        document.getElementById("item-resize-two"),
+      ];
+      const widths = [60, 60];
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 160,
+      });
+
+      buttons.forEach((button, index) => {
+        Object.defineProperty(button, "offsetWidth", {
+          configurable: true,
+          get: () => widths[index],
+        });
+        Object.defineProperty(button, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        button.getBoundingClientRect = () => ({
+          width: widths[index],
+          height: 30,
+          top: 0,
+          right: widths[index],
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      });
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+      expect(buttons.every((button) => !button.hasAttribute("slot"))).to.be.true;
+
+      const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+        observer.elements.includes(wrapper),
+      );
+      expect(resizeObserver).to.exist;
+
+      widths[0] = 110;
+      resizeObserver.triggerResize([{ target: buttons[0] }]);
+      expect(scheduledCallbacks.length).to.equal(1);
+      await flushFrames();
+
+      expect(buttons[0].hasAttribute("slot")).to.be.false;
+      expect(buttons[1].getAttribute("slot")).to.equal("popper");
+      expect(switchButton.hasAttribute("hidden")).to.be.false;
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
   it("should move spacers with adjacent overflow controls", async function () {
     const OriginalResizeObserver = window.ResizeObserver;
     const originalGlobalResizeObserver = globalThis.ResizeObserver;
@@ -1787,7 +1986,7 @@ describe("ControlBar", function () {
     }
   });
 
-  it("should keep the previous overflow boundary while the switch remains visible", async function () {
+  it("should restore the maximal fitting prefix regardless of resize direction", async function () {
     const OriginalResizeObserver = window.ResizeObserver;
     const originalGlobalResizeObserver = globalThis.ResizeObserver;
     const originalRequestAnimationFrame = window.requestAnimationFrame;
@@ -1890,13 +2089,22 @@ describe("ControlBar", function () {
       wrapperWidth = 190;
       resizeObserver.triggerResize([{ target: wrapper }]);
       await flushFrames();
+      expect(switchButton.hasAttribute("hidden")).to.be.true;
+      expect(document.getElementById("sticky-overflow-wide").hasAttribute("slot"))
+        .to.be.false;
+      expect(document.getElementById("sticky-overflow-small").hasAttribute("slot"))
+        .to.be.false;
+
+      wrapperWidth = 90;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      await flushFrames();
       expect(switchButton.hasAttribute("hidden")).to.be.false;
       expect(document.getElementById("sticky-overflow-wide").getAttribute("slot"))
         .to.equal("popper");
       expect(document.getElementById("sticky-overflow-small").getAttribute("slot"))
         .to.equal("popper");
 
-      wrapperWidth = 220;
+      wrapperWidth = 190;
       resizeObserver.triggerResize([{ target: wrapper }]);
       await flushFrames();
       expect(switchButton.hasAttribute("hidden")).to.be.true;

package/test/cases/dom/customelement.mjs

@@ -4,6 +4,7 @@ import * as chai from 'chai';
 import {internalSymbol} from "../../../source/constants.mjs";
 import {customElementUpdaterLinkSymbol} from "../../../source/dom/constants.mjs";
 import {getDocument} from "../../../source/dom/util.mjs";
+import {Observer} from "../../../source/types/observer.mjs";
 import {ProxyObserver} from "../../../source/types/proxyobserver.mjs";
 import {chaiDom} from "../../util/chai-dom.mjs";
 import {initJSDOM} from "../../util/jsdom.mjs";
@@ -28,7 +29,7 @@ const updaterSymbolSymbol = Symbol.for(updaterSymbolKey);
 
 describe('DOM', function () {
 
-    let CustomElement, registerCustomElement, TestComponent, document, TestComponent2, TestStateComponent, TestMutationComponent, HiddenStateClass, assignUpdaterToElement,
+    let CustomElement, registerCustomElement, updaterTransformerMethodsSymbol, TestComponent, document, TestComponent2, TestStateComponent, TestMutationComponent, HiddenStateClass, assignUpdaterToElement,
         addObjectWithUpdaterToElement;
 
     describe("assignUpdaterToElement", function () {
@@ -154,6 +155,7 @@ describe('DOM', function () {
                     try {
                         CustomElement = m['CustomElement'];
                         registerCustomElement = m['registerCustomElement'];
+                        updaterTransformerMethodsSymbol = m['updaterTransformerMethodsSymbol'];
                         TestComponent = class extends CustomElement {
                             static getTag() {
                                 return "monster-testclass"
@@ -510,6 +512,81 @@ describe('DOM', function () {
                     }, 20);
                 }, 10);
             });
+
+            it('should synchronize option arrays without unchanged proxy churn issue #517', async function () {
+                const htmlTAG = 'monster-testclass-array-sync-517';
+
+                if (!customElements.get(htmlTAG)) {
+                    class ArraySyncComponent extends CustomElement {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                items: Array.from({length: 100}, (_, index) => `item-${index}`),
+                                unrelated: 0,
+								templates: {
+									main: '<span id="array-sync-value" data-monster-replace="path:items | call:joinItems"></span><span id="array-sync-value-second" data-monster-replace="path:items | call:joinItems"></span>',
+                                },
+                            });
+                        }
+
+                        [updaterTransformerMethodsSymbol]() {
+                            return {
+                                joinItems: (items) => items.join(','),
+                            };
+                        }
+                    }
+
+                    registerCustomElement(ArraySyncComponent);
+                }
+
+                const element = document.createElement(htmlTAG);
+                document.getElementById('test1').appendChild(element);
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                const updaterGroups = element[customElementUpdaterLinkSymbol];
+                let linkedUpdater = null;
+                for (const group of updaterGroups) {
+                    for (const updater of group) {
+                        linkedUpdater = updater;
+                        break;
+                    }
+                    if (linkedUpdater) break;
+                }
+                expect(linkedUpdater).to.exist;
+
+                let notificationCount = 0;
+                class CountingObserver extends Observer {
+                    update(subject) {
+                        notificationCount++;
+                        return super.update(subject);
+                    }
+                }
+                const observer = new CountingObserver(() => {});
+                linkedUpdater[internalSymbol].subject.attachObserver(observer);
+
+                try {
+                    element.setOption('unrelated', 1);
+                    await new Promise((resolve) => setTimeout(resolve, 30));
+					expect(notificationCount).to.be.at.most(3);
+
+                    notificationCount = 0;
+                    element.setOption('items.50', 'changed');
+                    await new Promise((resolve) => setTimeout(resolve, 30));
+
+					expect(notificationCount).to.be.at.most(3);
+					expect(
+						element.shadowRoot.querySelector('#array-sync-value').textContent,
+					).to.contain('changed');
+					expect(
+						element.shadowRoot.querySelector('#array-sync-value-second').textContent,
+					).to.contain('changed');
+                } finally {
+                    linkedUpdater[internalSymbol].subject.detachObserver(observer);
+                }
+            });
         })
 
         describe('setOptions()', function () {
@@ -860,6 +937,64 @@ describe('DOM', function () {
 	        })
 
         describe('mutation observer lifecycle', function () {
+	            it('should coalesce child mutations without a refresh loop issue #517', async function () {
+	                const htmlTAG = 'monster-testclass-mutation-loop-517';
+
+	                if (!customElements.get(htmlTAG)) {
+	                    class MutationLoopComponent extends CustomElement {
+	                        static getTag() {
+	                            return htmlTAG;
+	                        }
+
+	                        get defaults() {
+	                            return Object.assign({}, super.defaults, {
+	                                shadowMode: false,
+	                                features: {
+	                                    mutationObserver: true,
+	                                },
+	                                templates: {
+	                                    main: '<span data-monster-replace="static:stable"></span>',
+	                                },
+	                            });
+	                        }
+	                    }
+
+	                    registerCustomElement(MutationLoopComponent);
+	                }
+
+	                const element = document.createElement(htmlTAG);
+	                document.getElementById('test1').appendChild(element);
+	                await new Promise((resolve) => setTimeout(resolve, 120));
+
+	                const updaterGroups = element[customElementUpdaterLinkSymbol];
+	                let linkedUpdater = null;
+	                for (const group of updaterGroups) {
+	                    for (const updater of group) {
+	                        linkedUpdater = updater;
+	                        break;
+	                    }
+	                    if (linkedUpdater) break;
+	                }
+	                expect(linkedUpdater).to.exist;
+
+	                let runCount = 0;
+	                const originalRun = linkedUpdater.run.bind(linkedUpdater);
+	                linkedUpdater.run = function () {
+	                    runCount++;
+	                    return originalRun();
+	                };
+
+	                element.appendChild(document.createElement('i'));
+	                element.appendChild(document.createElement('b'));
+	                element.appendChild(document.createElement('em'));
+	                await new Promise((resolve) => setTimeout(resolve, 160));
+
+	                expect(runCount).to.equal(1);
+	                expect(element.querySelector('[data-monster-replace]').textContent).to.equal(
+	                    'stable',
+	                );
+	            });
+
 	            it('should not rerun linked updaters after disconnect', function (done) {
 	                let mocks = document.getElementById('mocks');
 	                mocks.innerHTML = `<monster-testclass-mutation id="mutation-case"></monster-testclass-mutation>`;

package/test/cases/dom/updater.mjs

@@ -170,6 +170,7 @@ let htmlPatchVsReplace = `
 
 describe("DOM", function () {
   let Updater = null;
+  let addObjectWithUpdaterToElement = null;
 
   before(function (done) {
     const options = {};
@@ -177,6 +178,7 @@ describe("DOM", function () {
       import("../../../source/dom/updater.mjs")
         .then((m) => {
           Updater = m.Updater;
+          addObjectWithUpdaterToElement = m.addObjectWithUpdaterToElement;
 
           if (!customElements.get("monster-test-property")) {
             class MonsterTestProperty extends HTMLElement {
@@ -1907,6 +1909,50 @@ describe("DOM", function () {
   });
 
   describe("Updater reactive updates", function () {
+    it("should enable configured batching before the initial run issue #517", async function () {
+      const originalRun = Updater.prototype.run;
+      const originalSetBatchUpdates = Updater.prototype.setBatchUpdates;
+      const batchedUpdaters = new WeakSet();
+      const batchStateAtRun = [];
+      const symbol = Symbol("initial-batch-test");
+      const element = document.createElement("div");
+      element.setAttribute("data-monster-replace", "path:value");
+      document.getElementById("mocks").appendChild(element);
+
+      Updater.prototype.setBatchUpdates = function (enabled) {
+        if (enabled === true) {
+          batchedUpdaters.add(this);
+        }
+        return originalSetBatchUpdates.call(this, enabled);
+      };
+      Updater.prototype.run = function () {
+        batchStateAtRun.push(batchedUpdaters.has(this));
+        return originalRun.call(this);
+      };
+
+      let updaters = [];
+      try {
+        updaters = await Promise.all(
+          addObjectWithUpdaterToElement.call(
+            element,
+            element,
+            symbol,
+            { value: "initial" },
+            { batchUpdates: true },
+          ),
+        );
+
+        expect(batchStateAtRun).to.deep.equal([true]);
+        expect(element.textContent).to.equal("initial");
+      } finally {
+        Updater.prototype.run = originalRun;
+        Updater.prototype.setBatchUpdates = originalSetBatchUpdates;
+        for (const updater of updaters) {
+          updater.dispose();
+        }
+      }
+    });
+
     [false, true].forEach((batchUpdates) => {
       it(`should preserve microtask changes with batchUpdates=${batchUpdates} issue #496`, async function () {
         let mocks = document.getElementById("mocks");
@@ -1938,6 +1984,134 @@ describe("DOM", function () {
       });
     });
 
+    [false, true].forEach((batchUpdates) => {
+      it(`should render each binding once per snapshot with batchUpdates=${batchUpdates} issue #517`, async function () {
+        const mocks = document.getElementById("mocks");
+        const staticBindings = Array.from(
+          { length: 20 },
+          (_, index) =>
+            `<span data-index="${index}" data-monster-replace="static:marker | call:trackStatic"></span>`,
+        ).join("");
+        mocks.innerHTML = `
+          <span id="snapshot-items" data-monster-replace="path:items | call:lastItem"></span>
+          ${staticBindings}
+          <span id="snapshot-attribute" data-monster-attributes="title path:items | call:trackAttribute"></span>
+          <input id="snapshot-property" data-monster-properties="value path:items | call:trackProperty">
+        `;
+
+        const updater = new Updater(mocks, { items: [] });
+        updater.setBatchUpdates(batchUpdates);
+        let staticRenderCount = 0;
+        let attributeRenderCount = 0;
+        let propertyRenderCount = 0;
+        updater.setCallback("trackStatic", (value) => {
+          staticRenderCount++;
+          return value;
+        });
+        updater.setCallback("lastItem", (value) => value.at(-1) ?? "");
+        updater.setCallback("trackAttribute", (value) => {
+          attributeRenderCount++;
+          return value;
+        });
+        updater.setCallback("trackProperty", (value) => {
+          propertyRenderCount++;
+          return value;
+        });
+
+        let innerHTMLDescriptor = null;
+        let replacementWrites = 0;
+        try {
+          await updater.run();
+          staticRenderCount = 0;
+          attributeRenderCount = 0;
+          propertyRenderCount = 0;
+
+          innerHTMLDescriptor = Object.getOwnPropertyDescriptor(
+            Element.prototype,
+            "innerHTML",
+          );
+          Object.defineProperty(Element.prototype, "innerHTML", {
+            configurable: innerHTMLDescriptor.configurable,
+            enumerable: innerHTMLDescriptor.enumerable,
+            get: innerHTMLDescriptor.get,
+            set(value) {
+              if (
+                mocks.contains(this) &&
+                this.hasAttribute("data-monster-replace")
+              ) {
+                replacementWrites++;
+              }
+              return innerHTMLDescriptor.set.call(this, value);
+            },
+          });
+
+          const items = updater.getSubject().items;
+          for (let index = 0; index < 500; index++) {
+            items.push(`new-${index}`);
+          }
+
+          await new Promise((resolve) => setTimeout(resolve, 30));
+
+          expect(document.getElementById("snapshot-items").textContent).to.equal(
+            "new-499",
+          );
+          expect(staticRenderCount).to.equal(20);
+          expect(attributeRenderCount).to.equal(1);
+          expect(propertyRenderCount).to.equal(1);
+          expect(replacementWrites).to.equal(1);
+        } finally {
+          updater.dispose();
+          if (innerHTMLDescriptor) {
+            Object.defineProperty(
+              Element.prototype,
+              "innerHTML",
+              innerHTMLDescriptor,
+            );
+          }
+        }
+      });
+    });
+
+    it("should not rewrite unchanged replacement content issue #517", async function () {
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <span id="unchanged-replacement" data-monster-replace="static:same"></span>
+      `;
+
+      const element = document.getElementById("unchanged-replacement");
+      const descriptor = Object.getOwnPropertyDescriptor(
+        Element.prototype,
+        "innerHTML",
+      );
+      let writes = 0;
+
+      Object.defineProperty(Element.prototype, "innerHTML", {
+        configurable: descriptor.configurable,
+        enumerable: descriptor.enumerable,
+        get: descriptor.get,
+        set(value) {
+          if (this === element) {
+            writes++;
+          }
+          return descriptor.set.call(this, value);
+        },
+      });
+
+      const updater = new Updater(mocks, { trigger: 0 });
+      try {
+        await updater.run();
+        writes = 0;
+        updater.getSubject().trigger = 1;
+        await new Promise((resolve) => setTimeout(resolve, 20));
+
+        expect(element.textContent).to.equal("same");
+        expect(writes).to.equal(0);
+      } finally {
+        updater.dispose();
+        Object.defineProperty(Element.prototype, "innerHTML", descriptor);
+      }
+    });
+
     it("should update the DOM when the subject changes", function (done) {
       let mocks = document.getElementById("mocks");
       mocks.innerHTML = html1;