@schukai/monster 4.71.0 → 4.73.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [4.73.0] - 2026-01-03
+
+### Add Features
+
+- Enhance lookup column functionality with templating and debugging options
+
+
+
+## [4.72.0] - 2026-01-03
+
+### Add Features
+
+- Implement new fetch columns feature for issue [#360](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/360)
+### Changes
+
+- update tests
+
+
+
 ## [4.71.0] - 2026-01-03
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"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.71.0"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"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.73.0"}

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

@@ -30,7 +30,7 @@ import { findElementWithIdUpwards } from "../../../dom/util.mjs";
 import { Observer } from "../../../types/observer.mjs";
 import { Pathfinder } from "../../../data/pathfinder.mjs";
 import { fireCustomEvent } from "../../../dom/events.mjs";
-import { isObject } from "../../../types/is.mjs";
+import { isArray, isFunction, isObject, isString } from "../../../types/is.mjs";
 
 export { Rest };
 
@@ -64,6 +64,8 @@ const intersectionObserverObserverSymbol = Symbol(
 const filterObserverSymbol = Symbol("filterObserver");
 const readRequestIdSymbol = Symbol("readRequestId");
 const writeRequestIdSymbol = Symbol("writeRequestId");
+const lookupCacheSymbol = Symbol("lookupCache");
+const lookupPendingSymbol = Symbol("lookupPending");
 
 /**
  * A rest api datasource
@@ -174,6 +176,28 @@ class Rest extends Datasource {
 			validation: {
 				map: {},
 			},
+
+			lookups: {
+				enabled: false,
+				debug: false,
+				sourcePath: "dataset",
+				request: {
+					idsParam: "ids",
+					idsSeparator: ",",
+				},
+				response: {
+					path: "dataset",
+					id: "id",
+				},
+				format: {
+					template: "${name}",
+					marker: {
+						open: ["${"],
+						close: ["}"],
+					},
+				},
+				columns: {},
+			},
 		});
 	}
 
@@ -315,6 +339,7 @@ class Rest extends Datasource {
 				return;
 			}
 			this[dataSourceSymbol].set(transformedPayload);
+			applyLookups.call(this, requestId).catch(() => {});
 		};
 		this[dataSourceSymbol].setOption("read", opt);
 
@@ -708,6 +733,406 @@ function handleValidationError(error) {
 		.catch(() => {});
 }
 
+/**
+ * @private
+ * @return {boolean}
+ */
+function lookupDebugEnabled() {
+	return this.getOption("lookups.debug", false) === true;
+}
+
+/**
+ * @private
+ * @param {number} requestId
+ * @return {Promise<void>}
+ */
+async function applyLookups(requestId) {
+	if (!this.getOption("lookups.enabled", false)) {
+		return;
+	}
+
+	const columns = this.getOption("lookups.columns", {});
+	if (!isObject(columns)) {
+		return;
+	}
+
+	const columnEntries = Object.entries(columns).filter(([, cfg]) =>
+		isObject(cfg),
+	);
+	if (columnEntries.length === 0) {
+		return;
+	}
+
+	const resolverColumns = [];
+	const remoteColumns = [];
+	for (const [name, cfg] of columnEntries) {
+		if (isFunction(cfg.resolve)) {
+			resolverColumns.push([name, cfg]);
+		} else if (isString(cfg.url) && cfg.url !== "") {
+			remoteColumns.push([name, cfg]);
+		}
+	}
+
+	if (resolverColumns.length > 0) {
+		updateLookupRows.call(this, requestId, (rows) => {
+			for (const [, cfg] of resolverColumns) {
+				const key = cfg.key;
+				const target = cfg.target;
+				if (!isString(key) || !isString(target)) {
+					continue;
+				}
+
+				for (const row of rows) {
+					const entry = cfg.resolve(row[key], row);
+					if (!entry) {
+						continue;
+					}
+					row[target] = formatLookupValue.call(this, cfg, entry, row);
+					if (isString(cfg.loadingKey)) {
+						row[cfg.loadingKey] = false;
+					}
+				}
+			}
+		});
+	}
+
+	if (remoteColumns.length === 0) {
+		return;
+	}
+
+	await Promise.all(
+		remoteColumns.map(([name, cfg]) =>
+			resolveRemoteLookup.call(this, requestId, name, cfg),
+		),
+	);
+}
+
+/**
+ * @private
+ * @param {number} requestId
+ * @param {string} name
+ * @param {object} cfg
+ * @return {Promise<void>}
+ */
+async function resolveRemoteLookup(requestId, name, cfg) {
+	const key = cfg.key;
+	const target = cfg.target;
+	if (!isString(key) || !isString(target)) {
+		return;
+	}
+
+	const cache = getLookupCache.call(this, name);
+	const pending = getLookupPending.call(this, name);
+
+	const ids = collectLookupIds.call(this, key);
+	const missingIds = ids.filter((id) => !cache.has(id) && !pending.has(id));
+
+	if (missingIds.length === 0) {
+		applyLookupCache.call(this, requestId, cfg, cache);
+		return;
+	}
+
+	updateLookupRows.call(this, requestId, (rows) => {
+		if (!isString(cfg.loadingKey)) return;
+		for (const row of rows) {
+			if (missingIds.includes(String(row[key]))) {
+				row[cfg.loadingKey] = true;
+			}
+		}
+	});
+
+	missingIds.forEach((id) => pending.add(id));
+
+	const response = await fetchLookupEntries.call(this, cfg, missingIds);
+	response.forEach((entry, id) => cache.set(id, entry));
+	missingIds.forEach((id) => pending.delete(id));
+
+	applyLookupCache.call(this, requestId, cfg, cache);
+}
+
+/**
+ * @private
+ * @param {number} requestId
+ * @param {object} cfg
+ * @param {Map} cache
+ */
+function applyLookupCache(requestId, cfg, cache) {
+	const key = cfg.key;
+	const target = cfg.target;
+
+	updateLookupRows.call(this, requestId, (rows) => {
+		for (const row of rows) {
+			const entry = cache.get(String(row[key]));
+			if (entry) {
+				row[target] = formatLookupValue.call(this, cfg, entry, row);
+			}
+			if (isString(cfg.loadingKey)) {
+				row[cfg.loadingKey] = false;
+			}
+		}
+	});
+}
+
+/**
+ * @private
+ * @param {string} key
+ * @return {string[]}
+ */
+function collectLookupIds(key) {
+	const rows = resolveLookupRows.call(this);
+	if (!isArray(rows)) {
+		return [];
+	}
+
+	const ids = new Set();
+	for (const row of rows) {
+		const value = row?.[key];
+		if (value === undefined || value === null || value === "") {
+			continue;
+		}
+		if (isArray(value)) {
+			value.forEach((entry) => ids.add(String(entry)));
+		} else {
+			ids.add(String(value));
+		}
+	}
+
+	return Array.from(ids);
+}
+
+/**
+ * @private
+ * @param {object} cfg
+ * @param {string[]} ids
+ * @return {Promise<Map<string, object>>}
+ */
+async function fetchLookupEntries(cfg, ids) {
+	const requestDefaults = this.getOption("lookups.request", {});
+	const request = {
+		...requestDefaults,
+		...(cfg.request || {}),
+	};
+
+	const init = isObject(request.init) ? request.init : {};
+	const url = buildLookupUrl(cfg.url, ids, request);
+	const debug = lookupDebugEnabled.call(this);
+	if (debug) {
+		console.debug("[monster-datasource-rest] lookup fetch", {
+			url,
+			ids,
+		});
+	}
+
+	const response = await fetch(url, init);
+	if (!response.ok) {
+		if (debug) {
+			console.debug("[monster-datasource-rest] lookup failed", {
+				url,
+				status: response.status,
+			});
+		}
+		return new Map();
+	}
+
+	let payload;
+	try {
+		payload = await response.json();
+	} catch (_error) {
+		if (debug) {
+			console.debug("[monster-datasource-rest] lookup invalid json", { url });
+		}
+		return new Map();
+	}
+
+	const responseDefaults = this.getOption("lookups.response", {});
+	const responseConfig = {
+		...responseDefaults,
+		...(cfg.response || {}),
+	};
+
+	let entries = payload;
+	if (isString(responseConfig.path) && responseConfig.path !== "") {
+		entries = new Pathfinder(payload).getVia(responseConfig.path);
+	}
+
+	if (!isArray(entries)) {
+		if (debug) {
+			console.debug("[monster-datasource-rest] lookup no entries", {
+				url,
+				path: responseConfig.path,
+			});
+		}
+		return new Map();
+	}
+
+	const idKey = responseConfig.id || "id";
+	const result = new Map();
+	for (const entry of entries) {
+		if (!entry || entry[idKey] === undefined || entry[idKey] === null) {
+			continue;
+		}
+		result.set(String(entry[idKey]), entry);
+	}
+	if (debug) {
+		console.debug("[monster-datasource-rest] lookup resolved", {
+			url,
+			entries: result.size,
+		});
+	}
+
+	return result;
+}
+
+/**
+ * @private
+ * @param {string} url
+ * @param {string[]} ids
+ * @param {object} request
+ * @return {string}
+ */
+function buildLookupUrl(url, ids, request) {
+	const idsParam = request.idsParam || "ids";
+	const idsValue = buildLookupIdsValue(ids, request);
+
+	if (url.includes("${")) {
+		const formatter = new Formatter({ ids: idsValue });
+		return formatter.format(url);
+	}
+
+	const separator = url.includes("?") ? "&" : "?";
+	return `${url}${separator}${encodeURIComponent(idsParam)}=${encodeURIComponent(
+		idsValue,
+	)}`;
+}
+
+/**
+ * @private
+ * @param {string[]} ids
+ * @param {object} request
+ * @return {string}
+ */
+function buildLookupIdsValue(ids, request) {
+	if (isFunction(request.queryBuilder)) {
+		return request.queryBuilder(ids);
+	}
+
+	const idsTemplate = request.idsTemplate;
+	const idsSeparator = request.idsSeparator || ",";
+	const wrapOpen = request.wrapOpen || "";
+	const wrapClose = request.wrapClose || "";
+
+	let values = ids;
+	if (isString(idsTemplate) && idsTemplate !== "") {
+		values = ids.map((id) => {
+			const formatter = new Formatter({ id });
+			return formatter.format(idsTemplate);
+		});
+	}
+
+	return `${wrapOpen}${values.join(idsSeparator)}${wrapClose}`;
+}
+
+/**
+ * @private
+ * @param {object} cfg
+ * @param {object} entry
+ * @param {object} row
+ * @return {string}
+ */
+function formatLookupValue(cfg, entry, row) {
+	if (isFunction(cfg.format)) {
+		return cfg.format(entry, row);
+	}
+
+	const formatDefaults = this.getOption("lookups.format", {});
+	const format = isObject(cfg.format) ? cfg.format : {};
+	const template = format.template || formatDefaults.template || "${name}";
+	if (!isString(template)) {
+		return "";
+	}
+
+	const formatter = new Formatter({ ...entry, row });
+	const marker = format.marker || formatDefaults.marker;
+	if (marker?.open) {
+		formatter.setMarker(marker.open, marker.close);
+	}
+
+	return formatter.format(template);
+}
+
+/**
+ * @private
+ * @param {number} requestId
+ * @param {Function} update
+ */
+function updateLookupRows(requestId, update) {
+	if (this[readRequestIdSymbol] !== requestId) {
+		return;
+	}
+
+	const data = this[dataSourceSymbol].get();
+	const sourcePath = this.getOption("lookups.sourcePath", "dataset");
+	const next = clone(data);
+	const rows = resolveLookupRows.call(this, next, sourcePath);
+
+	if (!isArray(rows)) {
+		return;
+	}
+
+	update(rows);
+	this[dataSourceSymbol].set(next);
+}
+
+/**
+ * @private
+ * @param {object} [data]
+ * @param {string} [sourcePath]
+ * @return {Array|undefined}
+ */
+function resolveLookupRows(data, sourcePath) {
+	const source = data || this[dataSourceSymbol].get();
+	if (isString(sourcePath) && sourcePath !== "") {
+		return new Pathfinder(source).getVia(sourcePath);
+	}
+	if (isArray(source)) {
+		return source;
+	}
+	if (isObject(source) && isArray(source.dataset)) {
+		return source.dataset;
+	}
+	return undefined;
+}
+
+/**
+ * @private
+ * @param {string} name
+ * @return {Map<string, object>}
+ */
+function getLookupCache(name) {
+	if (!this[lookupCacheSymbol]) {
+		this[lookupCacheSymbol] = new Map();
+	}
+	if (!this[lookupCacheSymbol].has(name)) {
+		this[lookupCacheSymbol].set(name, new Map());
+	}
+	return this[lookupCacheSymbol].get(name);
+}
+
+/**
+ * @private
+ * @param {string} name
+ * @return {Set<string>}
+ */
+function getLookupPending(name) {
+	if (!this[lookupPendingSymbol]) {
+		this[lookupPendingSymbol] = new Map();
+	}
+	if (!this[lookupPendingSymbol].has(name)) {
+		this[lookupPendingSymbol].set(name, new Set());
+	}
+	return this[lookupPendingSymbol].get(name);
+}
+
 /**
  * @private
  * @return {string}

package/test/util/jsdom.mjs

@@ -34,9 +34,13 @@ function initJSDOM(options) {
         const {window} = new JSDOM(`<!DOCTYPE html><html lang="en"><head><title>Test</title></head><body><div id="mocks"></div></body></html>`, options);
 
         g['window'] = window;
-        
-        return new Promise((resolve, reject) =>
-            window.addEventListener("load", () => {
+
+        return new Promise((resolve, reject) => {
+            let settled = false;
+
+            const finalize = () => {
+                if (settled) return;
+                settled = true;
 
                 [
                     'Blob',
@@ -78,8 +82,6 @@ function initJSDOM(options) {
                     'XMLSerializer',
                 ].forEach(key => {
                     try {
-                        console.log("setting key", key);
-
                         g[key] = window[key]
                     } catch(e) {
                         console.error("Error setting key", key, e);
@@ -128,16 +130,26 @@ function initJSDOM(options) {
                     ensureStorage("sessionStorage");
 
                     resolve(g);
-                    
+
                 }).catch(e => {
                     console.error("Error loading dom-storage", e);
                     reject(e);
                 });
+            };
 
-            })
-        );
+            const onLoad = () => {
+                window.removeEventListener("load", onLoad);
+                finalize();
+            };
 
+            window.addEventListener("load", onLoad);
 
+            if (window.document.readyState === "complete") {
+                queueMicrotask(finalize);
+            } else {
+                setTimeout(finalize, 50);
+            }
+        });
     });
 }