ripple 0.2.115 → 0.2.118

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

@@ -0,0 +1,225 @@
+import { track, flushSync } from 'ripple';
+
+describe('basic client > components & composition', () => {
+	it('renders with component composition and children', () => {
+		component Card(props) {
+			<div class='card'>
+				<props.children />
+			</div>
+		}
+
+		component Basic() {
+			<Card>
+				component children() {
+					<p>{'Card content here'}</p>
+				}
+			</Card>
+		}
+
+		render(Basic);
+
+		const card = container.querySelector('.card');
+		const paragraph = card.querySelector('p');
+
+		expect(card).toBeTruthy();
+		expect(paragraph.textContent).toBe('Card content here');
+	});
+
+	it('renders with nested components and prop passing', () => {
+		component Button(props) {
+			<button class={props.variant} onClick={props.onClick}>
+				{props.label}
+			</button>
+		}
+
+		component Card(props) {
+			<div class='card'>
+				<h3>{props.title}</h3>
+				<p>{props.content}</p>
+				<Button variant='primary' label={props.buttonText} onClick={props.onAction} />
+			</div>
+		}
+
+		component Basic() {
+			let clicked = track(false);
+
+			<Card
+				title='Test Card'
+				content='This is a test card'
+				buttonText='Click me'
+				onAction={() => @clicked = true}
+			/>
+			<div class='status'>{@clicked ? 'Clicked' : 'Not clicked'}</div>
+		}
+
+		render(Basic);
+
+		const card = container.querySelector('.card');
+		const title = card.querySelector('h3');
+		const content = card.querySelector('p');
+		const button = card.querySelector('button');
+		const status = container.querySelector('.status');
+
+		expect(title.textContent).toBe('Test Card');
+		expect(content.textContent).toBe('This is a test card');
+		expect(button.textContent).toBe('Click me');
+		expect(button.className).toBe('primary');
+		expect(status.textContent).toBe('Not clicked');
+
+		button.click();
+		flushSync();
+
+		expect(status.textContent).toBe('Clicked');
+	});
+
+	it('renders with reactive component props', () => {
+		component ChildComponent(props) {
+			<div class='child-content'>{props.@text}</div>
+			<div class='child-count'>{props.@count}</div>
+		}
+
+		component Basic() {
+			let message = track('Hello');
+			let number = track(1);
+
+			<ChildComponent text={message} count={number} />
+			<button onClick={() => {
+				@message = @message === 'Hello' ? 'Goodbye' : 'Hello';
+				@number++;
+			}}>{'Update Props'}</button>
+		}
+
+		render(Basic);
+
+		const contentDiv = container.querySelector('.child-content');
+		const countDiv = container.querySelector('.child-count');
+		const button = container.querySelector('button');
+
+		expect(contentDiv.textContent).toBe('Hello');
+		expect(countDiv.textContent).toBe('1');
+
+		button.click();
+		flushSync();
+
+		expect(contentDiv.textContent).toBe('Goodbye');
+		expect(countDiv.textContent).toBe('2');
+
+		button.click();
+		flushSync();
+
+		expect(contentDiv.textContent).toBe('Hello');
+		expect(countDiv.textContent).toBe('3');
+	});
+
+	it('it retains this context with bracketed prop functions and keeps original chaining', () => {
+		component App() {
+			const SYMBOL_PROP = Symbol();
+			let hasError = track(false);
+			const obj = {
+				count: track(0),
+				increment() {
+					this.@count++;
+				},
+				[SYMBOL_PROP]() {
+					this.@count++;
+				},
+				arr: [() => obj.@count++, () => obj.@count--],
+			};
+
+			const obj2 = null;
+
+			<button onClick={() => obj['increment']()}>{'Increment'}</button>
+			<button onClick={() => obj[SYMBOL_PROP]()}>{'Increment'}</button>
+			<button
+				onClick={() => {
+					@hasError = false;
+					try {
+						obj['nonexistent']();
+					} catch {
+						@hasError = true;
+					}
+				}}
+			>{'Nonexistent'}</button>
+			<button
+				onClick={() => {
+					@hasError = false;
+					try {
+						obj['nonexistent']?.();
+					} catch {
+						@hasError = true;
+					}
+				}}
+			>{'Nonexistent chaining'}</button>
+			<button
+				onClick={() => {
+					@hasError = false;
+					try {
+						obj2['nonexistent']();
+					} catch {
+						@hasError = true;
+					}
+				}}
+			>{'Object null'}</button>
+			<button
+				onClick={() => {
+					@hasError = false;
+					try {
+						obj2?.['nonexistent']?.();
+					} catch {
+						@hasError = true;
+					}
+				}}
+			>{'Object null chained'}</button>
+			<button onClick={() => obj.arr[obj.arr.length - 1]()}>{'BinaryExpression prop'}</button>
+
+			<span>{obj.@count}</span>
+			<span>{@hasError}</span>
+		}
+
+		render(App);
+
+		const button1 = container.querySelectorAll('button')[0];
+		const button2 = container.querySelectorAll('button')[1];
+		const button3 = container.querySelectorAll('button')[2];
+		const button4 = container.querySelectorAll('button')[3];
+		const button5 = container.querySelectorAll('button')[4];
+		const button6 = container.querySelectorAll('button')[5];
+		const button7 = container.querySelectorAll('button')[6];
+
+		const countSpan = container.querySelectorAll('span')[0];
+		const errorSpan = container.querySelectorAll('span')[1];
+
+		expect(countSpan.textContent).toBe('0');
+		expect(errorSpan.textContent).toBe('false');
+
+		button1.click();
+		flushSync();
+
+		expect(countSpan.textContent).toBe('1');
+
+		button2.click();
+		flushSync();
+
+		expect(countSpan.textContent).toBe('2');
+
+		button3.click();
+		flushSync();
+		expect(errorSpan.textContent).toBe('true');
+
+		button4.click();
+		flushSync();
+		expect(errorSpan.textContent).toBe('false');
+
+		button5.click();
+		flushSync();
+		expect(errorSpan.textContent).toBe('true');
+
+		button6.click();
+		flushSync();
+		expect(errorSpan.textContent).toBe('false');
+
+		button7.click();
+		flushSync();
+		expect(countSpan.textContent).toBe('1');
+	});
+});

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

