ripple 0.3.84 → 0.3.86

package/CHANGELOG.md

@@ -1,5 +1,86 @@
 # ripple
 
+## 0.3.86
+
+### Patch Changes
+
+- [#1310](https://github.com/Ripple-TS/ripple/pull/1310)
+  [`4ebd58d`](https://github.com/Ripple-TS/ripple/commit/4ebd58dfe853c1ed945072822eaba8a7a9e19a6c)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Fix
+  `Cannot use 'in' operator to search for 'parent' in null` thrown from `append()`
+  when reordering or inserting into a keyed `@for` whose item body is a single
+  control-flow / component root (e.g. `@for (...; key ...) { <Card {item} /> }`
+  where `Card`'s own body is a single `@if`/`@for`/component). The 0.3.85
+  wrapper-anchor optimization leaves such an item block's `s.start` null because
+  its DOM is rendered through a descendant block, and keyed reconciliation read
+  `s.start` directly as the insertion anchor. Reconciliation now resolves the real
+  first/last DOM node by descending child blocks, so no `<!>` comment marker is
+  reintroduced and the optimization's reduced DOM-mutation cost is preserved. The
+  same resolution is applied to `@switch` case reordering.
+- Updated dependencies
+  [[`e4e6d7b`](https://github.com/Ripple-TS/ripple/commit/e4e6d7b854786ad19a2c86276ea7e0ffb062e61a)]:
+  - @tsrx/ripple@0.1.34
+
+## 0.3.85
+
+### Patch Changes
+
+- [#1307](https://github.com/Ripple-TS/ripple/pull/1307)
+  [`f55466b`](https://github.com/Ripple-TS/ripple/commit/f55466bde65d0cff00c0c4525af9d68ae794ffd2)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Skip the wrapper anchor for
+  single control-flow / code-block / component root scopes. When a scope's entire
+  renderable output is a single `@if`, `@switch`, `@for`, `@try`, or static child
+  component — i.e. a component body, a control-flow branch, or a `@{}` body whose
+  only output after setup is one of these — the compiler now renders it directly
+  before the parent-provided `__anchor` instead of synthesizing a `<!>` fragment
+  wrapper and an extra append + clone. For deep recursive trees this measurably
+  cuts mount time and shrinks generated output; in the recursive-context benchmark
+  it brought mount DOM operations to one clone + one append per element (from
+  ~1.5×) and halved the comment-anchor nodes.
+
+  Hydration is preserved. The control-flow runtimes
+  (`if_block`/`switch_block`/`for_block`/`for_block_keyed`/`try_block`) capture
+  the SSR boundary marker and hand it to `append()` afterward, so the existing
+  context-aware cursor advance still runs — including for a root scope used as a
+  child of a composite/slot with following siblings. Single-component roots need
+  no runtime change at all, since a component's own content advances the hydration
+  cursor.
+
+  Also relaxes the compiler's text-expression detection: `string + anything` (e.g.
+  `{a + '|' + b}`) is now recognized as text and lowered to the fast `set_text`
+  path without requiring an explicit `as string`, since such an expression always
+  evaluates to a string in JS.
+
+- [#1307](https://github.com/Ripple-TS/ripple/pull/1307)
+  [`f55466b`](https://github.com/Ripple-TS/ripple/commit/f55466bde65d0cff00c0c4525af9d68ae794ffd2)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Scope the client flush
+  traversal to the updated subtree. Previously every flush walked the whole root
+  block tree to find dirty subscribers, so a deeply-scoped update (e.g. mutating
+  state read by only a small subtree) paid a cost proportional to the entire tree
+  rather than the affected branch. `flush_updates` now descends only along the
+  routing path to each directly-scheduled block and fully scans just that block's
+  subtree, where its subscribers live. A tracked read from outside its owner's
+  subtree (e.g. smuggled across sibling subtrees via a module-level variable) is
+  detected in `register_dependency` and transparently falls back to the original
+  full-tree scan, so behavior is unchanged.
+
+- Updated dependencies
+  [[`ba498cd`](https://github.com/Ripple-TS/ripple/commit/ba498cde76e9f83235ce91da825f403a28441bff),
+  [`313b351`](https://github.com/Ripple-TS/ripple/commit/313b3513e4a959dd80b546da41c798066c5ccb0f),
+  [`35ac700`](https://github.com/Ripple-TS/ripple/commit/35ac70052d79efae41bb1df2440fee3f052ca115),
+  [`bbe6e74`](https://github.com/Ripple-TS/ripple/commit/bbe6e7422c690558f0dfcb3abe5452d4f4cdde91),
+  [`0e9f523`](https://github.com/Ripple-TS/ripple/commit/0e9f52358a615c2fc7759544e96c43dccb533c86),
+  [`35ac700`](https://github.com/Ripple-TS/ripple/commit/35ac70052d79efae41bb1df2440fee3f052ca115),
+  [`35ac700`](https://github.com/Ripple-TS/ripple/commit/35ac70052d79efae41bb1df2440fee3f052ca115),
+  [`2b65285`](https://github.com/Ripple-TS/ripple/commit/2b65285bfcd4c6a0aa93d7fa0b25082e6ec74e1f),
+  [`35ac700`](https://github.com/Ripple-TS/ripple/commit/35ac70052d79efae41bb1df2440fee3f052ca115),
+  [`f55466b`](https://github.com/Ripple-TS/ripple/commit/f55466bde65d0cff00c0c4525af9d68ae794ffd2),
+  [`b887deb`](https://github.com/Ripple-TS/ripple/commit/b887debf5f47e63d73184ac218ec8b3542a5e21c),
+  [`3668c5f`](https://github.com/Ripple-TS/ripple/commit/3668c5fe9cdaca4862707d653d23af94780f42af),
+  [`bbc3843`](https://github.com/Ripple-TS/ripple/commit/bbc384387e33c538234be36c07cc4b30ef6ce136)]:
+  - @tsrx/ripple@0.1.33
+  - @tsrx/core@0.1.33
+
 ## 0.3.84
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.84",
+  "version": "0.3.86",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -73,8 +73,8 @@
     "clsx": "^2.1.1",
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "0.1.32",
-    "@tsrx/ripple": "0.1.32"
+    "@tsrx/core": "0.1.33",
+    "@tsrx/ripple": "0.1.34"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/constants.js

@@ -2,6 +2,10 @@ export const TEMPLATE_FRAGMENT = 1;
 export const TEMPLATE_USE_IMPORT_NODE = 1 << 1;
 export const IS_CONTROLLED = 1 << 2;
 export const IS_INDEXED = 1 << 3;
+// A @for whose component body is its sole root: renders before the parent
+// `__anchor` (sibling semantics, no `<!>` wrapper). Distinct from IS_CONTROLLED,
+// which renders inside a parent element.
+export const ROOT_CONTROLLED = 1 << 4;
 export const TEMPLATE_SVG_NAMESPACE = 1 << 5;
 export const TEMPLATE_MATHML_NAMESPACE = 1 << 6;
 

package/src/runtime/internal/client/blocks.js

@@ -429,6 +429,59 @@ export function move_block(block, target) {
 	return moved;
 }
 
+/**
+ * Resolve the first DOM node owned by a block. A block normally records its
+ * range in `s.start`/`s.end`, but an optimized single control-flow / component
+ * root scope renders its content through a descendant block instead of a
+ * synthesized `<!>` wrapper, so its own `s.start` is null. In that case we
+ * descend into child blocks to find the real first node. Returns null when the
+ * block currently renders no DOM.
+ * @param {Block} block
+ * @returns {Node | null}
+ */
+export function get_first_node(block) {
+	var f = block.f;
+	if ((f & BRANCH_BLOCK) !== 0 && (f & TRY_BLOCK) === 0) {
+		var s = block.s;
+		if (s !== null && s.start !== null) {
+			return s.start;
+		}
+	}
+	var child = block.first;
+	while (child !== null) {
+		var node = get_first_node(child);
+		if (node !== null) {
+			return node;
+		}
+		child = child.next;
+	}
+	return null;
+}
+
+/**
+ * Mirror of {@link get_first_node} for the last DOM node owned by a block.
+ * @param {Block} block
+ * @returns {Node | null}
+ */
+export function get_last_node(block) {
+	var f = block.f;
+	if ((f & BRANCH_BLOCK) !== 0 && (f & TRY_BLOCK) === 0) {
+		var s = block.s;
+		if (s !== null && s.start !== null) {
+			return s.end;
+		}
+	}
+	var child = block.last;
+	while (child !== null) {
+		var node = get_last_node(child);
+		if (node !== null) {
+			return node;
+		}
+		child = child.prev;
+	}
+	return null;
+}
+
 /**
  * @param {Block} block
  * @param {boolean} [remove_dom]

package/src/runtime/internal/client/component.js

@@ -1,4 +1,4 @@
-/** @import { Block } from '#client' */
+/** @import { AppendIntoAnchor, Block } from '#client' */
 
 import { is_tsrx_element } from '../../element.js';
 import { render_value } from './expression.js';
@@ -6,7 +6,7 @@ import { active_block, pop_component, push_component } from './runtime.js';
 
 /**
  * @param {Function} fn
- * @param {Node} anchor
+ * @param {Node | AppendIntoAnchor} anchor
  * @param {Record<string, any>} props
  * @param {Block | null} [block=active_block]
  * @returns {void}
@@ -21,7 +21,7 @@ export function render_component(fn, anchor, props, block = active_block) {
 
 /**
  * @param {Function} fn
- * @param {Node} anchor
+ * @param {Node | AppendIntoAnchor} anchor
  * @param {Record<string, any>} props
  * @param {Block | null} [block=active_block]
  * @returns {void}

package/src/runtime/internal/client/constants.js

@@ -19,6 +19,10 @@ export var DERIVED = 1 << 18;
 export var DEFERRED = 1 << 19;
 export var PAUSED = 1 << 20;
 export var DESTROYED = 1 << 21;
+// Marks a block that was directly scheduled (the owner of a mutated tracked).
+// Its whole subtree is scanned for dirty subscribers during flush; blocks above
+// it are only traversed along the CONTAINS_UPDATE routing path.
+export var UPDATE_SOURCE = 1 << 22;
 
 export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | SWITCH_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
 

package/src/runtime/internal/client/for.js

@@ -1,10 +1,18 @@
 /** @import { Block, Tracked } from '#client' */
 
-import { IS_CONTROLLED, IS_INDEXED } from '../../../constants.js';
-import { branch, destroy_block, destroy_block_children, render } from './blocks.js';
+import { IS_CONTROLLED, IS_INDEXED, ROOT_CONTROLLED } from '../../../constants.js';
+import {
+	branch,
+	destroy_block,
+	destroy_block_children,
+	get_first_node,
+	get_last_node,
+	render,
+} from './blocks.js';
 import { FOR_BLOCK, TRACKED_ARRAY } from './constants.js';
 import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { create_text, get_first_child, get_last_child, next_sibling } from './operations.js';
+import { append } from './template.js';
 import { active_block, set, tracked, untrack } from './runtime.js';
 import { array_from, is_array } from '@tsrx/core/runtime/language-helpers';
 
@@ -70,12 +78,26 @@ function create_empty(anchor, render_empty) {
 
 /**
  * @param {Block} block
- * @param {Element} anchor
+ * @param {ChildNode} anchor
  * @returns {void}
  */
 function move(block, anchor) {
-	var node = block.s.start;
-	var end = block.s.end;
+	// Fast path: a normal item records its own range. Only an optimized single
+	// control-flow / component root item (DOM rendered through a descendant
+	// block, `s.start` null) needs the descent via `get_first_node`/`get_last_node`.
+	var s = block.s;
+	var node = s.start;
+	var end;
+
+	if (node === null) {
+		node = get_first_node(block);
+		if (node === null) {
+			return;
+		}
+		end = get_last_node(block);
+	} else {
+		end = s.end;
+	}
 
 	if (node === end) {
 		anchor.before(node);
@@ -86,12 +108,43 @@ function move(block, anchor) {
 		anchor.before(node);
 		node = next_node;
 		if (node === end) {
-			anchor.before(end);
+			anchor.before(/** @type {Node} */ (end));
 			break;
 		}
 	}
 }
 
+/**
+ * Resolve the insertion anchor for a block at `index`: the first real DOM node
+ * at or after `index`, or `fallback` when every remaining block renders nothing.
+ * Scanning forward keeps insertions correct even when an optimized item renders
+ * no DOM (e.g. a single `@if` that is currently false), which previously relied
+ * on a synthesized `<!>` wrapper as a stable position marker.
+ * @param {Block[]} blocks
+ * @param {number} index
+ * @param {number} length
+ * @param {Element | Text} fallback
+ * @returns {ChildNode}
+ */
+function block_start(blocks, index, length, fallback) {
+	if (index >= length) {
+		return fallback;
+	}
+	// Fast path: a normal item records its own boundary, so this is the same
+	// single property read the pre-#1307 code did — no descent, no scan.
+	var first = blocks[index].s.start;
+	if (first !== null) {
+		return first;
+	}
+	for (var k = index; k < length; k++) {
+		var node = get_first_node(blocks[k]);
+		if (node !== null) {
+			return /** @type {ChildNode} */ (node);
+		}
+	}
+	return fallback;
+}
+
 /**
  * @template V
  * @param {V[] | Iterable<V>} collection
@@ -121,7 +174,10 @@ function collection_to_array(collection) {
 export function for_block(node, get_collection, render_fn, flags, render_empty) {
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
+	var root_controlled = (flags & ROOT_CONTROLLED) !== 0;
 	var anchor = /** @type {Element | Text} */ (node);
+	/** @type {Node | undefined} */
+	var boundary;
 
 	if (is_controlled) {
 		if (hydrating) {
@@ -133,6 +189,9 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 	}
 
 	if (hydrating) {
+		if (root_controlled) {
+			boundary = /** @type {Node} */ (hydrate_node);
+		}
 		hydrate_next();
 	}
 
@@ -153,6 +212,10 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 		null,
 		FOR_BLOCK,
 	);
+
+	if (hydrating && root_controlled) {
+		append(/** @type {ChildNode} */ (node), /** @type {Node} */ (boundary));
+	}
 }
 
 /**
@@ -169,7 +232,10 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 export function for_block_keyed(node, get_collection, render_fn, flags, get_key, render_empty) {
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
+	var root_controlled = (flags & ROOT_CONTROLLED) !== 0;
 	var anchor = /** @type {Element | Text} */ (node);
+	/** @type {Node | undefined} */
+	var boundary;
 
 	if (is_controlled) {
 		var parent_node = /** @type {Element} */ (node);
@@ -183,6 +249,9 @@ export function for_block_keyed(node, get_collection, render_fn, flags, get_key,
 	}
 
 	if (hydrating) {
+		if (root_controlled) {
+			boundary = /** @type {Node} */ (hydrate_node);
+		}
 		hydrate_next();
 	}
 
@@ -208,6 +277,10 @@ export function for_block_keyed(node, get_collection, render_fn, flags, get_key,
 		null,
 		FOR_BLOCK,
 	);
+
+	if (hydrating && root_controlled) {
+		append(/** @type {ChildNode} */ (node), /** @type {Node} */ (boundary));
+	}
 }
 
 /**
@@ -408,7 +481,7 @@ function reconcile_by_key(
 		if (j <= b_end) {
 			while (j <= b_end) {
 				b_val = b[j];
-				var target = j >= a_length ? anchor : a_blocks[j].s.start;
+				var target = block_start(a_blocks, j, a_length, anchor);
 				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed, true);
 				j++;
 			}
@@ -527,14 +600,14 @@ function reconcile_by_key(
 				b_val = b[pos];
 				next_pos = pos + 1;
 
-				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				var target = block_start(b_blocks, next_pos, b_length, anchor);
 				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
 				b_val = b[pos];
 				next_pos = pos + 1;
 
-				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				var target = block_start(b_blocks, next_pos, b_length, anchor);
 				move(b_blocks[pos], target);
 			} else {
 				j--;
@@ -547,7 +620,7 @@ function reconcile_by_key(
 				b_val = b[pos];
 				next_pos = pos + 1;
 
-				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				var target = block_start(b_blocks, next_pos, b_length, anchor);
 				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true);
 			}
 		}
@@ -695,7 +768,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 		if (j <= b_end) {
 			while (j <= b_end) {
 				b_val = b[j];
-				var target = j >= a_length ? anchor : a_blocks[j].s.start;
+				var target = block_start(a_blocks, j, a_length, anchor);
 				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed, false);
 				j++;
 			}
@@ -808,14 +881,14 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 				b_val = b[pos];
 				next_pos = pos + 1;
 
-				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				var target = block_start(b_blocks, next_pos, b_length, anchor);
 				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, false);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
 				b_val = b[pos];
 				next_pos = pos + 1;
 
-				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				var target = block_start(b_blocks, next_pos, b_length, anchor);
 				move(b_blocks[pos], target);
 			} else {
 				j--;
@@ -828,7 +901,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 				b_val = b[pos];
 				next_pos = pos + 1;
 
-				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				var target = block_start(b_blocks, next_pos, b_length, anchor);
 				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, false);
 			}
 		}

package/src/runtime/internal/client/if.js

@@ -2,15 +2,27 @@
 
 import { branch, destroy_block, render } from './blocks.js';
 import { IF_BLOCK, UNINITIALIZED } from './constants.js';
-import { hydrate_next, hydrating } from './hydration.js';
+import { hydrate_next, hydrate_node, hydrating } from './hydration.js';
+import { append } from './template.js';
 
 /**
  * @param {Node} node
  * @param {(set_branch: (fn: (anchor: Node) => void, flag?: boolean) => void) => void} fn
+ * @param {boolean} [root_controlled] When true the block renders directly before
+ *   the component's `__anchor` (no synthesized `<!>` wrapper). During hydration
+ *   the SSR boundary start marker sits at the cursor; we hand it to `append()`
+ *   afterwards so it performs the same context-aware boundary advance the
+ *   eliminated wrapper's `append()` used to do.
  * @returns {void}
  */
-export function if_block(node, fn) {
+export function if_block(node, fn, root_controlled) {
+	/** @type {Node | undefined} */
+	var boundary;
+
 	if (hydrating) {
+		if (root_controlled) {
+			boundary = /** @type {Node} */ (hydrate_node);
+		}
 		hydrate_next();
 	}
 
@@ -52,4 +64,8 @@ export function if_block(node, fn) {
 		null,
 		IF_BLOCK,
 	);
+
+	if (hydrating && root_controlled) {
+		append(/** @type {ChildNode} */ (anchor), /** @type {Node} */ (boundary));
+	}
 }

package/src/runtime/internal/client/index.js

@@ -2,6 +2,7 @@ export {
 	first_child as child,
 	first_child_frag,
 	next_sibling as sibling,
+	append_into,
 	document,
 	create_text,
 	init_operations,

package/src/runtime/internal/client/operations.js

@@ -1,3 +1,5 @@
+/** @import { AppendIntoAnchor } from '#client' */
+
 import { TEXT_NODE } from '../../../constants.js';
 import { hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { get_descriptor } from '@tsrx/core/runtime/language-helpers';
@@ -83,6 +85,29 @@ export function first_child(node, is_text) {
 	return child;
 }
 
+/**
+ * Anchor sentinel for all-component children: components render directly into
+ * `parent` instead of each inserting before a placeholder comment. `append()`
+ * detects the sentinel (no `nodeType`) and appendChild()s into `parent`. During
+ * hydration we descend the cursor into `parent` (mirroring first_child) so the
+ * first appended component adopts the server's first child of `parent`.
+ * @param {Node} parent
+ * @returns {AppendIntoAnchor}
+ */
+export function append_into(parent) {
+	if (hydrating) {
+		var child = get_first_child(/** @type {Node} */ (hydrate_node));
+
+		if (child === null) {
+			child = /** @type {Node} */ (hydrate_node).appendChild(create_text());
+		}
+
+		set_hydrate_node(child);
+	}
+
+	return { parent };
+}
+
 /**
  * @template {Node} N
  * @param {N} node

package/src/runtime/internal/client/runtime.js

@@ -34,6 +34,7 @@ import {
 	SUSPENSE_REJECTED,
 	TRY_BLOCK,
 	DIRECT_CHILD_BLOCK,
+	UPDATE_SOURCE,
 } from './constants.js';
 import {
 	begin_boundary_request,
@@ -93,6 +94,12 @@ let is_micro_task_queued = false;
 let clock = 0;
 /** @type {Block[]} */
 let queued_root_blocks = [];
+// Flush normally only scans the subtree of each directly-scheduled block, since a
+// tracked's subscribers live inside the subtree of the block that owns it. If a
+// tracked is ever read from outside its owner's subtree (e.g. smuggled across
+// sibling subtrees via a module-level variable), that invariant breaks, so we
+// permanently fall back to scanning the whole root tree to stay correct.
+let disable_scoped_flush = false;
 /** @type {(() => void)[]} */
 let queued_microtasks = [];
 /** @type {number} */
@@ -939,22 +946,33 @@ function trigger_track_get(fn, v) {
 function flush_updates(root_block) {
 	/** @type {Block | null} */
 	var current = root_block;
-	var containing_update = null;
 	var pre_effects = [];
 	var other_blocks = [];
 	var effects = [];
-	var containing_update_head = null;
+	// The nearest enclosing directly-scheduled block ("update source"). While it is
+	// non-null we are inside a source's subtree and scan every descendant. Above
+	// sources we only follow the CONTAINS_UPDATE routing path, so sibling subtrees
+	// that contain no update are skipped. When scoping is disabled we treat the
+	// whole root tree as one source — the original full-tree scan.
+	/** @type {Block | null} */
+	var scope_root = disable_scoped_flush ? root_block : null;
 
 	while (current !== null) {
 		var flags = current.f;
+		var on_path = (flags & CONTAINS_UPDATE) !== 0;
 
-		if ((flags & CONTAINS_UPDATE) !== 0) {
+		if (on_path) {
 			current.f ^= CONTAINS_UPDATE;
-			containing_update_head = { v: containing_update, n: containing_update_head };
-			containing_update = current;
 		}
 
-		if ((flags & PAUSED) === 0 && containing_update !== null) {
+		if ((flags & UPDATE_SOURCE) !== 0) {
+			current.f ^= UPDATE_SOURCE;
+			if (scope_root === null) {
+				scope_root = current;
+			}
+		}
+
+		if ((flags & PAUSED) === 0 && (on_path || scope_root !== null)) {
 			if ((flags & PRE_EFFECT_BLOCK) !== 0) {
 				pre_effects.push(current);
 			} else if ((flags & EFFECT_BLOCK) !== 0) {
@@ -976,10 +994,8 @@ function flush_updates(root_block) {
 		current = current.next;
 
 		while (current === null && parent !== null) {
-			if (parent === containing_update) {
-				var head = /** @type {{ v: Block | null, n: any }} */ (containing_update_head);
-				containing_update = head.v;
-				containing_update_head = head.n;
+			if (parent === scope_root) {
+				scope_root = null;
 			}
 			current = parent.next;
 			parent = parent.p;
@@ -1115,6 +1131,10 @@ export function schedule_update(block) {
 	if (scheduler_mode === FLUSH_MICROTASK) {
 		queue_microtask();
 	}
+	// The scheduled block roots the subtree that flush_updates scans for dirty
+	// subscribers. Mark it even if it (or an ancestor) is already on a routing
+	// path, so the early return below still records it as a scan root.
+	block.f |= UPDATE_SOURCE;
 	let current = block;
 
 	while (current !== null) {
@@ -1134,6 +1154,38 @@ export function schedule_update(block) {
  * @param {Tracked | Derived} tracked
  */
 function register_dependency(tracked) {
+	if (!disable_scoped_flush && active_block !== null && active_block !== tracked.b) {
+		// Scoped flush only scans the owner's subtree for dirty subscribers, valid
+		// only while every subscriber lives inside it. The subscriber↔owner
+		// ancestry is structural and stable for a block's lifetime (its `.p` chain
+		// never changes — DOM moves don't reparent blocks), so we only need to
+		// verify *new* dependency edges: if this reaction already depended on
+		// `tracked` on its previous run (it's in the prior chain), the ancestry
+		// walk was already done — skip it. This keeps the (possibly deep) walk off
+		// the hot path for the common case of stable subscriptions.
+		var already_seen = false;
+		var prev_dep = active_reaction === null ? null : active_reaction.d;
+		while (prev_dep !== null) {
+			if (prev_dep.t === tracked) {
+				already_seen = true;
+				break;
+			}
+			prev_dep = prev_dep.n;
+		}
+
+		if (!already_seen) {
+			var owner = tracked.b;
+			/** @type {Block | null} */
+			var node = active_block;
+			while (node !== null && node !== owner) {
+				node = node.p;
+			}
+			if (node === null) {
+				disable_scoped_flush = true;
+			}
+		}
+	}
+
 	var dependency = active_dependency;
 
 	if (dependency === null) {