ripple 0.2.183 → 0.2.185

package/src/runtime/internal/server/types.d.ts

@@ -1,21 +1,29 @@
 import type { Context } from './context.js';
 
 export type Component = {
-  c: null | Map<Context<any>, any>;
-  p: null | Component;
+	c: null | Map<Context<any>, any>;
+	p: null | Component;
 };
 
+export type Dependency = {
+	c: number;
+	t: Tracked | Derived;
+	n: null | Dependency;
+};
 
 export type Derived = {
-  a: { get?: Function, set?: Function };
-  co: null | Component;
-  f: number;
-  fn: Function;
-  v: any;
+	a: { get?: Function; set?: Function };
+	c: number;
+	co: null | Component;
+	d: null | Dependency;
+	f: number;
+	fn: Function;
+	v: any;
 };
 
 export type Tracked = {
-  a: { get?: Function, set?: Function };
-  f: number;
-  v: any;
-};
+	a: { get?: Function; set?: Function };
+	c: number;
+	f: number;
+	v: any;
+};

package/tests/client/switch.test.ripple

@@ -5,8 +5,8 @@ describe('switch statements', () => {
 		component App() {
 			let value = track('b');
 
-			<button onClick={() => @value = 'c'}>{'Change to C'}</button>
-			<button onClick={() => @value = 'a'}>{'Change to A'}</button>
+			<button onClick={() => (@value = 'c')}>{'Change to C'}</button>
+			<button onClick={() => (@value = 'a')}>{'Change to A'}</button>
 
 			switch (@value) {
 				case 'a':
@@ -24,15 +24,16 @@ describe('switch statements', () => {
 		}
 
 		render(App);
-		expect(container.textContent).toBe('Change to CChange to ACase B');
+		expect(container.querySelector('div').textContent).toBe('Case B');
 
-		container.querySelectorAll('button')[0].click(); // Change to C
+		container.querySelectorAll('button')[0].click();
 		flushSync();
-		expect(container.textContent).toBe('Change to CChange to ACase C');
 
-		container.querySelectorAll('button')[1].click(); // Change to A
+		expect(container.querySelector('div').textContent).toBe('Case C');
+		container.querySelectorAll('button')[1].click();
 		flushSync();
-		expect(container.textContent).toBe('Change to CChange to ACase A');
+
+		expect(container.querySelector('div').textContent).toBe('Case A');
 	});
 
 	it('renders switch with reactive discriminant', () => {
@@ -54,22 +55,24 @@ describe('switch statements', () => {
 		}
 
 		render(App);
-		expect(container.textContent).toBe('IncrementCount is 1');
+		expect(container.querySelector('div').textContent).toBe('Count is 1');
 
 		container.querySelector('button').click();
 		flushSync();
-		expect(container.textContent).toBe('IncrementCount is 2');
+
+		expect(container.querySelector('div').textContent).toBe('Count is 2');
 
 		container.querySelector('button').click();
 		flushSync();
-		expect(container.textContent).toBe('IncrementCount is other');
+
+		expect(container.querySelector('div').textContent).toBe('Count is other');
 	});
 
 	it('renders switch with default clause only', () => {
 		component App() {
 			let value = track('x');
 
-			<button onClick={() => @value = 'y'}>{'Change Value'}</button>
+			<button onClick={() => (@value = 'y')}>{'Change Value'}</button>
 
 			switch (@value) {
 				default:
@@ -78,11 +81,54 @@ describe('switch statements', () => {
 		}
 
 		render(App);
-		expect(container.textContent).toBe('Change ValueDefault for x');
+		expect(container.querySelector('div').textContent).toBe('Default for x');
 
 		container.querySelector('button').click();
 		flushSync();
-		expect(container.textContent).toBe('Change ValueDefault for y');
+
+		expect(container.querySelector('div').textContent).toBe('Default for y');
+	});
+
+	it('renders switch using fallthrough without recreating DOM unnecessarily', () => {
+		component App() {
+			let value = track('a');
+
+			<button onClick={() => (@value = 'b')}>{'Change to B'}</button>
+			<button onClick={() => (@value = 'c')}>{'Change to C'}</button>
+
+			switch (@value) {
+				case 'a':
+					<div>{'Case A'}</div>
+					break;
+				case 'b':
+				case 'c':
+					<div>{'Case B or C'}</div>
+					break;
+				default:
+					<div>{'Default Case'}</div>
+			}
+		}
+
+		render(App);
+		const [buttonB, buttonC] = container.querySelectorAll('button');
+
+		expect(container.querySelector('div').textContent).toContain('Case A');
+
+		buttonB.click();
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('Case B or C');
+
+		buttonC.click();
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('Case B or C');
+
+		container.querySelector('div').textContent = 'DOM check';
+		buttonB.click();
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('DOM check');
 	});
 
 	it('renders switch with template content and JS logic', () => {
@@ -90,9 +136,9 @@ describe('switch statements', () => {
 			let status = track('active');
 			let message = track('');
 
-			<button onClick={() => @status = 'pending'}>{'Pending'}</button>
-			<button onClick={() => @status = 'completed'}>{'Completed'}</button>
-			<button onClick={() => @status = 'error'}>{'Error'}</button>
+			<button onClick={() => (@status = 'pending')}>{'Pending'}</button>
+			<button onClick={() => (@status = 'completed')}>{'Completed'}</button>
+			<button onClick={() => (@status = 'error')}>{'Error'}</button>
 
 			switch (@status) {
 				case 'active':
@@ -114,20 +160,24 @@ describe('switch statements', () => {
 		}
 
 		render(App);
-		expect(container.textContent).toBe('PendingCompletedErrorStatus: Currently active.');
+		const [buttonPending, buttonCompleted, buttonError] = container.querySelectorAll('button');
+		expect(container.querySelector('div').textContent).toBe('Status: Currently active.');
 
-		container.querySelectorAll('button')[0].click(); // Pending
+		buttonPending.click();
 		flushSync();
-		expect(container.textContent).toBe('PendingCompletedErrorStatus: Waiting for completion.');
 
-		container.querySelectorAll('button')[1].click(); // Completed
+		expect(container.querySelector('div').textContent).toBe('Status: Waiting for completion.');
+
+		buttonCompleted.click();
 		flushSync();
-		expect(container.textContent).toBe('PendingCompletedErrorStatus: Task finished!');
+
+		expect(container.querySelector('div').textContent).toBe('Status: Task finished!');
 		expect(container.querySelector('.success')).toBeTruthy();
 
-		container.querySelectorAll('button')[2].click(); // Error
+		buttonError.click();
 		flushSync();
-		expect(container.textContent).toBe('PendingCompletedErrorStatus: An error occurred.');
+
+		expect(container.querySelector('div').textContent).toBe('Status: An error occurred.');
 		expect(container.querySelector('.error')).toBeTruthy();
 	});
 });

package/tests/server/basic.test.ripple

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { render } from 'ripple/server';
+import { track } from 'ripple';
 
 describe('basic client', () => {
 	it('render static text', async () => {
@@ -12,4 +13,122 @@ describe('basic client', () => {
 		expect(head).toBe('');
 		expect(body).toBe('<div>Hello World</div>');
 	});
+
+	it('renders tracked state updates', async () => {
+		component Counter() {
+			const count = track(0);
+
+			@count++;
+			@count = @count + 5;
+
+			<div>{@count}</div>
+		}
+
+		const { body } = await render(Counter);
+
+		expect(body).toBe('<div>6</div>');
+	});
+
+	it('renders dynamic component with tracked props', async () => {
+		component Child({ count, ...rest }) {
+			<div {...rest}>{'Child Component'}</div>
+			<div>{@count}</div>
+		}
+
+		component Parent() {
+			const count = track(10);
+			let Dynamic = track(() => Child);
+
+			<@Dynamic {count} class={{ test: true }} />
+		}
+
+		const { body } = await render(Parent);
+
+		expect(body).toBe('<div class="test">Child Component</div><div>10</div>');
+	});
+
+	it('renders tracked object properties', async () => {
+		component ObjCounter() {
+			const obj = { count: track(2) };
+
+			obj.@count += 3;
+			obj.@count = obj.@count + 1;
+
+			<div>{obj.@count}</div>
+		}
+
+		const { body } = await render(ObjCounter);
+
+		expect(body).toBe('<div>6</div>');
+	});
+
+	it('renders spread props with tracked values', async () => {
+		component SpreadProps() {
+			const id = track('unique-id');
+			const isActive = track(true);
+			const styles = track({ color: 'red', fontSize: '16px' });
+
+			<div {...{ id: @id, class: { active: @isActive }, style: @styles }}>{'Spread Props'}</div>
+		}
+
+		const { body } = await render(SpreadProps);
+
+		expect(body).toBe(
+			'<div id="unique-id" class="active" style="color: red; font-size: 16px;">Spread Props</div>',
+		);
+	});
+
+	it('handles AssignExpressions with tracked values or properties correctly', async () => {
+		component Assignments() {
+			const count = track(0);
+			const obj = { value: track(5) };
+
+			@count += 10;
+			obj.@value *= 2;
+
+			<div>{@count}</div>
+			<div>{obj.@value}</div>
+		}
+
+		const { body } = await render(Assignments);
+
+		expect(body).toBe('<div>10</div><div>10</div>');
+	});
+
+	it(`handles derived changes via tracked dependencies' changes`, async () => {
+		component Derived() {
+			let base = track(5);
+			let multiplier = track(3);
+			const derived = track(() => @base * @multiplier);
+
+			<div>{@derived}</div>
+
+			@base += 2;
+
+			<div>{@derived}</div>
+		}
+
+		const { body } = await render(Derived);
+
+		expect(body).toBe('<div>15</div><div>21</div>');
+	});
+
+	it(`handles derived changes based on another derived's dependencies' changes`, async () => {
+		component NestedDerived() {
+			let a = track(2);
+			let b = track(3);
+			const sum = track(() => @a + @b);
+			const product = track(() => @sum * 2);
+
+			<div>{@product}</div>
+
+			@a = 4;
+
+			<div>{@product}</div>
+		}
+
+		const { body } = await render(NestedDerived);
+
+		expect(body).toBe('<div>10</div><div>14</div>');
+	});
 });

package/tests/server/composite.test.ripple

@@ -76,7 +76,7 @@ describe('generics', () => {
 
 			// 14. Generic with constraint + default
 			type Extractor<T extends { id: number } = { id: number }> = (v: T) => number;
-			const m: Extractor = (v) => v.id;
+			const m: Extractor<{ id: number }> = (v) => v.id;
 
 			// 15. Generic in angle after "new" + trailing call
 			class Wrapper<T> {

package/tests/server/context.test.ripple

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'ripple/server';
+import { Context } from 'ripple';
+
+describe('Context API', () => {
+	it('handles context override in nested components', async () => {
+		const MessageContext = new Context('default');
+
+		component Inner() {
+			const msg = MessageContext.get();
+			<span>{msg}</span>
+		}
+
+		component Middle() {
+			MessageContext.set('middle');
+			<div>
+				<Inner />
+			</div>
+		}
+
+		component Outer() {
+			MessageContext.set('outer');
+			<Middle />
+			<Inner />
+		}
+
+		const { body } = await render(Outer);
+
+		expect(body).toBe('<div><span>middle</span></div><span>outer</span>');
+	});
+});

package/tests/server/switch.test.ripple

@@ -24,4 +24,25 @@ describe('SSR: switch statements', () => {
 		const { body } = await render(App);
 		expect(body).toBe('<div>Case B</div>');
 	});
+
+	it('renders switch using fallthrough case', async () => {
+		component App() {
+			let value = 'b';
+
+			switch (value) {
+				case 'a':
+					<div>{'Case A'}</div>
+					break;
+				case 'b':
+				case 'c':
+					<div>{'Case B or C'}</div>
+					break;
+				default:
+					<div>{'Default Case'}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>Case B or C</div>');
+	});
 });