ripple 0.3.127 → 0.3.128

package/src/runtime/internal/client/types.d.ts

@@ -16,9 +16,16 @@ export type Component = {
 };
 
 export type Dependency = {
+	// clock of the tracked value when it was read
 	c: number;
 	t: Tracked | Derived;
+	// next dependency of the same reaction
 	n: null | Dependency;
+	// the reaction that read the tracked value
+	r: Block | Derived;
+	// previous / next subscriber of the same tracked value
+	sp: null | Dependency;
+	sn: null | Dependency;
 };
 
 export type DeferredTrackedEntry = {
@@ -36,6 +43,8 @@ export type Block = {
 	first: null | Block;
 	f: number;
 	fn: any;
+	// creation id; flushes run scheduled blocks in this order
+	i: number;
 	last: null | Block;
 	next: null | Block;
 	p: null | Block;
@@ -100,6 +109,8 @@ declare global {
 			value?: string;
 		};
 		__click?: () => void;
+		// last class value applied by set_class; null once removed
+		__className?: string | null;
 		__ripple_block?: Block;
 	}
 

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

@@ -1623,6 +1623,8 @@ export function attr(name, value, is_boolean = false) {
 				? get_styles(value)
 				: String(normalized).trim()
 			: value_to_escape;
+	// An empty class attribute is omitted, matching the client.
+	if (name === 'class' && value_to_escape === '') return '';
 	const assignment = is_boolean ? '' : `="${escape(value_to_escape, true)}"`;
 	return ` ${name}${assignment}`;
 }

package/tests/client/basic/basic.reactivity.test.tsrx

@@ -367,6 +367,39 @@ describe('basic client > reactivity', () => {
 		expect(state.finalValue).toBe(5);
 	});
 
+	it('keeps other subscribers after a destroyed block writes shared state in its cleanup', () => {
+		function App() @{
+			let &[count] = track(0);
+			let &[show] = track(true);
+			<>
+				@if (show) {
+					effect(() => {
+						count;
+						return () => {
+							count = count + 1;
+						};
+					});
+					<span class="inner">{count}</span>
+				}
+				<span class="outer">{count}</span>
+				<button class="hide" onClick={() => (show = false)}>{'hide'}</button>
+				<button class="inc" onClick={() => (count = count + 1)}>{'inc'}</button>
+			</>
+		}
+
+		render(App);
+		flushSync();
+		expect(container.querySelector('.outer').textContent).toBe('0');
+
+		container.querySelector('.hide').click();
+		flushSync();
+		expect(container.querySelector('.outer').textContent).toBe('1');
+
+		container.querySelector('.inc').click();
+		flushSync();
+		expect(container.querySelector('.outer').textContent).toBe('2');
+	});
+
 	it('returns the same tracked object if plain track is called with a tracked object', () => {
 		function App() @{
 			const t = track({ a: 1, b: 2, c: 3 });

package/tests/client/for-selector.test.tsrx

@@ -0,0 +1,221 @@
+import { flushSync, track, type Tracked } from 'ripple';
+
+interface Row {
+	id: number;
+	group: string;
+	label: Tracked<string>;
+}
+
+type RowSpec = [id: number, group?: string];
+
+interface Actions {
+	select(id: number | undefined): void;
+	setItems(rows: RowSpec[]): void;
+	setGroup(group: string | undefined): void;
+	relabel(index: number, label: string): void;
+}
+
+function selected_ids(): number[] {
+	return Array.from(container.querySelectorAll('li.selected')).map(
+		(el) => Number(el.getAttribute('data-id')),
+	);
+}
+
+function matched_ids(): string[] {
+	return Array.from(container.querySelectorAll('[data-group="match"]')).map(
+		(el) => el.getAttribute('data-id') ?? '',
+	);
+}
+
+function texts(): string[] {
+	return Array.from(container.querySelectorAll('li')).map((el) => el.textContent ?? '');
+}
+
+describe('@for selector comparisons', () => {
+	let actions: Actions;
+
+	function App() @{
+		const row = (id: number, group = 'a'): Row => ({ id, group, label: track(`row ${id}`) });
+
+		let &[items] = track<Row[]>([row(1), row(2), row(3)]);
+		let &[selected] = track<number | undefined>(undefined);
+		let &[group] = track<string | undefined>(undefined);
+
+		actions = {
+			select: (id) => {
+				selected = id;
+			},
+			setItems: (specs) => {
+				items = specs.map(([id, group]) => row(id, group));
+			},
+			setGroup: (next) => {
+				group = next;
+			},
+			relabel: (index, label) => {
+				items[index].label.value = label;
+			},
+		};
+
+		<ul>
+			@for (const item of items; key item.id) {
+				<li
+					data-id={item.id}
+					class={selected === item.id ? 'selected' : ''}
+					data-group={group === item.group ? 'match' : ''}
+				>
+					{selected !== item.id ? item.label.value : 'current'}
+				</li>
+			}
+		</ul>
+	}
+
+	it('moves the selection between rows', () => {
+		render(App);
+		expect(selected_ids()).toEqual([]);
+
+		actions.select(2);
+		flushSync();
+		expect(selected_ids()).toEqual([2]);
+		expect(texts()).toEqual(['row 1', 'current', 'row 3']);
+
+		actions.select(3);
+		flushSync();
+		expect(selected_ids()).toEqual([3]);
+		expect(texts()).toEqual(['row 1', 'row 2', 'current']);
+
+		actions.select(undefined);
+		flushSync();
+		expect(selected_ids()).toEqual([]);
+		expect(texts()).toEqual(['row 1', 'row 2', 'row 3']);
+	});
+
+	it('matches rows created after the selection was set', () => {
+		render(App);
+
+		actions.select(5);
+		flushSync();
+		expect(selected_ids()).toEqual([]);
+
+		actions.setItems([[1], [5]]);
+		flushSync();
+		expect(selected_ids()).toEqual([5]);
+
+		actions.setItems([[1]]);
+		flushSync();
+		expect(selected_ids()).toEqual([]);
+
+		actions.setItems([[1], [5]]);
+		flushSync();
+		expect(selected_ids()).toEqual([5]);
+	});
+
+	it('re-registers a row whose compared value changes', () => {
+		render(App);
+
+		actions.setItems([
+			[1, 'a'],
+			[2, 'b'],
+		]);
+		actions.setGroup('b');
+		flushSync();
+		expect(matched_ids()).toEqual(['2']);
+
+		// Same keys, so the existing rows update in place with new groups.
+		actions.setItems([
+			[1, 'b'],
+			[2, 'a'],
+		]);
+		flushSync();
+		expect(matched_ids()).toEqual(['1']);
+
+		actions.setGroup('a');
+		flushSync();
+		expect(matched_ids()).toEqual(['2']);
+	});
+
+	it('updates every row sharing the compared value', () => {
+		render(App);
+
+		actions.setItems([
+			[1, 'a'],
+			[2, 'b'],
+			[3, 'a'],
+		]);
+		actions.setGroup('a');
+		flushSync();
+		expect(matched_ids()).toEqual(['1', '3']);
+
+		actions.setGroup('b');
+		flushSync();
+		expect(matched_ids()).toEqual(['2']);
+
+		actions.setGroup(undefined);
+		flushSync();
+		expect(matched_ids()).toEqual([]);
+	});
+
+	it('keeps the rest of the row expression reactive', () => {
+		render(App);
+
+		actions.select(1);
+		flushSync();
+		expect(texts()).toEqual(['current', 'row 2', 'row 3']);
+
+		actions.relabel(1, 'second');
+		flushSync();
+		expect(texts()).toEqual(['current', 'second', 'row 3']);
+		expect(selected_ids()).toEqual([1]);
+
+		actions.select(2);
+		flushSync();
+		expect(texts()).toEqual(['row 1', 'current', 'row 3']);
+	});
+});
+
+describe('keyed reconciliation with most items moving', () => {
+	it('keeps node identity and order when a large list is shuffled', () => {
+		let apply: (order: number[]) => void = () => {};
+
+		function App() @{
+			let &[items] = track(Array.from({ length: 300 }, (_, i) => i));
+			apply = (order) => {
+				items = order;
+			};
+			<ul>
+				@for (const item of items; key item) {
+					<li data-id={item}>{item}</li>
+				}
+			</ul>
+		}
+
+		render(App);
+		const before = new Map(Array.from(
+			container.querySelectorAll('li'),
+			(el) => [el.getAttribute('data-id'), el],
+		));
+
+		// A permutation that moves nearly every item, plus a few new ones.
+		let seed = 7;
+		const next = () => (seed = (seed * 48271) % 2147483647) / 2147483647;
+		const order = Array.from({ length: 300 }, (_, i) => i);
+		for (let i = order.length - 1; i > 0; i--) {
+			const j = Math.floor(next() * (i + 1));
+			[order[i], order[j]] = [order[j], order[i]];
+		}
+		order.splice(10, 0, 1000);
+		order.splice(200, 0, 1001);
+
+		apply(order);
+		flushSync();
+
+		const after = Array.from(container.querySelectorAll('li'));
+		expect(after.map((el) => Number(el.getAttribute('data-id')))).toEqual(order);
+		for (const el of after) {
+			const id = el.getAttribute('data-id');
+			if (before.has(id)) {
+				expect(el).toBe(before.get(id));
+			}
+		}
+		expect(after.map((el) => el.textContent)).toEqual(order.map(String));
+	});
+});

package/tests/hydration/compiled/client/basic.js

@@ -181,7 +181,7 @@ export function SiblingComponents() {
 
 			_$_.render_component(FirstSibling, node_2, {});
 
-			var node_3 = _$_.sibling(node_2);
+			var node_3 = _$_.hydrating ? _$_.hydrate_sibling() : node_2.nextSibling;
 
 			_$_.render_component(SecondSibling, node_3, {});
 			_$_.append(__anchor, fragment_5);
@@ -196,7 +196,7 @@ export function Greeting(props) {
 		var div_5 = root_12();
 
 		{
-			var expression = _$_.child(div_5, true);
+			var expression = _$_.hydrating ? _$_.hydrate_child(true) : div_5.firstChild;
 
 			_$_.pop(div_5);
 		}
@@ -227,16 +227,16 @@ export function ExpressionContent() {
 			var div_6 = _$_.first_child_frag(fragment_7);
 
 			{
-				var expression_1 = _$_.child(div_6, true);
+				var expression_1 = _$_.hydrating ? _$_.hydrate_child(true) : div_6.firstChild;
 
 				expression_1.nodeValue = value;
 				_$_.pop(div_6);
 			}
 
-			var span_1 = _$_.sibling(div_6);
+			var span_1 = _$_.hydrating ? _$_.hydrate_sibling() : div_6.nextSibling;
 
 			{
-				var expression_2 = _$_.child(span_1);
+				var expression_2 = _$_.hydrating ? _$_.hydrate_child() : span_1.firstChild;
 
 				_$_.expression(expression_2, () => _$_.with_scope(__block, () => label.toUpperCase()));
 				_$_.pop(span_1);
@@ -255,7 +255,7 @@ function NestedHelperItem({ item }) {
 		var div_7 = root_15();
 
 		{
-			var expression_3 = _$_.child(div_7, true);
+			var expression_3 = _$_.hydrating ? _$_.hydrate_child(true) : div_7.firstChild;
 
 			expression_3.nodeValue = item;
 			_$_.pop(div_7);
@@ -275,13 +275,13 @@ function NestedTsxTsrxFragment({ label }) {
 			var span_2 = _$_.first_child_frag(fragment_9);
 
 			{
-				var expression_4 = _$_.child(span_2, true);
+				var expression_4 = _$_.hydrating ? _$_.hydrate_child(true) : span_2.firstChild;
 
 				expression_4.nodeValue = label;
 				_$_.pop(span_2);
 			}
 
-			var node_6 = _$_.sibling(span_2);
+			var node_6 = _$_.hydrating ? _$_.hydrate_sibling() : span_2.nextSibling;
 
 			_$_.for(
 				node_6,
@@ -304,7 +304,7 @@ export function NestedTsxTsrxExpressionValues() {
 		var div_8 = root_18();
 
 		{
-			var node_8 = _$_.child(div_8);
+			var node_8 = _$_.hydrating ? _$_.hydrate_child() : div_8.firstChild;
 
 			_$_.for(
 				node_8,
@@ -313,7 +313,7 @@ export function NestedTsxTsrxExpressionValues() {
 					var div_9 = root_19();
 
 					{
-						var expression_5 = _$_.child(div_9);
+						var expression_5 = _$_.hydrating ? _$_.hydrate_child() : div_9.firstChild;
 
 						_$_.expression(expression_5, () => item);
 						_$_.pop(div_9);
@@ -324,7 +324,7 @@ export function NestedTsxTsrxExpressionValues() {
 				0
 			);
 
-			var node_9 = _$_.sibling(node_8);
+			var node_9 = _$_.hydrating ? _$_.hydrate_sibling() : node_8.nextSibling;
 
 			_$_.render_component(NestedTsxTsrxFragment, node_9, { label: "from helper" });
 			_$_.pop(div_8);
@@ -365,7 +365,7 @@ export function MixedTsrxCollectionText() {
 		var div_10 = root_23();
 
 		{
-			var expression_7 = _$_.child(div_10);
+			var expression_7 = _$_.hydrating ? _$_.hydrate_child() : div_10.firstChild;
 
 			_$_.expression(expression_7, () => content);
 			_$_.pop(div_10);
@@ -406,7 +406,7 @@ export function MixedTsrxCollectionSplitServerText() {
 		var div_11 = root_27();
 
 		{
-			var expression_9 = _$_.child(div_11);
+			var expression_9 = _$_.hydrating ? _$_.hydrate_child() : div_11.firstChild;
 
 			_$_.expression(expression_9, () => content);
 			_$_.pop(div_11);
@@ -447,7 +447,7 @@ export function MixedTsrxCollectionSplitClientText() {
 		var div_12 = root_31();
 
 		{
-			var expression_11 = _$_.child(div_12);
+			var expression_11 = _$_.hydrating ? _$_.hydrate_child() : div_12.firstChild;
 
 			_$_.expression(expression_11, () => content);
 			_$_.pop(div_12);
@@ -481,7 +481,7 @@ export function MixedTsrxCollectionPrimitiveServerText() {
 		var div_13 = root_34();
 
 		{
-			var expression_13 = _$_.child(div_13);
+			var expression_13 = _$_.hydrating ? _$_.hydrate_child() : div_13.firstChild;
 
 			_$_.expression(expression_13, () => content);
 			_$_.pop(div_13);
@@ -515,7 +515,7 @@ export function MixedTsrxCollectionPrimitiveClientText() {
 		var div_14 = root_37();
 
 		{
-			var expression_15 = _$_.child(div_14);
+			var expression_15 = _$_.hydrating ? _$_.hydrate_child() : div_14.firstChild;
 
 			_$_.expression(expression_15, () => content);
 			_$_.pop(div_14);
@@ -535,7 +535,7 @@ export function DynamicArrayFromCall() {
 		var div_15 = root_38();
 
 		{
-			var expression_16 = _$_.child(div_15);
+			var expression_16 = _$_.hydrating ? _$_.hydrate_child() : div_15.firstChild;
 
 			_$_.expression(expression_16, () => items);
 			_$_.pop(div_15);
@@ -551,7 +551,7 @@ export function DynamicArrayFromTrack() {
 		var div_16 = root_39();
 
 		{
-			var expression_17 = _$_.child(div_16);
+			var expression_17 = _$_.hydrating ? _$_.hydrate_child() : div_16.firstChild;
 
 			_$_.expression(expression_17, () => lazy.value);
 			_$_.pop(div_16);
@@ -572,7 +572,7 @@ export function DynamicArrayFromConditional() {
 		var div_17 = root_40();
 
 		{
-			var expression_18 = _$_.child(div_17);
+			var expression_18 = _$_.hydrating ? _$_.hydrate_child() : div_17.firstChild;
 
 			_$_.expression(expression_18, () => items);
 			_$_.pop(div_17);
@@ -589,7 +589,7 @@ export function DynamicArrayFromLogical() {
 		var div_18 = root_41();
 
 		{
-			var expression_19 = _$_.child(div_18);
+			var expression_19 = _$_.hydrating ? _$_.hydrate_child() : div_18.firstChild;
 
 			_$_.expression(expression_19, () => items);
 			_$_.pop(div_18);
@@ -657,7 +657,7 @@ export function TsxDeclaredBeforeTopLevelTsx() {
 			var div_20 = root_49();
 
 			{
-				var expression_22 = _$_.child(div_20);
+				var expression_22 = _$_.hydrating ? _$_.hydrate_child() : div_20.firstChild;
 
 				_$_.expression(expression_22, () => nested);
 				_$_.pop(div_20);
@@ -686,7 +686,7 @@ function TextProp(__props) {
 		var div_21 = root_52();
 
 		{
-			var expression_24 = _$_.child(div_21);
+			var expression_24 = _$_.hydrating ? _$_.hydrate_child() : div_21.firstChild;
 
 			_$_.expression(expression_24, () => __props.children);
 			_$_.pop(div_21);
@@ -712,7 +712,7 @@ export function TextPropWithToggle() {
 				}
 			});
 
-			var button = _$_.sibling(node_13);
+			var button = _$_.hydrating ? _$_.hydrate_sibling() : node_13.nextSibling;
 
 			button.__click = () => _$_.set(lazy_1, true);
 			_$_.append(__anchor, fragment_22);
@@ -750,19 +750,19 @@ export function StaticChildWithSiblings() {
 
 			_$_.render_component(StaticHeader, node_16, {});
 
-			var span_6 = _$_.sibling(node_16);
+			var span_6 = _$_.hydrating ? _$_.hydrate_sibling() : node_16.nextSibling;
 
 			{
-				var expression_25 = _$_.child(span_6, true);
+				var expression_25 = _$_.hydrating ? _$_.hydrate_child(true) : span_6.firstChild;
 
 				expression_25.nodeValue = foo;
 				_$_.pop(span_6);
 			}
 
-			var span_7 = _$_.sibling(span_6);
+			var span_7 = _$_.hydrating ? _$_.hydrate_sibling() : span_6.nextSibling;
 
 			{
-				var expression_26 = _$_.child(span_7, true);
+				var expression_26 = _$_.hydrating ? _$_.hydrate_child(true) : span_7.firstChild;
 
 				expression_26.nodeValue = foo;
 				_$_.pop(span_7);
@@ -797,9 +797,9 @@ function Actions({ playgroundVisible = false }) {
 		var div_22 = root_61();
 
 		{
-			var a_2 = _$_.child(div_22);
-			var a_1 = _$_.sibling(a_2);
-			var expression_27 = _$_.sibling(a_1);
+			var a_2 = _$_.hydrating ? _$_.hydrate_child() : div_22.firstChild;
+			var a_1 = _$_.hydrating ? _$_.hydrate_sibling() : a_2.nextSibling;
+			var expression_27 = _$_.hydrating ? _$_.hydrate_sibling() : a_1.nextSibling;
 
 			_$_.expression(expression_27, () => playgroundVisible
 				? _$_.tsrx_element((__anchor, __block) => {
@@ -821,10 +821,10 @@ function Layout({ children }) {
 		var main = root_63();
 
 		{
-			var div_23 = _$_.child(main);
+			var div_23 = _$_.hydrating ? _$_.hydrate_child() : main.firstChild;
 
 			{
-				var expression_28 = _$_.child(div_23);
+				var expression_28 = _$_.hydrating ? _$_.hydrate_child() : div_23.firstChild;
 
 				_$_.expression(expression_28, () => children);
 				_$_.pop(div_23);
@@ -852,15 +852,15 @@ export function WebsiteIndex() {
 
 				_$_.render_component(Header, node_19, {});
 
-				var node_20 = _$_.sibling(node_19);
+				var node_20 = _$_.hydrating ? _$_.hydrate_sibling() : node_19.nextSibling;
 
 				_$_.render_component(Actions, node_20, { playgroundVisible: true });
 
-				var node_21 = _$_.sibling(node_20);
+				var node_21 = _$_.hydrating ? _$_.hydrate_sibling() : node_20.nextSibling;
 
 				_$_.render_component(Content, node_21, {});
 
-				var node_22 = _$_.sibling(node_21);
+				var node_22 = _$_.hydrating ? _$_.hydrate_sibling() : node_21.nextSibling;
 
 				_$_.render_component(Actions, node_22, { playgroundVisible: false });
 				_$_.append(__anchor, fragment_29);
@@ -882,9 +882,9 @@ export function ComponentAsLastSibling() {
 		var div_25 = root_67();
 
 		{
-			var h1 = _$_.child(div_25);
-			var p = _$_.sibling(h1);
-			var node_23 = _$_.sibling(p);
+			var h1 = _$_.hydrating ? _$_.hydrate_child() : div_25.firstChild;
+			var p = _$_.hydrating ? _$_.hydrate_sibling() : h1.nextSibling;
+			var node_23 = _$_.hydrating ? _$_.hydrate_sibling() : p.nextSibling;
 
 			_$_.render_component(LastChild, node_23, {});
 			_$_.pop(div_25);
@@ -899,8 +899,8 @@ function InnerContent() {
 		var div_26 = root_68();
 
 		{
-			var span_8 = _$_.child(div_26);
-			var node_24 = _$_.sibling(span_8);
+			var span_8 = _$_.hydrating ? _$_.hydrate_child() : div_26.firstChild;
+			var node_24 = _$_.hydrating ? _$_.hydrate_sibling() : span_8.nextSibling;
 
 			_$_.render_component(LastChild, node_24, {});
 			_$_.pop(div_26);
@@ -915,8 +915,8 @@ export function NestedComponentAsLastSibling() {
 		var section_1 = root_69();
 
 		{
-			var h2 = _$_.child(section_1);
-			var node_25 = _$_.sibling(h2);
+			var h2 = _$_.hydrating ? _$_.hydrate_child() : section_1.firstChild;
+			var node_25 = _$_.hydrating ? _$_.hydrate_sibling() : h2.nextSibling;
 
 			_$_.render_component(InnerContent, node_25, {});
 			_$_.pop(section_1);
@@ -935,7 +935,7 @@ export function TextTailExpression() {
 		var div_27 = root_70();
 
 		{
-			var text = _$_.child(div_27, true);
+			var text = _$_.hydrating ? _$_.hydrate_child(true) : div_27.firstChild;
 
 			_$_.pop(div_27);
 		}
@@ -953,7 +953,7 @@ export function FragmentTailExpression() {
 		var div_28 = root_71();
 
 		{
-			var expression_29 = _$_.child(div_28, true);
+			var expression_29 = _$_.hydrating ? _$_.hydrate_child(true) : div_28.firstChild;
 
 			_$_.pop(div_28);
 		}

package/tests/hydration/compiled/client/composite.js

@@ -15,7 +15,7 @@ export function Layout(__props) {
 		var div = root();
 
 		{
-			var expression = _$_.child(div);
+			var expression = _$_.hydrating ? _$_.hydrate_child() : div.firstChild;
 
 			_$_.expression(expression, () => __props.children);
 			_$_.pop(div);
@@ -30,8 +30,8 @@ export function TextWrappedLayout(__props) {
 		var div_1 = root_1();
 
 		{
-			var expression_2 = _$_.child(div_1);
-			var expression_1 = _$_.sibling(expression_2);
+			var expression_2 = _$_.hydrating ? _$_.hydrate_child() : div_1.firstChild;
+			var expression_1 = _$_.hydrating ? _$_.hydrate_sibling() : expression_2.nextSibling;
 
 			_$_.expression(expression_1, () => __props.children);
 			_$_.pop(div_1);