@selvajs/ui 4.12.2 → 4.12.3

package/dist/components/preview/InputControl.svelte

@@ -120,10 +120,34 @@
 	// every checklist entry), only fill the initial void.
 	let userTouched = false;
 
+	// Loop breaker for the system fallback. A definition whose computed options
+	// DEPEND on the selection can oscillate: auto-pick A → solve → new options
+	// exclude A → auto-pick B → solve → … Each cycle force-solves and re-renders
+	// the option list, which can run a tab out of memory. Bound consecutive
+	// system-initiated picks; any real user commit resets the budget.
+	const MAX_CONSECUTIVE_AUTO_PICKS = 3;
+	let autoPickCount = 0;
+
 	$effect(() => {
 		if (!isDynamicValueListWidget(item) || !dynamicListHasOptions) return;
 		const validValues = new Set(Object.values(dynamicListOptions));
 		const firstOption = Object.values(dynamicListOptions)[0];
+		// Selection is valid → stable state reached; refill the auto-pick budget.
+		const isValid = Array.isArray(value)
+			? value.length > 0 && value.every((v) => typeof v === 'string' && validValues.has(v))
+			: typeof value === 'string' && value !== '' && validValues.has(value);
+		if (isValid) {
+			autoPickCount = 0;
+			return;
+		}
+		if (autoPickCount >= MAX_CONSECUTIVE_AUTO_PICKS) {
+			console.warn(
+				`[InputControl] dynamic value list "${item.paramId}": options keep invalidating the ` +
+					`auto-picked selection (${autoPickCount} consecutive system picks) — the definition's ` +
+					`options likely depend on the selection. Stopping auto-reconciliation to avoid a solve loop.`
+			);
+			return;
+		}
 		// Route through onChange (not commit) — value is a one-way prop here, so writing it
 		// directly from an effect trips Svelte's binding-ownership check.
 		// A NEVER-made selection (empty string/array, e.g. no default on a fresh page)
@@ -131,11 +155,20 @@
 		// as an empty string, which cascades through the definition as null-data errors
 		// ("File not found: .dmf", Text→Number conversion failures, …) and the empty
 		// result then gets replayed by the solve caches.
+		// Diagnostic: each system pick logs itself — a runaway sequence of these lines
+		// (pick #1, #2, #3 + the loop-breaker warning) is the solve-loop signature.
+		const logAutoPick = (picked: string) =>
+			console.info(
+				`[DVL] auto-pick #${autoPickCount} on "${item.paramId}": "${picked.slice(0, 60)}" ` +
+					`(was ${JSON.stringify(Array.isArray(value) ? value.slice(0, 3) : value)?.slice(0, 80)})`
+			);
 		if (Array.isArray(value)) {
 			const pruned = value.filter((v) => typeof v === 'string' && validValues.has(v));
 			if (pruned.length !== value.length || (value.length === 0 && !userTouched)) {
 				// Fall back to first option when the checklist is fully pruned or was
 				// never selected; a user-cleared checklist stays empty.
+				autoPickCount++;
+				logAutoPick(pruned.length > 0 ? String(pruned[0]) : firstOption);
 				onChange(item.paramId, pruned.length > 0 ? pruned : [firstOption], true);
 			}
 		} else if (
@@ -143,12 +176,16 @@
 			((value == null || value === '') && !userTouched)
 		) {
 			// Stale single value, or never-selected — fall back to the first option.
+			autoPickCount++;
+			logAutoPick(firstOption);
 			onChange(item.paramId, firstOption, true);
 		}
 	});
 
 	function commit(newValue: SupportedTypes) {
 		userTouched = true;
+		// A real user pick re-arms the system fallback (see autoPickCount above).
+		autoPickCount = 0;
 		value = newValue;
 		onChange(item.paramId, newValue);
 	}

package/dist/schema/dynamic-value-list.js

@@ -26,6 +26,45 @@ function coercePayload(value) {
     }
     return null;
 }
