@schukai/monster 4.148.8 → 4.149.0

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;