ripple 0.4.2 → 0.4.3

package/tests/hydration/compiled/server/if-children.js

@@ -5,7 +5,7 @@ import { track } from 'ripple/server';
 
 export function IfWithChildren({ children }) {
 	return _$_.tsrx_element(() => {
-		const expanded = _$_.track(true, 'c64714b1');
+		const expanded = _$_.track(true, '1j0jg6p');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -77,7 +77,7 @@ export function TestIfWithChildren() {
 
 export function IfWithStaticChildren() {
 	return _$_.tsrx_element(() => {
-		const expanded = _$_.track(true, '3bba8f77');
+		const expanded = _$_.track(true, 'gkm3jr');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -96,7 +96,7 @@ export function IfWithStaticChildren() {
 
 export function IfWithSiblingsAndChildren({ children }) {
 	return _$_.tsrx_element(() => {
-		const expanded = _$_.track(true, 'a1b8fb4c');
+		const expanded = _$_.track(true, '18vegr0');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -157,7 +157,7 @@ export function TestIfWithSiblingsAndChildren() {
 
 export function ElementWithChildrenThenIf() {
 	return _$_.tsrx_element(() => {
-		const show = _$_.track(true, '7cd4817b');
+		const show = _$_.track(true, 'ymw5ff');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -176,7 +176,7 @@ export function ElementWithChildrenThenIf() {
 
 export function DeepNestingThenIf() {
 	return _$_.tsrx_element(() => {
-		const visible = _$_.track(true, '923116be');
+		const visible = _$_.track(true, '14k9o72');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -195,7 +195,7 @@ export function DeepNestingThenIf() {
 
 export function DomElementChildrenThenSibling() {
 	return _$_.tsrx_element(() => {
-		const activeTab = _$_.track('code', '33a1e97f');
+		const activeTab = _$_.track('code', 'ebqq2n');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -216,7 +216,7 @@ export function DomElementChildrenThenSibling() {
 
 export function DomChildrenThenStaticSiblings() {
 	return _$_.tsrx_element(() => {
-		const count = _$_.track(0, '0ea64305');
+		const count = _$_.track(0, '42buv9');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -287,8 +287,8 @@ function TrailingChild() {
 
 export function ComponentChildrenWithControlFlowRoots() {
 	return _$_.tsrx_element(() => {
-		const on = _$_.track(true, 'f3e4c6ee');
-		const items = _$_.track([1, 2, 3], '2bbbeeb0');
+		const on = _$_.track(true, '1vo6ory');
+		const items = _$_.track([1, 2, 3], 'c4uisw');
 
 		_$_.regular_block(() => {
 			let __out = '';

package/tests/hydration/compiled/server/if.js

@@ -64,7 +64,7 @@ export function IfElse() {
 
 export function ReactiveIf() {
 	return _$_.tsrx_element(() => {
-		const show = _$_.track(true, '19a16ff0');
+		const show = _$_.track(true, '740m40');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -83,7 +83,7 @@ export function ReactiveIf() {
 
 export function ReactiveIfElse() {
 	return _$_.tsrx_element(() => {
-		const isOn = _$_.track(false, '41177f39');
+		const isOn = _$_.track(false, 'i26m2h');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -104,8 +104,8 @@ export function ReactiveIfElse() {
 
 export function NestedIf() {
 	return _$_.tsrx_element(() => {
-		const outer = _$_.track(true, '7894e1df');
-		const inner = _$_.track(true, 'f21b8c26');
+		const outer = _$_.track(true, 'xggelb');
+		const inner = _$_.track(true, '1v6cfmu');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -130,7 +130,7 @@ export function NestedIf() {
 
 export function IfElseIfChain() {
 	return _$_.tsrx_element(() => {
-		const status = _$_.track('loading', '4c69c94a');
+		const status = _$_.track('loading', 'l79qh6');
 
 		_$_.regular_block(() => {
 			let __out = '';

package/tests/hydration/compiled/server/mixed-control-flow.js

@@ -78,9 +78,9 @@ export function MixedControlFlowStatic() {
 
 export function MixedControlFlowReactive() {
 	return _$_.tsrx_element(() => {
-		const show = _$_.track(true, '5ae53d26');
-		const mode = _$_.track('a', '5b53eda2');
-		const items = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }], '7890dad6');
+		const show = _$_.track(true, 'p7xgkm');
+		const mode = _$_.track('a', 'pc8xwi');
+		const items = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }], 'xgaqxi');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -214,7 +214,7 @@ export function MixedControlFlowAsyncPending() {
 
 function AsyncRow({ label }) {
 	return _$_.tsrx_element(() => {
-		const value = _$_.track_async(() => Promise.resolve(label), '10cc79a0');
+		const value = _$_.track_async(() => Promise.resolve(label), '4nsq00');
 
 		_$_.regular_block(() => {
 			let __out = '';

package/tests/hydration/compiled/server/portal.js

@@ -43,7 +43,7 @@ export function SimplePortal() {
 
 export function ConditionalPortal() {
 	return _$_.tsrx_element(() => {
-		const show = _$_.track(true, '4f6df174');
+		const show = _$_.track(true, 'm1ectw');
 
 		_$_.regular_block(() => {
 			let __out = '';

package/tests/hydration/compiled/server/reactivity.js

@@ -5,7 +5,7 @@ import { track } from 'ripple/server';
 
 export function TrackedState() {
 	return _$_.tsrx_element(() => {
-		const count = _$_.track(0, 'c1818584');
+		const count = _$_.track(0, '1hovkhw');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -18,7 +18,7 @@ export function TrackedState() {
 
 export function CounterWithInitial(props) {
 	return _$_.tsrx_element(() => {
-		const count = _$_.track(props.initial, '03ea4348');
+		const count = _$_.track(props.initial, '133ubs');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -52,8 +52,8 @@ export function CounterWrapper() {
 
 export function ComputedValues() {
 	return _$_.tsrx_element(() => {
-		const a = _$_.track(2, 'b78281db');
-		const b = _$_.track(3, 'a0cf6c6d');
+		const a = _$_.track(2, '1ex10ij');
+		const b = _$_.track(3, '18mae7h');
 		const sum = () => a.value + b.value;
 
 		_$_.regular_block(() => {
@@ -75,9 +75,9 @@ export function ComputedValues() {
 
 export function MultipleTracked() {
 	return _$_.tsrx_element(() => {
-		const x = _$_.track(10, '843522de');
-		const y = _$_.track(20, '1308996d');
-		const z = _$_.track(30, '048c3fd0');
+		const x = _$_.track(10, '10ol1i6');
+		const y = _$_.track(20, '5a4d4d');
+		const z = _$_.track(30, '19fdn4');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -90,8 +90,8 @@ export function MultipleTracked() {
 
 export function DerivedState() {
 	return _$_.tsrx_element(() => {
-		const firstName = _$_.track('John', '6015eeca');
-		const lastName = _$_.track('Doe', '4fa9a20e');
+		const firstName = _$_.track('John', 'qnrtu2');
+		const lastName = _$_.track('Doe', 'm3q77y');
 		const fullName = () => `${firstName.value} ${lastName.value}`;
 
 		_$_.regular_block(() => {

package/tests/hydration/compiled/server/streaming.js

@@ -32,8 +32,8 @@ resetControls();
 
 function BasicContent() {
 	return _$_.tsrx_element(() => {
-		const data = _$_.track_async(() => controls.basic.promise, '703e438e');
-		const count = _$_.track(0, '928bce39');
+		const data = _$_.track_async(() => controls.basic.promise, 'v55zf2');
+		const count = _$_.track(0, '14nt3jt');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -88,7 +88,7 @@ export function StreamPending() {
 
 function CatchOnlyContent() {
 	return _$_.tsrx_element(() => {
-		const data = _$_.track_async(() => controls.catchOnly.promise, '50f939c6');
+		const data = _$_.track_async(() => controls.catchOnly.promise, 'mgtlfq');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -158,7 +158,7 @@ export function StreamCatchOnly() {
 
 function RejectContent() {
 	return _$_.tsrx_element(() => {
-		const data = _$_.track_async(() => controls.rejects.promise, '96452a54');
+		const data = _$_.track_async(() => controls.rejects.promise, '15p08yc');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -247,7 +247,7 @@ export function StreamRejects() {
 
 function NoCatchContent() {
 	return _$_.tsrx_element(() => {
-		const data = _$_.track_async(() => controls.noCatch.promise, '6baa716b');
+		const data = _$_.track_async(() => controls.noCatch.promise, 'tvfywb');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -342,7 +342,7 @@ export function RootPending() {
 
 function HeadContent() {
 	return _$_.tsrx_element(() => {
-		const data = _$_.track_async(() => controls.head.promise, '9cd3c3cd');
+		const data = _$_.track_async(() => controls.head.promise, '17ii47h');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -420,7 +420,7 @@ export function StreamHead() {
 
 export function StreamRootDirect() {
 	return _$_.tsrx_element(() => {
-		const data = _$_.track_async(() => controls.rootDirect.promise, 'bc9e61da');
+		const data = _$_.track_async(() => controls.rootDirect.promise, '1gc250a');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -441,7 +441,7 @@ export function StreamRootDirect() {
 
 function OuterContent() {
 	return _$_.tsrx_element(() => {
-		const data = _$_.track_async(() => controls.outer.promise, '35931cce');
+		const data = _$_.track_async(() => controls.outer.promise, 'ev54ge');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -462,7 +462,7 @@ function OuterContent() {
 
 function InnerContent() {
 	return _$_.tsrx_element(() => {
-		const data = _$_.track_async(() => controls.inner.promise, '6c7d38ed');
+		const data = _$_.track_async(() => controls.inner.promise, 'u3o1kd');
 
 		_$_.regular_block(() => {
 			let __out = '';

package/tests/hydration/compiled/server/switch.js

@@ -34,7 +34,7 @@ export function SwitchStatic() {
 
 export function SwitchReactive() {
 	return _$_.tsrx_element(() => {
-		const status = _$_.track('a', '9b34d955');
+		const status = _$_.track('a', '172bas5');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -91,7 +91,7 @@ export function SwitchFallthrough() {
 
 export function SwitchNumericLevels() {
 	return _$_.tsrx_element(() => {
-		const level = _$_.track(1, '7581a7ab');
+		const level = _$_.track(1, 'wlqm5n');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -120,7 +120,7 @@ export function SwitchNumericLevels() {
 
 export function SwitchBlockScoped() {
 	return _$_.tsrx_element(() => {
-		const level = _$_.track(1, 'ca9f9852');
+		const level = _$_.track(1, '1k7y5oy');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -149,7 +149,7 @@ export function SwitchBlockScoped() {
 
 export function SwitchNoBreak() {
 	return _$_.tsrx_element(() => {
-		const level = _$_.track(1, '6b7cb0ea');
+		const level = _$_.track(1, 'ttnpbe');
 
 		_$_.regular_block(() => {
 			let __out = '';

package/tests/hydration/compiled/server/track-async-serialization.js

@@ -2,7 +2,7 @@
 import * as _$_ from 'ripple/internal/server';
 
 import { Money as _$_Money__ } from '../fixtures/money.js';
-import { track, trackAsync } from 'ripple/server';
+import { track, trackAsync, trackReadOnly } from 'ripple/server';
 import { Money } from '../fixtures/money.js';
 
 export const transport = {
@@ -39,7 +39,7 @@ const formatValue = function (...args) {
 
 function MoneyResult({ count }) {
 	return _$_.tsrx_element(() => {
-		const money = _$_.track_async(() => doubleMoney(new Money(count.value, 'USD')), '2e21cbe9');
+		const money = _$_.track_async(() => doubleMoney(new Money(count.value, 'USD')), 'csssmh');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -60,7 +60,7 @@ function MoneyResult({ count }) {
 
 export function AsyncCustomType() {
 	return _$_.tsrx_element(() => {
-		const count = _$_.track(6, 'f0c2b41e');
+		const count = _$_.track(6, '1usw1lq');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -103,7 +103,7 @@ export function AsyncCustomType() {
 
 function ServerCallResult({ count }) {
 	return _$_.tsrx_element(() => {
-		const data = _$_.track_async(() => formatValue(count.value), '4e502c38');
+		const data = _$_.track_async(() => formatValue(count.value), 'lq8y0o');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -124,7 +124,7 @@ function ServerCallResult({ count }) {
 
 export function AsyncWithServerCall() {
 	return _$_.tsrx_element(() => {
-		const count = _$_.track(0, '14891754');
+		const count = _$_.track(0, '5p4g2c');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -173,7 +173,7 @@ export function AsyncSimpleValue() {
 
 				__out += '<!--[-->';
 
-				const data = _$_.track_async(() => Promise.resolve('hydrated value'), 'f325448a');
+				const data = _$_.track_async(() => Promise.resolve('hydrated value'), '1vgpoju');
 
 				_$_.output_push(__out);
 				__out = '';
@@ -226,7 +226,7 @@ export function AsyncNumericValue() {
 
 				__out += '<!--[-->';
 
-				const count = _$_.track_async(() => Promise.resolve(42), 'ab8199a0');
+				const count = _$_.track_async(() => Promise.resolve(42), '1bl4m1s');
 
 				_$_.output_push(__out);
 				__out = '';
@@ -279,7 +279,7 @@ export function AsyncObjectValue() {
 
 				__out += '<!--[-->';
 
-				const user = _$_.track_async(() => Promise.resolve({ name: 'Alice', age: 30 }), 'fb7ad40b');
+				const user = _$_.track_async(() => Promise.resolve({ name: 'Alice', age: 30 }), '1xrym8b');
 
 				_$_.output_push(__out);
 				__out = '';
@@ -340,8 +340,8 @@ export function AsyncMultipleValues() {
 
 				__out += '<!--[-->';
 
-				const first = _$_.track_async(() => Promise.resolve('alpha'), '99982de5');
-				const second = _$_.track_async(() => Promise.resolve('beta'), '1dea4c85');
+				const first = _$_.track_async(() => Promise.resolve('alpha'), '16m7mxx');
+				const second = _$_.track_async(() => Promise.resolve('beta'), '8atc3p');
 
 				_$_.output_push(__out);
 				__out = '';
@@ -402,7 +402,7 @@ export function AsyncWithCatch() {
 
 				__out += '<!--[-->';
 
-				const data = _$_.track_async(() => Promise.reject(new Error('fetch failed')), 'c9d12acf');
+				const data = _$_.track_async(() => Promise.reject(new Error('fetch failed')), '1jzw72n');
 
 				_$_.output_push(__out);
 				__out = '';
@@ -479,7 +479,7 @@ export function ChildWithError() {
 
 				__out += '<!--[-->';
 
-				const data = _$_.track_async(() => Promise.reject(new Error('child error')), 'cdd1adb8');
+				const data = _$_.track_async(() => Promise.reject(new Error('child error')), '1l3vago');
 
 				_$_.output_push(__out);
 				__out = '';
@@ -578,7 +578,7 @@ export function ParentWithCatch() {
 
 function ReactiveDependencyResult({ count }) {
 	return _$_.tsrx_element(() => {
-		const data = _$_.track_async(() => Promise.resolve(`count-${count.value}`), '18c43c3a');
+		const data = _$_.track_async(() => Promise.resolve(`count-${count.value}`), '6vdwe2');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -599,7 +599,7 @@ function ReactiveDependencyResult({ count }) {
 
 export function AsyncWithReactiveDependency() {
 	return _$_.tsrx_element(() => {
-		const count = _$_.track(0, 'd5dcc1d3');
+		const count = _$_.track(0, '1nc7lqr');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -642,7 +642,7 @@ export function AsyncWithReactiveDependency() {
 
 export function AsyncWithReadOnlyDependency() {
 	return _$_.tsrx_element(() => {
-		const count = _$_.track(0, '75a97b64');
+		const count = _$_.track(0, 'wnak4k');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -659,7 +659,7 @@ export function AsyncWithReadOnlyDependency() {
 
 					{
 						const comp = ReactiveDependencyResult;
-						const args = [{ count: count.readOnly() }];
+						const args = [{ count: _$_.track_read_only(count) }];
 
 						_$_.output_push(__out);
 						__out = '';

package/tests/hydration/compiled/server/try.js

@@ -48,7 +48,7 @@ export function RootThrows() {
 
 export function RootAsyncDirect() {
 	return _$_.tsrx_element(() => {
-		const value = _$_.track_async(() => Promise.resolve('root async value'), 'd6bf9e33');
+		const value = _$_.track_async(() => Promise.resolve('root async value'), '1nl29mb');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -69,7 +69,7 @@ export function RootAsyncDirect() {
 
 export function RootAsyncRejects() {
 	return _$_.tsrx_element(() => {
-		const value = _$_.track_async(() => Promise.reject(new Error('root async failed')), 'd2fe7b64');
+		const value = _$_.track_async(() => Promise.reject(new Error('root async failed')), '1mjk6zo');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -134,7 +134,7 @@ export function AsyncListInTryPending() {
 
 function AsyncList() {
 	return _$_.tsrx_element(() => {
-		const items = _$_.track_async(() => Promise.resolve(['alpha', 'beta', 'gamma']), 'b3d31627');
+		const items = _$_.track_async(() => Promise.resolve(['alpha', 'beta', 'gamma']), '1dw7tpj');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -202,7 +202,7 @@ export function AsyncTryWithLeadingSibling() {
 
 function AsyncContent() {
 	return _$_.tsrx_element(() => {
-		const value = _$_.track_async(() => Promise.resolve('ready'), '15ea8758');
+		const value = _$_.track_async(() => Promise.resolve('ready'), '62wwns');
 
 		_$_.regular_block(() => {
 			let __out = '';

package/tests/hydration/compiled/server/typed-text.js

@@ -5,7 +5,7 @@ import { track } from 'ripple/server';
 
 export function TypedText() {
 	return _$_.tsrx_element(() => {
-		const row = _$_.track({ label: '<first>', count: 2 }, '9bf2304a');
+		const row = _$_.track({ label: '<first>', count: 2 }, '179p9ai');
 
 		_$_.regular_block(() => {
 			let __out = '';

package/tests/hydration/components/fragment-cursor.tsrx

@@ -648,3 +648,63 @@ export function WrapStaticThenStyleThenStatic() @{
 		<button class="outer-inc" onClick={() => n.value++}>{'outer'}</button>
 	</div>
 }
+
+// A component, `@if`, or `@for` before a static element sibling inside an
+// element inserts before that element (no placeholder of its own); the
+// hydration cursor still steps from the node to the element.
+export function CompThenStaticInDiv() @{
+	const n = track(0);
+	<div class="outer">
+		<Leaf />
+		<span class="after">{n.value}</span>
+		<button class="outer-inc" onClick={() => n.value++}>{'outer'}</button>
+	</div>
+}
+
+export function SiblingCompsInDiv() @{
+	const n = track(0);
+	<div class="outer">
+		<Leaf />
+		<Leaf />
+		<span class="after">{n.value}</span>
+		<button class="outer-inc" onClick={() => n.value++}>{'outer'}</button>
+	</div>
+}
+
+export function IfSwapThenStaticInDiv() @{
+	const n = track(0);
+	<div class="outer">
+		@if (n.value % 2 === 0) {
+			<b class="even">{'even'}</b>
+		} @else {
+			<i class="odd">{'odd'}</i>
+		}
+		<span class="after">{n.value}</span>
+		<button class="outer-inc" onClick={() => n.value++}>{'outer'}</button>
+	</div>
+}
+
+export function ForThenStaticInDiv() @{
+	const n = track(0);
+	const items = [1, 2];
+	<div class="outer">
+		@for (const item of items) {
+			<b class="item">{item}</b>
+		}
+		<span class="after">{n.value}</span>
+		<button class="outer-inc" onClick={() => n.value++}>{'outer'}</button>
+	</div>
+}
+
+export function CompThenStatementThenStaticInDiv() @{
+	const n = track(0);
+	<div class="outer">
+		<Leaf />
+		@{
+			const label = 'after';
+			console.assert(label === 'after');
+		}
+		<span class="after">{n.value}</span>
+		<button class="outer-inc" onClick={() => n.value++}>{'outer'}</button>
+	</div>
+}

package/tests/hydration/components/track-async-serialization.tsrx

@@ -1,4 +1,4 @@
-import { track, trackAsync } from 'ripple';
+import { track, trackAsync, trackReadOnly } from 'ripple';
 import { Money } from '../fixtures/money.js';
 
 export const transport = {
@@ -170,7 +170,7 @@ export function AsyncWithReadOnlyDependency() @{
 			}}
 		>{'increment'}</button>
 		@try {
-			<ReactiveDependencyResult count={count.readOnly()} />
+			<ReactiveDependencyResult count={trackReadOnly(count)} />
 		} @pending {
 			<p class="loading">{'loading...'}</p>
 		}

package/tests/hydration/fragment-cursor.test.js

@@ -45,7 +45,16 @@ const shapes = [
 ];
 
 // Single-root shapes whose children end on a slot the cursor must step past.
-const rootShapes = ['ExprThenSiblingInDiv', 'IfTwoInDiv', 'ForTwoNodeItems'];
+const rootShapes = [
+	'ExprThenSiblingInDiv',
+	'IfTwoInDiv',
+	'ForTwoNodeItems',
+	'CompThenStaticInDiv',
+	'SiblingCompsInDiv',
+	'IfSwapThenStaticInDiv',
+	'ForThenStaticInDiv',
+	'CompThenStatementThenStaticInDiv',
+];
 
 /**
  * Server renders and hydrates a component, asserting the hydrated DOM matches
@@ -88,10 +97,34 @@ describe('hydration > fragment cursor', () => {
 			it(`hydrates ${name}`, async () => {
 				await hydrateShape(name);
 				clickInner();
+
+				const after = container.querySelector('.after');
+				const inc = container.querySelector('.outer-inc');
+				if (after && inc) {
+					expect(after.textContent).toBe('0');
+					inc.click();
+					flushSync();
+					expect(after.textContent).toBe('1');
+				}
 			});
 		}
 	});
 
+	it('swaps an @if branch before its static element sibling after hydration', async () => {
+		await hydrateShape('IfSwapThenStaticInDiv');
+		const outer = container.querySelector('.outer');
+		expect(outer?.querySelector('.even')).not.toBeNull();
+		container.querySelector('.outer-inc')?.click();
+		flushSync();
+		expect(outer?.querySelector('.even')).toBeNull();
+		expect(outer?.children[0]?.className).toBe('odd');
+		expect(outer?.children[1]?.className).toBe('after');
+		container.querySelector('.outer-inc')?.click();
+		flushSync();
+		expect(outer?.children[0]?.className).toBe('even');
+		expect(outer?.children[1]?.textContent).toBe('2');
+	});
+
 	describe('fragment as a child with trailing siblings', () => {
 		for (const name of shapes) {
 			it(`hydrates ${name} followed by siblings`, async () => {

package/tests/hydration/track-async-serialization.test.js

@@ -145,7 +145,7 @@ describe('hydration > trackAsync serialization', () => {
 		expect(container.querySelector('.result')?.textContent).toBe('count-1');
 	});
 
-	it('reruns trackAsync when a dependency read through readOnly() changes after hydration', async () => {
+	it('reruns trackAsync when a dependency read through trackReadOnly() changes after hydration', async () => {
 		await hydrateComponent(
 			ServerComponents.AsyncWithReadOnlyDependency,
 			ClientComponents.AsyncWithReadOnlyDependency,

package/tests/server/basic.components.test.tsrx

@@ -1,4 +1,4 @@
-import { track } from 'ripple';
+import { track, trackReadOnly } from 'ripple';
 import type {
 	Derived,
 	Tracked,
@@ -9,7 +9,7 @@ import type {
 } from 'ripple';
 
 describe('basic server > components & composition', () => {
-	it('renders a read-only view passed through readOnly()', async () => {
+	it('renders a read-only view passed through trackReadOnly()', async () => {
 		function Child({ count }: { count: Derived<number> }) @{
 			<span>{count.value}</span>
 		}
@@ -17,7 +17,7 @@ describe('basic server > components & composition', () => {
 		function App() @{
 			const count = track(5);
 			<div>
-				<Child count={count.readOnly()} />
+				<Child count={trackReadOnly(count)} />
 			</div>
 		}