@schukai/monster 4.148.5 → 4.148.6

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.148.5"}
+{"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.148.6"}

package/source/components/datatable/save-button.mjs

@@ -75,8 +75,9 @@ const originValuesSymbol = Symbol.for(
  */
 const badgeElementSymbol = Symbol("badgeElement");
 const saveInFlightSymbol = Symbol("saveInFlight");
-const pendingResetSymbol = Symbol("pendingReset");
 const fetchInFlightSymbol = Symbol("fetchInFlight");
+const readRevisionSymbol = Symbol("readRevision");
+const pendingWriteSymbol = Symbol("pendingWrite");
 const originInitializedSymbol = Symbol("originInitialized");
 const internalDisableTimeoutSymbol = Symbol("internalDisableTimeout");
 const internalDisableVersionSymbol = Symbol("internalDisableVersion");
@@ -206,33 +207,84 @@ class SaveButton extends CustomElement {
 			}
 
 			if (element instanceof RestDatasource) {
-				element.addEventListener("monster-datasource-fetch", (event) => {
-					if (event?.detail?.operation === DATASOURCE_OPERATION_WRITE) {
-						return;
-					}
-					if (self[saveInFlightSymbol]) {
-						self[pendingResetSymbol] = true;
-						return;
-					}
-					self[fetchInFlightSymbol] = true;
-					clearOriginValues.call(self);
-				});
-				element.addEventListener("monster-datasource-fetched", (event) => {
-					if (event?.detail?.operation !== DATASOURCE_OPERATION_WRITE) {
+				element.addEventListener(
+					"monster-datasource-fetch",
+					(event) => {
+						if (
+							event?.detail?.operation ===
+							DATASOURCE_OPERATION_WRITE
+						) {
+							self[pendingWriteSymbol] = {
+								data: clone(
+									self[datasourceLinkedElementSymbol].data,
+								),
+								readRevision: self[readRevisionSymbol] || 0,
+							};
+							return;
+						}
+						self[fetchInFlightSymbol] = true;
+						clearOriginValues.call(self);
+					},
+				);
+				element.addEventListener(
+					"monster-datasource-fetched",
+					(event) => {
+						if (
+							event?.detail?.operation ===
+							DATASOURCE_OPERATION_WRITE
+						) {
+							const pendingWrite = self[pendingWriteSymbol];
+							if (self[fetchInFlightSymbol] === true) {
+								if (pendingWrite) {
+									pendingWrite.completed = true;
+								}
+								return;
+							}
+							self[pendingWriteSymbol] = null;
+							if (
+								pendingWrite &&
+								pendingWrite.readRevision ===
+									(self[readRevisionSymbol] || 0)
+							) {
+								setOriginValues.call(self, pendingWrite.data);
+								updateChangesState.call(self);
+							}
+							return;
+						}
 						self[fetchInFlightSymbol] = false;
-					}
-					setOriginValues.call(
-						self,
-						clone(self[datasourceLinkedElementSymbol].data),
-					);
-					updateChangesState.call(self);
-				});
-				element.addEventListener("monster-datasource-error", (event) => {
-					if (event?.detail?.operation === DATASOURCE_OPERATION_WRITE) {
-						return;
-					}
-					self[fetchInFlightSymbol] = false;
-				});
+						self[readRevisionSymbol] =
+							(self[readRevisionSymbol] || 0) + 1;
+						self[pendingWriteSymbol] = null;
+						setOriginValues.call(
+							self,
+							clone(self[datasourceLinkedElementSymbol].data),
+						);
+						updateChangesState.call(self);
+					},
+				);
+				element.addEventListener(
+					"monster-datasource-error",
+					(event) => {
+						if (
+							event?.detail?.operation ===
+							DATASOURCE_OPERATION_WRITE
+						) {
+							self[pendingWriteSymbol] = null;
+							return;
+						}
+						self[fetchInFlightSymbol] = false;
+						const pendingWrite = self[pendingWriteSymbol];
+						if (
+							pendingWrite?.completed === true &&
+							pendingWrite.readRevision ===
+								(self[readRevisionSymbol] || 0)
+						) {
+							self[pendingWriteSymbol] = null;
+							setOriginValues.call(self, pendingWrite.data);
+							updateChangesState.call(self);
+						}
+					},
+				);
 			}
 
 			this[datasourceLinkedElementSymbol] = element;
@@ -427,35 +479,15 @@ function initEventHandler() {
 				.call(this)
 				.then(() => this[datasourceLinkedElementSymbol].write())
 				.then(() => {
-					clearOriginValues.call(this);
-					setOriginValues.call(
-						this,
-						clone(this[datasourceLinkedElementSymbol].data),
-					);
-					this[stateButtonElementSymbol].removeState();
-					this[stateButtonElementSymbol].setOption(
-						"disabled",
-						shouldDisableWhenNoChanges.call(this),
-					);
-					this.setOption("changes", "");
-					this.setOption(
-						"classes.badge",
-						new TokenList(this.getOption("classes.badge"))
-							.add("hidden")
-							.toString(),
-					);
+					updateChangesState.call(this);
 				})
 				.catch((error) => {
 					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
-					this[stateButtonElementSymbol].setOption("disabled", false);
+					updateChangesState.call(this);
 				})
 				.finally(() => {
 					this[saveInFlightSymbol] = false;
 					clearInternalDisableTimeout.call(this);
-					if (this[pendingResetSymbol]) {
-						this[pendingResetSymbol] = false;
-						clearOriginValues.call(this);
-					}
 				});
 		});
 	});

