ripple 0.2.152 → 0.2.154

package/tests/client/basic/basic.attributes.test.ripple

@@ -4,7 +4,7 @@ import { track, flushSync } from 'ripple';
 describe('basic client > attribute rendering', () => {
 	it('render static attributes', () => {
 		component Basic() {
-			<div class='foo' id='bar' style='color: red;'>{'Hello World'}</div>
+			<div class="foo" id="bar" style="color: red;">{'Hello World'}</div>
 		}
 
 		render(Basic);
@@ -16,7 +16,13 @@ describe('basic client > attribute rendering', () => {
 		component Basic() {
 			let active = track(false);
 
-			<button onClick={() => { @active = !@active }}>{'Toggle'}</button>
+			<button
+				onClick={() => {
+					@active = !@active;
+				}}
+			>
+				{'Toggle'}
+			</button>
 			<div class={@active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
 
 			<style>
@@ -31,7 +37,9 @@ describe('basic client > attribute rendering', () => {
 		const button = container.querySelector('button');
 		const div = container.querySelector('div');
 
-		expect(Array.from(div.classList).some(className => className.startsWith('ripple-'))).toBe(true);
+		expect(Array.from(div.classList).some((className) => className.startsWith('ripple-'))).toBe(
+			true,
+		);
 		expect(div.classList.contains('inactive')).toBe(true);
 
 		button.click();
@@ -46,24 +54,26 @@ describe('basic client > attribute rendering', () => {
 
 	it('render class attribute with array, nested array, nested object', () => {
 		component Basic() {
-			<div class={[
-				'foo',
-				'bar',
-				true && 'baz',
-				false && 'aaa',
-				null && 'bbb',
-				[
-					'ccc',
-					'ddd',
-					{ eee: true, fff: false }
-				]
-			]}>
+			<div
+				class={[
+					'foo',
+					'bar',
+					true && 'baz',
+					false && 'aaa',
+					null && 'bbb',
+					[
+						'ccc',
+						'ddd',
+						{eee: true, fff: false},
+					],
+				]}
+			>
 				{'Class Array'}
 			</div>
 
 			<style>
 				.foo {
-				  color: red;
+					color: red;
 				}
 			</style>
 		}
@@ -72,7 +82,9 @@ describe('basic client > attribute rendering', () => {
 
 		const div = container.querySelector('div');
 
-		expect(Array.from(div.classList).some(className => className.startsWith('ripple-'))).toBe(true);
+		expect(Array.from(div.classList).some((className) => className.startsWith('ripple-'))).toBe(
+			true,
+		);
 		expect(div.classList.contains('foo')).toBe(true);
 		expect(div.classList.contains('bar')).toBe(true);
 		expect(div.classList.contains('baz')).toBe(true);
@@ -88,8 +100,14 @@ describe('basic client > attribute rendering', () => {
 		component Basic() {
 			let active = track(false);
 
-			<button onClick={() => { @active = !@active }}>{'Toggle'}</button>
-			<div class={{ active: @active, inactive: !@active }}>{'Dynamic Class'}</div>
+			<button
+				onClick={() => {
+					@active = !@active;
+				}}
+			>
+				{'Toggle'}
+			</button>
+			<div class={{active: @active, inactive: !@active}}>{'Dynamic Class'}</div>
 
 			<style>
 				.active {
@@ -103,7 +121,9 @@ describe('basic client > attribute rendering', () => {
 		const button = container.querySelector('button');
 		const div = container.querySelector('div');
 
-		expect(Array.from(div.classList).some(className => className.startsWith('ripple-'))).toBe(true);
+		expect(Array.from(div.classList).some((className) => className.startsWith('ripple-'))).toBe(
+			true,
+		);
 		expect(div.classList.contains('inactive')).toBe(true);
 		expect(div.classList.contains('active')).toBe(false);
 
@@ -123,7 +143,13 @@ describe('basic client > attribute rendering', () => {
 		component Basic() {
 			let count = track(0);
 
-			<button onClick={() => { @count++ }}>{'Increment'}</button>
+			<button
+				onClick={() => {
+					@count++;
+				}}
+			>
+				{'Increment'}
+			</button>
 			<div id={`item-${@count}`}>{'Dynamic ID'}</div>
 		}
 
@@ -149,7 +175,13 @@ describe('basic client > attribute rendering', () => {
 		component Basic() {
 			let color = track('red');
 
-			<button onClick={() => { @color = @color === 'red' ? 'blue' : 'red' }}>{'Change Color'}</button>
+			<button
+				onClick={() => {
+					@color = @color === 'red' ? 'blue' : 'red';
+				}}
+			>
+				{'Change Color'}
+			</button>
 			<div style={`color: ${@color}; font-weight: bold;`}>{'Dynamic Style'}</div>
 		}
 
@@ -172,11 +204,14 @@ describe('basic client > attribute rendering', () => {
 		component Basic() {
 			let color = track('red');
 
-			<button onClick={() => { @color = @color === 'red' ? 'blue' : 'red' }}>{'Change Color'}</button>
-			<div style={{
-				color: @color,
-				fontWeight: 'bold',
-			}}>{'Dynamic Style'}</div>
+			<button
+				onClick={() => {
+					@color = @color === 'red' ? 'blue' : 'red';
+				}}
+			>
+				{'Change Color'}
+			</button>
+			<div style={{color: @color, fontWeight: 'bold'}}>{'Dynamic Style'}</div>
 		}
 
 		render(Basic);
@@ -203,7 +238,7 @@ describe('basic client > attribute rendering', () => {
 			}
 
 			<button onClick={toggleColor}>{'Change Color'}</button>
-			<div style={@style}>{'Dynamic Style'}</div>
+			<div {@style}>{'Dynamic Style'}</div>
 		}
 
 		render(Basic);
@@ -230,7 +265,7 @@ describe('basic client > attribute rendering', () => {
 			}
 
 			<button onClick={toggleColor}>{'Change Color'}</button>
-			<div style={{ ...@style }}>{'Dynamic Style'}</div>
+			<div style={{...@style}}>{'Dynamic Style'}</div>
 		}
 
 		render(Basic);
@@ -271,7 +306,7 @@ describe('basic client > attribute rendering', () => {
 
 	it('render spread props without duplication', () => {
 		component App() {
-			const checkBoxProp = {name:'car'}
+			const checkBoxProp = { name: 'car' };
 
 			<div>
 				<input {...checkBoxProp} type="checkbox" id="vehicle1" value="Bike" />
@@ -299,11 +334,15 @@ describe('basic client > attribute rendering', () => {
 			let disabled = track(false);
 			let checked = track(false);
 
-			<button onClick={() => {
-				@disabled = !@disabled;
-				@checked = !@checked;
-			}}>{'Toggle'}</button>
-			<input type='checkbox' disabled={@disabled} checked={@checked} />
+			<button
+				onClick={() => {
+					@disabled = !@disabled;
+					@checked = !@checked;
+				}}
+			>
+				{'Toggle'}
+			</button>
+			<input type="checkbox" {@disabled} {@checked} />
 		}
 
 		render(Basic);
@@ -328,11 +367,15 @@ describe('basic client > attribute rendering', () => {
 
 			<button
 				onClick={() => {
-				@theme = @theme === 'light' ? 'dark' : 'light';
-				@size = @size === 'medium' ? 'large' : 'medium';
-			}}
-			>{'Toggle Theme & Size'}</button>
-			<div class={`theme-${@theme} size-${@size}`} data-theme={@theme} data-size={@size}>{'Multiple Dynamic Attributes'}</div>
+					@theme = @theme === 'light' ? 'dark' : 'light';
+					@size = @size === 'medium' ? 'large' : 'medium';
+				}}
+			>
+				{'Toggle Theme & Size'}
+			</button>
+			<div class={`theme-${@theme} size-${@size}`} data-theme={@theme} data-size={@size}>
+				{'Multiple Dynamic Attributes'}
+			</div>
 		}
 
 		render(Basic);
@@ -357,14 +400,20 @@ describe('basic client > attribute rendering', () => {
 			let showTitle = track(false);
 			let showAria = track(false);
 
-			<button onClick={() => {
-				@showTitle = !@showTitle;
-				@showAria = !@showAria;
-			}}>{'Toggle Attributes'}</button>
+			<button
+				onClick={() => {
+					@showTitle = !@showTitle;
+					@showAria = !@showAria;
+				}}
+			>
+				{'Toggle Attributes'}
+			</button>
 			<div
 				title={@showTitle ? 'This is a title' : null}
 				aria-label={@showAria ? 'Accessible label' : null}
-			>{'Conditional Attributes'}</div>
+			>
+				{'Conditional Attributes'}
+			</div>
 		}
 
 		render(Basic);
@@ -390,20 +439,24 @@ describe('basic client > attribute rendering', () => {
 
 	it('render spread attributes', () => {
 		component Basic() {
-			let attrs = track({
-				class: 'initial',
-				id: 'test-1'
-			});
+			let attrs = track(
+				{
+					class: 'initial',
+					id: 'test-1',
+				},
+			);
 
 			<button
 				onClick={() => {
-				@attrs = {
-					class: 'updated',
-					id: 'test-2',
-					'data-extra': 'value'
-				};
-			}}
-			>{'Update Attributes'}</button>
+					@attrs = {
+						class: 'updated',
+						id: 'test-2',
+						'data-extra': 'value',
+					};
+				}}
+			>
+				{'Update Attributes'}
+			</button>
 			<div {...@attrs}>{'Spread Attributes'}</div>
 		}
 
@@ -448,7 +501,7 @@ describe('basic client > attribute rendering', () => {
 	it('handles boolean attributes with no prop value provides', () => {
 		component App() {
 			<div class="container">
-				<button onClick={() => console.log("clicked!")} disabled>{"Button"}</button>
+				<button onClick={() => console.log('clicked!')} disabled>{'Button'}</button>
 				<input type="checkbox" checked />
 			</div>
 		}

package/tests/client/basic/basic.collections.test.ripple

@@ -4,16 +4,22 @@ import { TRACKED_ARRAY } from '../../../src/runtime/internal/client/constants.js
 describe('basic client > collections', () => {
 	it('renders with simple reactive objects', () => {
 		component Basic() {
-			let user = track({
-				name: 'John',
-				age: 25
-			});
-
-			<div class='name'>{@user.name}</div>
-			<div class='age'>{@user.age}</div>
-			<button onClick={() => {
-				@user = {...@user, name: 'Jane', age: 30}
-			}}>{'Update User'}</button>
+			let user = track(
+				{
+					name: 'John',
+					age: 25,
+				},
+			);
+
+			<div class="name">{@user.name}</div>
+			<div class="age">{@user.age}</div>
+			<button
+				onClick={() => {
+					@user = { ...@user, name: 'Jane', age: 30 };
+				}}
+			>
+				{'Update User'}
+			</button>
 		}
 
 		render(Basic);
@@ -34,17 +40,23 @@ describe('basic client > collections', () => {
 
 	it('renders with nested reactive objects', () => {
 		component Basic() {
-			let user = track({
-				name: track('John'),
-				age: track(25)
-			});
-
-			<div class='name'>{@user.@name}</div>
-			<div class='age'>{@user.@age}</div>
-			<button onClick={() => {
-				@user.@name = 'Jane';
-				@user.@age = 30;
-			}}>{'Update User'}</button>
+			let user = track(
+				{
+					name: track('John'),
+					age: track(25),
+				},
+			);
+
+			<div class="name">{@user.@name}</div>
+			<div class="age">{@user.@age}</div>
+			<button
+				onClick={() => {
+					@user.@name = 'Jane';
+					@user.@age = 30;
+				}}
+			>
+				{'Update User'}
+			</button>
 		}
 
 		render(Basic);
@@ -71,7 +83,14 @@ describe('basic client > collections', () => {
 			<pre>{array[0]}</pre>
 			<pre>{TRACKED_ARRAY in array}</pre>
 
-			<button onClick={() => { array.push(array.length + 1); array[0] = array[0] + 1 }}>{'Add'}</button>
+			<button
+				onClick={() => {
+					array.push(array.length + 1);
+					array[0] = array[0] + 1;
+				}}
+			>
+				{'Add'}
+			</button>
 		}
 
 		render(App);

package/tests/client/basic/basic.errors.test.ripple

@@ -19,9 +19,9 @@ describe('basic client > errors', () => {
 			<div>
 				<button onClick={triggerError}>{'Trigger Error'}</button>
 				if (@hasError) {
-					<div class='error'>{'Error caught: ' + @errorMessage}</div>
+					<div class="error">{'Error caught: ' + @errorMessage}</div>
 				} else {
-					<div class='success'>{'No error'}</div>
+					<div class="success">{'No error'}</div>
 				}
 			</div>
 		}
@@ -78,7 +78,9 @@ describe('basic client > errors', () => {
 
 		render(Basic);
 
-		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
+		expect(error).toBe(
+			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
+		);
 	});
 
 	it('errors on mutating tracked value inside untrack() in computed track() evaluation', () => {
@@ -100,10 +102,12 @@ describe('basic client > errors', () => {
 
 		render(Basic);
 
-		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
+		expect(error).toBe(
+			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
+		);
 	});
 
-	it("errors on mutating a tracked variable in track() getter", () => {
+	it('errors on mutating a tracked variable in track() getter', () => {
 		component Basic() {
 			let count = track(0);
 
@@ -121,7 +125,9 @@ describe('basic client > errors', () => {
 
 		render(Basic);
 
-		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
+		expect(error).toBe(
+			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
+		);
 	});
 
 	it('should throw error for await in client-side control-flow statements', () => {

package/tests/client/basic/basic.events.test.ripple

@@ -8,11 +8,17 @@ describe('basic client > events', () => {
 			let clickCount = track(0);
 
 			<button
-				onFocus={() => { @focusCount++ }}
-				onClick={() => { @clickCount++ }}
-			>{'Test Button'}</button>
-			<div class='focus-count'>{@focusCount}</div>
-			<div class='click-count'>{@clickCount}</div>
+				onFocus={() => {
+					@focusCount++;
+				}}
+				onClick={() => {
+					@clickCount++;
+				}}
+			>
+				{'Test Button'}
+			</button>
+			<div class="focus-count">{@focusCount}</div>
+			<div class="click-count">{@clickCount}</div>
 		}
 
 		render(Basic);
@@ -35,10 +41,20 @@ describe('basic client > events', () => {
 			let captureClicks = track(0);
 			let bubbleClicks = track(0);
 
-			<div onClickCapture={() => { @captureClicks++ }}>
-				<button onClick={() => { @bubbleClicks++ }}>{'Click me'}</button>
-				<div class='capture-count'>{@captureClicks}</div>
-				<div class='bubble-count'>{@bubbleClicks}</div>
+			<div
+				onClickCapture={() => {
+					@captureClicks++;
+				}}
+			>
+				<button
+					onClick={() => {
+						@bubbleClicks++;
+					}}
+				>
+					{'Click me'}
+				</button>
+				<div class="capture-count">{@captureClicks}</div>
+				<div class="bubble-count">{@bubbleClicks}</div>
 			</div>
 		}
 
@@ -61,20 +77,20 @@ describe('basic client > events', () => {
 
 			const minus = {
 				onClick() {
-					@count--
-				}
-			}
+					@count--;
+				},
+			};
 
 			const plus = {
 				onClick() {
-					@count++
-				}
-			}
+					@count++;
+				},
+			};
 
 			<div>
-				<button {...minus} class='minus'>{'-'}</button>
-				<span class='count'>{@count}</span>
-				<button {...plus} class='plus'>{'+'}</button>
+				<button {...minus} class="minus">{'-'}</button>
+				<span class="count">{@count}</span>
+				<button {...plus} class="plus">{'+'}</button>
 			</div>
 		}
 
@@ -110,18 +126,20 @@ describe('basic client > events', () => {
 			let focusCount = track(0);
 
 			const mixedHandler = {
-				onClick() {  // Delegated event
-					@clickCount++
+				onClick() {
+					// Delegated event
+					@clickCount++;
+				},
+				onFocus() {
+					// Non-delegated event
+					@focusCount++;
 				},
-				onFocus() { // Non-delegated event
-					@focusCount++
-				}
-			}
+			};
 
 			<div>
-				<button {...mixedHandler} class='mixed-button'>{'Test'}</button>
-				<span class='click-count'>{@clickCount}</span>
-				<span class='focus-count'>{@focusCount}</span>
+				<button {...mixedHandler} class="mixed-button">{'Test'}</button>
+				<span class="click-count">{@clickCount}</span>
+				<span class="focus-count">{@focusCount}</span>
 			</div>
 		}
 
@@ -169,13 +187,13 @@ describe('basic client > events', () => {
 				@isEven = true;
 			};
 
-			<div class='counter'>{@counter}</div>
-			<div class='parity'>{@isEven ? 'Even' : 'Odd'}</div>
-			<div class='history-count'>{@history.length}</div>
+			<div class="counter">{@counter}</div>
+			<div class="parity">{@isEven ? 'Even' : 'Odd'}</div>
+			<div class="history-count">{@history.length}</div>
 
-			<button class='inc-btn' onClick={handleIncrement}>{'+'}</button>
-			<button class='dec-btn' onClick={handleDecrement}>{'-'}</button>
-			<button class='reset-btn' onClick={handleReset}>{'Reset'}</button>
+			<button class="inc-btn" onClick={handleIncrement}>{'+'}</button>
+			<button class="dec-btn" onClick={handleDecrement}>{'-'}</button>
+			<button class="reset-btn" onClick={handleReset}>{'Reset'}</button>
 		}
 
 		render(Basic);