ripple 0.3.3 → 0.3.5

package/tests/server/dynamic-elements.test.ripple

@@ -1,10 +1,10 @@
 import type { PropsWithExtras } from 'ripple';
-import { createRefKey } from 'ripple';
+import { createRefKey, track, trackSplit } from 'ripple';
 
 describe('server dynamic DOM elements', () => {
 	it('renders static dynamic element', async () => {
 		component App() {
-			let tag = #ripple.track('div');
+			let tag = track('div');
 
 			<@tag>{'Hello World'}</@tag>
 		}
@@ -18,7 +18,7 @@ describe('server dynamic DOM elements', () => {
 	// They can be ignored for now. But we'll fix them via jsx() vs <jsx>
 	it('renders static dynamic element from a plain object with a tracked property', async () => {
 		component App() {
-			let obj = { tag: #ripple.track('div') };
+			let obj = { tag: track('div') };
 
 			<obj.@tag>{'Hello World'}</obj.@tag>
 		}
@@ -30,7 +30,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('renders static dynamic element from a tracked object with a tracked property', async () => {
 		component App() {
-			let obj = #ripple.track({ tag: #ripple.track('div') });
+			let obj = track({ tag: track('div') });
 
 			<@obj.@tag>{'Hello World'}</@obj.@tag>
 		}
@@ -44,7 +44,7 @@ describe('server dynamic DOM elements', () => {
 		'renders static dynamic element from a tracked object with a computed tracked property',
 		async () => {
 			component App() {
-				let obj = #ripple.track({ tag: #ripple.track('div') });
+				let obj = track({ tag: track('div') });
 
 				<@obj.@['tag']>{'Hello World'}</@obj.@['tag']>
 			}
@@ -57,7 +57,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('renders self-closing dynamic element', async () => {
 		component App() {
-			let tag = #ripple.track('input');
+			let tag = track('input');
 
 			<@tag type="text" value="test" />
 		}
@@ -69,8 +69,8 @@ describe('server dynamic DOM elements', () => {
 
 	it('handles dynamic element with attributes', async () => {
 		component App() {
-			let tag = #ripple.track('div');
-			let className = #ripple.track('test-class');
+			let tag = track('div');
+			let className = track('test-class');
 
 			<@tag class={@className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
 		}
@@ -87,8 +87,8 @@ describe('server dynamic DOM elements', () => {
 
 	it('handles nested dynamic elements', async () => {
 		component App() {
-			let outerTag = #ripple.track('div');
-			let innerTag = #ripple.track('span');
+			let outerTag = track('div');
+			let innerTag = track('span');
 
 			<@outerTag class="outer">
 				<@innerTag class="inner">{'Nested content'}</@innerTag>
@@ -108,8 +108,8 @@ describe('server dynamic DOM elements', () => {
 
 	it('handles dynamic element with class object', async () => {
 		component App() {
-			let tag = #ripple.track('div');
-			let active = #ripple.track(true);
+			let tag = track('div');
+			let active = track(true);
 
 			<@tag class={{ active: @active, 'dynamic-element': true }}>
 				{'Element with class object'}
@@ -127,7 +127,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('handles dynamic element with style object', async () => {
 		component App() {
-			let tag = #ripple.track('span');
+			let tag = track('span');
 
 			<@tag
 				style={{
@@ -152,7 +152,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('handles dynamic element with spread attributes', async () => {
 		component App() {
-			let tag = #ripple.track('section');
+			let tag = track('section');
 			const attrs = {
 				id: 'spread-section',
 				'data-testid': 'spread-test',
@@ -176,7 +176,7 @@ describe('server dynamic DOM elements', () => {
 		let capturedElement: HTMLElement | null = null;
 
 		component App() {
-			let tag = #ripple.track('article');
+			let tag = track('article');
 
 			<@tag
 				{ref (node: HTMLElement) => {
@@ -202,7 +202,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('handles dynamic element with createRefKey in spread', async () => {
 		component App() {
-			let tag = #ripple.track('header');
+			let tag = track('header');
 
 			function elementRef(node: HTMLElement) {
 				// Set an attribute on the element to prove ref was called
@@ -233,7 +233,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('applies scoped CSS to dynamic elements', async () => {
 		component App() {
-			let tag = #ripple.track('div');
+			let tag = track('div');
 
 			<@tag class="test-class">{'Dynamic element'}</@tag>
 
@@ -261,8 +261,8 @@ describe('server dynamic DOM elements', () => {
 			class: string;
 			id: string;
 		}>) {
-			const tag = #ripple.track('button');
-			const [rest] = #ripple.trackSplit(props, []);
+			const tag = track('button');
+			const [rest] = trackSplit(props, []);
 			<@tag {...@rest}>{@rest.class}</@tag>
 
 			<style>
@@ -276,7 +276,7 @@ describe('server dynamic DOM elements', () => {
 		}
 
 		component App() {
-			const count = #ripple.track(0);
+			const count = track(0);
 			<DynamicButton class={@count % 2 ? 'even' : 'odd'} id={@count % 2 ? 'even' : 'odd'} />
 		}
 
@@ -298,7 +298,7 @@ describe('server dynamic DOM elements', () => {
 
 	it('adds scoping class to dynamic elements', async () => {
 		component App() {
-			let tag = #ripple.track('div');
+			let tag = track('div');
 
 			<@tag class="scoped">
 				<p>{'Scoped dynamic element'}</p>
@@ -327,7 +327,7 @@ describe('server dynamic DOM elements', () => {
 			// NOTE: We always add the class scoping hash if there is css
 			// but the tag selector will be marked as unused if it's not explicitly seen in the template.
 			component App() {
-				let tag = #ripple.track('div');
+				let tag = track('div');
 
 				<@tag class="scoped">
 					<p>{'Scoped dynamic element'}</p>
@@ -365,7 +365,7 @@ describe('server dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let tag = #ripple.track('div');
+			let tag = track('div');
 
 			<@tag class="scoped">
 				<p>{'Scoped dynamic element'}</p>
@@ -412,7 +412,7 @@ describe('server dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let tag = #ripple.track(() => Child);
+			let tag = track(() => Child);
 
 			<@tag />
 

package/tests/server/head.test.ripple

@@ -1,3 +1,5 @@
+import { track } from 'ripple';
+
 describe('head elements', () => {
 	it('renders static title element', async () => {
 		component App() {
@@ -17,7 +19,7 @@ describe('head elements', () => {
 
 	it('renders reactive title element', async () => {
 		component App() {
-			let title = #ripple.track('Initial Title');
+			let title = track('Initial Title');
 
 			<head>
 				<title>{@title}</title>
@@ -36,7 +38,7 @@ describe('head elements', () => {
 
 	it('renders title with template literal', async () => {
 		component App() {
-			let name = #ripple.track('World');
+			let name = track('World');
 
 			<head>
 				<title>{`Hello ${@name}!`}</title>
@@ -51,7 +53,7 @@ describe('head elements', () => {
 
 	it('renders title with computed value', async () => {
 		component App() {
-			let count = #ripple.track(0);
+			let count = track(0);
 			let prefix = 'Count: ';
 
 			<head>
@@ -84,8 +86,8 @@ describe('head elements', () => {
 
 	it('renders title with conditional content', async () => {
 		component App() {
-			let showPrefix = #ripple.track(true);
-			let title = #ripple.track('Main Page');
+			let showPrefix = track(true);
+			let title = track('Main Page');
 
 			<head>
 				<title>{@showPrefix ? 'App - ' + @title : @title}</title>

package/tests/server/lazy-destructuring.test.ripple

@@ -0,0 +1,103 @@
+describe('lazy destructuring', () => {
+	it('lazily accesses object properties', async () => {
+		component Inner(&{ a, b }: { a: number; b: string }) {
+			<pre>{`${a}-${b}`}</pre>
+		}
+
+		component Test() {
+			<Inner a={1} b="hello" />
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>1-hello</pre>');
+	});
+
+	it('supports default values in lazy object destructuring', async () => {
+		component Test() {
+			const obj = { a: 5 };
+			const &{ a, b = 99 } = obj;
+			<pre>{`${a}-${b}`}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>5-99</pre>');
+	});
+
+	it('supports let lazy destructuring with assignment writeback', async () => {
+		component Test() {
+			const obj = { a: 1, b: 2 };
+			let &{ a, b } = obj;
+			a = 10;
+			b = 20;
+			<pre>{`${obj.a}-${obj.b}`}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>10-20</pre>');
+	});
+
+	it('supports compound assignment operators on lazy bindings', async () => {
+		component Test() {
+			const obj = { a: 5, b: 10 };
+			let &{ a, b } = obj;
+			a += 3;
+			b *= 2;
+			<pre>{`${obj.a}-${obj.b}`}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>8-20</pre>');
+	});
+
+	it('supports update expressions on lazy bindings', async () => {
+		component Test() {
+			const obj = { count: 0 };
+			let &{ count } = obj;
+			count++;
+			count++;
+			count--;
+			<pre>{obj.count}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>1</pre>');
+	});
+
+	it('supports update expressions on lazy bindings with default values', async () => {
+		component Test() {
+			const obj: { count?: number } = {};
+			let &{ count = 0 } = obj;
+			count++;
+			count++;
+			<pre>{obj.count}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>2</pre>');
+	});
+
+	it('supports function params with lazy destructuring and default values', async () => {
+		component Test() {
+			function calc(&{ x, y = 100 }: { x: number; y?: number }) {
+				return x + y;
+			}
+			const a = calc({ x: 5, y: 10 });
+			const b = calc({ x: 5 });
+			<pre>{`${a}-${b}`}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>15-105</pre>');
+	});
+
+	it('supports member access on lazy destructured objects', async () => {
+		component Test() {
+			const obj = { user: { name: 'Alice', age: 30 } };
+			const &{ user } = obj;
+			<pre>{`${user.name}-${user.age}`}</pre>
+		}
+
+		const { body } = await render(Test);
+		expect(body).toBeHtml('<pre>Alice-30</pre>');
+	});
+});

package/tests/server/style-identifier.test.ripple

@@ -1,14 +1,15 @@
+import { track } from 'ripple';
 import { compile } from 'ripple/compiler';
 
-describe('#ripple.style identifier (server)', () => {
+describe('#style identifier (server)', () => {
 	describe('basic usage with components', () => {
-		it('passes scoped class to a child component via #ripple.style', async () => {
+		it('passes scoped class to a child component via #style', async () => {
 			component Child({ className }: { className: string }) {
 				<div class={className}>{'styled child'}</div>
 			}
 
 			component Parent() {
-				<Child className={#ripple.style.highlight} />
+				<Child className={#style.highlight} />
 
 				<style>
 					.highlight {
@@ -28,14 +29,14 @@ describe('#ripple.style identifier (server)', () => {
 			expect(classes.some((cls: string) => cls === 'highlight')).toBe(true);
 		});
 
-		it('passes multiple #ripple.style classes to a child component', async () => {
+		it('passes multiple #style classes to a child component', async () => {
 			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 {
@@ -67,13 +68,13 @@ describe('#ripple.style identifier (server)', () => {
 	});
 
 	describe('parent styling applied to child', () => {
-		it('allows parent to style child elements via #ripple.style prop', async () => {
+		it('allows parent to style child elements via #style prop', async () => {
 			component Button({ extraClass }: { extraClass?: string }) {
 				<button class={extraClass ?? ''}>{'Click me'}</button>
 			}
 
 			component App() {
-				<Button extraClass={#ripple.style.fancy} />
+				<Button extraClass={#style.fancy} />
 
 				<style>
 					.fancy {
@@ -92,7 +93,7 @@ describe('#ripple.style identifier (server)', () => {
 			expect(classes.some((cls: string) => cls === 'fancy')).toBe(true);
 		});
 
-		it('child can combine its own classes with parent #ripple.style class', async () => {
+		it('child can combine its own classes with parent #style class', async () => {
 			component Card({ className }: { className?: string }) {
 				<div class={['card-base', className ?? '']}>{'card content'}</div>
 
@@ -104,7 +105,7 @@ describe('#ripple.style identifier (server)', () => {
 			}
 
 			component App() {
-				<Card className={#ripple.style.themed} />
+				<Card className={#style.themed} />
 
 				<style>
 					.themed {
@@ -132,7 +133,7 @@ describe('#ripple.style identifier (server)', () => {
 
 				component App() {
 					<div class="parent">
-						<Child cls={#ripple.style.dual} />
+						<Child cls={#style.dual} />
 					</div>
 
 					<style>
@@ -157,15 +158,15 @@ describe('#ripple.style identifier (server)', () => {
 		);
 	});
 
-	it('passes scoped class to a dynamic child component via #ripple.style', async () => {
+	it('passes scoped class to a dynamic child component via #style', async () => {
 		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>
@@ -185,14 +186,92 @@ describe('#ripple.style identifier (server)', () => {
 		expect(classes.some((cls: string) => cls === 'text')).toBe(true);
 	});
 
+	it('preserves caller scoped hash through wrapper children', async () => {
+		component Wrapper({ children }) {
+			<div class="green">
+				{'Wrapper'}
+				<children />
+			</div>
+
+			<style>
+				.green {
+					color: green;
+				}
+			</style>
+		}
+
+		component Child() {
+			<div class="red">{'Child'}</div>
+
+			<style>
+				.red {
+					color: red;
+				}
+			</style>
+		}
+
+		component App() {
+			<Wrapper>
+				<Child />
+			</Wrapper>
+		}
+
+		const { body } = await render(App);
+		const { document } = parseHtml(body);
+		const wrapper = document.querySelector('.green');
+		const child = document.querySelector('.red');
+		const wrapper_scopes = Array.from(wrapper.classList).filter(
+			(name) => name.startsWith('ripple-'),
+		);
+		const child_scopes = Array.from(child.classList).filter((name) => name.startsWith('ripple-'));
+
+		expect(wrapper_scopes).toHaveLength(1);
+		expect(child_scopes).toHaveLength(1);
+
+		const wrapper_scope = wrapper_scopes[0];
+		const child_scope = child_scopes.find((name) => name !== wrapper_scope) || child_scopes[0];
+		expect(wrapper_scope).not.toBe(child_scope);
+	});
+
+	it('applies caller scoped hash to slotted children through dynamic components', async () => {
+		component Wrapper({ children }) {
+			<section>
+				<children />
+			</section>
+		}
+
+		component App() {
+			const DynamicWrapper = track(() => Wrapper);
+
+			<@DynamicWrapper>
+				<div class="green">{'Slotted child'}</div>
+			</@DynamicWrapper>
+
+			<style>
+				.green {
+					color: green;
+				}
+			</style>
+		}
+
+		const { body } = await render(App);
+		const { document } = parseHtml(body);
+		const slotted_child = document.querySelector('section > div.green');
+		const slotted_scopes = Array.from(slotted_child.classList).filter(
+			(name) => name.startsWith('ripple-'),
+		);
+
+		expect(slotted_scopes).toHaveLength(1);
+	});
+
 	describe('server compiler output', () => {
-		it('generates #ripple.style object with standalone classes', () => {
+		it('generates #style object with standalone classes', () => {
 			const source = `
 component Child({ cls }: { cls: string }) {
 	<div class={cls}>{'text'}</div>
 }
 export component App() {
-	<Child cls={#ripple.style.highlight} />
+	<Child cls={#style.highlight} />
 
 	<style>
 		.highlight {
@@ -213,7 +292,7 @@ export component App() {
 			}
 
 			component App() {
-				<Child cls={#ripple.style.styled} />
+				<Child cls={#style.styled} />
 
 				<style>
 					.styled {