@schukai/monster 4.150.6 → 4.150.7

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.150.6"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.150.7"}

package/source/dom/updater.mjs

@@ -854,7 +854,10 @@ function removeElement(_change, renderContext) {
  */
 function insertElement(change, renderContext) {
 	const subject = this[internalSymbol].subject.getRealSubject();
-
+	const changePath = clone(change?.["path"]);
+	if (!isArray(changePath)) {
+		return false;
+	}
 	const mem = new WeakSet();
 	let wd = 0;
 	let changed = false;
@@ -873,36 +876,41 @@ function insertElement(change, renderContext) {
 		let found = false;
 		wd++;
 
-		const p = clone(change?.["path"]);
-		if (!isArray(p)) return changed;
+		const p = clone(changePath);
 
 		while (p.length > 0) {
 			const current = p.join(".");
 
 			let iterator = new Set();
-			const query = `[${ATTRIBUTE_UPDATER_INSERT}*="path:${current}"]`;
-
-			const e = container.querySelectorAll(query);
-
-			if (e.length > 0) {
-				iterator = new Set([...e]);
-			}
-
-			if (container.matches(query)) {
-				iterator.add(container);
+			const candidates = getBindingCandidates(
+				container,
+				ATTRIBUTE_UPDATER_INSERT,
+				renderContext?.candidates.insert ?? new WeakMap(),
+			);
+			for (const candidate of candidates) {
+				const definition = candidate.getAttribute(ATTRIBUTE_UPDATER_INSERT);
+				if (definition?.includes(`path:${current}`)) {
+					iterator.add(candidate);
+				}
 			}
 
 			for (const [, containerElement] of iterator.entries()) {
-				if (mem.has(containerElement)) continue;
-				mem.add(containerElement);
-
-				found = true;
-
 				const attributes = containerElement.getAttribute(
 					ATTRIBUTE_UPDATER_INSERT,
 				);
 				if (attributes === null) continue;
 
+				if (
+					mem.has(containerElement) ||
+					renderContext?.insert.get(containerElement) === attributes
+				) {
+					continue;
+				}
+				mem.add(containerElement);
+				renderContext?.insert.set(containerElement, attributes);
+
+				found = true;
+
 				const def = trimSpaces(attributes);
 				const i = def.indexOf(" ");
 				const key = trimSpaces(def.substr(0, i));
@@ -929,40 +937,53 @@ function insertElement(change, renderContext) {
 
 				const dataPath = cmd.split(":").pop();
 
-				let insertPoint;
-				if (containerElement.hasChildNodes()) {
-					insertPoint = containerElement.lastChild;
-				}
-
 				if (!isIterable(value)) {
 					throw new Error("the value is not iterable");
 				}
 
 				const available = new Set();
+				const existing = new Map();
+				const managedNodes = [];
+				for (const node of containerElement.querySelectorAll(
+					`[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}]`,
+				)) {
+					const ref = node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE);
+					if (!existing.has(ref)) {
+						existing.set(ref, node);
+					}
+					if (ref.includes(refPrefix)) {
+						managedNodes.push(node);
+					}
+				}
+
+				let template;
+				const pending = containerElement.ownerDocument.createDocumentFragment();
+				let structureChanged = false;
 
 				for (const [i] of Object.entries(value)) {
 					const ref = refPrefix + i;
 					const currentPath = `${dataPath}.${i}`;
 
 					available.add(ref);
-					const refElement = containerElement.querySelector(
-						`[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}="${ref}"]`,
-					);
+					const refElement = existing.get(ref);
 
 					if (refElement instanceof HTMLElement) {
-						insertPoint = refElement;
 						continue;
 					}
 
-					appendNewDocumentFragment(containerElement, key, ref, currentPath);
+					template ??= findDocumentTemplate(key, containerElement);
+					pending.appendChild(
+						createNewDocumentFragment(template, key, ref, currentPath),
+					);
 					changed = true;
 				}
 
-				const nodes = containerElement.querySelectorAll(
-					`[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}*="${refPrefix}"]`,
-				);
+				if (pending.hasChildNodes()) {
+					containerElement.appendChild(pending);
+					structureChanged = true;
+				}
 
-				for (const [, node] of Object.entries(nodes)) {
+				for (const node of managedNodes) {
 					if (
 						!available.has(
 							node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE),
@@ -972,11 +993,16 @@ function insertElement(change, renderContext) {
 							teardownManagedSubtree(node);
 							containerElement.removeChild(node);
 							changed = true;
+							structureChanged = true;
 						} catch (e) {
 							addErrorAttribute(containerElement, e);
 						}
 					}
 				}
+
+				if (structureChanged && renderContext) {
+					renderContext.candidates.insert = new WeakMap();
+				}
 			}
 
 			p.pop();
@@ -987,7 +1013,6 @@ function insertElement(change, renderContext) {
 			throw new Error("the maximum depth for the recursion is reached.");
 		}
 	}
-
 	return changed;
 }
 
@@ -996,24 +1021,21 @@ function insertElement(change, renderContext) {
  * @private
  * @license AGPLv3
  * @since 1.8.0
- * @param {HTMLElement} container
+ * @param {Template} template
  * @param {string} key
  * @param {string} ref
  * @param {string} path
  * @throws {Error} no template was found with the specified key.
  */
-function appendNewDocumentFragment(container, key, ref, path) {
-	const template = findDocumentTemplate(key, container);
-
+function createNewDocumentFragment(template, key, ref, path) {
 	const nodes = template.createDocumentFragment();
-	for (const [, node] of Object.entries(nodes.childNodes)) {
+	for (const node of nodes.childNodes) {
 		if (node instanceof HTMLElement) {
 			applyRecursive(node, key, path);
 			node.setAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE, ref);
 		}
-
-		container.appendChild(node);
 	}
+	return nodes;
 }
 
 /**
@@ -1113,9 +1135,11 @@ function createRenderContext() {
 		patch: new WeakSet(),
 		attributes: new WeakSet(),
 		properties: new WeakSet(),
+		insert: new WeakMap(),
 		removeProcessed: false,
 		insertBindingsPresent: undefined,
 		candidates: {
+			insert: new WeakMap(),
 			replace: new WeakMap(),
 			patch: new WeakMap(),
 			attributes: new WeakMap(),
@@ -1134,6 +1158,7 @@ function createRenderContext() {
 function invalidateRenderCandidates(renderContext) {
 	renderContext.removeProcessed = false;
 	renderContext.insertBindingsPresent = undefined;
+	renderContext.candidates.insert = new WeakMap();
 	renderContext.candidates.replace = new WeakMap();
 	renderContext.candidates.patch = new WeakMap();
 	renderContext.candidates.attributes = new WeakMap();

package/test/cases/dom/updater.mjs

@@ -725,6 +725,14 @@ describe("DOM", function () {
 
   describe("Updater()", function () {
     describe("Repeat", function () {
+      const waitUntil = async (predicate, message, timeout = 5000) => {
+        const deadline = Date.now() + timeout;
+        while (!predicate() && Date.now() < deadline) {
+          await new Promise((resolve) => setTimeout(resolve, 5));
+        }
+        expect(predicate(), message).to.equal(true);
+      };
+
       it("should build 6 li elements from an array", function (done) {
         let element = document.getElementById("test1");
         const testData = {
@@ -769,6 +777,244 @@ describe("DOM", function () {
           })
           .catch(done);
       });
+
+      [false, true].forEach((batchUpdates) => {
+        it(`should bulk insert and reuse indexed entries with batchUpdates=${batchUpdates} issue #548`, async function () {
+          this.timeout(5000);
+          const mocks = document.getElementById("mocks");
+          mocks.innerHTML = `
+            <template id="bulk-row">
+              <li data-monster-replace="path:bulk-row.label"></li>
+            </template>
+            <ul id="bulk-rows" data-monster-insert="bulk-row path:items"></ul>
+          `;
+
+          const rows = document.getElementById("bulk-rows");
+          const updater = new Updater(rows, { items: [] });
+          updater.setBatchUpdates(batchUpdates);
+
+          const originalAppendChild = rows.appendChild;
+          const originalQuerySelector = rows.querySelector;
+          let appendCalls = 0;
+          let appendedFragments = 0;
+          let exactReferenceLookups = 0;
+
+          rows.appendChild = function (node) {
+            appendCalls++;
+            if (node instanceof DocumentFragment) {
+              appendedFragments++;
+            }
+            return originalAppendChild.call(this, node);
+          };
+          rows.querySelector = function (selector) {
+            if (selector.startsWith('[data-monster-insert-reference="')) {
+              exactReferenceLookups++;
+            }
+            return originalQuerySelector.call(this, selector);
+          };
+
+          const waitForLength = (length) =>
+            waitUntil(
+              () => rows.children.length === length,
+              `expected ${length} bulk rows`,
+            );
+
+          try {
+            await updater.run();
+            const items = updater.getSubject().items;
+            for (let index = 0; index < 872; index++) {
+              items.push({ label: `Row ${index}` });
+            }
+            await waitForLength(872);
+
+            expect(appendCalls).to.equal(1);
+            expect(appendedFragments).to.equal(1);
+            expect(exactReferenceLookups).to.equal(0);
+            expect(rows.firstElementChild.textContent).to.equal("Row 0");
+            expect(rows.lastElementChild.textContent).to.equal("Row 871");
+
+            const firstRow = rows.firstElementChild;
+            items.splice(400, 0, { label: "Inserted middle" });
+            await waitForLength(873);
+            expect(rows.children[400].textContent).to.equal("Inserted middle");
+            expect(rows.lastElementChild.textContent).to.equal("Row 871");
+
+            items.splice(400, 1);
+            await waitForLength(872);
+            expect(rows.children[400].textContent).to.equal("Row 400");
+
+            items[0].label = "Updated row";
+            items.splice(870, 2);
+            await waitForLength(870);
+
+            expect(rows.firstElementChild).to.equal(firstRow);
+            expect(rows.firstElementChild.textContent).to.equal("Updated row");
+            expect(rows.lastElementChild.textContent).to.equal("Row 869");
+            expect(appendCalls).to.equal(2);
+            expect(appendedFragments).to.equal(2);
+          } finally {
+            updater.dispose();
+            rows.appendChild = originalAppendChild;
+            rows.querySelector = originalQuerySelector;
+          }
+        });
+      });
+
+      it("should process two insert containers with the same data path issue #548", async function () {
+        const mocks = document.getElementById("mocks");
+        mocks.innerHTML = `
+          <template id="first-row"><li data-monster-replace="path:first-row"></li></template>
+          <template id="second-row"><li data-monster-replace="path:second-row"></li></template>
+          <div id="bulk-groups">
+            <ul id="first-rows" data-monster-insert="first-row path:items"></ul>
+            <ul id="second-rows" data-monster-insert="second-row path:items"></ul>
+          </div>
+        `;
+
+        const updater = new Updater(document.getElementById("bulk-groups"), {
+          items: [],
+        });
+        updater.setBatchUpdates(true);
+
+        try {
+          await updater.run();
+          updater.getSubject().items.push("Shared");
+          await waitUntil(
+            () =>
+              document.getElementById("first-rows").textContent === "Shared" &&
+              document.getElementById("second-rows").textContent === "Shared",
+            "expected both insert containers to render",
+          );
+
+          expect(document.getElementById("first-rows").textContent).to.equal(
+            "Shared",
+          );
+          expect(document.getElementById("second-rows").textContent).to.equal(
+            "Shared",
+          );
+        } finally {
+          updater.dispose();
+        }
+      });
+
+      it("should discover an insert binding created by replace in non-batch mode issue #548", async function () {
+        const mocks = document.getElementById("mocks");
+        mocks.innerHTML = `
+          <template id="dynamic-row">
+            <article data-monster-replace="path:dynamic-row.html"></article>
+          </template>
+          <template id="dynamic-child">
+            <span data-monster-replace="path:dynamic-child.label"></span>
+          </template>
+          <div id="dynamic-root" data-monster-insert="dynamic-row path:items"></div>
+        `;
+
+        const updater = new Updater(document.getElementById("dynamic-root"), {
+          items: [{ html: "", children: [] }],
+        });
+        updater.setBatchUpdates(false);
+
+        try {
+          await updater.run();
+          const item = updater.getSubject().items[0];
+          item.html =
+            '<div id="dynamic-children" data-monster-insert="dynamic-child path:items.0.children"></div>';
+          item.children.push({ label: "Child" });
+
+          await waitUntil(
+            () =>
+              document.getElementById("dynamic-children")?.textContent.trim() ===
+              "Child",
+            "expected the dynamically created insert binding to render",
+          );
+        } finally {
+          updater.dispose();
+        }
+      });
+
+      it("should process a changed insert definition in the same snapshot issue #548", async function () {
+        this.timeout(6000);
+        const mocks = document.getElementById("mocks");
+        mocks.innerHTML = `
+          <template id="old-row">
+            <span data-monster-replace="path:old-row"></span>
+          </template>
+          <template id="new-row">
+            <span data-monster-replace="path:new-row"></span>
+          </template>
+          <div id="rebound-insert"
+               data-monster-insert="old-row path:oldItems"
+               data-monster-attributes="data-monster-insert path:insertDefinition"></div>
+        `;
+
+        const updater = new Updater(mocks, {
+          oldItems: [],
+          insertDefinition: "old-row path:oldItems",
+          newItems: [],
+        });
+        updater.setBatchUpdates(false);
+
+        try {
+          await updater.run();
+          const container = document.getElementById("rebound-insert");
+          const subject = updater.getSubject();
+          subject.oldItems.push("Old");
+          subject.insertDefinition = "new-row path:newItems";
+          subject.newItems.push("New");
+
+          await waitUntil(
+            () =>
+              Array.from(container.children, (node) => node.textContent).join("") ===
+              "OldNew",
+            "expected the changed insert definition to render",
+          );
+
+          expect(container.getAttribute("data-monster-insert")).to.equal(
+            "new-row path:newItems",
+          );
+          expect(container.children.length).to.equal(2);
+        } finally {
+          updater.dispose();
+        }
+      });
+
+      it("should preserve multi-root template entries issue #548", async function () {
+        const mocks = document.getElementById("mocks");
+        mocks.innerHTML = `
+          <template id="multi-row">
+            <strong data-monster-replace="path:multi-row.label"></strong>
+            <em data-monster-replace="path:multi-row.label"></em>
+          </template>
+          <div id="multi-rows" data-monster-insert="multi-row path:items"></div>
+        `;
+
+        const rows = document.getElementById("multi-rows");
+        const updater = new Updater(rows, {
+          items: [{ label: "First" }, { label: "Second" }],
+        });
+
+        try {
+          await updater.run();
+          expect(Array.from(rows.children, (node) => node.textContent)).to.deep.equal([
+            "First",
+            "First",
+            "Second",
+            "Second",
+          ]);
+
+          updater.getSubject().items.splice(0, 1);
+          await waitUntil(
+            () => rows.children.length === 2,
+            "expected both top-level nodes of the removed entry to be removed",
+          );
+          expect(Array.from(rows.children, (node) => node.textContent)).to.deep.equal([
+            "Second",
+            "Second",
+          ]);
+        } finally {
+          updater.dispose();
+        }
+      });
     });
   });