@selvajs/ui 4.12.2 → 4.12.4

package/dist/components/preview/InputControl.svelte

@@ -110,45 +110,34 @@
 	);
 
 	// When a dynamic value list recomputes, a previously-selected value may no longer be an
-	// available option. Prune the stale selection so the control shows a valid option (or empty)
-	// instead of rendering the orphaned raw value as its own label. This is a system-initiated
-	// change (the user didn't pick the new option), so force a solve — otherwise manual-solve
-	// schemas would keep the prior output on screen, making it look like the auto-picked option
-	// produced it.
-	// Distinguishes "never selected" from "user deliberately cleared": the empty→
-	// first-option fallback below must not fight a real user action (e.g. unchecking
-	// every checklist entry), only fill the initial void.
-	let userTouched = false;
-
+	// available option. Prune the stale selection so the control shows a valid option instead
+	// of rendering the orphaned raw value as its own label. This is a system-initiated change
+	// (the user didn't pick the new option), so force a solve — otherwise manual-solve schemas
+	// would keep the prior output on screen, making it look like the auto-picked option produced it.
+	//
+	// INVARIANT: a dynamic value list must never dispatch an empty/null value to solve. There
+	// is always at least one option, and an empty selection reaches the definition as null/""
+	// — which throws NREs in downstream geometry components (e.g. Bounding Rectangle) and nulls
+	// every output beyond them. So every terminal state below resolves to a valid option; there
+	// is deliberately no "user cleared it, stay empty" path.
 	$effect(() => {
 		if (!isDynamicValueListWidget(item) || !dynamicListHasOptions) return;
 		const validValues = new Set(Object.values(dynamicListOptions));
 		const firstOption = Object.values(dynamicListOptions)[0];
-		// 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)
-		// gets the same first-option fallback as a stale one: an empty selection solves
-		// 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.
 		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.
+			// Empty (never selected or fully pruned) always falls back to the first option —
+			// a checklist that solves empty produces the same null cascade as a single value.
+			if (pruned.length !== value.length || value.length === 0) {
 				onChange(item.paramId, pruned.length > 0 ? pruned : [firstOption], true);
 			}
-		} else if (
-			(typeof value === 'string' && value && !validValues.has(value)) ||
-			((value == null || value === '') && !userTouched)
-		) {
-			// Stale single value, or never-selected — fall back to the first option.
+		} else if (typeof value !== 'string' || value === '' || !validValues.has(value)) {
+			// Never-selected or stale single value — fall back to the first option.
 			onChange(item.paramId, firstOption, true);
 		}
 	});
 
 	function commit(newValue: SupportedTypes) {
-		userTouched = true;
 		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.4",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "publishConfig": {

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

@@ -110,45 +110,34 @@
 	);
 
 	// When a dynamic value list recomputes, a previously-selected value may no longer be an
-	// available option. Prune the stale selection so the control shows a valid option (or empty)
-	// instead of rendering the orphaned raw value as its own label. This is a system-initiated
-	// change (the user didn't pick the new option), so force a solve — otherwise manual-solve
-	// schemas would keep the prior output on screen, making it look like the auto-picked option
-	// produced it.
-	// Distinguishes "never selected" from "user deliberately cleared": the empty→
-	// first-option fallback below must not fight a real user action (e.g. unchecking
-	// every checklist entry), only fill the initial void.
-	let userTouched = false;
-
+	// available option. Prune the stale selection so the control shows a valid option instead
+	// of rendering the orphaned raw value as its own label. This is a system-initiated change
+	// (the user didn't pick the new option), so force a solve — otherwise manual-solve schemas
+	// would keep the prior output on screen, making it look like the auto-picked option produced it.
+	//
+	// INVARIANT: a dynamic value list must never dispatch an empty/null value to solve. There
+	// is always at least one option, and an empty selection reaches the definition as null/""
+	// — which throws NREs in downstream geometry components (e.g. Bounding Rectangle) and nulls
+	// every output beyond them. So every terminal state below resolves to a valid option; there
+	// is deliberately no "user cleared it, stay empty" path.
 	$effect(() => {
 		if (!isDynamicValueListWidget(item) || !dynamicListHasOptions) return;
 		const validValues = new Set(Object.values(dynamicListOptions));
 		const firstOption = Object.values(dynamicListOptions)[0];
-		// 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)
-		// gets the same first-option fallback as a stale one: an empty selection solves
-		// 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.
 		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.
+			// Empty (never selected or fully pruned) always falls back to the first option —
+			// a checklist that solves empty produces the same null cascade as a single value.
+			if (pruned.length !== value.length || value.length === 0) {
 				onChange(item.paramId, pruned.length > 0 ? pruned : [firstOption], true);
 			}
-		} else if (
-			(typeof value === 'string' && value && !validValues.has(value)) ||
-			((value == null || value === '') && !userTouched)
-		) {
-			// Stale single value, or never-selected — fall back to the first option.
+		} else if (typeof value !== 'string' || value === '' || !validValues.has(value)) {
+			// Never-selected or stale single value — fall back to the first option.
 			onChange(item.paramId, firstOption, true);
 		}
 	});
 
 	function commit(newValue: SupportedTypes) {
-		userTouched = true;
 		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;