@schukai/monster 4.148.3 → 4.148.4

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

package/source/components/form/select.mjs

@@ -113,6 +113,18 @@ const keyFilterEventSymbol = Symbol("keyFilterEvent");
  */
 const lazyLoadDoneSymbol = Symbol("lazyLoadDone");
 
+/**
+ * @private
+ * @type {Symbol}
+ */
+const lazyLoadRequestSymbol = Symbol("lazyLoadRequest");
+
+/**
+ * @private
+ * @type {Symbol}
+ */
+const lazyLoadErrorSymbol = Symbol("lazyLoadError");
+
 /**
  * @private
  * @type {Symbol}
@@ -300,6 +312,7 @@ const optionsMapVersionSnapshotSymbol = Symbol("optionsMapVersionSnapshot");
 const selectionVersionSymbol = Symbol("selectionVersion");
 const closeOnSelectAutoSymbol = Symbol("closeOnSelectAuto");
 const lastFilterValueSymbol = Symbol("lastFilterValue");
+const filterInputVersionSymbol = Symbol("filterInputVersion");
 
 /**
  * @private
@@ -2051,6 +2064,7 @@ function invalidatePendingRemoteWork() {
 	}
 	this[isLoadingSymbol] = false;
 	this[remoteInfoRequestSymbol] = null;
+	delete this[lazyLoadRequestSymbol];
 
 	if (this[keyFilterEventSymbol] instanceof DeadMansSwitch) {
 		try {
@@ -4014,6 +4028,7 @@ function handleFilterInputEvents() {
 	}
 
 	this[lastFilterValueSymbol] = filterValue;
+	bumpFilterInputVersion.call(this);
 
 	if (this[keyFilterEventSymbol] instanceof DeadMansSwitch) {
 		try {
@@ -4061,6 +4076,16 @@ function getCurrentFilterInputValue() {
 	return undefined;
 }
 
+function getFilterInputVersion() {
+	return Number.isInteger(this[filterInputVersionSymbol])
+		? this[filterInputVersionSymbol]
+		: 0;
+}
+
+function bumpFilterInputVersion() {
+	this[filterInputVersionSymbol] = getFilterInputVersion.call(this) + 1;
+}
+
 /**
  * @private
  */
