ripple 0.3.128 → 0.4.0

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

@@ -2,6 +2,41 @@ import type { PropsWithChildren, Tracked } from 'ripple';
 import { effect, flushSync, track, untrack } from 'ripple';
 
 describe('basic client > reactivity', () => {
+	it(
+		'keeps the previous value for teardowns after an effect calls flushSync mid-flush',
+		async () => {
+			const seen: number[] = [];
+
+			function App() @{
+				const count = track(0);
+
+				// Runs first in the flush; the nested sync flush must not release the
+				// previous values the later teardown reads.
+				effect(() => {
+					count.value;
+					flushSync();
+				});
+
+				effect(() => {
+					count.value;
+					return () => {
+						seen.push(count.value);
+					};
+				});
+
+				<button onClick={() => (count.value += 1)}>{count.value}</button>
+			}
+
+			render(App);
+			flushSync();
+			container.querySelector('button').click();
+			await new Promise((resolve) => setTimeout(resolve, 0));
+
+			expect(container.querySelector('button').textContent).toBe('1');
+			expect(seen).toEqual([0]);
+		},
+	);
+
 	it('renders multiple reactive lexical blocks', () => {
 		function Basic() @{
 			let obj = {
@@ -89,16 +124,16 @@ describe('basic client > reactivity', () => {
 
 	it('renders with computed reactive state', () => {
 		function Basic() @{
-			let &[count] = track(5);
+			const count = track(5);
 			<>
-				<div class="count">{count}</div>
-				<div class="doubled">{count * 2}</div>
+				<div class="count">{count.value}</div>
+				<div class="doubled">{count.value * 2}</div>
 				<div class="is-even">
-					{count % 2 === 0 ? 'Even' : 'Odd'}
+					{count.value % 2 === 0 ? 'Even' : 'Odd'}
 				</div>
 				<button
 					onClick={() => {
-						count++;
+						count.value++;
 					}}
 				>{'Increment'}</button>
 			</>
@@ -200,12 +235,12 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where both mutate value', () => {
 		function App() @{
-			let &[count] = track(0, (v) => v + 1, (v) => v * 2);
+			const count = track(0, (v) => v + 1, (v) => v * 2);
 			<>
-				<div class="count">{count}</div>
+				<div class="count">{count.value}</div>
 				<button
 					onClick={() => {
-						count++;
+						count.value++;
 					}}
 				>{'Increment'}</button>
 			</>
@@ -225,12 +260,12 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where set only mutates value', () => {
 		function App() @{
-			let &[count] = track(1, (v) => v, (v) => v * 2);
+			const count = track(1, (v) => v, (v) => v * 2);
 			<>
-				<div class="count">{count}</div>
+				<div class="count">{count.value}</div>
 				<button
 					onClick={() => {
-						count++;
+						count.value++;
 					}}
 				>{'Increment'}</button>
 			</>
@@ -250,12 +285,12 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where get only mutates value', () => {
 		function App() @{
-			let &[count] = track(0, (v) => v + 1, (v) => v);
+			const count = track(0, (v) => v + 1, (v) => v);
 			<>
-				<div class="count">{count}</div>
+				<div class="count">{count.value}</div>
 				<button
 					onClick={() => {
-						count++;
+						count.value++;
 					}}
 				>{'Increment'}</button>
 			</>
@@ -277,14 +312,14 @@ describe('basic client > reactivity', () => {
 		let logs: number[] = [];
 
 		function App() @{
-			let &[count] = track(0, (v) => v, (next, prev) => {
+			const count = track(0, (v) => v, (next, prev) => {
 				logs.push(prev, next);
 				return next;
 			});
 			<>
 				<button
 					onClick={() => {
-						count++;
+						count.value++;
 					}}
 				>{'Increment'}</button>
 			</>
@@ -301,12 +336,12 @@ describe('basic client > reactivity', () => {
 
 	it('doesn\'t error on mutating a tracked variable in track() setter', () => {
 		function Basic() @{
-			let &[count] = track(0);
-			const &[doubled] = track(0, undefined, (value) => {
-				count += value;
+			const count = track(0);
+			const doubled = track(0, undefined, (value) => {
+				count.value += value;
 				return value;
 			});
-			<p>{doubled}</p>
+			<p>{doubled.value}</p>
 		}
 
 		render(Basic);
@@ -318,9 +353,9 @@ describe('basic client > reactivity', () => {
 		let state: { count?: number } = {};
 
 		function Basic() @{
-			let &[count] = track(0);
+			const count = track(0);
 			effect(() => {
-				state.count = count;
+				state.count = count.value;
 			});
 			<></>
 		}
@@ -342,15 +377,15 @@ describe('basic client > reactivity', () => {
 		} = {};
 
 		function Basic() @{
-			let &[count] = track(5);
+			const count = track(5);
 			effect(() => {
 				untrack(() => {
-					state.initialValue = count;
-					state.preIncrement = ++count;
-					state.postIncrement = count++;
-					state.preDecrement = --count;
-					state.postDecrement = count--;
-					state.finalValue = count;
+					state.initialValue = count.value;
+					state.preIncrement = ++count.value;
+					state.postIncrement = count.value++;
+					state.preDecrement = --count.value;
+					state.postDecrement = count.value--;
+					state.finalValue = count.value;
 				});
 			});
 			<></>
@@ -369,21 +404,21 @@ describe('basic client > reactivity', () => {
 
 	it('keeps other subscribers after a destroyed block writes shared state in its cleanup', () => {
 		function App() @{
-			let &[count] = track(0);
-			let &[show] = track(true);
+			const count = track(0);
+			const show = track(true);
 			<>
-				@if (show) {
+				@if (show.value) {
 					effect(() => {
-						count;
+						count.value;
 						return () => {
-							count = count + 1;
+							count.value = count.value + 1;
 						};
 					});
-					<span class="inner">{count}</span>
+					<span class="inner">{count.value}</span>
 				}
-				<span class="outer">{count}</span>
-				<button class="hide" onClick={() => (show = false)}>{'hide'}</button>
-				<button class="inc" onClick={() => (count = count + 1)}>{'inc'}</button>
+				<span class="outer">{count.value}</span>
+				<button class="hide" onClick={() => (show.value = false)}>{'hide'}</button>
+				<button class="inc" onClick={() => (count.value = count.value + 1)}>{'inc'}</button>
 			</>
 		}
 

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

@@ -279,10 +279,10 @@ second
 
 	it('reactively clears interpolated text when a value becomes nullish', () => {
 		function Basic() @{
-			let &[name] = track<string | null>('Ada');
+			const name = track<string | null>('Ada');
 			<>
-				<div class="label">Name: {name}</div>
-				<button onClick={() => (name = name == null ? 'Ada' : null)}>toggle</button>
+				<div class="label">Name: {name.value}</div>
+				<button onClick={() => (name.value = name.value == null ? 'Ada' : null)}>toggle</button>
 			</>
 		}
 
@@ -327,14 +327,14 @@ second
 
 	it('renders dynamic text', () => {
 		function Basic() @{
-			let &[message] = track('Hello World');
+			const message = track('Hello World');
 			<>
 				<button
 					onClick={() => {
-						message = 'Hello Ripple';
+						message.value = 'Hello Ripple';
 					}}
 				>{'Change Text'}</button>
-				<div>{message}</div>
+				<div>{message.value}</div>
 			</>
 		}
 
@@ -406,21 +406,21 @@ second
 
 	it('renders with mixed static and dynamic content', () => {
 		function Basic() @{
-			let &[name] = track('World');
-			let &[count] = track(0);
+			const name = track('World');
+			const count = track(0);
 			const staticMessage = 'Welcome to Ripple!';
 			<div class="mixed-content">
 				<h1>{staticMessage}</h1>
-				<p class="greeting">{'Hello, ' + name + '!'}</p>
-				<p class="notifications">{'You have ' + count + ' notifications'}</p>
+				<p class="greeting">{'Hello, ' + name.value + '!'}</p>
+				<p class="notifications">{'You have ' + count.value + ' notifications'}</p>
 				<button
 					onClick={() => {
-						count++;
+						count.value++;
 					}}
 				>{'Add Notification'}</button>
 				<button
 					onClick={() => {
-						name = name === 'World' ? 'User' : 'World';
+						name.value = name.value === 'World' ? 'User' : 'World';
 					}}
 				>{'Toggle Name'}</button>
 			</div>
@@ -448,14 +448,14 @@ second
 
 	it('basic operations', () => {
 		function App() @{
-			let &[count] = track(0);
-			const a = count++;
-			const b = ++count;
+			const count = track(0);
+			const a = count.value++;
+			const b = ++count.value;
 			<>
 				<div>{a}</div>
 				<div>{b}</div>
 				<div>{5}</div>
-				<div>{count}</div>
+				<div>{count.value}</div>
 			</>
 		}
 
@@ -465,22 +465,22 @@ second
 
 	it('renders with conditional rendering using if statements', () => {
 		function Basic() @{
-			let &[showContent] = track(false);
-			let &[userRole] = track('guest');
+			const showContent = track(false);
+			const userRole = track('guest');
 			<>
 				<button
 					onClick={() => {
-						showContent = !showContent;
+						showContent.value = !showContent.value;
 					}}
 				>{'Toggle Content'}</button>
 				<button
 					onClick={() => {
-						userRole = userRole === 'guest' ? 'admin' : 'guest';
+						userRole.value = userRole.value === 'guest' ? 'admin' : 'guest';
 					}}
 				>{'Toggle Role'}</button>
 				<div class="content">
-					@if (showContent) {
-						@if (userRole === 'admin') {
+					@if (showContent.value) {
+						@if (userRole.value === 'admin') {
 							<div class="admin-content">{'Admin content'}</div>
 						} @else {
 							<div class="user-content">{'User content'}</div>
@@ -620,16 +620,16 @@ second
 
 	it('updates control flow inside an element in an expression container child', () => {
 		function App() @{
-			let &[ok] = track(true);
+			const ok = track(true);
 			<>
 				<button
 					onClick={() => {
-						ok = !ok;
+						ok.value = !ok.value;
 					}}
 				>{'toggle'}</button>
 				<div>
 					{<h1>
-						@if (ok) {
+						@if (ok.value) {
 							<span>{'yes'}</span>
 						} @else {
 							<span>{'no'}</span>

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

@@ -6,14 +6,14 @@ describe('basic client > utilities', () => {
 		const promise = new Promise<void>((res) => (resolve = res));
 
 		function Basic() @{
-			let &[value] = track(0);
+			const value = track(0);
 			effect(() => {
 				untrack(() => {
-					value++;
+					value.value++;
 					tick().then(() => resolve());
 				});
 			});
-			<p>{value}</p>
+			<p>{value.value}</p>
 		}
 		render(Basic);
 

package/tests/client/boundaries.test.tsrx

@@ -1,27 +1,27 @@
 import { effect, flushSync, track, type Tracked } from 'ripple';
 
 describe('passing reactivity between boundaries tests', () => {
-	it('can pass reactivity between functions with simple arrays and destructuring', () => {
+	it('can pass a tracked object to a plain function and read the derived it returns', () => {
 		let log: string[] = [];
 
-		function createDouble(&[count]: Tracked<number>) {
-			const double = track(() => count * 2);
+		function createDouble(count: Tracked<number>) {
+			const double = track(() => count.value * 2);
 
 			effect(() => {
-				log.push('Count:' + count);
+				log.push('Count:' + count.value);
 			});
 
 			return double;
 		}
 
 		function App() @{
-			let &[count, countTracked] = track(0);
-			const &[double] = createDouble(countTracked);
+			const count = track(0);
+			const double = createDouble(count);
 			<>
-				<div>{'Double: ' + double}</div>
+				<div>{'Double: ' + double.value}</div>
 				<button
 					onClick={() => {
-						count++;
+						count.value++;
 					}}
 				>{'Increment'}</button>
 			</>