@@ -0,0 +1,126 @@
+import { track, flushSync, untrack } from 'ripple';
+import { compile } from 'ripple/compiler';
+
+describe('basic client > errors', () => {
+	it('renders with error handling simulation', () => {
+		component Basic() {
+			let hasError = track(false);
+			let errorMessage = track('');
+
+			const triggerError = () => {
+				try {
+					throw new Error('Test error');
+				} catch (e) {
+					@hasError = true;
+					@errorMessage = (e as Error).message;
+				}
+			};
+
+			<div>
+				<button onClick={triggerError}>{'Trigger Error'}</button>
+				if (@hasError) {
+					<div class='error'>{'Error caught: ' + @errorMessage}</div>
+				} else {
+					<div class='success'>{'No error'}</div>
+				}
+			</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const successDiv = container.querySelector('.success');
+
+		expect(successDiv).toBeTruthy();
+		expect(successDiv.textContent).toBe('No error');
+
+		button.click();
+		flushSync();
+
+		const errorDiv = container.querySelector('.error');
+		expect(errorDiv).toBeTruthy();
+		expect(errorDiv.textContent).toBe('Error caught: Test error');
+	});
+
+	it('should throw error for unclosed tag', () => {
+		const malformedCode = `export default component Example() {
+	<div></span>
+}`;
+		expect(() => {
+			compile(malformedCode, 'test.ripple');
+		}).toThrow('Expected closing tag to match opening tag');
+	});
+
+	it('should throw error for completely unclosed tag', () => {
+		const malformedCode = `export default component Example() {
+	<div>content
+}`;
+
+		expect(() => {
+			compile(malformedCode, 'test.ripple');
+		}).toThrow('Unclosed tag');
+	});
+
+	it('errors on mutating tracked value inside computed track() evaluation', () => {
+		component Basic() {
+			let count = track(0);
+
+			const doubled = track(() => {
+				try {
+					@count *= 2;
+				} catch (e) {
+					error = (e as Error).message;
+				}
+			});
+
+			<p>{@doubled}</p>
+		}
+
+		render(Basic);
+
+		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
+	});
+
+	it('errors on mutating tracked value inside untrack() in computed track() evaluation', () => {
+		component Basic() {
+			let count = track(0);
+
+			const doubled = track(() => {
+				try {
+					untrack(() => {
+						@count *= 2;
+					});
+				} catch (e) {
+					error = (e as Error).message;
+				}
+			});
+
+			<p>{@doubled}</p>
+		}
+
+		render(Basic);
+
+		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
+	});
+
+	it("errors on mutating a tracked variable in track() getter", () => {
+		component Basic() {
+			let count = track(0);
+
+			const doubled = track(0, (value) => {
+				try {
+					@count += 1;
+				} catch (e) {
+					error = (e as Error).message;
+				}
+				return value;
+			});
+
+			<p>{@doubled}</p>
+		}
+
+		render(Basic);
+
+		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
+	});
+});

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

@@ -0,0 +1,222 @@
+import { describe, it, expect } from 'vitest';
+import { track, flushSync } from 'ripple';
+
+describe('basic client > events', () => {
+	it('renders with different event types', () => {
+		component Basic() {
+			let focusCount = track(0);
+			let clickCount = track(0);
+
+			<button
+				onFocus={() => { @focusCount++ }}
+				onClick={() => { @clickCount++ }}
+			>{'Test Button'}</button>
+			<div class='focus-count'>{@focusCount}</div>
+			<div class='click-count'>{@clickCount}</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const focusDiv = container.querySelector('.focus-count');
+		const clickDiv = container.querySelector('.click-count');
+
+		button.dispatchEvent(new Event('focus'));
+		flushSync();
+		expect(focusDiv.textContent).toBe('1');
+
+		button.click();
+		flushSync();
+		expect(clickDiv.textContent).toBe('1');
+	});
+
+	it('renders with capture events', () => {
+		component Basic() {
+			let captureClicks = track(0);
+			let bubbleClicks = track(0);
+
+			<div onClickCapture={() => { @captureClicks++ }}>
+				<button onClick={() => { @bubbleClicks++ }}>{'Click me'}</button>
+				<div class='capture-count'>{@captureClicks}</div>
+				<div class='bubble-count'>{@bubbleClicks}</div>
+			</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const captureDiv = container.querySelector('.capture-count');
+		const bubbleDiv = container.querySelector('.bubble-count');
+
+		button.click();
+		flushSync();
+
+		expect(captureDiv.textContent).toBe('1');
+		expect(bubbleDiv.textContent).toBe('1');
+	});
+
+	it('renders with event listeners in spread props', () => {
+		component Basic() {
+			let count = track(0);
+
+			const minus = {
+				onClick() {
+					@count--
+				}
+			}
+
+			const plus = {
+				onClick() {
+					@count++
+				}
+			}
+
+			<div>
+				<button {...minus} class='minus'>{'-'}</button>
+				<span class='count'>{@count}</span>
+				<button {...plus} class='plus'>{'+'}</button>
+			</div>
+		}
+
+		render(Basic);
+
+		const minusButton = container.querySelector('.minus');
+		const plusButton = container.querySelector('.plus');
+		const countSpan = container.querySelector('.count');
+
+		expect(countSpan.textContent).toBe('0');
+
+		// Test that the buttons don't have string onclick attributes
+		expect(minusButton.getAttribute('onclick')).toBe(null);
+		expect(plusButton.getAttribute('onclick')).toBe(null);
+
+		// Test that the event handlers work
+		minusButton.click();
+		flushSync();
+		expect(countSpan.textContent).toBe('-1');
+
+		plusButton.click();
+		flushSync();
+		expect(countSpan.textContent).toBe('0');
+
+		plusButton.click();
+		flushSync();
+		expect(countSpan.textContent).toBe('1');
+	});
+
+	it('handles both delegated and non-delegated events in spread props', () => {
+		component Basic() {
+			let clickCount = track(0);
+			let focusCount = track(0);
+
+			const mixedHandler = {
+				onClick() {  // Delegated event
+					@clickCount++
+				},
+				onFocus() { // Non-delegated event
+					@focusCount++
+				}
+			}
+
+			<div>
+				<button {...mixedHandler} class='mixed-button'>{'Test'}</button>
+				<span class='click-count'>{@clickCount}</span>
+				<span class='focus-count'>{@focusCount}</span>
+			</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('.mixed-button');
+		const clickSpan = container.querySelector('.click-count');
+		const focusSpan = container.querySelector('.focus-count');
+
+		expect(clickSpan.textContent).toBe('0');
+		expect(focusSpan.textContent).toBe('0');
+
+		// Test delegated event (click)
+		button.click();
+		flushSync();
+		expect(clickSpan.textContent).toBe('1');
+
+		// Test non-delegated event (focus)
+		button.dispatchEvent(new Event('focus'));
+		flushSync();
+		expect(focusSpan.textContent).toBe('1');
+	});
+
+	it('renders with complex event handling and state updates', () => {
+		component Basic() {
+			let counter = track(0);
+			let history = track<string[]>([]);
+			let isEven = track(true);
+
+			const handleIncrement = () => {
+				@counter++;
+				@history = [...@history, `Inc to ${@counter}`];
+				@isEven = @counter % 2 === 0;
+			};
+
+			const handleDecrement = () => {
+				@counter--;
+				@history = [...@history, `Dec to ${@counter}`];
+				@isEven = @counter % 2 === 0;
+			};
+
+			const handleReset = () => {
+				@counter = 0;
+				@history = [...@history, 'Reset'];
+				@isEven = true;
+			};
+
+			<div class='counter'>{@counter}</div>
+			<div class='parity'>{@isEven ? 'Even' : 'Odd'}</div>
+			<div class='history-count'>{@history.length}</div>
+
+			<button class='inc-btn' onClick={handleIncrement}>{'+'}</button>
+			<button class='dec-btn' onClick={handleDecrement}>{'-'}</button>
+			<button class='reset-btn' onClick={handleReset}>{'Reset'}</button>
+		}
+
+		render(Basic);
+
+		const counterDiv = container.querySelector('.counter');
+		const parityDiv = container.querySelector('.parity');
+		const historyDiv = container.querySelector('.history-count');
+		const incBtn = container.querySelector('.inc-btn');
+		const decBtn = container.querySelector('.dec-btn');
+		const resetBtn = container.querySelector('.reset-btn');
+
+		expect(counterDiv.textContent).toBe('0');
+		expect(parityDiv.textContent).toBe('Even');
+		expect(historyDiv.textContent).toBe('0');
+
+		incBtn.click();
+		flushSync();
+
+		expect(counterDiv.textContent).toBe('1');
+		expect(parityDiv.textContent).toBe('Odd');
+		expect(historyDiv.textContent).toBe('1');
+
+		incBtn.click();
+		flushSync();
+
+		expect(counterDiv.textContent).toBe('2');
+		expect(parityDiv.textContent).toBe('Even');
+		expect(historyDiv.textContent).toBe('2');
+
+		decBtn.click();
+		flushSync();
+
+		expect(counterDiv.textContent).toBe('1');
+		expect(parityDiv.textContent).toBe('Odd');
+		expect(historyDiv.textContent).toBe('3');
+
+		resetBtn.click();
+		flushSync();
+
+		expect(counterDiv.textContent).toBe('0');
+		expect(parityDiv.textContent).toBe('Even');
+		expect(historyDiv.textContent).toBe('4');
+	});
+});