+// Memoizes string-payload coercion. In compute mode the payload arrives as a JSON
+// string — potentially several MB for a large options list — and the options map is
+// derived from `values` (TabLayout), so it recomputes on EVERY value change. Without
+// memoization each keystroke/output-merge re-parses megabytes and allocates a fresh
+// options object, whose new identity re-renders the entire dropdown subtree; with a
+// 6.4 MB payload this was measured driving a tab out of memory. Map keys use
+// SameValueZero, so an identical response string from a later solve also hits.
+const coerceCache = new Map();
+const COERCE_CACHE_MAX = 8;
+function coercePayloadMemo(value) {
+    // Only string payloads are expensive (JSON.parse); objects pass straight through.
+    if (typeof value !== 'string' || value.length < 1024)
+        return coercePayload(value);
+    const hit = coerceCache.get(value);
+    if (hit !== undefined || coerceCache.has(value)) {
+        // Refresh LRU position.
+        coerceCache.delete(value);
+        coerceCache.set(value, hit ?? null);
+        return hit ?? null;
+    }
+    const parseStart = performance.now();
+    const parsed = coercePayload(value);
+    // Diagnostic: an expensive parse should happen ONCE per distinct solve result.
+    // If this line storms in the console, payload memoization is being defeated
+    // (e.g. payload strings differing per recompute) — the pre-memoization churn
+    // pattern that could OOM a tab.
+    if (value.length > 256 * 1024) {
+        const optionCount = parsed?.options ? Object.keys(parsed.options).length : 0;
+        console.info(`[DVL] parsed ${(value.length / (1024 * 1024)).toFixed(1)} MB options payload ` +
+            `(${optionCount} options) in ${(performance.now() - parseStart).toFixed(0)}ms — cache miss`);
+    }
+    if (coerceCache.size >= COERCE_CACHE_MAX) {
+        const oldest = coerceCache.keys().next().value;
+        if (oldest !== undefined)
+            coerceCache.delete(oldest);
+    }
+    coerceCache.set(value, parsed);
+    return parsed;
+}
 /**
  * Every dynamicValueList output reference in the schema.
  *
@@ -62,7 +101,7 @@ function collectDynamicValueListSources(schema) {
 export function buildDynamicValueListOptions(schema, values) {
     const result = {};
     for (const source of collectDynamicValueListSources(schema)) {
-        const payload = coercePayload(values[source.id]);
+        const payload = coercePayloadMemo(values[source.id]);
         if (!payload)
             continue;
         const targetInputId = payload.targetInputId ?? source.targetInputId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "4.12.2",
+  "version": "4.12.3",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "publishConfig": {

package/src/lib/components/preview/InputControl.svelte

@@ -120,10 +120,34 @@
 	// every checklist entry), only fill the initial void.
 	let userTouched = false;
 
+	// Loop breaker for the system fallback. A definition whose computed options
+	// DEPEND on the selection can oscillate: auto-pick A → solve → new options
+	// exclude A → auto-pick B → solve → … Each cycle force-solves and re-renders
+	// the option list, which can run a tab out of memory. Bound consecutive
+	// system-initiated picks; any real user commit resets the budget.
+	const MAX_CONSECUTIVE_AUTO_PICKS = 3;
+	let autoPickCount = 0;
+
 	$effect(() => {
 		if (!isDynamicValueListWidget(item) || !dynamicListHasOptions) return;
 		const validValues = new Set(Object.values(dynamicListOptions));
 		const firstOption = Object.values(dynamicListOptions)[0];
+		// Selection is valid → stable state reached; refill the auto-pick budget.
+		const isValid = Array.isArray(value)
+			? value.length > 0 && value.every((v) => typeof v === 'string' && validValues.has(v))
+			: typeof value === 'string' && value !== '' && validValues.has(value);
+		if (isValid) {
+			autoPickCount = 0;
+			return;
+		}
+		if (autoPickCount >= MAX_CONSECUTIVE_AUTO_PICKS) {
+			console.warn(
+				`[InputControl] dynamic value list "${item.paramId}": options keep invalidating the ` +
+					`auto-picked selection (${autoPickCount} consecutive system picks) — the definition's ` +
+					`options likely depend on the selection. Stopping auto-reconciliation to avoid a solve loop.`
+			);
+			return;
+		}
 		// Route through onChange (not commit) — value is a one-way prop here, so writing it
 		// directly from an effect trips Svelte's binding-ownership check.
 		// A NEVER-made selection (empty string/array, e.g. no default on a fresh page)
@@ -131,11 +155,20 @@
 		// as an empty string, which cascades through the definition as null-data errors
 		// ("File not found: .dmf", Text→Number conversion failures, …) and the empty
 		// result then gets replayed by the solve caches.
+		// Diagnostic: each system pick logs itself — a runaway sequence of these lines
+		// (pick #1, #2, #3 + the loop-breaker warning) is the solve-loop signature.
+		const logAutoPick = (picked: string) =>
+			console.info(
+				`[DVL] auto-pick #${autoPickCount} on "${item.paramId}": "${picked.slice(0, 60)}" ` +
+					`(was ${JSON.stringify(Array.isArray(value) ? value.slice(0, 3) : value)?.slice(0, 80)})`
+			);
 		if (Array.isArray(value)) {
 			const pruned = value.filter((v) => typeof v === 'string' && validValues.has(v));
 			if (pruned.length !== value.length || (value.length === 0 && !userTouched)) {
 				// Fall back to first option when the checklist is fully pruned or was
 				// never selected; a user-cleared checklist stays empty.
+				autoPickCount++;
+				logAutoPick(pruned.length > 0 ? String(pruned[0]) : firstOption);
 				onChange(item.paramId, pruned.length > 0 ? pruned : [firstOption], true);
 			}
 		} else if (
@@ -143,12 +176,16 @@
 			((value == null || value === '') && !userTouched)
 		) {
 			// Stale single value, or never-selected — fall back to the first option.
+			autoPickCount++;
+			logAutoPick(firstOption);
 			onChange(item.paramId, firstOption, true);
 		}
 	});
 
 	function commit(newValue: SupportedTypes) {
 		userTouched = true;
+		// A real user pick re-arms the system fallback (see autoPickCount above).
+		autoPickCount = 0;
 		value = newValue;
 		onChange(item.paramId, newValue);
 	}

package/src/lib/schema/dynamic-value-list.test.ts

@@ -91,6 +91,23 @@ describe('buildDynamicValueListOptions', () => {
 		expect(result[TARGET]).toEqual({ A: '1' });
 	});
 
+	it('returns the SAME parsed object for repeated large string payloads (memoization)', () => {
+		const schema = schemaWith({ layoutItems: [layoutItem(BAKE, TARGET)] });
+		// Above the 1024-char memoization threshold — the expensive compute-mode path.
+		const bigOptions: Record<string, string> = {};
+		for (let i = 0; i < 100; i++) bigOptions[`option-${i}-${'x'.repeat(20)}`] = String(i);
+		const str = JSON.stringify(payload(TARGET, bigOptions));
+
+		const first = buildDynamicValueListOptions(schema, { [BAKE]: str });
+		// A later solve delivering an identical (even newly-allocated) string must yield
+		// the same object reference — referential stability is what stops the dropdown
+		// subtree from re-rendering on every unrelated values change.
+		const second = buildDynamicValueListOptions(schema, { [BAKE]: String(str) });
+
+		expect(first[TARGET]).toEqual(bigOptions);
+		expect(second[TARGET]).toBe(first[TARGET]);
+	});
+
 	it('dedupes outputs[] over layout for the same id', () => {
 		const schema = schemaWith({
 			outputs: [{ id: BAKE, type: 'dynamicValueList', targetInputId: 'from-outputs' }] as never,

package/src/lib/schema/dynamic-value-list.ts

@@ -40,6 +40,47 @@ function coercePayload(value: unknown): DynamicValueListPayload | null {
 	return null;
 }
 
+// Memoizes string-payload coercion. In compute mode the payload arrives as a JSON
+// string — potentially several MB for a large options list — and the options map is
+// derived from `values` (TabLayout), so it recomputes on EVERY value change. Without
+// memoization each keystroke/output-merge re-parses megabytes and allocates a fresh
+// options object, whose new identity re-renders the entire dropdown subtree; with a
+// 6.4 MB payload this was measured driving a tab out of memory. Map keys use
+// SameValueZero, so an identical response string from a later solve also hits.
+const coerceCache = new Map<string, DynamicValueListPayload | null>();
+const COERCE_CACHE_MAX = 8;
+
+function coercePayloadMemo(value: unknown): DynamicValueListPayload | null {
+	// Only string payloads are expensive (JSON.parse); objects pass straight through.
+	if (typeof value !== 'string' || value.length < 1024) return coercePayload(value);
+	const hit = coerceCache.get(value);
+	if (hit !== undefined || coerceCache.has(value)) {
+		// Refresh LRU position.
+		coerceCache.delete(value);
+		coerceCache.set(value, hit ?? null);
+		return hit ?? null;
+	}
+	const parseStart = performance.now();
+	const parsed = coercePayload(value);
+	// Diagnostic: an expensive parse should happen ONCE per distinct solve result.
+	// If this line storms in the console, payload memoization is being defeated
+	// (e.g. payload strings differing per recompute) — the pre-memoization churn
+	// pattern that could OOM a tab.
+	if (value.length > 256 * 1024) {
+		const optionCount = parsed?.options ? Object.keys(parsed.options).length : 0;
+		console.info(
+			`[DVL] parsed ${(value.length / (1024 * 1024)).toFixed(1)} MB options payload ` +
+				`(${optionCount} options) in ${(performance.now() - parseStart).toFixed(0)}ms — cache miss`
+		);
+	}
+	if (coerceCache.size >= COERCE_CACHE_MAX) {
+		const oldest = coerceCache.keys().next().value;
+		if (oldest !== undefined) coerceCache.delete(oldest);
+	}
+	coerceCache.set(value, parsed);
+	return parsed;
+}
+
 /** One DynVL routing source: the id keying `values`, plus the schema-side target fallback. */
 interface DynamicValueListSource {
 	id: string;
@@ -87,7 +128,7 @@ export function buildDynamicValueListOptions(
 	const result: Record<string, Record<string, string>> = {};
 
 	for (const source of collectDynamicValueListSources(schema)) {
-		const payload = coercePayload(values[source.id]);
+		const payload = coercePayloadMemo(values[source.id]);
 		if (!payload) continue;
 
 		const targetInputId = payload.targetInputId ?? source.targetInputId;