ripple 0.2.152 → 0.2.154

package/tests/client/compiler/compiler.assignments.test.ripple

@@ -70,10 +70,38 @@ describe('compiler > assignments', () => {
 		render(App);
 
 		expect(logs).toEqual([
-			undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined,
-			123, 123, 123, 123, 123, 123, 123, 123,
-			125, 125, 125, 125, 125, 125, 125, 125,
-			124, 123, 124, 123, 124, 123, 124, 123
+			undefined,
+			undefined,
+			undefined,
+			undefined,
+			undefined,
+			undefined,
+			undefined,
+			undefined,
+			123,
+			123,
+			123,
+			123,
+			123,
+			123,
+			123,
+			123,
+			125,
+			125,
+			125,
+			125,
+			125,
+			125,
+			125,
+			125,
+			124,
+			123,
+			124,
+			123,
+			124,
+			123,
+			124,
+			123,
 		]);
 	});
 

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

@@ -1,8 +1,8 @@
 import { parse, compile } from 'ripple/compiler';
 
 describe('compiler > attributes', () => {
-		it('generates valid JavaScript for component props with hyphenated attributes', () => {
-			const source = `
+	it('generates valid JavaScript for component props with hyphenated attributes', () => {
+		const source = `
 			component Child(props) {
 				<div />
 			}
@@ -11,34 +11,34 @@ describe('compiler > attributes', () => {
 				<Child data-scope="test" aria-label="accessible" class="valid" />
 			}`;
 
-			const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.ripple', { mode: 'client' });
 
-			// Should contain properly quoted hyphenated properties and unquoted valid identifiers
-			expect(result.js.code).toMatch(/'data-scope': "test"/);
-			expect(result.js.code).toMatch(/'aria-label': "accessible"/);
-			expect(result.js.code).toMatch(/class: "valid"/);
-		});
+		// Should contain properly quoted hyphenated properties and unquoted valid identifiers
+		expect(result.js.code).toMatch(/'data-scope': "test"/);
+		expect(result.js.code).toMatch(/'aria-label': "accessible"/);
+		expect(result.js.code).toMatch(/class: "valid"/);
+	});
 
-		it('generates valid JavaScript for all types of hyphenated attributes', () => {
-			const testCases = [
-				{ attr: 'data-testid="value"', expected: /'data-testid': "value"/ },
-				{ attr: 'aria-label="label"', expected: /'aria-label': "label"/ },
-				{ attr: 'data-custom-attr="custom"', expected: /'data-custom-attr': "custom"/ },
-				{ attr: 'ng-if="condition"', expected: /'ng-if': "condition"/ },
-			];
+	it('generates valid JavaScript for all types of hyphenated attributes', () => {
+		const testCases = [
+			{ attr: 'data-testid="value"', expected: /'data-testid': "value"/ },
+			{ attr: 'aria-label="label"', expected: /'aria-label': "label"/ },
+			{ attr: 'data-custom-attr="custom"', expected: /'data-custom-attr': "custom"/ },
+			{ attr: 'ng-if="condition"', expected: /'ng-if': "condition"/ },
+		];
 
-			testCases.forEach(({ attr, expected }) => {
-				const source = `
+		testCases.forEach(({ attr, expected }) => {
+			const source = `
 				component Child(props) { <div /> }
 				export default component App() { <Child ${attr} /> }`;
 
-				const result = compile(source, 'test.ripple', { mode: 'client' });
-				expect(result.js.code).toMatch(expected);
-			});
+			const result = compile(source, 'test.ripple', { mode: 'client' });
+			expect(result.js.code).toMatch(expected);
 		});
+	});
 
-		it('handles mixed valid and invalid attribute identifiers correctly', () => {
-			const source = `
+	it('handles mixed valid and invalid attribute identifiers correctly', () => {
+		const source = `
 			component Child(props) {
 				<div />
 			}
@@ -54,21 +54,21 @@ describe('compiler > attributes', () => {
 				/>
 			}`;
 
-			const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.ripple', { mode: 'client' });
 
-			// Valid identifiers should not be quoted
-			expect(result.js.code).toMatch(/validProp: "valid"/);
-			expect(result.js.code).toMatch(/class: "valid"/);
-			expect(result.js.code).toMatch(/id: "valid"/);
+		// Valid identifiers should not be quoted
+		expect(result.js.code).toMatch(/validProp: "valid"/);
+		expect(result.js.code).toMatch(/class: "valid"/);
+		expect(result.js.code).toMatch(/id: "valid"/);
 
-			// Invalid identifiers (with hyphens) should be quoted
-			expect(result.js.code).toMatch(/'data-invalid': "invalid"/);
-			expect(result.js.code).toMatch(/'aria-invalid': "invalid"/);
-			expect(result.js.code).toMatch(/'custom-prop': "invalid"/);
-		});
+		// Invalid identifiers (with hyphens) should be quoted
+		expect(result.js.code).toMatch(/'data-invalid': "invalid"/);
+		expect(result.js.code).toMatch(/'aria-invalid': "invalid"/);
+		expect(result.js.code).toMatch(/'custom-prop': "invalid"/);
+	});
 
-		it('ensures generated code is syntactically valid JavaScript', () => {
-			const source = `
+	it('ensures generated code is syntactically valid JavaScript', () => {
+		const source = `
 			component Child(props) {
 				<div />
 			}
@@ -77,19 +77,19 @@ describe('compiler > attributes', () => {
 				<Child data-scope="test" />
 			}`;
 
-			const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.ripple', { mode: 'client' });
 
-			// Extract the props object from the generated code and test it's valid JavaScript
-			const match = result.js.code.match(/Child\([^,]+,\s*(\{[^}]+\})/);
-			expect(match).toBeTruthy();
+		// Extract the props object from the generated code and test it's valid JavaScript
+		const match = result.js.code.match(/Child\([^,]+,\s*(\{[^}]+\})/);
+		expect(match).toBeTruthy();
 
-			const propsObject = match?.[1];
-			expect(() => {
-				// Test that the object literal is syntactically valid
-				new Function(`return ${propsObject}`);
-			}).not.toThrow();
+		const propsObject = match?.[1];
+		expect(() => {
+			// Test that the object literal is syntactically valid
+			new Function(`return ${propsObject}`);
+		}).not.toThrow();
 
-			// Also verify it contains the expected quoted property
-			expect(propsObject).toMatch(/'data-scope': "test"/);
-		});
+		// Also verify it contains the expected quoted property
+		expect(propsObject).toMatch(/'data-scope': "test"/);
+	});
 });

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

