@schukai/monster 4.148.4 → 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.4"}
+{"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/constants.mjs

@@ -20,6 +20,22 @@ import { ATTRIBUTE_PREFIX } from "../../dom/constants.mjs";
  */
 const STYLE_DISPLAY_MODE_BLOCK = "block";
 
+/**
+ * Datasource lifecycle operation for read requests.
+ *
+ * @since 4.148.5
+ * @type {string}
+ */
+const DATASOURCE_OPERATION_READ = "read";
+
+/**
+ * Datasource lifecycle operation for write requests.
+ *
+ * @since 4.148.5
+ * @type {string}
+ */
+const DATASOURCE_OPERATION_WRITE = "write";
+
 /**
  * This attribute `data-monster-datasource` can be used to pass a datasource.
  *
@@ -105,6 +121,8 @@ const ATTRIBUTE_DATATABLE_MODE_HIDDEN = "hidden";
 const ATTRIBUTE_DATATABLE_MODE_VISIBLE = "visible";
 
 export {
+	DATASOURCE_OPERATION_READ,
+	DATASOURCE_OPERATION_WRITE,
 	ATTRIBUTE_DATASOURCE,
 	ATTRIBUTE_DATASOURCE_SELECTOR,
 	ATTRIBUTE_DATASOURCE_ARGUMENTS,

package/source/components/datatable/datasource/rest.mjs

@@ -31,6 +31,10 @@ import { Observer } from "../../../types/observer.mjs";
 import { Pathfinder } from "../../../data/pathfinder.mjs";
 import { fireCustomEvent } from "../../../dom/events.mjs";
 import { isArray, isFunction, isObject, isString } from "../../../types/is.mjs";
+import {
+	DATASOURCE_OPERATION_READ,
+	DATASOURCE_OPERATION_WRITE,
+} from "../constants.mjs";
 
 export { Rest };
 
@@ -318,6 +322,9 @@ class Rest extends Datasource {
 	 * @fires monster-datasource-fetch
 	 * @fires monster-datasource-fetched
 	 * @fires monster-datasource-error
+	 * @fires monster-datasource-validation
+	 * @description Lifecycle event details contain `datasource` and
+	 * `operation: "read"` for this request.
 	 */
 	read() {
 		const opt = clone(this.getOption("read"));
@@ -372,6 +379,7 @@ class Rest extends Datasource {
 		return new Promise((resolve, reject) => {
 			fireCustomEvent(this, "monster-datasource-fetch", {
 				datasource: this,
+				operation: DATASOURCE_OPERATION_READ,
 			});
 
 			queueMicrotask(() => {
@@ -381,15 +389,18 @@ class Rest extends Datasource {
 						if (this[readRequestIdSymbol] === requestId) {
 							fireCustomEvent(this, "monster-datasource-fetched", {
 								datasource: this,
+								operation: DATASOURCE_OPERATION_READ,
 							});
 						}
 
 						resolve(response);
 					})
 					.catch((error) => {
-						handleValidationError.call(this, error);
+						handleValidationError.call(this, error, DATASOURCE_OPERATION_READ);
 						if (this[readRequestIdSymbol] === requestId) {
 							fireCustomEvent(this, "monster-datasource-error", {
+								datasource: this,
+								operation: DATASOURCE_OPERATION_READ,
 								error: error,
 							});
 
@@ -404,6 +415,12 @@ class Rest extends Datasource {
 	/**
 	 * Writes the data to the rest api.
 	 * @return {Promise}
+	 * @fires monster-datasource-fetch
+	 * @fires monster-datasource-fetched
+	 * @fires monster-datasource-error
+	 * @fires monster-datasource-validation
+	 * @description Lifecycle event details contain `datasource` and
+	 * `operation: "write"` for this request.
 	 */
 	write() {
 		const opt = clone(this.getOption("write"));
@@ -435,6 +452,7 @@ class Rest extends Datasource {
 		return new Promise((resolve, reject) => {
 			fireCustomEvent(this, "monster-datasource-fetch", {
 				datasource: this,
+				operation: DATASOURCE_OPERATION_WRITE,
 			});
 
 			queueMicrotask(() => {
@@ -444,15 +462,18 @@ class Rest extends Datasource {
 						if (this[writeRequestIdSymbol] === requestId) {
 							fireCustomEvent(this, "monster-datasource-fetched", {
 								datasource: this,
+								operation: DATASOURCE_OPERATION_WRITE,
 							});
 						}
 
 						resolve(response);
 					})
 					.catch((error) => {
-						handleValidationError.call(this, error);
+						handleValidationError.call(this, error, DATASOURCE_OPERATION_WRITE);
 						if (this[writeRequestIdSymbol] === requestId) {
 							fireCustomEvent(this, "monster-datasource-error", {
+								datasource: this,
+								operation: DATASOURCE_OPERATION_WRITE,
 								error: error,
 							});
 
@@ -662,9 +683,10 @@ function initIntersectionObserver() {
 /**
  * @private
  * @param {Error} error
+ * @param {string} operation
  * @return {Promise<void>}
  */
-function handleValidationError(error) {
+function handleValidationError(error, operation) {
 	const path = this.getOption("response.path.validationErrors");
 	if (!path) {
 		return Promise.resolve();
@@ -723,6 +745,8 @@ function handleValidationError(error) {
 				new CustomEvent("monster-datasource-validation", {
 					bubbles: true,
 					detail: {
+						datasource: this,
+						operation,
 						errors: normalizedErrors,
 						raw: rawErrors,
 						message,

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

@@ -37,7 +37,10 @@ import { Observer } from "../../types/observer.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
 import { clone } from "../../util/clone.mjs";
 import { State } from "../form/types/state.mjs";
-import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
+import {
+	ATTRIBUTE_DATASOURCE_SELECTOR,
+	DATASOURCE_OPERATION_WRITE,
+} from "./constants.mjs";
 import { Datasource } from "./datasource.mjs";
 import { Rest as RestDatasource } from "./datasource/rest.mjs";
 import { BadgeStyleSheet } from "../stylesheet/badge.mjs";
@@ -72,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");
@@ -203,25 +207,84 @@ class SaveButton extends CustomElement {
 			}
 
 			if (element instanceof RestDatasource) {
-				element.addEventListener("monster-datasource-fetch", () => {
-					if (self[saveInFlightSymbol]) {
-						self[pendingResetSymbol] = true;
-						return;
-					}
-					self[fetchInFlightSymbol] = true;
-					clearOriginValues.call(self);
-				});
-				element.addEventListener("monster-datasource-fetched", () => {
-					self[fetchInFlightSymbol] = false;
-					setOriginValues.call(
-						self,
-						clone(self[datasourceLinkedElementSymbol].data),
-					);
-					updateChangesState.call(self);
-				});
-				element.addEventListener("monster-datasource-error", () => {
-					self[fetchInFlightSymbol] = false;
-				});
+				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;
+						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;
@@ -416,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

@@ -0,0 +1,474 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const expect = chai.expect;
+chai.use(chaiDom);
+
+let DataFetchError;
+
+const waitForUpdates = () => new Promise((resolve) => setTimeout(resolve, 30));
+
+function createDatasource(id) {
+	const datasource = document.createElement("monster-datasource-rest");
+	datasource.id = id;
+	datasource.setOption("features.autoInit", false);
+	datasource.setOption("read.url", "/records/1");
+	datasource.setOption("write.url", "/records/1");
+	return datasource;
+}
+
+function listenForLifecycle(datasource) {
+	const events = [];
+	for (const type of [
+		"monster-datasource-fetch",
+		"monster-datasource-fetched",
+		"monster-datasource-error",
+		"monster-datasource-validation",
+	]) {
+		datasource.addEventListener(type, (event) => {
+			events.push({ type, detail: event.detail });
+		});
+	}
+	return events;
+}
+
+function createSaveButton(datasourceSelector) {
+	const button = document.createElement("monster-datasource-save-button");
+	button.setOption("datasource.selector", datasourceSelector);
+	button.setOption("disableWhenNoChanges", true);
+	return button;
+}
+
+function getStateButton(button) {
+	return button.shadowRoot?.querySelector("monster-state-button");
+}
+
+async function loadDatasource(datasource, data) {
+	datasource.datasource.read = () => {
+		datasource.data = data;
+		return Promise.resolve({ ok: true });
+	};
+	await datasource.read();
+	await waitForUpdates();
+}
+
+function clickSaveButton(button) {
+	const action = getStateButton(button)?.getOption("actions.click");
+	expect(action).to.be.a("function");
+	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);
+}
+
+function expectNoPendingChanges(button) {
+	expect(button.getOption("changes")).to.equal("");
+	expect(getStateButton(button)?.getOption("disabled")).to.equal(true);
+}
+
+describe("REST datasource lifecycle", function () {
+	before(async function () {
+		await initJSDOM();
+		globalThis.location = window.location;
+		await import("element-internals-polyfill").catch(() => {});
+		await import("../../../../source/components/datatable/datasource/rest.mjs");
+		await import("../../../../source/components/datatable/save-button.mjs");
+		({ DataFetchError } = await import(
+			"../../../../source/data/datasource/server/restapi/data-fetch-error.mjs"
+		));
+	});
+
+	beforeEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("identifies read and write lifecycle events without changing event names", async function () {
+		const datasource = createDatasource("lifecycle-datasource");
+		const events = listenForLifecycle(datasource);
+		document.getElementById("mocks").appendChild(datasource);
+
+		datasource.datasource.read = () => Promise.resolve({ ok: true });
+		await datasource.read();
+
+		datasource.datasource.write = () => Promise.resolve({ ok: true });
+		await datasource.write();
+
+		expect(
+			events.map(({ type, detail }) => [type, detail.operation]),
+		).to.deep.equal([
+			["monster-datasource-fetch", "read"],
+			["monster-datasource-fetched", "read"],
+			["monster-datasource-fetch", "write"],
+			["monster-datasource-fetched", "write"],
+		]);
+		events.forEach(({ detail }) => {
+			expect(detail.datasource).to.equal(datasource);
+		});
+	});
+
+	it("identifies write validation and error events", async function () {
+		const datasource = createDatasource("validation-datasource");
+		datasource.setOption(
+			"response.path.validationErrors",
+			"meta.validationErrors",
+		);
+		datasource.setOption("response.path.validationMessage", "meta.message");
+		const events = listenForLifecycle(datasource);
+		document.getElementById("mocks").appendChild(datasource);
+
+		const response = new Response(
+			JSON.stringify({
+				meta: {
+					message: "Input data is invalid",
+					validationErrors: {
+						parentId: { code: "VAL_INVALID", message: "Invalid parent" },
+					},
+				},
+			}),
+			{ status: 400, headers: { "content-type": "application/json" } },
+		);
+		datasource.datasource.write = () =>
+			Promise.reject(new DataFetchError("Input data is invalid", response));
+
+		await datasource.write().catch(() => {});
+		await waitForUpdates();
+
+		const validation = events.find(
+			({ type }) => type === "monster-datasource-validation",
+		);
+		const error = events.find(
+			({ type }) => type === "monster-datasource-error",
+		);
+		expect(validation?.detail.operation).to.equal("write");
+		expect(validation?.detail.datasource).to.equal(datasource);
+		expect(validation?.detail.errors.parentId).to.deep.equal({
+			code: "VAL_INVALID",
+			message: "Invalid parent",
+		});
+		expect(error?.detail.operation).to.equal("write");
+		expect(error?.detail.datasource).to.equal(datasource);
+	});
+
+	it("keeps every save button on the loaded baseline after a rejected write", async function () {
+		const datasource = createDatasource("rejected-write-datasource");
+		const loaded = {
+			data: [{ id: "area-1", name: "Inbound", parentAreaId: "" }],
+		};
+		const invalid = {
+			data: [{ id: "area-1", name: "Inbound changed", parentAreaId: "area-1" }],
+		};
+		const corrected = {
+			data: [{ id: "area-1", name: "Inbound changed", parentAreaId: "" }],
+		};
+		const first = createSaveButton("#rejected-write-datasource");
+		const second = createSaveButton("#rejected-write-datasource");
+		const mocks = document.getElementById("mocks");
+		mocks.append(datasource, first, second);
+		await loadDatasource(datasource, loaded);
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		datasource.data = invalid;
+		await waitForUpdates();
+		expectPendingChanges(first);
+		expectPendingChanges(second);
+
+		datasource.datasource.write = () =>
+			Promise.reject(new Error("Rejected write"));
+		clickSaveButton(first);
+		await waitForUpdates();
+		expectPendingChanges(first);
+		expectPendingChanges(second);
+
+		datasource.data = corrected;
+		await waitForUpdates();
+		expectPendingChanges(first);
+		expectPendingChanges(second);
+	});
+
+	it("establishes the current data as every save button baseline after a successful write", async function () {
+		const datasource = createDatasource("successful-write-datasource");
+		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
+		const edited = { data: [{ id: "area-1", name: "Inbound changed" }] };
+		const first = createSaveButton("#successful-write-datasource");
+		const second = createSaveButton("#successful-write-datasource");
+		const mocks = document.getElementById("mocks");
+		mocks.append(datasource, first, second);
+		await loadDatasource(datasource, loaded);
+		datasource.data = edited;
+		await waitForUpdates();
+		expectPendingChanges(first);
+		expectPendingChanges(second);
+
+		datasource.datasource.write = () => Promise.resolve({ ok: true });
+		clickSaveButton(first);
+		await waitForUpdates();
+
+		expectNoPendingChanges(first);
+		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" }] };
+		const edited = { data: [{ id: "area-1", name: "Inbound changed" }] };
+		const refreshed = { data: [{ id: "area-1", name: "Inbound from server" }] };
+		const first = createSaveButton("#read-baseline-datasource");
+		const second = createSaveButton("#read-baseline-datasource");
+		const mocks = document.getElementById("mocks");
+		mocks.append(datasource, first, second);
+		await loadDatasource(datasource, loaded);
+		datasource.data = edited;
+		await waitForUpdates();
+		expectPendingChanges(first);
+		expectPendingChanges(second);
+
+		datasource.datasource.read = () => {
+			datasource.data = refreshed;
+			return Promise.resolve({ ok: true });
+		};
+		await datasource.read();
+		await waitForUpdates();
+
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+	});
+
+	it("does not let write completion end an in-flight read", async function () {
+		const datasource = createDatasource("concurrent-datasource");
+		const loaded = { data: [{ id: "area-1", name: "Inbound" }] };
+		const firstReadValue = {
+			data: [{ id: "area-1", name: "Inbound from server" }],
+		};
+		const finalReadValue = {
+			data: [{ id: "area-1", name: "Inbound from server (final)" }],
+		};
+		const first = createSaveButton("#concurrent-datasource");
+		const second = createSaveButton("#concurrent-datasource");
+		const mocks = document.getElementById("mocks");
+		mocks.append(datasource, first, second);
+		await loadDatasource(datasource, loaded);
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		let resolveRead;
+		datasource.datasource.read = () =>
+			new Promise((resolve) => {
+				resolveRead = resolve;
+			});
+		const read = datasource.read();
+		await waitForUpdates();
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		datasource.datasource.write = () => Promise.resolve({ ok: true });
+		await datasource.write();
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		datasource.data = firstReadValue;
+		await waitForUpdates();
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		datasource.datasource.write = () =>
+			Promise.reject(new Error("Rejected concurrent write"));
+		await datasource.write().catch(() => {});
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		datasource.data = finalReadValue;
+		await waitForUpdates();
+
+		expectNoPendingChanges(first);
+		expectNoPendingChanges(second);
+
+		resolveRead({ ok: true });
+		await read;
+		await waitForUpdates();
+		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;