package/test/cases/components/datatable/datasource-rest-lifecycle.mjs

@@ -59,6 +59,16 @@ function clickSaveButton(button) {
 	action();
 }
 
+function deferred() {
+	let resolve;
+	let reject;
+	const promise = new Promise((promiseResolve, promiseReject) => {
+		resolve = promiseResolve;
+		reject = promiseReject;
+	});
+	return { promise, reject, resolve };
+}
+
 function expectPendingChanges(button) {
 	expect(Number(button.getOption("changes"))).to.be.greaterThan(0);
 	expect(getStateButton(button)?.getOption("disabled")).to.equal(false);
@@ -215,6 +225,34 @@ describe("REST datasource lifecycle", function () {
 		expectNoPendingChanges(second);
 	});
 
+	it("keeps edits made during a successful write pending", async function () {
+		const datasource = createDatasource("write-snapshot-datasource");
+		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
+		const written = { data: [{ id: "area-1", name: "Written change" }] };
+		const editedDuringWrite = {
+			data: [{ id: "area-1", name: "Edited during write" }],
+		};
+		const button = createSaveButton("#write-snapshot-datasource");
+		document.getElementById("mocks").append(datasource, button);
+		await loadDatasource(datasource, loaded);
+
+		datasource.data = written;
+		await waitForUpdates();
+		expectPendingChanges(button);
+
+		const writeResult = deferred();
+		datasource.datasource.write = () => writeResult.promise;
+		clickSaveButton(button);
+		await waitForUpdates();
+
+		datasource.data = editedDuringWrite;
+		await waitForUpdates();
+		writeResult.resolve({ ok: true });
+		await waitForUpdates();
+
+		expectPendingChanges(button);
+	});
+
 	it("replaces every save button baseline after a read", async function () {
 		const datasource = createDatasource("read-baseline-datasource");
 		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
@@ -296,4 +334,141 @@ describe("REST datasource lifecycle", function () {
 		expectNoPendingChanges(first);
 		expectNoPendingChanges(second);
 	});
+
+	it("preserves a read baseline when the save write finishes later", async function () {
+		const datasource = createDatasource("read-first-datasource");
+		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
+		const written = { data: [{ id: "area-1", name: "Written change" }] };
+		const refreshed = { data: [{ id: "area-1", name: "Server refresh" }] };
+		const editedAfterRead = {
+			data: [{ id: "area-1", name: "Edited after refresh" }],
+		};
+		const button = createSaveButton("#read-first-datasource");
+		document.getElementById("mocks").append(datasource, button);
+		await loadDatasource(datasource, loaded);
+
+		datasource.data = written;
+		await waitForUpdates();
+		expectPendingChanges(button);
+
+		const writeResult = deferred();
+		datasource.datasource.write = () => writeResult.promise;
+		clickSaveButton(button);
+		await waitForUpdates();
+
+		const readResult = deferred();
+		datasource.datasource.read = () => readResult.promise;
+		const read = datasource.read();
+		await waitForUpdates();
+		datasource.data = refreshed;
+		readResult.resolve({ ok: true });
+		await read;
+		await waitForUpdates();
+		expectNoPendingChanges(button);
+
+		datasource.data = editedAfterRead;
+		await waitForUpdates();
+		expectPendingChanges(button);
+
+		writeResult.resolve({ ok: true });
+		await waitForUpdates();
+		expectPendingChanges(button);
+	});
+
+	it("establishes the read baseline when the save write finishes first", async function () {
+		const datasource = createDatasource("write-first-datasource");
+		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
+		const written = { data: [{ id: "area-1", name: "Written change" }] };
+		const refreshed = { data: [{ id: "area-1", name: "Server refresh" }] };
+		const editedAfterRead = {
+			data: [{ id: "area-1", name: "Edited after refresh" }],
+		};
+		const button = createSaveButton("#write-first-datasource");
+		document.getElementById("mocks").append(datasource, button);
+		await loadDatasource(datasource, loaded);
+
+		datasource.data = written;
+		await waitForUpdates();
+		expectPendingChanges(button);
+
+		const writeResult = deferred();
+		datasource.datasource.write = () => writeResult.promise;
+		clickSaveButton(button);
+		await waitForUpdates();
+
+		const readResult = deferred();
+		datasource.datasource.read = () => readResult.promise;
+		const read = datasource.read();
+		await waitForUpdates();
+		writeResult.resolve({ ok: true });
+		await waitForUpdates();
+		expectNoPendingChanges(button);
+
+		datasource.data = refreshed;
+		readResult.resolve({ ok: true });
+		await read;
+		await waitForUpdates();
+		expectNoPendingChanges(button);
+
+		datasource.data = editedAfterRead;
+		await waitForUpdates();
+		expectPendingChanges(button);
+	});
+
+	it("falls back to the written snapshot when a concurrent read fails", async function () {
+		const datasource = createDatasource("failed-read-datasource");
+		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
+		const written = { data: [{ id: "area-1", name: "Written change" }] };
+		const editedAfterFailure = {
+			data: [{ id: "area-1", name: "Edited after failed read" }],
+		};
+		const button = createSaveButton("#failed-read-datasource");
+		document.getElementById("mocks").append(datasource, button);
+		await loadDatasource(datasource, loaded);
+
+		datasource.data = written;
+		await waitForUpdates();
+		const writeResult = deferred();
+		datasource.datasource.write = () => writeResult.promise;
+		clickSaveButton(button);
+		await waitForUpdates();
+
+		const readResult = deferred();
+		datasource.datasource.read = () => readResult.promise;
+		const read = datasource.read().catch(() => {});
+		await waitForUpdates();
+		writeResult.resolve({ ok: true });
+		await waitForUpdates();
+		readResult.reject(new Error("Rejected concurrent read"));
+		await read;
+		await waitForUpdates();
+		expectNoPendingChanges(button);
+
+		datasource.data = editedAfterFailure;
+		await waitForUpdates();
+		expectPendingChanges(button);
+	});
+
+	it("treats lifecycle events without an operation as read events", async function () {
+		const datasource = createDatasource("legacy-lifecycle-datasource");
+		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
+		const refreshed = { data: [{ id: "area-1", name: "Server refresh" }] };
+		const edited = { data: [{ id: "area-1", name: "Edited refresh" }] };
+		const button = createSaveButton("#legacy-lifecycle-datasource");
+		document.getElementById("mocks").append(datasource, button);
+		await loadDatasource(datasource, loaded);
+
+		datasource.dispatchEvent(new CustomEvent("monster-datasource-fetch"));
+		datasource.data = refreshed;
+		await waitForUpdates();
+		expectNoPendingChanges(button);
+
+		datasource.dispatchEvent(new CustomEvent("monster-datasource-fetched"));
+		await waitForUpdates();
+		expectNoPendingChanges(button);
+
+		datasource.data = edited;
+		await waitForUpdates();
+		expectPendingChanges(button);
+	});
 });

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

@@ -9,6 +9,29 @@ chai.use(chaiDom);
 const waitForLayout = (timeout = 120) =>
   new Promise((resolve) => setTimeout(resolve, timeout));
 
+function waitForCondition(check, { timeout = 4000, interval = 25 } = {}) {
+  return new Promise((resolve, reject) => {
+    const start = Date.now();
+    const poll = () => {
+      try {
+        if (check()) {
+          resolve();
+          return;
+        }
+      } catch {}
+
+      if (Date.now() - start >= timeout) {
+        reject(new Error("Timed out waiting for condition"));
+        return;
+      }
+
+      setTimeout(poll, interval);
+    };
+
+    poll();
+  });
+}
+
 const html = `
   <div id="test1">
     <monster-control-bar id="bar">
@@ -115,7 +138,9 @@ describe("ControlBar", function () {
     await waitForLayout();
 
     bar.setOption("layout.hideWhenEmpty", true);
-    await waitForLayout();
+    await waitForCondition(() =>
+      bar.hasAttribute("data-monster-empty-hidden"),
+    );
 
     expect(bar.hasAttribute("hidden")).to.be.true;
     expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
@@ -131,7 +156,9 @@ describe("ControlBar", function () {
     `;
     const bar = document.getElementById("empty-auto-hidden-bar");
 
-    await waitForLayout();
+    await waitForCondition(() =>
+      bar.hasAttribute("data-monster-empty-hidden"),
+    );
 
     expect(bar.getOption("layout.hideWhenEmpty")).to.equal(true);
     expect(bar.hasAttribute("hidden")).to.be.true;
@@ -151,7 +178,9 @@ describe("ControlBar", function () {
     const bar = document.getElementById("dynamic-auto-hidden-bar");
     const button = document.getElementById("dynamic-auto-hidden-button");
 
-    await waitForLayout();
+    await waitForCondition(() =>
+      bar.hasAttribute("data-monster-empty-hidden"),
+    );
 
     expect(bar.hasAttribute("hidden")).to.be.true;
     expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
@@ -179,12 +208,16 @@ describe("ControlBar", function () {
     `;
     const bar = document.getElementById("option-auto-hidden-bar");
 
-    await waitForLayout();
+    await waitForCondition(() =>
+      bar.hasAttribute("data-monster-empty-hidden"),
+    );
 
     expect(bar.hasAttribute("hidden")).to.be.true;
 
     bar.setOption("layout.hideWhenEmpty", false);
-    await waitForLayout();
+    await waitForCondition(
+      () => !bar.hasAttribute("data-monster-empty-hidden"),
+    );
 
     expect(bar.hasAttribute("hidden")).to.be.false;
     expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;