ripple 0.3.127 → 0.3.128

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # ripple
 
+## 0.3.128
+
+### Patch Changes
+
+- [#1450](https://github.com/Ripple-TS/ripple/pull/1450)
+  [`26be014`](https://github.com/Ripple-TS/ripple/commit/26be014dfd06da9eae7e2d9e0fbd332ddf1bc9ca)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Faster updates and list
+  rendering in the client runtime. Tracked values now keep a subscriber list, so a
+  write schedules exactly the blocks that read it and the flush no longer scans
+  the owner's subtree; scheduled blocks run in creation order from a queue. Text
+  expressions, keyed list items, and class updates allocate less per row, and
+  `set_class` skips DOM writes when the class is unchanged. Adds the `selector` /
+  `selector_match` internals the compiler uses to share one subscription across
+  `outer === item` comparisons in `@for` templates. Keyed list reconciliation
+  matches moved end items before falling back to the map and LIS, so reversals,
+  rotations, and swaps complete with plain moves. An empty dynamic `class` no
+  longer writes a `class=""` attribute; the server omits it as well. Exposes
+  `hydrating`, `hydrate_child`, and `hydrate_sibling` from the internal client
+  entry for the compiler's inline traversal. When most surviving items of a keyed
+  list would have to move, the list is re-laid in order before a fixed node, which
+  is cheaper than moving each item into place.
+
+- Updated dependencies
+  [[`26be014`](https://github.com/Ripple-TS/ripple/commit/26be014dfd06da9eae7e2d9e0fbd332ddf1bc9ca)]:
+  - @tsrx/ripple@0.1.65
+
 ## 0.3.127
 
 ### 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.127",
+  "version": "0.3.128",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -74,7 +74,7 @@
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
     "@tsrx/core": "^0.1.67",
-    "@tsrx/ripple": "0.1.64"
+    "@tsrx/ripple": "0.1.65"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

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

@@ -4,7 +4,6 @@ import {
 	BLOCK_HAS_RUN,
 	BRANCH_BLOCK,
 	DERIVED,
-	CONTAINS_TEARDOWN,
 	DESTROYED,
 	EFFECT_BLOCK,
 	PAUSED,
@@ -25,6 +24,7 @@ import {
 	active_reaction,
 	create_component_ctx,
 	is_block_dirty,
+	remove_dependencies,
 	run_block,
 	run_teardown,
 	schedule_update,
@@ -197,6 +197,9 @@ export function boundary_fn_running_block(fn, flags = 0, state = null) {
 	return branch(fn, DIRECT_CHILD_BLOCK | flags, state);
 }
 
+/** Creation counter: a parent always has a lower id than its descendants. */
+var block_id = 0;
+
 /**
  * @param {Block} block
  * @param {Block} parent_block
@@ -227,6 +230,7 @@ export function block(flags, fn, state = null, co) {
 		first: null,
 		f: flags,
 		fn,
+		i: ++block_id,
 		last: null,
 		next: null,
 		p: active_block,
@@ -247,7 +251,7 @@ export function block(flags, fn, state = null, co) {
 	if ((flags & EFFECT_BLOCK) !== 0) {
 		schedule_update(block);
 	} else {
-		run_block(block);
+		run_block(block, true);
 		block.f ^= BLOCK_HAS_RUN;
 	}
 
@@ -262,12 +266,10 @@ export function destroy_block_children(parent, remove_dom = false) {
 	var block = parent.first;
 	parent.first = parent.last = null;
 
-	if (remove_dom || (parent.f & CONTAINS_TEARDOWN) !== 0) {
-		while (block !== null) {
-			var next = block.next;
-			destroy_block(block, remove_dom);
-			block = next;
-		}
+	while (block !== null) {
+		var next = block.next;
+		destroy_block(block, remove_dom);
+		block = next;
 	}
 }
 
@@ -278,20 +280,12 @@ export function destroy_block_children(parent, remove_dom = false) {
 export function destroy_non_branch_children(parent, remove_dom = false) {
 	var block = parent.first;
 
-	if (
-		(parent.f & CONTAINS_TEARDOWN) === 0 &&
-		parent.first !== null &&
-		(parent.first.f & BRANCH_BLOCK) === 0
-	) {
-		parent.first = parent.last = null;
-	} else {
-		while (block !== null) {
-			var next = block.next;
-			if ((block.f & BRANCH_BLOCK) === 0) {
-				destroy_block(block, remove_dom);
-			}
-			block = next;
+	while (block !== null) {
+		var next = block.next;
+		if ((block.f & BRANCH_BLOCK) === 0) {
+			destroy_block(block, remove_dom);
 		}
+		block = next;
 	}
 }
 
@@ -487,10 +481,8 @@ export function get_last_node(block) {
  * @param {boolean} [remove_dom]
  */
 export function destroy_block(block, remove_dom = true) {
-	block.f ^= DESTROYED;
-
+	var f = (block.f |= DESTROYED);
 	var removed = false;
-	var f = block.f;
 
 	if (
 		(remove_dom && (f & (BRANCH_BLOCK | ROOT_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) ||
@@ -507,6 +499,10 @@ export function destroy_block(block, remove_dom = true) {
 
 	run_teardown(block);
 
+	if (block.d !== null) {
+		remove_dependencies(block);
+	}
+
 	var parent = block.p;
 
 	// If the parent doesn't have any children, then skip this work altogether

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

@@ -11,7 +11,6 @@ export var ASYNC_BLOCK = 1 << 10;
 export var HEAD_BLOCK = 1 << 11;
 export var PRE_EFFECT_BLOCK = 1 << 12;
 export var DIRECT_CHILD_BLOCK = 1 << 13;
-export var CONTAINS_UPDATE = 1 << 14;
 export var CONTAINS_TEARDOWN = 1 << 15;
 export var BLOCK_HAS_RUN = 1 << 16;
 export var TRACKED = 1 << 17;
@@ -19,10 +18,11 @@ 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;
+// Marks a block that is queued for the next flush.
+export var SCHEDULED = 1 << 22;
+// A per-key match value created by a selector; its map entry is dropped once
+// the last subscriber unlinks.
+export var SELECTOR = 1 << 23;
 
 export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | SWITCH_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
 

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

@@ -167,68 +167,99 @@ function render_tsrx_collection_text(value, anchor, assign = false) {
 	set_hydrate_node(node ?? anchor);
 }
 
+/**
+ * @typedef {{
+ *   start: Node | null;
+ *   end: Node | null;
+ *   a: ChildNode;
+ *   n: number;
+ *   g: () => any;
+ *   b: Block | null;
+ *   m: Comment | null;
+ *   t: Text | null;
+ *   v: string | import('../../element.js').TSRXElement | typeof UNINITIALIZED;
+ *   e: boolean;
+ *   i: boolean;
+ *   p: Block | null;
+ *   o: Node | null;
+ * }} ExpressionState
+ */
+
 /**
  * @param {Node} node
  * @param {() => any} get_value
  * @returns {void}
  */
 export function expression(node, get_value) {
-	var anchor = /** @type {ChildNode} */ (node);
-	/** @type {Block | null} */
-	var child_block = null;
-	/** @type {Comment | null} */
-	var end = null;
-	/** @type {Text | null} */
-	var text = null;
-	/** @type {string | import('../../element.js').TSRXElement | typeof UNINITIALIZED} */
-	var value = UNINITIALIZED;
-	var is_element = false;
-	var initialized = false;
-	/** @type {Block | null} */
-	var modified_parent_branch = null;
-	/** @type {Node | null} */
-	var original_parent_start = null;
-
-	render(() => {
-		var next_value = get_value();
+	// State lives on the render block instead of a per-expression closure, and
+	// the anchor's node type is read once since the anchor never changes.
+	render(run_expression, {
+		start: null,
+		end: null,
+		a: /** @type {ChildNode} */ (node),
+		n: node.nodeType,
+		g: get_value,
+		// child block rendering a TSRX element / collection
+		b: null,
+		// hydration end marker
+		m: null,
+		// text node inserted before a comment anchor
+		t: null,
+		// last rendered value
+		v: UNINITIALIZED,
+		// whether the last value was an element / collection
+		e: false,
+		// whether the block has rendered once
+		i: false,
+		// enclosing branch whose start was moved to include element content
+		p: null,
+		// that branch's original start node
+		o: null,
+	});
+}
+
+/**
+ * @param {ExpressionState} s
+ * @returns {void}
+ */
+function run_expression(s) {
+	var next_value = s.g();
+	var anchor = s.a;
+	var type = typeof next_value;
+	var is_hydration_marker =
+		hydrating && s.n === COMMENT_NODE && /** @type {Comment} */ (anchor).data === HYDRATION_START;
+
+	if (is_hydration_marker) {
+		s.m ??= ensure_expression_end(anchor);
+	}
+
+	var end = s.m;
+
+	if (next_value !== null && (type === 'object' || type === 'function')) {
 		var next_is_collection = is_array(next_value);
-		var next_is_element = next_is_collection || is_tsrx_element(next_value);
-		var is_hydration_marker =
-			hydrating &&
-			anchor.nodeType === COMMENT_NODE &&
-			/** @type {Comment} */ (anchor).data === HYDRATION_START;
-
-		if (is_hydration_marker) {
-			end ??= ensure_expression_end(anchor);
-		}
 
-		if (next_is_element) {
-			if (initialized && is_element && value === next_value) {
+		if (next_is_collection || is_tsrx_element(next_value)) {
+			if (s.i && s.e && s.v === next_value) {
 				if (end !== null) {
 					advance_hydration(end);
 				}
 				return;
 			}
 
-			if (anchor.nodeType === TEXT_NODE) {
+			if (s.n === TEXT_NODE) {
 				/** @type {Text} */ (anchor).nodeValue = '';
-			} else if (text !== null) {
-				text.remove();
-				text = null;
+			} else if (s.t !== null) {
+				s.t.remove();
+				s.t = null;
 			}
 
-			if (child_block !== null) {
-				destroy_block(child_block);
-				child_block = null;
-				// Restore parent branch's start since we may update it again below
-				if (modified_parent_branch !== null && modified_parent_branch.s !== null) {
-					modified_parent_branch.s.start = original_parent_start;
-					modified_parent_branch = null;
-					original_parent_start = null;
-				}
+			if (s.b !== null) {
+				destroy_block(s.b);
+				s.b = null;
+				restore_parent_start(s);
 			}
 
-			if (end !== null && (initialized || !hydrating)) {
+			if (end !== null && (s.i || !hydrating)) {
 				clear_expression_range(anchor, end);
 			}
 
@@ -236,18 +267,18 @@ export function expression(node, get_value) {
 				set_hydrate_node(get_next_sibling(anchor) ?? end);
 			}
 
-			// Find the enclosing branch block BEFORE creating child_block
+			// Find the enclosing branch block BEFORE creating the child block
 			// so we can update its s.start to include content inserted before anchor
 			var parent_branch = find_enclosing_branch(active_block);
 
-			child_block = branch(() => {
+			var child_block = (s.b = branch(() => {
 				var block = /** @type {Block} */ (active_block);
 				if (next_is_collection) {
 					render_tsrx_collection(next_value, end ?? anchor, block);
 				} else {
 					render_tsrx_element(next_value, end ?? anchor, block);
 				}
-			});
+			}));
 
 			// Update parent branch's s.start to include content inserted before anchor.
 			// This ensures that when the parent branch is destroyed, the full DOM range
@@ -267,81 +298,91 @@ export function expression(node, get_value) {
 				// update it to include the child's content
 				if (parent_start === anchor || parent_start === end) {
 					// Save original so we can restore it when switching to non-TSRXElement
-					if (modified_parent_branch === null) {
-						modified_parent_branch = parent_branch;
-						original_parent_start = parent_start;
+					if (s.p === null) {
+						s.p = parent_branch;
+						s.o = parent_start;
 					}
 					parent_branch.s.start = child_start;
 				}
 			}
 
-			value = next_value;
-			is_element = true;
-			initialized = true;
+			s.v = next_value;
+			s.e = true;
+			s.i = true;
 			if (end !== null) {
 				advance_hydration(end);
 			}
 			return;
 		}
+	}
 
-		var next_text = (next_value ?? '') + '';
+	var next_text = next_value == null ? '' : next_value + '';
 
-		if (initialized && !is_element && value === next_text) {
-			if (end !== null) {
-				advance_hydration(end);
-			}
-			return;
+	if (s.i && !s.e && s.v === next_text) {
+		if (end !== null) {
+			advance_hydration(end);
 		}
+		return;
+	}
 
-		if (child_block !== null) {
-			destroy_block(child_block);
-			child_block = null;
-			// Restore parent branch's start to original value since the child's DOM nodes
-			// have been removed and the old start reference would be stale
-			if (modified_parent_branch !== null && modified_parent_branch.s !== null) {
-				modified_parent_branch.s.start = original_parent_start;
-				modified_parent_branch = null;
-				original_parent_start = null;
-			}
-		}
+	if (s.b !== null) {
+		destroy_block(s.b);
+		s.b = null;
+		// Restore parent branch's start to original value since the child's DOM nodes
+		// have been removed and the old start reference would be stale
+		restore_parent_start(s);
+	}
 
-		if (is_hydration_marker) {
-			text = get_hydrated_text(anchor, /** @type {Comment} */ (end));
+	if (is_hydration_marker) {
+		var text = (s.t = get_hydrated_text(anchor, /** @type {Comment} */ (end)));
 
-			if (next_text === '') {
-				if (text !== null) {
-					text.remove();
-					text = null;
-				}
-			} else if (text === null) {
-				text = create_text(next_text);
-				/** @type {Comment} */ (end).before(text);
-			} else if (text.nodeValue !== next_text) {
-				text.nodeValue = next_text;
+		if (next_text === '') {
+			if (text !== null) {
+				text.remove();
+				s.t = null;
 			}
-		} else if (anchor.nodeType === COMMENT_NODE) {
-			if (next_text === '') {
-				if (text !== null) {
-					text.remove();
-					text = null;
-				}
-			} else if (text === null) {
-				text = create_text(next_text);
-				(end ?? anchor).before(text);
-			} else if (text.nodeValue !== next_text) {
-				text.nodeValue = next_text;
+		} else if (text === null) {
+			text = s.t = create_text(next_text);
+			/** @type {Comment} */ (end).before(text);
+		} else if (text.nodeValue !== next_text) {
+			text.nodeValue = next_text;
+		}
+	} else if (s.n === COMMENT_NODE) {
+		var text = s.t;
+		if (next_text === '') {
+			if (text !== null) {
+				text.remove();
+				s.t = null;
 			}
-		} else if (anchor.nodeType === TEXT_NODE) {
-			/** @type {Text} */ (anchor).nodeValue = next_text;
+		} else if (text === null) {
+			text = s.t = create_text(next_text);
+			(end ?? anchor).before(text);
+		} else if (text.nodeValue !== next_text) {
+			text.nodeValue = next_text;
 		}
+	} else if (s.n === TEXT_NODE) {
+		/** @type {Text} */ (anchor).nodeValue = next_text;
+	}
 
-		value = next_text;
-		is_element = false;
-		initialized = true;
-		if (end !== null) {
-			advance_hydration(end);
-		}
-	});
+	s.v = next_text;
+	s.e = false;
+	s.i = true;
+	if (end !== null) {
+		advance_hydration(end);
+	}
+}
+
+/**
+ * @param {ExpressionState} s
+ * @returns {void}
+ */
+function restore_parent_start(s) {
+	var parent = s.p;
+	if (parent !== null && parent.s !== null) {
+		parent.s.start = s.o;
+		s.p = null;
+		s.o = null;
+	}
 }
 
 /**