add test case for #17352

Author: hmnd

packages/svelte/tests/signals/test.ts

@@ -1563,4 +1563,264 @@ describe('signals', () => {
 			assert.ok(isClean, 'derived with no deps should be CLEAN');
 		};
 	});
+
+	// Simpler test: nested derived inside parent derived should react to source changes
+	test('nested derived inside parent derived reacts to source changes', () => {
+		const log: any[] = [];
+
+		return () => {
+			const flag = state(false);
+
+			const destroy = effect_root(() => {
+				// Parent derived creates a nested derived
+				const items = derived(() => {
+					const nested = derived(() => $.get(flag));
+					return {
+						get value() {
+							return $.get(nested);
+						}
+					};
+				});
+
+				render_effect(() => {
+					log.push($.get(items).value);
+				});
+			});
+
+			flushSync();
+			assert.deepEqual(log, [false], 'initial value');
+
+			set(flag, true);
+			flushSync();
+			assert.deepEqual(log, [false, true], 'nested derived should react to flag change');
+
+			destroy();
+		};
+	});
+
+	// Test with SvelteSet like the original issue
+	test('nested derived with SvelteSet reacts to changes', () => {
+		const log: any[] = [];
+
+		return () => {
+			const expanded_ids = new SvelteSet<string>();
+
+			const destroy = effect_root(() => {
+				const items = derived(() => {
+					const expanded = derived(() => expanded_ids.has('a'));
+					return {
+						get expanded() {
+							return $.get(expanded);
+						}
+					};
+				});
+
+				render_effect(() => {
+					log.push($.get(items).expanded);
+				});
+			});
+
+			flushSync();
+			assert.deepEqual(log, [false], 'initial: a not expanded');
+
+			expanded_ids.add('a');
+			flushSync();
+			assert.deepEqual(log, [false, true], 'after add: a expanded');
+
+			expanded_ids.delete('a');
+			flushSync();
+			assert.deepEqual(log, [false, true, false], 'after delete: a not expanded');
+
+			destroy();
+		};
+	});
+
+	// This matches the App.svelte pattern more closely - array of items with nested deriveds
+	// and reading visible_items outside effect context after mutation
+	test('nested deriveds in array items lose reactivity after reading outside effect', () => {
+		const log: any[] = [];
+
+		return () => {
+			const expanded_ids = new SvelteSet<string>();
+			const nodes = proxy([{ id: 'a' }, { id: 'b' }]);
+
+			let items_derived: Derived<any[]>;
+			let visible_items_derived: Derived<any[]>;
+
+			const destroy = effect_root(() => {
+				items_derived = derived(() => {
+					const result: any[] = [];
+					for (const node of nodes) {
+						const expanded = derived(() => expanded_ids.has(node.id));
+						result.push({
+							node,
+							get expanded() {
+								return $.get(expanded);
+							}
+						});
+					}
+					return result;
+				});
+
+				visible_items_derived = derived(() => $.get(items_derived));
+
+				render_effect(() => {
+					const items = $.get(visible_items_derived);
+					// Log which items are expanded
+					log.push(items.map((i: any) => i.expanded));
+				});
+			});
+
+			flushSync();
+			assert.deepEqual(log, [[false, false]], 'initial: none expanded');
+
+			expanded_ids.add('a');
+			flushSync();
+			assert.deepEqual(
+				log,
+				[
+					[false, false],
+					[true, false]
+				],
+				'a expanded'
+			);
+
+			expanded_ids.delete('a');
+			flushSync();
+			assert.deepEqual(
+				log,
+				[
+					[false, false],
+					[true, false],
+					[false, false]
+				],
+				'a collapsed'
+			);
+
+			// Now simulate the delete scenario - mutate nodes then read visible_items outside effect
+			nodes.splice(1, 1); // Remove 'b'
+
+			// This read happens outside effect context (simulating event handler reading visible_items)
+			const snapshot = $.get(visible_items_derived);
+			assert.equal(snapshot.length, 1);
+
+			flushSync();
+			assert.deepEqual(
+				log,
+				[[false, false], [true, false], [false, false], [false]],
+				'after delete'
+			);
+
+			// Now the bug: expanding 'a' should work
+			expanded_ids.add('a');
+			flushSync();
+			assert.deepEqual(
+				log,
+				[[false, false], [true, false], [false, false], [false], [true]],
+				'after expand post-delete: nested deriveds should still be reactive'
+			);
+
+			destroy();
+		};
+	});
+
+	// Reproduces the exact App.svelte bug pattern:
+	// - Parent derived creates items with nested deriveds
+	// - Child item's `visible` derived depends on parent item's `expanded` derived
+	// - After mutation + read outside effect, nested deriveds lose reactivity
+	test('tree-like nested deriveds with parent-child dependencies stay reactive', () => {
+		const log: any[] = [];
+
+		return () => {
+			const expanded_ids = new SvelteSet<string>();
+			const nodes = proxy([
+				{
+					id: 'folder',
+					children: [{ id: 'file' }]
+				},
+				{ id: 'other' }
+			]);
+
+			let items_derived: Derived<any[]>;
+			let visible_items_derived: Derived<any[]>;
+
+			const destroy = effect_root(() => {
+				// Mimics the App.svelte pattern exactly
+				items_derived = derived(function create_items(
+					list: any[] = nodes,
+					parent?: any,
+					result: any[] = []
+				) {
+					for (const node of list) {
+						// Each item has its own expanded derived
+						const expanded_d = derived(() => expanded_ids.has(node.id));
+						// Child's visible depends on parent's expanded (via getter)
+						const visible_d = derived(() =>
+							parent === undefined ? true : $.get(parent.expanded_d) && $.get(parent.visible_d)
+						);
+
+						const item = {
+							node,
+							expanded_d,
+							visible_d,
+							get expanded() {
+								return $.get(expanded_d);
+							},
+							get visible() {
+								return $.get(visible_d);
+							}
+						};
+						result.push(item);
+
+						if (node.children) {
+							create_items(node.children, item, result);
+						}
+					}
+					return result;
+				});
+
+				visible_items_derived = derived(() => $.get(items_derived).filter((item) => item.visible));
+
+				render_effect(() => {
+					log.push($.get(visible_items_derived).length);
+				});
+			});
+
+			flushSync();
+			// folder (visible), file (NOT visible - parent not expanded), other (visible)
+			assert.deepEqual(log, [2], 'initial: folder and other visible');
+
+			// Expand folder - file should become visible
+			expanded_ids.add('folder');
+			flushSync();
+			assert.deepEqual(log, [2, 3], 'after expand: folder, file, other visible');
+
+			// Collapse folder
+			expanded_ids.delete('folder');
+			flushSync();
+			assert.deepEqual(log, [2, 3, 2], 'after collapse');
+
+			// KEY BUG SCENARIO: delete 'other' then read visible_items outside effect
+			nodes.splice(1, 1); // Remove 'other'
+
+			// Read outside effect context (simulates event handler reading visible_items)
+			const snapshot = $.get(visible_items_derived);
+			assert.equal(snapshot.length, 1, 'after delete: only folder visible');
+
+			flushSync();
+			assert.deepEqual(log, [2, 3, 2, 1], 'effect ran after delete');
+
+			// THE BUG: expand folder - file should become visible again
+			// Without fix: nested deriveds created during outside-effect read lost reactivity
+			expanded_ids.add('folder');
+			flushSync();
+			assert.deepEqual(
+				log,
+				[2, 3, 2, 1, 2],
+				'after expand post-delete: folder and file should be visible'
+			);
+
+			destroy();
+		};
+	});
 });