ripple 0.2.152 → 0.2.154

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

@@ -5,19 +5,31 @@ describe('basic client > reactivity', () => {
 		component Basic() {
 			<div>
 				let obj = {
-					count: track(0)
+					count: track(0),
 				};
 
 				<span>{obj.@count}</span>
 			</div>
 			<div>
 				let b = {
-					count: track(0)
+					count: track(0),
 				};
 
-				<button onClick={() => { b.@count-- }}>{'-'}</button>
-				<span class='count'>{b.@count}</span>
-				<button onClick={() => { b.@count++ }}>{'+'}</button>
+				<button
+					onClick={() => {
+						b.@count--;
+					}}
+				>
+					{'-'}
+				</button>
+				<span class="count">{b.@count}</span>
+				<button
+					onClick={() => {
+						b.@count++;
+					}}
+				>
+					{'+'}
+				</button>
 			</div>
 		}
 		render(Basic);
@@ -41,19 +53,31 @@ describe('basic client > reactivity', () => {
 
 			<div>
 				let obj = {
-					count: track(0)
+					count: track(0),
 				};
 
 				<span>{obj[@count]}</span>
 			</div>
 			<div>
 				let b = {
-					count: track(0)
+					count: track(0),
 				};
 
-				<button onClick={() => { b[@count]-- }}>{'-'}</button>
-				<span class='count'>{b[@count]}</span>
-				<button onClick={() => { b[@count]++ }}>{'+'}</button>
+				<button
+					onClick={() => {
+						b[@count]--;
+					}}
+				>
+					{'-'}
+				</button>
+				<span class="count">{b[@count]}</span>
+				<button
+					onClick={() => {
+						b[@count]++;
+					}}
+				>
+					{'+'}
+				</button>
 			</div>
 		}
 		render(Basic);
@@ -75,10 +99,16 @@ describe('basic client > reactivity', () => {
 		component Basic() {
 			let count = track(5);
 
-			<div class='count'>{@count}</div>
-			<div class='doubled'>{@count * 2}</div>
-			<div class='is-even'>{@count % 2 === 0 ? 'Even' : 'Odd'}</div>
-			<button onClick={() => { @count++ }}>{'Increment'}</button>
+			<div class="count">{@count}</div>
+			<div class="doubled">{@count * 2}</div>
+			<div class="is-even">{@count % 2 === 0 ? 'Even' : 'Odd'}</div>
+			<button
+				onClick={() => {
+					@count++;
+				}}
+			>
+				{'Increment'}
+			</button>
 		}
 
 		render(Basic);
@@ -110,8 +140,20 @@ describe('basic client > reactivity', () => {
 
 			const total = track(() => arr.reduce((a, b) => a + @b, 0));
 
-			<button onClick={() => { @first++; }}>{'first:' + @first}</button>
-			<button onClick={() => { @second++; }}>{'second: ' + @second}</button>
+			<button
+				onClick={() => {
+					@first++;
+				}}
+			>
+				{'first:' + @first}
+			</button>
+			<button
+				onClick={() => {
+					@second++;
+				}}
+			>
+				{'second: ' + @second}
+			</button>
 
 			effect(() => {
 				let _arr: number[] = [];
@@ -124,15 +166,15 @@ describe('basic client > reactivity', () => {
 			});
 
 			effect(() => {
-				if (arr.map(a => @a).includes(1)) {
+				if (arr.map((a) => @a).includes(1)) {
 					logs.push('arr includes 1');
 				}
 			});
 
 			<div>{'Sum: ' + @total}</div>
-			<div>{'Comma Separated: ' + arr.map(a => @a).join(', ')}</div>
-			<div>{'Number to string: ' + arr.map(a => String(@a))}</div>
-			<div>{'Even numbers: ' + arr.map(a => @a).filter(a => a % 2 === 0)}</div>
+			<div>{'Comma Separated: ' + arr.map((a) => @a).join(', ')}</div>
+			<div>{'Number to string: ' + arr.map((a) => String(@a))}</div>
+			<div>{'Even numbers: ' + arr.map((a) => @a).filter((a) => a % 2 === 0)}</div>
 		}
 
 		render(App);
@@ -166,15 +208,18 @@ describe('basic client > reactivity', () => {
 		expect(logs).toEqual(['0, 0', '1, 0', 'arr includes 1', '1, 1', 'arr includes 1']);
 	});
 
-
-
 	it('uses track get and set where both mutate value', () => {
 		component App() {
-			let count = track(0, v => v + 1, v => v * 2);
-
-
-			<div class='count'>{@count}</div>
-			<button onClick={() => { @count++ }}>{'Increment'}</button>
+			let count = track(0, (v) => v + 1, (v) => v * 2);
+
+			<div class="count">{@count}</div>
+			<button
+				onClick={() => {
+					@count++;
+				}}
+			>
+				{'Increment'}
+			</button>
 		}
 
 		render(App);
@@ -191,11 +236,16 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where set only mutates value', () => {
 		component App() {
-			let count = track(1, v => v, v => v * 2);
-
-
-			<div class='count'>{@count}</div>
-			<button onClick={() => { @count++ }}>{'Increment'}</button>
+			let count = track(1, (v) => v, (v) => v * 2);
+
+			<div class="count">{@count}</div>
+			<button
+				onClick={() => {
+					@count++;
+				}}
+			>
+				{'Increment'}
+			</button>
 		}
 
 		render(App);
@@ -212,11 +262,16 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where get only mutates value', () => {
 		component App() {
-			let count = track(0, v => v + 1, v => v);
-
-
-			<div class='count'>{@count}</div>
-			<button onClick={() => { @count++ }}>{'Increment'}</button>
+			let count = track(0, (v) => v + 1, (v) => v);
+
+			<div class="count">{@count}</div>
+			<button
+				onClick={() => {
+					@count++;
+				}}
+			>
+				{'Increment'}
+			</button>
 		}
 
 		render(App);
@@ -235,12 +290,18 @@ describe('basic client > reactivity', () => {
 		let logs: number[] = [];
 
 		component App() {
-			let count = track(0, v => v, (next, prev) => {
+			let count = track(0, (v) => v, (next, prev) => {
 				logs.push(prev, next);
 				return next;
 			});
 
-			<button onClick={() => { @count++ }}>{'Increment'}</button>
+			<button
+				onClick={() => {
+					@count++;
+				}}
+			>
+				{'Increment'}
+			</button>
 		}
 
 		render(App);
@@ -252,7 +313,7 @@ describe('basic client > reactivity', () => {
 		expect(logs).toEqual([0, 1]);
 	});
 
-	it("doesn't error on mutating a tracked variable in track() setter", () => {
+	it('doesn\'t error on mutating a tracked variable in track() setter', () => {
 		component Basic() {
 			let count = track(0);
 
@@ -270,14 +331,14 @@ describe('basic client > reactivity', () => {
 	});
 
 	it('unwraps tracked values inside effect', () => {
-		let state: { count?: number; } = {};
+		let state: { count?: number } = {};
 
 		component Basic() {
 			let count = track(0);
 
 			effect(() => {
 				state.count = @count;
-			})
+			});
 		}
 
 		render(Basic);
@@ -308,7 +369,7 @@ describe('basic client > reactivity', () => {
 					state.postDecrement = @count--;
 					state.finalValue = @count;
 				});
-			})
+			});
 		}
 
 		render(Basic);
@@ -327,9 +388,9 @@ describe('basic client > reactivity', () => {
 			component App() {
 				let message = track('');
 
-				try{
+				try {
 					const [a, b, rest] = trackSplit(null, ['a', 'b']);
-				} catch(e) {
+				} catch (e) {
 					@message = (e as Error).message;
 				}
 
@@ -346,9 +407,9 @@ describe('basic client > reactivity', () => {
 			component App() {
 				let message = track('');
 
-				try{
+				try {
 					const [a, b, rest] = trackSplit([1, 2, 3], ['a', 'b']);
-				} catch(e) {
+				} catch (e) {
 					@message = (e as Error).message;
 				}
 
@@ -363,12 +424,12 @@ describe('basic client > reactivity', () => {
 
 		it('errors on invalid value as tracked for track with trackSplit', () => {
 			component App() {
-				const t = track({a: 1, b: 2, c: 3});
+				const t = track({ a: 1, b: 2, c: 3 });
 				let message = track('');
 
-				try{
+				try {
 					const [a, b, rest] = trackSplit(t, ['a', 'b']);
-				} catch(e) {
+				} catch (e) {
 					@message = (e as Error).message;
 				}
 
@@ -383,7 +444,7 @@ describe('basic client > reactivity', () => {
 
 		it('returns undefined for non-existent props in track with trackSplit', () => {
 			component App() {
-				const [a, b, rest] = trackSplit({a: 1, c: 1}, ['a', 'b']);
+				const [a, b, rest] = trackSplit({ a: 1, c: 1 }, ['a', 'b']);
 
 				<pre>{@a}</pre>
 				<pre>{String(@b)}</pre>
@@ -403,7 +464,7 @@ describe('basic client > reactivity', () => {
 
 		it('returns the same tracked object if plain track is called with a tracked object', () => {
 			component App() {
-				const t = track({a: 1, b: 2, c: 3});
+				const t = track({ a: 1, b: 2, c: 3 });
 				const doublet = track(t);
 
 				<pre>{t === doublet}</pre>
@@ -434,7 +495,9 @@ describe('basic client > reactivity', () => {
 					onClick={() => @name === 'Click Me' ? @name = 'Clicked' : @name = 'Click Me'}
 					{@count}
 					{ref buttonRef}
-				>{@name}</Child>
+				>
+					{@name}
+				</Child>
 
 				<button onClick={() => @count++}>{'Increment Count'}</button>
 			}
@@ -443,7 +506,9 @@ describe('basic client > reactivity', () => {
 				const [children, count, rest] = trackSplit(props, ['children', 'count']);
 
 				if (@count < 2) {
-					<button {...@rest}><@children /></button>
+					<button {...@rest}>
+						<@children />
+					</button>
 				}
 				<pre>{@count}</pre>
 			}
@@ -459,7 +524,6 @@ describe('basic client > reactivity', () => {
 			expect(countPre.textContent).toBe('0');
 			expect(logs).toEqual(['ref called']);
 
-
 			buttonClickMe.click();
 			buttonIncrement.click();
 			flushSync();
@@ -470,7 +534,7 @@ describe('basic client > reactivity', () => {
 			buttonIncrement.click();
 			flushSync();
 
-			expect(logs).toEqual(['ref called','cleanup ref']);
+			expect(logs).toEqual(['ref called', 'cleanup ref']);
 		});
 	});
 });

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

@@ -29,7 +29,13 @@ describe('basic client > rendering & text', () => {
 		component Basic() {
 			let text = track('Hello World');
 
-			<button onClick={() => { @text = 'Hello Ripple' }}>{'Change Text'}</button>
+			<button
+				onClick={() => {
+					@text = 'Hello Ripple';
+				}}
+			>
+				{'Change Text'}
+			</button>
 			<div>{@text}</div>
 		}
 
@@ -62,14 +68,14 @@ describe('basic client > rendering & text', () => {
 	});
 
 	it('renders tick template literal for nested children', () => {
-		component Child({ level, children }: { level: number, children: any }) {
-			if(level == 1) {
+		component Child({ level, children }: { level: number; children: any }) {
+			if (level == 1) {
 				<h1><children /></h1>
 			}
-			if(level == 2) {
+			if (level == 2) {
 				<h2><children /></h2>
 			}
-			if(level == 3) {
+			if (level == 3) {
 				<h3><children /></h3>
 			}
 		}
@@ -84,7 +90,7 @@ describe('basic client > rendering & text', () => {
 
 	it('renders simple JS expression logic correctly', () => {
 		component Example() {
-			let test = {}
+			let test = {};
 			let counter = 0;
 			test[counter++] = 'Test';
 
@@ -102,12 +108,24 @@ describe('basic client > rendering & text', () => {
 			let count = track(0);
 			const staticMessage = 'Welcome to Ripple!';
 
-			<div class='mixed-content'>
+			<div class="mixed-content">
 				<h1>{staticMessage}</h1>
-				<p class='greeting'>{'Hello, ' + @name + '!'}</p>
-				<p class='notifications'>{'You have ' + @count + ' notifications'}</p>
-				<button onClick={() => { @count++ }}>{'Add Notification'}</button>
-				<button onClick={() => { @name = @name === 'World' ? 'User' : 'World' }}>{'Toggle Name'}</button>
+				<p class="greeting">{'Hello, ' + @name + '!'}</p>
+				<p class="notifications">{'You have ' + @count + ' notifications'}</p>
+				<button
+					onClick={() => {
+						@count++;
+					}}
+				>
+					{'Add Notification'}
+				</button>
+				<button
+					onClick={() => {
+						@name = @name === 'World' ? 'User' : 'World';
+					}}
+				>
+					{'Toggle Name'}
+				</button>
 			</div>
 		}
 
@@ -133,7 +151,7 @@ describe('basic client > rendering & text', () => {
 
 	it('basic operations', () => {
 		component App() {
-			let count = track(0)
+			let count = track(0);
 			<div>{@count++}</div>
 			<div>{++@count}</div>
 			<div>{5}</div>
@@ -149,18 +167,30 @@ describe('basic client > rendering & text', () => {
 			let showContent = track(false);
 			let userRole = track('guest');
 
-			<button onClick={() => { @showContent = !@showContent }}>{'Toggle Content'}</button>
-			<button onClick={() => { @userRole = @userRole === 'guest' ? 'admin' : 'guest' }}>{'Toggle Role'}</button>
-
-			<div class='content'>
+			<button
+				onClick={() => {
+					@showContent = !@showContent;
+				}}
+			>
+				{'Toggle Content'}
+			</button>
+			<button
+				onClick={() => {
+					@userRole = @userRole === 'guest' ? 'admin' : 'guest';
+				}}
+			>
+				{'Toggle Role'}
+			</button>
+
+			<div class="content">
 				if (@showContent) {
 					if (@userRole === 'admin') {
-						<div class='admin-content'>{'Admin content'}</div>
+						<div class="admin-content">{'Admin content'}</div>
 					} else {
-						<div class='user-content'>{'User content'}</div>
+						<div class="user-content">{'User content'}</div>
 					}
 				} else {
-					<div class='no-content'>{'No content'}</div>
+					<div class="no-content">{'No content'}</div>
 				}
 			</div>
 		}

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

@@ -3,9 +3,9 @@ import { compile } from 'ripple/compiler';
 describe('basic client > styling', () => {
 	it('renders with styling scoped to component', () => {
 		component Basic() {
-			<div class='styled-container'>
+			<div class="styled-container">
 				<h1>{'Styled heading'}</h1>
-				<p class='text'>{'Styled paragraph'}</p>
+				<p class="text">{'Styled paragraph'}</p>
 			</div>
 
 			<style>

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

@@ -3,7 +3,7 @@ import { track, effect, untrack, tick } from 'ripple';
 describe('basic client > utilities', () => {
 	it('tick function', async () => {
 		let resolve: () => void;
-		const promise = new Promise<void>((res) => (resolve = res));
+		const promise = new Promise<void>((res) => resolve = res);
 
 		component Basic() {
 			let value = track(0);

package/tests/client/boundaries.test.ripple

@@ -1,89 +1,101 @@
 import { flushSync, effect, track } from 'ripple';
 
 describe('passing reactivity between boundaries tests', () => {
-  it('can pass reactivity between functions with simple arrays and destructuring', () => {
-    let log: string[] = [];
+	it('can pass reactivity between functions with simple arrays and destructuring', () => {
+		let log: string[] = [];
 
-    function createDouble([ count ]) {
-      const double = track(() => @count * 2);
+		function createDouble([count]) {
+			const double = track(() => @count * 2);
 
-      effect(() => {
-        log.push('Count:' + @count);
-      });
+			effect(() => {
+				log.push('Count:' + @count);
+			});
 
-      return [ double ];
-    }
+			return [double];
+		}
 
-    component App() {
-      let count = track(0);
+		component App() {
+			let count = track(0);
 
-      const [ double ] = createDouble([ count ]);
+			const [double] = createDouble([count]);
 
-      <div>{'Double: ' + @double}</div>
-      <button onClick={() => { @count++; }}>{'Increment'}</button>
-    }
+			<div>{'Double: ' + @double}</div>
+			<button
+				onClick={() => {
+					@count++;
+				}}
+			>
+				{'Increment'}
+			</button>
+		}
 
-    render(App);
-    flushSync();
+		render(App);
+		flushSync();
 
-    expect(container.querySelector('div').textContent).toBe('Double: 0');
-    expect(log).toEqual(['Count:0']);
+		expect(container.querySelector('div').textContent).toBe('Double: 0');
+		expect(log).toEqual(['Count:0']);
 
-    const button = container.querySelector('button');
+		const button = container.querySelector('button');
 
-    button.click();
-    flushSync();
+		button.click();
+		flushSync();
 
-    expect(container.querySelector('div').textContent).toBe('Double: 2');
-    expect(log).toEqual(['Count:0', 'Count:1']);
+		expect(container.querySelector('div').textContent).toBe('Double: 2');
+		expect(log).toEqual(['Count:0', 'Count:1']);
 
-    button.click();
-    flushSync();
+		button.click();
+		flushSync();
 
-    expect(container.querySelector('div').textContent).toBe('Double: 4');
-    expect(log).toEqual(['Count:0', 'Count:1', 'Count:2']);
-  });
+		expect(container.querySelector('div').textContent).toBe('Double: 4');
+		expect(log).toEqual(['Count:0', 'Count:1', 'Count:2']);
+	});
 
-  it('can pass reactivity between functions with simple objects and destructuring', () => {
-    let log: string[] = [];
+	it('can pass reactivity between functions with simple objects and destructuring', () => {
+		let log: string[] = [];
 
-    function createDouble({ count }: { count: Tracked<number> }) {
-      const double = track(() => @count * 2);
+		function createDouble({ count }: { count: Tracked<number> }) {
+			const double = track(() => @count * 2);
 
-      effect(() => {
-        log.push('Count:' + @count);
-      });
+			effect(() => {
+				log.push('Count:' + @count);
+			});
 
-      return { double };
-    }
+			return { double };
+		}
 
-    component App() {
-      let count = track(0);
+		component App() {
+			let count = track(0);
 
-      const { double } = createDouble({ count });
+			const { double } = createDouble({ count });
 
-      <div>{'Double: ' + @double}</div>
-      <button onClick={() => { @count++; }}>{'Increment'}</button>
-    }
+			<div>{'Double: ' + @double}</div>
+			<button
+				onClick={() => {
+					@count++;
+				}}
+			>
+				{'Increment'}
+			</button>
+		}
 
-    render(App);
-    flushSync();
+		render(App);
+		flushSync();
 
-    expect(container.querySelector('div').textContent).toBe('Double: 0');
-    expect(log).toEqual(['Count:0']);
+		expect(container.querySelector('div').textContent).toBe('Double: 0');
+		expect(log).toEqual(['Count:0']);
 
-    const button = container.querySelector('button');
+		const button = container.querySelector('button');
 
-    button.click();
-    flushSync();
+		button.click();
+		flushSync();
 
-    expect(container.querySelector('div').textContent).toBe('Double: 2');
-    expect(log).toEqual(['Count:0', 'Count:1']);
+		expect(container.querySelector('div').textContent).toBe('Double: 2');
+		expect(log).toEqual(['Count:0', 'Count:1']);
 
-    button.click();
-    flushSync();
+		button.click();
+		flushSync();
 
-    expect(container.querySelector('div').textContent).toBe('Double: 4');
-    expect(log).toEqual(['Count:0', 'Count:1', 'Count:2']);
-  });
+		expect(container.querySelector('div').textContent).toBe('Double: 4');
+		expect(log).toEqual(['Count:0', 'Count:1', 'Count:2']);
+	});
 });