@schukai/monster 4.91.1 → 4.93.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.93.0] - 2026-01-13
+
+### Add Features
+
+- Enhance formatter with recursion detection and cycle handling
+
+
+
+## [4.92.0] - 2026-01-12
+
+### Add Features
+
+- Improve data resolution in form handling [#372](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/372)
+
+
+
 ## [4.91.1] - 2026-01-12
 
 ### Bug Fixes

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.91.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.93.0"}

package/source/components/form/repeat-field-set.mjs

@@ -1043,34 +1043,32 @@ function syncOptionData() {
  * @return {object}
  */
 function resolveFormRecord(form, datasource) {
-	let data = datasource?.data;
+	const { data, dataPath } = resolveDatasourceBasePath(form, datasource);
 	if (!isObject(data) && !isArray(data)) {
 		return {};
 	}
 
-	const mappingData = form.getOption?.("mapping.data");
-	if (isString(mappingData) && mappingData.trim() !== "") {
-		try {
-			data = new Pathfinder(data).getVia(mappingData.trim());
-		} catch {
-			data = {};
+	let resolvedData = data;
+	if (isObject(resolvedData) && !isArray(resolvedData)) {
+		if (isArray(resolvedData.data)) {
+			resolvedData = resolvedData.data;
+		} else if (isArray(resolvedData.dataset)) {
+			resolvedData = resolvedData.dataset;
+		} else if (dataPath === "") {
+			resolvedData = Object.values(resolvedData);
 		}
 	}
 
-	if (isObject(data)) {
-		data = Object.values(data);
-	}
-
 	const mappingIndex = form.getOption?.("mapping.index");
 	if (mappingIndex !== null && mappingIndex !== undefined) {
-		data = data?.[mappingIndex];
+		resolvedData = resolvedData?.[mappingIndex];
 	}
 
-	if (!isObject(data) && !isArray(data)) {
+	if (!isObject(resolvedData) && !isArray(resolvedData)) {
 		return {};
 	}
 
-	return data;
+	return resolvedData;
 }
 
 /**
@@ -1085,14 +1083,14 @@ function getDatasourceContext() {
 		return null;
 	}
 
-	const mappingData = form?.getOption?.("mapping.data");
 	const mappingIndex = form?.getOption?.("mapping.index");
+	const { dataPath } = resolveDatasourceBasePath(form, datasource);
 	const record = resolveFormRecord(form, datasource);
 	const normalizedPath = normalizePathForRecord(path, record);
 	let basePath = "";
 
-	if (isString(mappingData) && mappingData.trim() !== "") {
-		basePath = mappingData.trim();
+	if (isString(dataPath) && dataPath.trim() !== "") {
+		basePath = dataPath.trim();
 	}
 
 	if (mappingIndex !== null && mappingIndex !== undefined) {
@@ -1104,6 +1102,42 @@ function getDatasourceContext() {
 	return { target: datasource, path: finalPath };
 }
 
+/**
+ * @private
+ * @param {HTMLElement} form
+ * @param {HTMLElement} datasource
+ * @return {{data: object|Array, dataPath: string}}
+ */
+function resolveDatasourceBasePath(form, datasource) {
+	let data = datasource?.data;
+	if (!isObject(data) && !isArray(data)) {
+		return { data: {}, dataPath: "" };
+	}
+
+	let dataPath = "";
+	const mappingData = form?.getOption?.("mapping.data");
+	if (isString(mappingData) && mappingData.trim() !== "") {
+		const trimmed = mappingData.trim();
+		try {
+			const mapped = new Pathfinder(data).getVia(trimmed);
+			if (mapped !== undefined) {
+				data = mapped;
+				dataPath = trimmed;
+			}
+		} catch {}
+	}
+
+	if (dataPath === "" && isObject(data) && !isArray(data)) {
+		if (isArray(data.data)) {
+			dataPath = "data";
+		} else if (isArray(data.dataset)) {
+			dataPath = "dataset";
+		}
+	}
+
+	return { data, dataPath };
+}
+
 /**
  * @private
  * @return {string}

package/source/text/formatter.mjs

@@ -34,6 +34,12 @@ const internalObjectSymbol = Symbol("internalObject");
  */
 const watchdogSymbol = Symbol("watchdog");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const recursionStackSymbol = Symbol("recursionStack");
+
 /**
  * @private
  * @type {symbol}
@@ -145,6 +151,10 @@ class Formatter extends BaseWithOptions {
 				open: ["${"],
 				close: ["}"],
 			},
+			recursion: {
+				maxDepth: 20,
+				detectCycles: true,
+			},
 			parameter: {
 				delimiter: "::",
 				assignment: "=",
@@ -226,6 +236,7 @@ class Formatter extends BaseWithOptions {
 		this[markerOpenIndexSymbol] = 0;
 		this[markerCloseIndexSymbol] = 0;
 		this[workingDataSymbol] = {};
+		this[recursionStackSymbol] = [];
 		return format.call(this, text);
 	}
 }
@@ -236,7 +247,14 @@ class Formatter extends BaseWithOptions {
  */
 function format(text) {
 	this[watchdogSymbol]++;
-	if (this[watchdogSymbol] > 20) {
+	const recursionOptions = this[internalSymbol]["recursion"] || {};
+	const maxDepth =
+		typeof recursionOptions.maxDepth === "number"
+			? recursionOptions.maxDepth
+			: 20;
+	const detectCycles = recursionOptions.detectCycles !== false;
+
+	if (this[watchdogSymbol] > maxDepth) {
 		throw new Error("too deep nesting");
 	}
 
@@ -252,13 +270,22 @@ function format(text) {
 		return text;
 	}
 
-	let result = tokenize.call(
+	const { text: tokenizedText, keys } = tokenize.call(
 		this,
 		validateString(text),
 		openMarker,
 		closeMarker,
+		detectCycles,
 	);
 
+	let pushedKeys = 0;
+	if (detectCycles && keys.length > 0) {
+		for (const key of keys) {
+			this[recursionStackSymbol].push(key);
+		}
+		pushedKeys = keys.length;
+	}
+
 	if (
 		this[internalSymbol]["marker"]["open"]?.[this[markerOpenIndexSymbol] + 1]
 	) {
@@ -271,7 +298,14 @@ function format(text) {
 		this[markerCloseIndexSymbol]++;
 	}
 
-	result = format.call(this, result);
+	let result;
+	try {
+		result = format.call(this, tokenizedText);
+	} finally {
+		if (pushedKeys > 0) {
+			this[recursionStackSymbol].splice(-pushedKeys);
+		}
+	}
 
 	return result;
 }
@@ -286,12 +320,14 @@ function format(text) {
  * @param {string} closeMarker
  * @return {string}
  */
-function tokenize(text, openMarker, closeMarker) {
+function tokenize(text, openMarker, closeMarker, detectCycles) {
 	const formatted = [];
+	const keys = [];
 
 	const parameterAssignment = this[internalSymbol]["parameter"]["assignment"];
 	const parameterDelimiter = this[internalSymbol]["parameter"]["delimiter"];
 	const callbacks = this[internalSymbol]["callbacks"];
+	const activeKeys = this[recursionStackSymbol] || [];
 
 	while (true) {
 		const startIndex = text.indexOf(openMarker);
@@ -317,8 +353,16 @@ function tokenize(text, openMarker, closeMarker) {
 					text.substring(insideStartIndex),
 					openMarker,
 					closeMarker,
+					detectCycles,
 				);
-				text = text.substring(0, insideStartIndex) + result;
+				text = text.substring(0, insideStartIndex) + result.text;
+				if (detectCycles && result.keys?.length) {
+					for (const key of result.keys) {
+						if (!keys.includes(key)) {
+							keys.push(key);
+						}
+					}
+				}
 				endIndex = text.substring(openMarker.length).indexOf(closeMarker);
 				if (endIndex !== -1) endIndex += openMarker.length;
 			}
@@ -331,6 +375,16 @@ function tokenize(text, openMarker, closeMarker) {
 		const key = text.substring(openMarker.length, endIndex);
 		const parts = key.split(parameterDelimiter);
 		const currentPipe = parts.shift();
+		const recursionKey = getRecursionKey(currentPipe);
+
+		if (detectCycles && recursionKey) {
+			if (activeKeys.includes(recursionKey)) {
+				throw new Error("cycle detected in formatter");
+			}
+			if (!keys.includes(recursionKey)) {
+				keys.push(recursionKey);
+			}
+		}
 
 		this[workingDataSymbol] = extend(
 			{},
@@ -372,5 +426,20 @@ function tokenize(text, openMarker, closeMarker) {
 		text = text.substring(endIndex + closeMarker.length);
 	}
 
-	return formatted.join("");
+	return { text: formatted.join(""), keys };
+}
+
+/**
+ * @private
+ * @param {string} pipe
+ * @return {string|null}
+ */
+function getRecursionKey(pipe) {
+	if (!pipe) return null;
+	const rawKey = pipe.split("|").shift().trim();
+	if (rawKey === "") return null;
+	if (rawKey.indexOf("path:") === 0) return rawKey.substring("path:".length);
+	if (rawKey.indexOf("static:") === 0)
+		return rawKey.substring("static:".length);
+	return rawKey;
 }

package/test/cases/text/formatter.mjs

@@ -288,7 +288,11 @@ describe('Formatter', function () {
                 mykey: '${mykey}',
             };
 
-            const formatter = new Formatter(inputObj);
+            const formatter = new Formatter(inputObj, {
+                recursion: {
+                    detectCycles: false,
+                },
+            });
 
             const text = '${mykey}';
             let formattedText = text;
@@ -300,8 +304,28 @@ describe('Formatter', function () {
 
             expect(() => formatter.format(formattedText)).to.throw('too deep nesting');
         });
+
+        it('should detect recursion cycles by default', () => {
+            const formatter = new Formatter({
+                a: '${b}',
+                b: '${a}',
+            });
+
+            expect(() => formatter.format('${a}')).to.throw('cycle detected in formatter');
+        });
+
+        it('should allow configuring max depth', () => {
+            const formatter = new Formatter({value: '${value}'}, {
+                recursion: {
+                    maxDepth: 3,
+                    detectCycles: false,
+                },
+            });
+
+            expect(() => formatter.format('${value}')).to.throw('too deep nesting');
+        });
         
     });
 
 
-});
+});