ripple 0.3.2 → 0.3.4

package/tests/client/css/style-identifier.test.ripple

@@ -1,14 +1,15 @@
+import { track } from 'ripple';
 import { compile } from 'ripple/compiler';
 
-describe('#ripple.style identifier', () => {
+describe('#style identifier', () => {
 	describe('basic usage with components', () => {
-		it('passes scoped class to a child component via #ripple.style', () => {
+		it('passes scoped class to a child component via #style', () => {
 			component Child({ className }: { className: string }) {
 				<div class={className}>{'styled child'}</div>
 			}
 
 			component Parent() {
-				<Child className={#ripple.style.highlight} />
+				<Child className={#style.highlight} />
 
 				<style>
 					.highlight {
@@ -27,14 +28,14 @@ describe('#ripple.style identifier', () => {
 			expect(classes.some((cls: string) => cls === 'highlight')).toBe(true);
 		});
 
-		it('passes multiple #ripple.style classes to a child component', () => {
+		it('passes multiple #style classes to a child component', () => {
 			component Child({ primary, secondary }: { primary: string; secondary: string }) {
 				<div class={primary}>{'primary'}</div>
 				<span class={secondary}>{'secondary'}</span>
 			}
 
 			component Parent() {
-				<Child primary={#ripple.style.primary} secondary={#ripple.style.secondary} />
+				<Child primary={#style.primary} secondary={#style.secondary} />
 
 				<style>
 					.primary {
@@ -63,15 +64,15 @@ describe('#ripple.style identifier', () => {
 			expect(spanClasses.some((cls: string) => cls === 'secondary')).toBe(true);
 		});
 
-		it('passes scoped class to a dynamic child component via #ripple.style', () => {
+		it('passes scoped class to a dynamic child component via #style', () => {
 			component Child({ cls }: { cls: string }) {
 				<span class={cls}>{'text'}</span>
 			}
 
 			component Parent() {
-				let dynamic = #ripple.track(() => Child);
+				let dynamic = track(() => Child);
 				<div class="wrapper">
-					<@dynamic cls={#ripple.style.text} />
+					<@dynamic cls={#style.text} />
 				</div>
 
 				<style>
@@ -90,7 +91,7 @@ describe('#ripple.style identifier', () => {
 			expect(classes.some((cls: string) => cls === 'text')).toBe(true);
 		});
 
-		it('child can combine its own classes with parent #ripple.style class', () => {
+		it('child can combine its own classes with parent #style class', () => {
 			component Card({ className }: { className?: string }) {
 				<div class={['card-base', className ?? '']}>{'card content'}</div>
 
@@ -102,7 +103,7 @@ describe('#ripple.style identifier', () => {
 			}
 
 			component App() {
-				<Card className={#ripple.style.themed} />
+				<Card className={#style.themed} />
 
 				<style>
 					.themed {
@@ -127,7 +128,7 @@ describe('#ripple.style identifier', () => {
 
 			component App() {
 				<div class="parent">
-					<Child cls={#ripple.style.dual} />
+					<Child cls={#style.dual} />
 				</div>
 
 				<style>
@@ -151,10 +152,10 @@ describe('#ripple.style identifier', () => {
 	});
 
 	describe('compile errors', () => {
-		it('errors when #ripple.style is used directly on a DOM element', () => {
+		it('errors when #style is used directly on a DOM element', () => {
 			const source = `
 component App() {
-	<div class={#ripple.style.box}>{'content'}</div>
+	<div class={#style.box}>{'content'}</div>
 
 	<style>
 		.box {
@@ -167,10 +168,10 @@ component App() {
 			);
 		});
 
-		it('errors when #ripple.style bracket notation is used directly on a DOM element', () => {
+		it('errors when #style bracket notation is used directly on a DOM element', () => {
 			const source = `
 component App() {
-	<div class={#ripple.style['container']}>{'content'}</div>
+	<div class={#style['container']}>{'content'}</div>
 
 	<style>
 		.container {
@@ -183,15 +184,13 @@ component App() {
 			);
 		});
 
-		it(
-			'errors when #ripple.style references a class in a compound selector passed to component',
-			() => {
-				const source = `
+		it('errors when #style references a class in a compound selector passed to component', () => {
+			const source = `
 component Child({ cls }) {
 	<span class={cls}>{'text'}</span>
 }
 component App() {
-	<Child cls={#ripple.style.special} />
+	<Child cls={#style.special} />
 
 	<style>
 		span.special {
@@ -199,11 +198,8 @@ component App() {
 		}
 	</style>
 }`;
-				expect(() => compile(source, 'test.ripple')).toThrow(
-					/does not exist as a stand-alone class/,
-				);
-			},
-		);
+			expect(() => compile(source, 'test.ripple')).toThrow(/does not exist as a stand-alone class/);
+		});
 
 		it('errors if descendant class is attempted to be passed in to child component', () => {
 			const source = `
@@ -214,7 +210,7 @@ component App() {
 				component App() {
 					<div class="wrapper">
 						<Child
-							cls={#ripple.style.nested}
+							cls={#style.nested}
 						/>
 					</div>
 
@@ -242,7 +238,7 @@ component App() {
 						<Child
 							// @ts-expect-error - cannot use child combinator class as standalone
 							// @ripple-expect-error - cannot use child combinator class as standalone
-							cls={#ripple.style.child}
+							cls={#style.child}
 						/>
 					</div>
 
@@ -269,7 +265,7 @@ component App() {
 						<Child
 							// @ts-expect-error - cannot use compound class as standalone
 							// @ripple-expect-error - cannot use compound class as standalone
-							cls={#ripple.style.child}
+							cls={#style.child}
 						/>
 					</div>
 
@@ -285,7 +281,7 @@ component App() {
 			expect(() => compile(source, 'test.ripple')).toThrow(/does not exist as a stand-alone class/);
 		});
 
-		it('errors if descendant #ripple.style class is used on a dynamic component', () => {
+		it('errors if descendant #style class is used on a dynamic component', () => {
 			const source = `
 
 				component Child({ cls }) {
@@ -293,9 +289,9 @@ component App() {
 				}
 
 				component App() {
-					let dynamic = #ripple.track(() => Child);
+					let dynamic = track(() => Child);
 					<div class="wrapper">
-						<@dynamic cls={#ripple.style.nested} />
+						<@dynamic cls={#style.nested} />
 					</div>
 
 					<style>
@@ -310,15 +306,13 @@ component App() {
 			expect(() => compile(source, 'test.ripple')).toThrow(/does not exist as a stand-alone class/);
 		});
 
-		it(
-			'errors when #ripple.style references a class that does not exist in the style block',
-			() => {
-				const source = `
+		it('errors when #style references a class that does not exist in the style block', () => {
+			const source = `
 component Child({ cls }) {
 	<div class={cls}>{'text'}</div>
 }
 component App() {
-	<Child cls={#ripple.style.missing} />
+	<Child cls={#style.missing} />
 
 	<style>
 		.other {
@@ -326,20 +320,17 @@ component App() {
 		}
 	</style>
 }`;
-				expect(() => compile(source, 'test.ripple')).toThrow(
-					/does not exist as a stand-alone class/,
-				);
-			},
-		);
+			expect(() => compile(source, 'test.ripple')).toThrow(/does not exist as a stand-alone class/);
+		});
 
-		it('errors when #ripple.style is used with a dynamic expression', () => {
+		it('errors when #style is used with a dynamic expression', () => {
 			const source = `
 component Child({ cls }) {
 	<div class={cls}>{'text'}</div>
 }
 component App() {
 	const key = 'highlight';
-	<Child cls={#ripple.style[key]} />
+	<Child cls={#style[key]} />
 
 	<style>
 		.highlight {
@@ -352,22 +343,22 @@ component App() {
 			);
 		});
 
-		it('errors when #ripple.style is used outside of a component', () => {
+		it('errors when #style is used outside of a component', () => {
 			const source = `function notAComponent() {
-	const cls = #ripple.style.foo;
+	const cls = #style.foo;
 }`;
 			expect(() => compile(source, 'test.ripple')).toThrow(/can only be used within a component/);
 		});
 	});
 
 	describe('compiler output', () => {
-		it('generates #ripple.style object with standalone classes for client mode', () => {
+		it('generates #style object with standalone classes for client mode', () => {
 			const source = `
 component Child({ cls }) {
 	<div class={cls}>{'text'}</div>
 }
 export component App() {
-	<Child cls={#ripple.style.highlight} />
+	<Child cls={#style.highlight} />
 
 	<style>
 		.highlight {
@@ -381,13 +372,13 @@ export component App() {
 			expect(js.code).toMatch(/ripple-[a-z0-9]+/);
 		});
 
-		it('generates #ripple.style object with standalone classes for server mode', () => {
+		it('generates #style object with standalone classes for server mode', () => {
 			const source = `
 component Child({ cls }) {
 	<div class={cls}>{'text'}</div>
 }
 export component App() {
-	<Child cls={#ripple.style.highlight} />
+	<Child cls={#style.highlight} />
 
 	<style>
 		.highlight {

package/tests/client/date.test.ripple

@@ -1,10 +1,10 @@
-import { flushSync } from 'ripple';
+import { RippleDate, flushSync, track } from 'ripple';
 
 describe('RippleDate', () => {
 	it('handles getTime() with reactive updates', () => {
 		component DateTest() {
-			let date = #ripple.date(2025, 0, 1);
-			let time = #ripple.track(() => date.getTime());
+			let date = RippleDate(2025, 0, 1);
+			let time = track(() => date.getTime());
 
 			<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
 			<pre>{@time}</pre>
@@ -25,8 +25,8 @@ describe('RippleDate', () => {
 
 	it('handles getFullYear() with reactive updates', () => {
 		component DateTest() {
-			let date = #ripple.date(2025, 5, 15);
-			let year = #ripple.track(() => date.getFullYear());
+			let date = RippleDate(2025, 5, 15);
+			let year = track(() => date.getFullYear());
 
 			<button onClick={() => date.setFullYear(2030)}>{'Change Year'}</button>
 			<pre>{@year}</pre>
@@ -46,8 +46,8 @@ describe('RippleDate', () => {
 
 	it('handles getMonth() with reactive updates', () => {
 		component DateTest() {
-			let date = #ripple.date(2025, 0, 15);
-			let month = #ripple.track(() => date.getMonth());
+			let date = RippleDate(2025, 0, 15);
+			let month = track(() => date.getMonth());
 
 			<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
 			<pre>{@month}</pre>
@@ -67,8 +67,8 @@ describe('RippleDate', () => {
 
 	it('handles getDate() with reactive updates', () => {
 		component DateTest() {
-			let date = #ripple.date(2025, 0, 1);
-			let day = #ripple.track(() => date.getDate());
+			let date = RippleDate(2025, 0, 1);
+			let day = track(() => date.getDate());
 
 			<button onClick={() => date.setDate(15)}>{'Change Day'}</button>
 			<pre>{@day}</pre>
@@ -88,8 +88,8 @@ describe('RippleDate', () => {
 
 	it('handles getDay() with reactive updates', () => {
 		component DateTest() {
-			let date = #ripple.date(2025, 0, 1);
-			let dayOfWeek = #ripple.track(() => date.getDay());
+			let date = RippleDate(2025, 0, 1);
+			let dayOfWeek = track(() => date.getDay());
 
 			<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
 			<pre>{@dayOfWeek}</pre>
@@ -109,8 +109,8 @@ describe('RippleDate', () => {
 
 	it('handles getHours() with reactive updates', () => {
 		component DateTest() {
-			let date = #ripple.date(2025, 0, 1, 10, 30, 0);
-			let hours = #ripple.track(() => date.getHours());
+			let date = RippleDate(2025, 0, 1, 10, 30, 0);
+			let hours = track(() => date.getHours());
 
 			<button onClick={() => date.setHours(15)}>{'Change to 3 PM'}</button>
 			<pre>{@hours}</pre>
@@ -130,8 +130,8 @@ describe('RippleDate', () => {
 
 	it('handles getMinutes() with reactive updates', () => {
 		component DateTest() {
-			let date = #ripple.date(2025, 0, 1, 10, 15, 0);
-			let minutes = #ripple.track(() => date.getMinutes());
+			let date = RippleDate(2025, 0, 1, 10, 15, 0);
+			let minutes = track(() => date.getMinutes());
 
 			<button onClick={() => date.setMinutes(45)}>{'Change Minutes'}</button>
 			<pre>{@minutes}</pre>
@@ -151,8 +151,8 @@ describe('RippleDate', () => {
 
 	it('handles getSeconds() with reactive updates', () => {
 		component DateTest() {
-			let date = #ripple.date(2025, 0, 1, 10, 15, 30);
-			let seconds = #ripple.track(() => date.getSeconds());
+			let date = RippleDate(2025, 0, 1, 10, 15, 30);
+			let seconds = track(() => date.getSeconds());
 
 			<button onClick={() => date.setSeconds(45)}>{'Change Seconds'}</button>
 			<pre>{@seconds}</pre>
@@ -172,8 +172,8 @@ describe('RippleDate', () => {
 
 	it('handles toISOString() with reactive updates', () => {
 		component DateTest() {
-			let date = #ripple.date(2025, 0, 1, 12, 0, 0);
-			let isoString = #ripple.track(() => date.toISOString());
+			let date = RippleDate(2025, 0, 1, 12, 0, 0);
+			let isoString = track(() => date.toISOString());
 
 			<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
 			<pre>{@isoString}</pre>
@@ -198,8 +198,8 @@ describe('RippleDate', () => {
 
 	it('handles toDateString() with reactive updates', () => {
 		component DateTest() {
-			let date = #ripple.date(2025, 0, 1);
-			let dateString = #ripple.track(() => date.toDateString());
+			let date = RippleDate(2025, 0, 1);
+			let dateString = track(() => date.toDateString());
 
 			<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
 			<pre>{@dateString}</pre>
@@ -222,8 +222,8 @@ describe('RippleDate', () => {
 
 	it('handles valueOf() with reactive updates', () => {
 		component DateTest() {
-			let date = #ripple.date(2025, 0, 1);
-			let valueOf = #ripple.track(() => date.valueOf());
+			let date = RippleDate(2025, 0, 1);
+			let valueOf = track(() => date.valueOf());
 
 			<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
 			<pre>{@valueOf}</pre>
@@ -244,11 +244,11 @@ describe('RippleDate', () => {
 
 	it('handles multiple get methods reacting to same setTime change', () => {
 		component DateTest() {
-			let date = #ripple.date(2025, 0, 1, 10, 30, 15);
-			let year = #ripple.track(() => date.getFullYear());
-			let month = #ripple.track(() => date.getMonth());
-			let day = #ripple.track(() => date.getDate());
-			let hours = #ripple.track(() => date.getHours());
+			let date = RippleDate(2025, 0, 1, 10, 30, 15);
+			let year = track(() => date.getFullYear());
+			let month = track(() => date.getMonth());
+			let day = track(() => date.getDate());
+			let hours = track(() => date.getHours());
 
 			<button onClick={() => date.setTime(new Date(2026, 5, 15, 14, 45, 30).getTime())}>
 				{'Change All'}
@@ -292,15 +292,15 @@ describe('RippleDate', () => {
 
 	it('handles constructor with different parameter combinations', () => {
 		component DateTest() {
-			let dateNow = #ripple.date();
-			let dateFromString = #ripple.date('2025-01-01');
-			let dateFromNumbers = #ripple.date(2025, 0, 1);
-			let dateFromTimestamp = #ripple.date(1735689600000);
+			let dateNow = RippleDate();
+			let dateFromString = RippleDate('2025-01-01');
+			let dateFromNumbers = RippleDate(2025, 0, 1);
+			let dateFromTimestamp = RippleDate(1735689600000);
 
-			let nowYear = #ripple.track(() => dateNow.getFullYear());
-			let stringYear = #ripple.track(() => dateFromString.getFullYear());
-			let numbersYear = #ripple.track(() => dateFromNumbers.getFullYear());
-			let timestampYear = #ripple.track(() => dateFromTimestamp.getFullYear());
+			let nowYear = track(() => dateNow.getFullYear());
+			let stringYear = track(() => dateFromString.getFullYear());
+			let numbersYear = track(() => dateFromNumbers.getFullYear());
+			let timestampYear = track(() => dateFromTimestamp.getFullYear());
 
 			<div>
 				{'Now: '}
@@ -341,9 +341,9 @@ describe('RippleDate', () => {
 
 	it('handles get methods with arguments non-memoized', () => {
 		component DateTest() {
-			let date = #ripple.date();
-			let localeDateString = #ripple.track(() => date.toLocaleDateString('en-US'));
-			let localeTimeString = #ripple.track(() => date.toLocaleTimeString('en-US'));
+			let date = RippleDate();
+			let localeDateString = track(() => date.toLocaleDateString('en-US'));
+			let localeTimeString = track(() => date.toLocaleTimeString('en-US'));
 
 			<button onClick={() => date.setFullYear(date.getFullYear() + 1)}>{'Next Year'}</button>
 			<div>