@@ -4601,7 +4626,15 @@ function areOptionsAvailableAndInitInternal() {
 		options === null ||
 		(isArray(options) && options.length === 0)
 	) {
-		setStatusOrRemoveBadges.call(this, "empty");
+		const lazyLoadPending = this[lazyLoadRequestSymbol] instanceof Promise;
+		const lazyLoadError = isString(this[lazyLoadErrorSymbol]);
+		if (lazyLoadError) {
+			setStatusOrRemoveBadges.call(this, "error");
+		} else if (lazyLoadPending) {
+			setStatusOrRemoveBadges.call(this, "loading");
+		} else {
+			setStatusOrRemoveBadges.call(this, "empty");
+		}
 		if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
 			if (this[isLoadingSymbol] !== true) {
 				if (isInteger(this.getOption("total"))) {
@@ -4615,7 +4648,9 @@ function areOptionsAvailableAndInitInternal() {
 
 		let msg = this.getOption("labels.no-options-available");
 
-		if (
+		if (lazyLoadError) {
+			msg = this.getOption("labels.cannot-be-loaded");
+		} else if (
 			this.getOption("url") !== null &&
 			this.getOption("features.lazyLoad") === true &&
 			this[lazyLoadDoneSymbol] !== true
@@ -4651,7 +4686,11 @@ function areOptionsAvailableAndInitInternal() {
 		if (this.getOption("features.emptyValueIfNoOptions") === true) {
 			this.value = "";
 		}
-		if (this[isLoadingSymbol] !== true) {
+		if (
+			this[isLoadingSymbol] !== true &&
+			lazyLoadPending === false &&
+			lazyLoadError === false
+		) {
 			addErrorAttribute(this, "No options available.");
 		}
 		return false;
@@ -5087,24 +5126,65 @@ function show() {
 		this.getOption("features.lazyLoad") && this[lazyLoadDoneSymbol] !== true;
 
 	if (lazyLoadFlag === true) {
-		this[lazyLoadDoneSymbol] = true;
+		if (this[lazyLoadRequestSymbol] instanceof Promise) {
+			return;
+		}
+
+		if (isString(this[lazyLoadErrorSymbol])) {
+			removeErrorAttribute(this, this[lazyLoadErrorSymbol]);
+			delete this[lazyLoadErrorSymbol];
+		}
+		removeErrorAttribute(this, "No options available.");
 		setStatusOrRemoveBadges.call(this, "loading");
 
-		new Processing(200, () => {
-			this.fetch()
-				.then(() => {
-					checkOptionState.call(this);
-					requestAnimationFrame(() => {
+		const lifecycleVersion = getRemoteLifecycleVersion.call(this);
+		const lazyLoadRequest = new Processing(200, () => {
+			if (
+				!isRemoteLifecycleCurrent.call(this, lifecycleVersion) ||
+				this.isConnected !== true
+			) {
+				return;
+			}
+
+			return this.fetch();
+		}).run();
+		this[lazyLoadRequestSymbol] = lazyLoadRequest;
+
+		lazyLoadRequest
+			.then(() => {
+				if (
+					this[lazyLoadRequestSymbol] !== lazyLoadRequest ||
+					!isRemoteLifecycleCurrent.call(this, lifecycleVersion) ||
+					this.isConnected !== true
+				) {
+					return;
+				}
+
+				delete this[lazyLoadRequestSymbol];
+				this[lazyLoadDoneSymbol] = true;
+				delete this[lazyLoadErrorSymbol];
+				checkOptionState.call(this);
+				requestAnimationFrame(() => {
+					if (
+						isRemoteLifecycleCurrent.call(this, lifecycleVersion) &&
+						this.isConnected === true
+					) {
 						show.call(this);
-					});
-				})
-				.catch((e) => {
-					addErrorAttribute(this, e);
-					setStatusOrRemoveBadges.call(this, "error");
+					}
 				});
-		})
-			.run()
+			})
 			.catch((e) => {
+				if (
+					this[lazyLoadRequestSymbol] !== lazyLoadRequest ||
+					!isRemoteLifecycleCurrent.call(this, lifecycleVersion)
+				) {
+					return;
+				}
+
+				delete this[lazyLoadRequestSymbol];
+				this[lazyLoadDoneSymbol] = false;
+				this[lazyLoadErrorSymbol] =
+					e instanceof Error ? e.message : String(e);
 				addErrorAttribute(this, e);
 				setStatusOrRemoveBadges.call(this, "error");
 			});
@@ -5141,6 +5221,8 @@ function show() {
 	addAttributeToken(this[controlElementSymbol], "class", "open");
 	registerWithHost.call(this);
 
+	const filterInputVersion = getFilterInputVersion.call(this);
+
 	new Processing(() => {
 		const shouldLoadRemoteOptions =
 			getFilterMode.call(self) === FILTER_MODE_REMOTE &&
@@ -5152,12 +5234,18 @@ function show() {
 
 		if (shouldLoadDefaultOptions) {
 			setTimeout(() => {
+				if (getFilterInputVersion.call(this) !== filterInputVersion) {
+					return;
+				}
 				loadDefaultOptionsFromUrl.call(self).catch((e) => {
 					addErrorAttribute(self, e);
 				});
 			}, 0);
 		} else if (shouldLoadRemoteOptions) {
 			setTimeout(() => {
+				if (getFilterInputVersion.call(this) !== filterInputVersion) {
+					return;
+				}
 				self[cleanupOptionsListSymbol] = true;
 				filterFromRemote.call(self).catch((e) => {
 					addErrorAttribute(self, e);

package/test/cases/components/form/select.mjs

@@ -97,6 +97,14 @@ function configureRemotePaginatedSelect(select) {
     select.setOption('mapping.objectsPerPage', 'pagination.perPage');
 }
 
+function configureLazySelect(select) {
+    select.setOption('url', 'https://example.com/lazy-options');
+    select.setOption('features.lazyLoad', true);
+    select.setOption('mapping.selector', 'items.*');
+    select.setOption('mapping.labelTemplate', '${name}');
+    select.setOption('mapping.valueTemplate', '${id}');
+}
+
 let Select,
     SelectStyleSheet,
     getDefaultSelectPopperPositionProfile,
@@ -643,6 +651,223 @@ describe('Select', function () {
 
     });
 
+    describe('Lazy load lifecycle', function () {
+        this.timeout(5000);
+
+        afterEach(() => {
+            const mocks = document.getElementById('mocks');
+            mocks.innerHTML = '';
+            global['fetch'] = fetchReference;
+        });
+
+        it('should open from the first click after a delayed lazy response renders', async function () {
+            const deferredResponse = createDeferred();
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                return deferredResponse.promise;
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = select.shadowRoot.querySelector('[data-monster-role=popper]');
+            container.click();
+
+            await waitForCondition(() => requestCount === 1);
+            container.click();
+            await new Promise(resolve => setTimeout(resolve, 250));
+            expect(requestCount).to.equal(1);
+            deferredResponse.resolve(
+                await createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}]
+                })
+            );
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelectorAll('[data-monster-role=option]').length === 1;
+            });
+            await waitForCondition(() => popper.style.display === 'block');
+
+            expect(requestCount).to.equal(1);
+            expect(popper.style.display).to.equal('block');
+        });
+
+        it('should keep a failed lazy load in the error state', async function () {
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                return createJsonResponse({}, 500);
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            select.shadowRoot.querySelector('[data-monster-role=container]').click();
+
+            await waitForCondition(() => requestCount === 1);
+            await waitForCondition(() => {
+                return (select.getAttribute('data-monster-error') ?? '').includes('HTTP error! status: 500');
+            });
+            await new Promise(resolve => setTimeout(resolve, 350));
+
+            expect(select.getOption('classes.statusOrRemoveBadge')).to.equal('error');
+            expect(select.getAttribute('data-monster-error')).to.not.contain('No options available.');
+        });
+
+        it('should retry a failed lazy load on the next click', async function () {
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                if (requestCount === 1) {
+                    return createJsonResponse({}, 500);
+                }
+
+                return createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = select.shadowRoot.querySelector('[data-monster-role=popper]');
+            container.click();
+
+            await waitForCondition(() => requestCount === 1);
+            await waitForCondition(() => {
+                return (select.getAttribute('data-monster-error') ?? '').includes('HTTP error! status: 500');
+            });
+
+            container.click();
+
+            await waitForCondition(() => requestCount === 2, {timeout: 1500});
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelectorAll('[data-monster-role=option]').length === 1;
+            });
+            await waitForCondition(() => popper.style.display === 'block');
+
+            expect(requestCount).to.equal(2);
+            expect(select.getAttribute('data-monster-error') ?? '').to.not.contain('HTTP error! status: 500');
+        });
+
+        it('should retry lazy loading after disconnecting during the request', async function () {
+            const firstResponse = createDeferred();
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                if (requestCount === 1) {
+                    return firstResponse.promise;
+                }
+
+                return createJsonResponse({
+                    items: [{id: 'fresh', name: 'Fresh'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            container.click();
+            await waitForCondition(() => requestCount === 1);
+
+            select.remove();
+            mocks.appendChild(select);
+            firstResponse.resolve(
+                await createJsonResponse({
+                    items: [{id: 'stale', name: 'Stale'}]
+                })
+            );
+            await new Promise(resolve => setTimeout(resolve, 100));
+
+            container.click();
+
+            await waitForCondition(() => requestCount === 2, {timeout: 1500});
+            await waitForCondition(() => {
+                return select.getOption('options').map(option => option.value).includes('fresh');
+            });
+            expect(select.getOption('options').map(option => option.value)).to.deep.equal(['fresh']);
+        });
+
+        it('should not start a delayed lazy request after disconnecting', async function () {
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                return createJsonResponse({
+                    items: [{id: 'fresh', name: 'Fresh'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            container.click();
+            select.remove();
+
+            await new Promise(resolve => setTimeout(resolve, 300));
+            expect(requestCount).to.equal(0);
+
+            mocks.appendChild(select);
+            container.click();
+            await waitForCondition(() => requestCount === 1);
+            await waitForCondition(() => {
+                return select.getOption('options').map(option => option.value).includes('fresh');
+            });
+        });
+
+        it('should not reload a completed lazy select after reconnecting', async function () {
+            let requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                return createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureLazySelect(select);
+            mocks.appendChild(select);
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = select.shadowRoot.querySelector('[data-monster-role=popper]');
+            container.click();
+            await waitForCondition(() => popper.style.display === 'block');
+
+            container.click();
+            await waitForCondition(() => popper.style.display === 'none');
+            select.remove();
+            mocks.appendChild(select);
+            container.click();
+            await waitForCondition(() => popper.style.display === 'block');
+
+            expect(requestCount).to.equal(1);
+        });
+    });
+
     describe('Popper sizing', function () {
         this.timeout(5000);
 
@@ -1701,6 +1926,56 @@ describe('Select', function () {
         });
     });
 
+    describe('Remote open lifecycle', function () {
+        this.timeout(5000);
+
+        afterEach(() => {
+            const mocks = document.getElementById('mocks');
+            mocks.innerHTML = '';
+            global['fetch'] = fetchReference;
+        });
+
+        it('should request an immediately entered remote filter only once', async function () {
+            const requests = [];
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+                return createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}]
+                });
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]') instanceof HTMLInputElement;
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+            container.click();
+            filterInput.value = 'alpha';
+            filterInput.dispatchEvent(new Event('input', {
+                bubbles: true,
+                composed: true
+            }));
+
+            await waitForCondition(() => requests.length >= 1);
+            await new Promise(resolve => setTimeout(resolve, 350));
+
+            expect(requests).to.deep.equal([
+                'https://example.com/items?filter=alpha&page=1'
+            ]);
+        });
+    });
+
     describe('document.createElement()', function () {
 
         afterEach(() => {