@@ -247,8 +247,10 @@ component App() {
 		expect(count_occurrences(result, 'createRefKey')).toBe(2);
 	});
 
-	it('doesn\'t add duplicate imports for renamed imports when encountering shorthand syntax', () => {
-		const source = `
+	it(
+		'doesn\'t add duplicate imports for renamed imports when encountering shorthand syntax',
+		() => {
+			const source = `
 import {
 	TrackedArray as TA,
 	TrackedObject as TO,
@@ -266,19 +268,20 @@ component App() {
 	<div {ref () => {}} />
 }
 `;
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
-
-		expect(count_occurrences(result, 'TrackedArray')).toBe(1);
-		expect(count_occurrences(result, 'TA')).toBe(2);
-		expect(count_occurrences(result, 'TrackedObject')).toBe(1);
-		expect(count_occurrences(result, 'TO')).toBe(2);
-		expect(count_occurrences(result, 'TrackedSet')).toBe(1);
-		expect(count_occurrences(result, 'TS')).toBe(2);
-		expect(count_occurrences(result, 'TrackedMap')).toBe(1);
-		expect(count_occurrences(result, 'TM')).toBe(2);
-		expect(count_occurrences(result, 'createRefKey')).toBe(1);
-		expect(count_occurrences(result, 'crk')).toBe(2);
-	});
+			const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+			expect(count_occurrences(result, 'TrackedArray')).toBe(1);
+			expect(count_occurrences(result, 'TA')).toBe(2);
+			expect(count_occurrences(result, 'TrackedObject')).toBe(1);
+			expect(count_occurrences(result, 'TO')).toBe(2);
+			expect(count_occurrences(result, 'TrackedSet')).toBe(1);
+			expect(count_occurrences(result, 'TS')).toBe(2);
+			expect(count_occurrences(result, 'TrackedMap')).toBe(1);
+			expect(count_occurrences(result, 'TM')).toBe(2);
+			expect(count_occurrences(result, 'createRefKey')).toBe(1);
+			expect(count_occurrences(result, 'crk')).toBe(2);
+		},
+	);
 
 	it('adds missing imports for shorthand syntax', () => {
 		const source = `

package/tests/client/compiler/compiler.tracked-access.test.ripple

@@ -2,107 +2,118 @@ import { compile } from 'ripple/compiler';
 import { track } from 'ripple';
 
 describe('Compiler: Tracked Object Direct Access Checks', () => {
-
-    it('should error on direct access to __v of a tracked object', () => {
-        const code = `
+	it('should error on direct access to __v of a tracked object', () => {
+		const code = `
             export default component App() {
                 let count = track(0);
                 console.log(count.__v);
             }
         `;
-        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "__v" of a tracked object is not allowed/);
-    });
+		expect(() => compile(code, 'test.ripple')).toThrow(
+			/Directly accessing internal property "__v" of a tracked object is not allowed/,
+		);
+	});
 
-    it('should error on direct access to "a" (get/set config) of a tracked object', () => {
-        const code = `
+	it('should error on direct access to "a" (get/set config) of a tracked object', () => {
+		const code = `
             export default component App() {
                 let myTracked = track(0);
                 console.log(myTracked.a);
             }
         `;
-        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "a" of a tracked object is not allowed/);
-    });
+		expect(() => compile(code, 'test.ripple')).toThrow(
+			/Directly accessing internal property "a" of a tracked object is not allowed/,
+		);
+	});
 
-    it('should error on direct access to "b" (block) of a tracked object', () => {
-        const code = `
+	it('should error on direct access to "b" (block) of a tracked object', () => {
+		const code = `
             export default component App() {
                 let myTracked = track(0);
                 console.log(myTracked.b);
             }
         `;
-        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "b" of a tracked object is not allowed/);
-    });
+		expect(() => compile(code, 'test.ripple')).toThrow(
+			/Directly accessing internal property "b" of a tracked object is not allowed/,
+		);
+	});
 
-    it('should error on direct access to "c" (clock) of a tracked object', () => {
-        const code = `
+	it('should error on direct access to "c" (clock) of a tracked object', () => {
+		const code = `
             export default component App() {
                 let myTracked = track(0);
                 console.log(myTracked.c);
             }
         `;
-        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "c" of a tracked object is not allowed/);
-    });
+		expect(() => compile(code, 'test.ripple')).toThrow(
+			/Directly accessing internal property "c" of a tracked object is not allowed/,
+		);
+	});
 
-    it('should error on direct access to "f" (flags) of a tracked object', () => {
-        const code = `
+	it('should error on direct access to "f" (flags) of a tracked object', () => {
+		const code = `
             export default component App() {
                 let myTracked = track(0);
                 console.log(myTracked.f);
             }
         `;
-        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "f" of a tracked object is not allowed/);
-    });
+		expect(() => compile(code, 'test.ripple')).toThrow(
+			/Directly accessing internal property "f" of a tracked object is not allowed/,
+		);
+	});
 
-    it('should compile successfully with correct @ syntax access', () => {
-        const code = `
+	it('should compile successfully with correct @ syntax access', () => {
+		const code = `
             export default component App() {
                 let count = track(0);
                 console.log(@count);
             }
         `;
-        expect(() => compile(code, 'test.ripple')).not.toThrow();
-    });
+		expect(() => compile(code, 'test.ripple')).not.toThrow();
+	});
 
-    it('should compile successfully with correct get() function access', () => {
-        const code = `
+	it('should compile successfully with correct get() function access', () => {
+		const code = `
             import { get, track } from 'ripple';
             export default component App() {
                 let count = track(0);
                 console.log(get(count));
             }
         `;
-        expect(() => compile(code, 'test.ripple')).not.toThrow();
-    });
+		expect(() => compile(code, 'test.ripple')).not.toThrow();
+	});
 
-    it('should not error on accessing __v of a non-tracked object', () => {
-        const code = `
+	it('should not error on accessing __v of a non-tracked object', () => {
+		const code = `
             export default component App() {
                 let obj = { __v: 123 };
                 console.log(obj.__v);
             }
         `;
-        expect(() => compile(code, 'test.ripple')).not.toThrow();
-    });
+		expect(() => compile(code, 'test.ripple')).not.toThrow();
+	});
 
-    it('should not error on accessing __v of a non-tracked object (member expression)', () => {
-        const code = `
+	it('should not error on accessing __v of a non-tracked object (member expression)', () => {
+		const code = `
             export default component App() {
                 let data = { value: { __v: 456 } };
                 console.log(data.value.__v);
             }
         `;
-        expect(() => compile(code, 'test.ripple')).not.toThrow();
-    });
+		expect(() => compile(code, 'test.ripple')).not.toThrow();
+	});
 
-    it('should not error on accessing a property named like an internal one on a non-tracked object', () => {
-        const code = `
+	it(
+		'should not error on accessing a property named like an internal one on a non-tracked object',
+		() => {
+			const code = `
             export default component App() {
                 let config = { a: 'some_value', b: 'another_value' };
                 console.log(config.a);
                 console.log(config.b);
             }
         `;
-        expect(() => compile(code, 'test.ripple')).not.toThrow();
-    });
-
+			expect(() => compile(code, 'test.ripple')).not.toThrow();
+		},
+	);
 });

package/tests/client/compiler/compiler.typescript.test.ripple

@@ -2,8 +2,7 @@ import { compile } from 'ripple/compiler';
 
 describe('compiler > typescript', () => {
 	it('compiles TSInstantiationExpression', () => {
-		const source =
-`function makeBox<T>(value: T) {
+		const source = `function makeBox<T,>(value: T) {
 	return { value };
 }
 const makeStringBox = makeBox<string>;

package/tests/client/composite/composite.dynamic-components.test.ripple

@@ -28,7 +28,7 @@ describe('composite > dynamic components', () => {
 
 			const obj = {
 				tracked_basic,
-			}
+			};
 
 			<obj.@tracked_basic />
 		}
@@ -49,7 +49,7 @@ describe('composite > dynamic components', () => {
 
 			const obj = {
 				tracked_basic,
-			}
+			};
 
 			const tracked_object = track(obj);
 
@@ -64,21 +64,21 @@ describe('composite > dynamic components', () => {
 
 	it('handles dynamic component switching', () => {
 		component Child1() {
-			<div>{"I am child 1"}</div>
+			<div>{'I am child 1'}</div>
 		}
 
 		component Child2() {
-			<div>{"I am child 2"}</div>
+			<div>{'I am child 2'}</div>
 		}
 
 		component App() {
-			let thing = track(() => Child1)
+			let thing = track(() => Child1);
 
 			<div id="container">
 				<@thing />
 			</div>
 
-			<button onClick={() => @thing = @thing === Child1 ? Child2 : Child1}>{"Change Child"}</button>
+			<button onClick={() => @thing = @thing === Child1 ? Child2 : Child1}>{'Change Child'}</button>
 		}
 
 		render(App);

package/tests/client/composite/composite.generics.test.ripple

@@ -7,32 +7,36 @@ describe('composite > generics', () => {
 
 			// 7. Generic following optional chaining
 			const maybe = {
-				factory<T>() {
+				factory: function <T>() {
 					return {
-						make<U>() {
+						make: function <U>() {
 							return 1;
-						}
+						},
 					};
-				}
+				},
 			};
 			const g = maybe?.factory<number>()?.make<boolean>();
 
 			// 8. Comparison operator (ensure '<' here NOT misparsed as generics)
 			let x = 10, y = 20;
-			const h = x < y ? 'lt' : 'ge';
+			const h =
+				x < y ? 'lt' : 'ge';
 
 			// 9. Chained comparisons with intervening generics
 			class Box<T> {
 				value: T;
-				constructor(value?: T) {
+
+				constructor(value: T) {
 					this.value = value;
 				}
+
 				open<U>() {
 					return new Box<U>();
 				}
 			}
 			const limit = 100;
-			const i = new Box<number>().value < limit ? 'ok' : 'no';
+			const i =
+				new Box<number>().value < limit ? 'ok' : 'no';
 
 			// 10. JSX / Element should still work
 			<div class="still-works">
@@ -57,13 +61,13 @@ describe('composite > generics', () => {
 			// 13. Multiple generic segments in chain
 			function foo<T>() {
 				return {
-					bar<U>() {
+					bar: function <U>() {
 						return {
-							baz<V>() {
+							baz: function <V>() {
 								return true;
-							}
+							},
 						};
-					}
+					},
 				};
 			}
 			const l = foo<number>().bar<string>().baz<boolean>();
@@ -75,9 +79,11 @@ describe('composite > generics', () => {
 			// 15. Generic in angle after "new" + trailing call
 			class Wrapper<T> {
 				value: T;
+
 				constructor() {
 					this.value = null as unknown as T;
 				}
+
 				unwrap<U>() {
 					return null as unknown as U;
 				}
@@ -88,11 +94,11 @@ describe('composite > generics', () => {
 			function getUnknown(): unknown {
 				return new Map<string, number>([['a', 1]]);
 			}
-			getUnknown.factory = function<T>() {
+			getUnknown.factory = function <T>() {
 				return {
-					make<U>() {
+					make: function <U>() {
 						return 2;
-					}
+					},
 				};
 			};
 			const raw = getUnknown();
@@ -101,14 +107,17 @@ describe('composite > generics', () => {
 			// 17. Generic with comma + trailing less-than comparison on next token
 			class Pair<T1, T2> {
 				first: T1;
+
 				second: T2;
+
 				constructor() {
 					this.first = null as unknown as T1;
 					this.second = null as unknown as T2;
 				}
 			}
 			const p = new Pair<number, string>();
-			const q = 1 < 2 ? p : null;
+			const q =
+				1 < 2 ? p : null;
 
 			// 18. Nested generics with line breaks resembling JSX indentation
 			interface Node<T> {
@@ -119,16 +128,15 @@ describe('composite > generics', () => {
 			}
 			class Graph<N, E> {
 				nodes: N[];
+
 				edges: E[];
+
 				constructor() {
 					this.nodes = [];
 					this.edges = [];
 				}
 			}
-			const r = new Graph<
-				Node<string>,
-				Edge<number>
-			>();
+			const r = new Graph<Node<string>, Edge<number>>();
 
 			// 19. Ternary containing generics in both branches
 			let flag = true;
@@ -148,18 +156,17 @@ describe('composite > generics', () => {
 			const v = make<number>()(10);
 
 			// 23. Generic followed by tagged template (ensure not confused with JSX)
-			function tagFn<T>(strings: TemplateStringsArray, ...values: T[]) {
+			function tagFn<T>(strings: TemplateStringsArray, ...values) {
 				return values[0];
 			}
-			const tagResult = tagFn<number>`value`;
+			const tagResult = tagFn`value`;
 
 			// 24. Sequence mixing: (a < b) + generic call in same statement
 			function compute<T>(x: T, y: T): T {
 				return y;
 			}
 
-			const w = (x < y) && compute<number>(x, y);
-
+			const w = x < y && compute<number>(x, y);
 
 			// Additional component focusing on edge crankers
 
@@ -170,37 +177,33 @@ describe('composite > generics', () => {
 			class Builder<Kind> {
 				finalize<Result>() {
 					return {
-						result: null as unknown as Result
+						result: null as unknown as Result,
 					};
 				}
 			}
 			const builder = new Builder<Number>();
-			const result = ((function(){ return builder; })() as Builder<Number>).finalize<boolean>();
+			const result = (function () {
+				return builder;
+			}() as Builder<Number>).finalize<boolean>();
 
 			// 30. Angle bracket start of conditional expression line
 			function adjust<T>(value: T): T {
 				return value;
 			}
 			const val =
-				new Wrapper<number>()
-					.value < 100
-					? adjust<number>(10)
-					: adjust<number>(20);
-
+				new Wrapper<number>().value < 100 ? adjust<number>(10) : adjust<number>(20);
 
 			// 32. Generic with comments inside angle list
 			class Mapper<Key, Value> {
 				map: Map<Key, Value>;
+
 				constructor() {
 					this.map = new Map<Key, Value>();
 				}
 			}
-			const gg = new Mapper<
-				// key type
-				string,
-				/* value type */
-				number
-			>();
+			const gg = new Mapper<// key type
+			string, /* value type */
+			number>();
 
 			// 33. Map of generic instance as key
 			const mm = new Map<TrackedArray<number>, TrackedArray<string>>();

package/tests/client/composite/composite.props.test.ripple

@@ -76,7 +76,7 @@ describe('composite > props', () => {
 	it('mutating a tracked value prop should work as intended', () => {
 		const logs: number[] = [];
 
-		component Counter({count}) {
+		component Counter({ count }) {
 			effect(() => {
 				logs.push(@count);
 			});
@@ -88,7 +88,7 @@ describe('composite > props', () => {
 			const count = track(0);
 
 			<div>
-				<Counter count={count} />
+				<Counter {count} />
 			</div>
 		}
 
@@ -133,7 +133,8 @@ describe('composite > props', () => {
 		}
 
 		render(App);
-		const button1 = container.querySelectorAll('button')[0];;
+		const button1 = container.querySelectorAll('button')[0];
+
 		const button2 = container.querySelectorAll('button')[1];
 
 		expect(button1.className).toContain('on');