ripple 0.2.108 → 0.2.110

package/tests/client/for.test.ripple

@@ -145,12 +145,12 @@ describe('for statements', () => {
 		expect(container).toMatchSnapshot();
 	});
 
-	it('handles reversing an array manually', () => {
+	it('handles updating with new objects with same key', () => {
 		component App() {
 			let items = track([
-				#{ id: 1, text: 'Item 1' },
-				#{ id: 2, text: 'Item 2' },
-				#{ id: 3, text: 'Item 3' },
+				{ id: 1, text: 'Item 1' },
+				{ id: 2, text: 'Item 2' },
+				{ id: 3, text: 'Item 3' },
 			]);
 
 			for (let item of @items; index i; key item.id) {
@@ -163,9 +163,9 @@ describe('for statements', () => {
 				@items[2].id = 1;
 
 				@items = [
-					@items[0],
-					@items[1],
-					@items[2],
+					{...@items[0], text: 'Item 1!'},
+					{...@items[1], text: 'Item 2!'},
+					{...@items[2], text: 'Item 3!'},
 				];
 			}}>{"Reverse"}</button>
 		}

package/tests/client/switch.test.ripple

@@ -0,0 +1,152 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, track } from 'ripple';
+
+describe('switch statements', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
+
+	it('renders simple switch with literal cases', () => {
+		component App() {
+			let value = track('b');
+
+			<button onClick={() => @value = 'c'}>{'Change to C'}</button>
+			<button onClick={() => @value = 'a'}>{'Change to A'}</button>
+
+			switch (@value) {
+				case 'a':
+					<div>{'Case A'}</div>
+					break;
+				case 'b':
+					<div>{'Case B'}</div>
+					break;
+				case 'c':
+					<div>{'Case C'}</div>
+					break;
+				default:
+					<div>{'Default Case'}</div>
+			}
+		}
+
+		render(App);
+		expect(container.textContent).toBe('Change to CChange to ACase B');
+
+		container.querySelectorAll('button')[0].click(); // Change to C
+		flushSync();
+		expect(container.textContent).toBe('Change to CChange to ACase C');
+
+		container.querySelectorAll('button')[1].click(); // Change to A
+		flushSync();
+		expect(container.textContent).toBe('Change to CChange to ACase A');
+	});
+
+	it('renders switch with reactive discriminant', () => {
+		component App() {
+			let count = track(1);
+
+			<button onClick={() => @count++}>{'Increment'}</button>
+
+			switch (@count) {
+				case 1:
+					<div>{'Count is 1'}</div>
+					break;
+				case 2:
+					<div>{'Count is 2'}</div>
+					break;
+				default:
+					<div>{'Count is other'}</div>
+			}
+		}
+
+		render(App);
+		expect(container.textContent).toBe('IncrementCount is 1');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.textContent).toBe('IncrementCount is 2');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.textContent).toBe('IncrementCount is other');
+	});
+
+	it('renders switch with default clause only', () => {
+		component App() {
+			let value = track('x');
+
+			<button onClick={() => @value = 'y'}>{'Change Value'}</button>
+
+			switch (@value) {
+				default:
+					<div>{'Default for ' + @value}</div>
+			}
+		}
+
+		render(App);
+		expect(container.textContent).toBe('Change ValueDefault for x');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.textContent).toBe('Change ValueDefault for y');
+	});
+
+	it('renders switch with template content and JS logic', () => {
+		component App() {
+			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>
+
+			switch (@status) {
+				case 'active':
+					message = 'Currently active.';
+					<div>{'Status: ' + @message}</div>
+					break;
+				case 'pending':
+					message = 'Waiting for completion.';
+					<div>{'Status: ' + @message}</div>
+					break;
+				case 'completed':
+					message = 'Task finished!';
+					<div class="success">{'Status: ' + @message}</div>
+					break;
+				default:
+					message = 'An error occurred.';
+					<div class="error">{'Status: ' + @message}</div>
+			}
+		}
+
+		render(App);
+		expect(container.textContent).toBe('PendingCompletedErrorStatus: Currently active.');
+
+		container.querySelectorAll('button')[0].click(); // Pending
+		flushSync();
+		expect(container.textContent).toBe('PendingCompletedErrorStatus: Waiting for completion.');
+
+		container.querySelectorAll('button')[1].click(); // Completed
+		flushSync();
+		expect(container.textContent).toBe('PendingCompletedErrorStatus: Task finished!');
+		expect(container.querySelector('.success')).toBeTruthy();
+
+		container.querySelectorAll('button')[2].click(); // Error
+		flushSync();
+		expect(container.textContent).toBe('PendingCompletedErrorStatus: An error occurred.');
+		expect(container.querySelector('.error')).toBeTruthy();
+	});
+});

package/tests/server/__snapshots__/compiler.test.ripple.snap

@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler success tests > compiles TSInstantiationExpression 1`] = `
+"import * as _$_ from 'ripple/internal/client';
+
+function makeBox(value) {
+	return { value };
+}
+
+const makeStringBox = (makeBox);
+const stringBox = makeStringBox('abc');
+const ErrorMap = (Map);
+const errorMap = new ErrorMap();"
+`;
+
+exports[`compiler success tests > compiles imported component with conditional async in SSR 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+import { ChildComponent } from './Child.ripple';
+
+export async function App(__output) {
+	return _$_.async(async () => {
+		_$_.push_component();
+		__output.push('<div');
+		__output.push('>');
+
+		if (ChildComponent.async) {
+			await ChildComponent(__output, { message: "hello" });
+		} else {
+			ChildComponent(__output, { message: "hello" });
+		}
+
+		__output.push('</div>');
+		_$_.pop_component();
+	});
+}"
+`;

package/tests/server/compiler.test.ripple

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { compile } from 'ripple/compiler'
+
+describe('compiler success tests', () => {
+
+
+	it('compiles TSInstantiationExpression', () => {
+		const source =
+`function makeBox<T>(value: T) {
+	return { value };
+}
+const makeStringBox = makeBox<string>;
+const stringBox = makeStringBox('abc');
+const ErrorMap = Map<string, Error>;
+const errorMap = new ErrorMap();`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+
+		expect(result.js.code).toMatchSnapshot();
+	});
+
+	it('compiles imported component with conditional async in SSR', () => {
+		const source =
+`import { ChildComponent } from './Child.ripple';
+
+export component App() {
+	<div>
+		<ChildComponent message="hello" />
+	</div>
+}`;
+
+		const result = compile(source, 'test.ripple', { mode: 'server' });
+
+		// Should use if-statement instead of ternary to avoid parser issues
+		expect(result.js.code).toContain('if (ChildComponent.async)');
+		expect(result.js.code).toContain('await ChildComponent');
+		expect(result.js.code).toMatchSnapshot();
+	});
+});

package/tests/server/switch.test.ripple

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'ripple/server';
+
+describe('SSR: switch statements', () => {
+	it('renders simple switch with literal cases', async () => {
+		component App() {
+			let value = 'b';
+
+			switch (value) {
+				case 'a':
+					<div>{'Case A'}</div>
+					break;
+				case 'b':
+					<div>{'Case B'}</div>
+					break;
+				case 'c':
+					<div>{'Case C'}</div>
+					break;
+				default:
+					<div>{'Default Case'}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>Case B</div>');
+	});
+});