@schukai/monster 4.148.4 → 4.148.5

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.5"}

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";
@@ -203,7 +206,10 @@ class SaveButton extends CustomElement {
 			}
 
 			if (element instanceof RestDatasource) {
-				element.addEventListener("monster-datasource-fetch", () => {
+				element.addEventListener("monster-datasource-fetch", (event) => {
+					if (event?.detail?.operation === DATASOURCE_OPERATION_WRITE) {
+						return;
+					}
 					if (self[saveInFlightSymbol]) {
 						self[pendingResetSymbol] = true;
 						return;
@@ -211,15 +217,20 @@ class SaveButton extends CustomElement {
 					self[fetchInFlightSymbol] = true;
 					clearOriginValues.call(self);
 				});
-				element.addEventListener("monster-datasource-fetched", () => {
-					self[fetchInFlightSymbol] = false;
+				element.addEventListener("monster-datasource-fetched", (event) => {
+					if (event?.detail?.operation !== DATASOURCE_OPERATION_WRITE) {
+						self[fetchInFlightSymbol] = false;
+					}
 					setOriginValues.call(
 						self,
 						clone(self[datasourceLinkedElementSymbol].data),
 					);
 					updateChangesState.call(self);
 				});
-				element.addEventListener("monster-datasource-error", () => {
+				element.addEventListener("monster-datasource-error", (event) => {
+					if (event?.detail?.operation === DATASOURCE_OPERATION_WRITE) {
+						return;
+					}
 					self[fetchInFlightSymbol] = false;
 				});
 			}

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

@@ -0,0 +1,299 @@
+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 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("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);
+	});
+});