ripple 0.2.121 → 0.2.125

package/tests/client/basic/basic.get-set.test.ripple

@@ -0,0 +1,291 @@
+import { track, flushSync, get, set, effect, untrack } from 'ripple';
+
+describe('basic client > get/set functions', () => {
+	it('gets tracked value', () => {
+		component Test() {
+			let count = track(0);
+
+			<div>{get(count)}</div>
+		}
+
+		render(Test);
+
+		const div = container.querySelector('div');
+		expect(div.textContent).toBe('0');
+	});
+
+	it('gets tracked value after mutation', () => {
+		component Test() {
+			let count = track(0);
+
+			<p>{get(count)}</p>
+			<button onClick={() => @count++}>{'increment'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('1');
+	});
+
+	it('gets tracked value after multiple mutations', () => {
+		component Test() {
+			let count = track(0);
+
+			<p>{get(count)}</p>
+			<button onClick={() => {
+				@count++;
+				@count++;
+				@count++;
+			}}>{'increment'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('3');
+	});
+
+	it('sets tracked value', () => {
+		component Test() {
+			let count = track(0);
+
+			<p>{get(count)}</p>
+			<button onClick={() => set(count, 10)}>{'set to 10'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('10');
+	});
+
+	it('sets tracked value multiple times', () => {
+		component Test() {
+			let count = track(0);
+
+			<p>{get(count)}</p>
+			<button onClick={() => {
+				set(count, 5);
+				set(count, 15);
+				set(count, 25);
+			}}>{'set multiple times'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('25');
+	});
+
+	it('sets tracked value based on previous value', () => {
+		component Test() {
+			let count = track(0);
+
+			<p>{get(count)}</p>
+			<button onClick={() => set(count, get(count) + 10)}>{'add 10'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('10');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('20');
+	});
+
+	it('sets tracked value multiple times based on previous value', () => {
+		component Test() {
+			let count = track(0);
+
+			<p>{get(count)}</p>
+			<button onClick={() => {
+				set(count, get(count) + 5);
+				set(count, get(count) + 15);
+				set(count, get(count) + 25);
+			}}>{'add multiple times'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('45');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('90');
+	});
+
+	function store() {
+		return track(0);
+	}
+
+	it('gets value declared outside Ripple component', () => {
+		component Test() {
+			let count = store();
+			<p>{get(count)}</p>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+	});
+
+	it('sets value declared outside Ripple component', () => {
+		component Test() {
+			let count = store();
+
+			<p>{get(count)}</p>
+			<button onClick={() => set(count, 50)}>{'set to 50'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('50');
+	});
+
+	it('works with effects', () => {
+		component Test() {
+			let count = track(0);
+			let double = track(0);
+
+			effect(() => {
+				set(double, get(count) * 2);
+			});
+
+			<p>{get(double)}</p>
+			<button onClick={() => set(count, get(count) + 1)}>{'increment'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('2');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('4');
+	});
+
+	it('works with effects and untrack', () => {
+		component Test() {
+			let count = track(0);
+			let double = track(0);
+
+			effect(() => {
+				untrack(() => {
+					set(double, get(count) * 2);
+				});
+			});
+
+			<p>{get(double)}</p>
+			<button onClick={() => set(count, get(count) + 1)}>{'increment'}</button>
+		}
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('2');
+
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('2');
+	});
+
+	it("get isn't reactive when declared outside Ripple context", () => {
+		let count = store();
+
+		component Test() {
+			<p>{get(count)}</p>
+			<button onClick={() => { set(count, get(count) + 1) }}>{'increment'}</button>
+		}
+
+		expect(get(count)).toBe(0);
+
+		render(Test);
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('0');
+		expect(get(count)).toBe(0);
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(p.textContent).toBe('0');
+		expect(get(count)).toBe(1);
+	});
+
+	it('throws on trying to set a value outside Ripple component', () => {
+		let count = store();
+
+		expect(get(count)).toBe(0);
+		expect(() => set(count, 1)).toThrow();
+		expect(get(count)).toBe(0);
+	});
+});

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

@@ -1,6 +1,7 @@
-import { flushSync, track, createRefKey } from 'ripple';
+import { flushSync, track, createRefKey, trackSplit } from 'ripple';
 
 describe('dynamic DOM elements', () => {
+
 	it('renders static dynamic element', () => {
 		component App() {
 			let tag = track('div');
@@ -24,14 +25,17 @@ describe('dynamic DOM elements', () => {
 			<@tag id="dynamic">{'Hello World'}</@tag>
 		}
 		render(App);
+		
 		// Initially should be a div
 		let dynamicElement = container.querySelector('#dynamic');
 		expect(dynamicElement.tagName).toBe('DIV');
 		expect(dynamicElement.textContent).toBe('Hello World');
+		
 		// Click button to change tag
 		const button = container.querySelector('button');
 		button.click();
 		flushSync();
+		
 		// Should now be a span
 		dynamicElement = container.querySelector('#dynamic');
 		expect(dynamicElement.tagName).toBe('SPAN');
@@ -46,7 +50,7 @@ describe('dynamic DOM elements', () => {
 		}
 		render(App);
 
-		const element = container.querySelector('input') as HTMLInputElement;
+		const element = container.querySelector('input');
 		expect(element).toBeTruthy();
 		expect(element.type).toBe('text');
 		expect(element.value).toBe('test');
@@ -109,8 +113,8 @@ describe('dynamic DOM elements', () => {
 		component App() {
 			let tag = track('span');
 
-			<@tag style={{
-				color: 'red',
+			<@tag style={{ 
+				color: 'red', 
 				fontSize: '16px',
 				fontWeight: 'bold'
 			}}>
@@ -150,17 +154,18 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with ref', () => {
-		let capturedElement: HTMLArticleElement | undefined;
+		let capturedElement = null;
 
 		component App() {
 			let tag = track('article');
 
-			<@tag {ref (node: HTMLArticleElement) => { capturedElement = node; }} id="ref-test">
+			<@tag {ref (node) => { capturedElement = node; }} id="ref-test">
 				{'Element with ref'}
 			</@tag>
 		}
 		render(App);
 		flushSync();
+		
 		expect(capturedElement).toBeTruthy();
 		expect(capturedElement.tagName).toBe('ARTICLE');
 		expect(capturedElement.id).toBe('ref-test');
@@ -171,7 +176,7 @@ describe('dynamic DOM elements', () => {
 		component App() {
 			let tag = track('header');
 
-			function elementRef(node: HTMLHeaderElement) {
+			function elementRef(node) {
 				// Set an attribute on the element to prove ref was called
 				node.setAttribute('data-spread-ref-called', 'true');
 				node.setAttribute('data-spread-ref-tag', node.tagName.toLowerCase());
@@ -196,4 +201,201 @@ describe('dynamic DOM elements', () => {
 		expect(element.id).toBe('spread-ref-test');
 		expect(element.className).toBe('ref-element');
 	});
-});
+
+	it('has reactive attributes on dynamic elements', () => {
+		component App() {
+			let tag = track('div');
+			let count = track(0);
+			
+			<button onClick={() => { @count++; }}>{'Increment'}</button>
+			<@tag 
+				id={@count % 2 ? 'even' : 'odd'}
+				class={@count % 2 ? 'even-class' : 'odd-class'}
+				data-count={@count}
+			>
+				{'Count: '}{@count}
+			</@tag>
+		}
+
+		render(App);
+		
+		const button = container.querySelector('button');
+		const element = container.querySelector('div');
+		
+		// Initial state
+		expect(element.id).toBe('odd');
+		expect(element.className).toBe('odd-class');
+		expect(element.getAttribute('data-count')).toBe('0');
+		expect(element.textContent).toBe('Count: 0');
+		
+		// Click to increment
+		button.click();
+		flushSync();
+		
+		// Attributes should be reactive and update
+		expect(element.id).toBe('even');
+		expect(element.className).toBe('even-class');
+		expect(element.getAttribute('data-count')).toBe('1');
+		expect(element.textContent).toBe('Count: 1');
+		
+		// Click again
+		button.click();
+		flushSync();
+		
+		// Should toggle back
+		expect(element.id).toBe('odd');
+		expect(element.className).toBe('odd-class');
+		expect(element.getAttribute('data-count')).toBe('2');
+		expect(element.textContent).toBe('Count: 2');
+	});
+
+	it('applies scoped CSS to dynamic elements', () => {
+		component App() {
+			let tag = track('div');
+			
+			<@tag class="test-class">{'Dynamic element'}</@tag>
+			
+			<style>
+				.test-class {
+					color: red;
+				}
+			</style>
+		}
+
+		render(App);
+		
+		const element = container.querySelector('div');
+		expect(element).toBeTruthy();
+		console.log(element);
+		expect(element.classList.contains('test-class')).toBe(true);
+		
+		// Check if scoped CSS class is present - THIS MIGHT FAIL if CSS pruning issue exists
+		const classes = Array.from(element.classList);
+		const hasScopedClass = classes.some(cls => cls.startsWith('ripple-'));
+		expect(hasScopedClass).toBe(true);
+	});
+
+	it('applies scoped CSS to dynamic elements with reactive classes', () => {
+		component App() {
+			let tag = track('button');
+			let count = track(0);
+			
+			<@tag 
+				class={@count % 2 ? 'even' : 'odd'}
+				id={@count % 2 ? 'even' : 'odd'}
+				onClick={() => { @count++; }}
+			>
+				{'Count: '}{@count}
+			</@tag>
+			
+			<style>
+				.even {
+					background-color: green;
+					color: white;
+				}
+				.odd {
+					background-color: red;
+					color: white;
+				}
+			</style>
+		}
+
+		render(App);
+		
+		const button = container.querySelector('button');
+		expect(button).toBeTruthy();
+		
+		// Initial state: should be odd (count=0, 0%2=false)
+		expect(button.classList.contains('odd')).toBe(true);
+		expect(button.classList.contains('even')).toBe(false);
+		expect(button.id).toBe('odd');
+		expect(button.textContent).toBe('Count: 0');
+		
+		// Check if scoped CSS hash is applied to dynamic element
+		const classes = Array.from(button.classList);
+		const hasScopedClass = classes.some(cls => cls.startsWith('ripple-'));
+		expect(hasScopedClass).toBe(true);
+		
+		// Click to increment
+		button.click();
+		flushSync();
+		
+		// Should now be even (count=1, 1%2=true)  
+		expect(button.classList.contains('even')).toBe(true);
+		expect(button.classList.contains('odd')).toBe(false);
+		expect(button.id).toBe('even');
+		expect(button.textContent).toBe('Count: 1');
+		
+		// Scoped CSS class should still be present
+		const newClasses = Array.from(button.classList);
+		const stillHasScopedClass = newClasses.some(cls => cls.startsWith('ripple-'));
+		expect(stillHasScopedClass).toBe(true);
+		
+		// Click again
+		button.click();
+		flushSync();
+		
+		// Should toggle back to odd (count=2, 2%2=false)
+		expect(button.classList.contains('odd')).toBe(true);
+		expect(button.classList.contains('even')).toBe(false);
+		expect(button.id).toBe('odd');
+		expect(button.textContent).toBe('Count: 2');
+	});
+
+	it('handles spread attributes with class and CSS scoping ', () => {
+		component DyanamicButton(props) {
+			const tag = track('button');
+			const [children, rest] = trackSplit(props, ['children']);
+			<@tag {...@rest}>{@rest.class}</@tag>
+			
+			<style>
+				.even {
+					background-color: green;
+				}
+				.odd {
+					background-color: red;
+				}
+			</style>
+		}
+
+		component App() {
+			const count = track(0);
+			<DyanamicButton
+				class={@count % 2 ? 'even' : 'odd'}
+				id={@count % 2 ? 'even' : 'odd'}
+				onClick={() => { @count++; }}
+			/>
+		}
+
+		render(App);
+		
+		const button = container.querySelector('button');
+		expect(button).toBeTruthy();
+		
+		
+		// Initial state: should be odd (count=0, 0%2=false)
+		expect(button.classList.contains('odd')).toBe(true);
+		expect(button.classList.contains('even')).toBe(false);
+		expect(button.id).toBe('odd');
+		
+		// Check if scoped CSS hash is applied (this is the critical test)
+		const classes = Array.from(button.classList);
+		const hasScopedClass = classes.some(cls => cls.startsWith('ripple-'));
+		expect(hasScopedClass).toBe(true);
+		
+		// Click to increment
+		button.click();
+		flushSync();
+		
+		// Should now be even (count=1, 1%2=true)  
+		expect(button.classList.contains('even')).toBe(true);
+		expect(button.classList.contains('odd')).toBe(false);
+		expect(button.id).toBe('even');
+		
+		// Both classes should still be present
+		const newClasses = Array.from(button.classList);
+		const stillHasScopedClass = newClasses.some(cls => cls.startsWith('ripple-'));
+		expect(stillHasScopedClass).toBe(true);
+		expect(newClasses.includes('even')).toBe(true);
+	});
+});

package/tests/server/await.test.ripple

@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'ripple/server';
+import { track, set, get } from 'ripple';
+
+describe('await in control flow', () => {
+	it('should handle await inside if statement', async () => {
+		component App() {
+			let condition = true;
+			let data = track('loading');
+
+			if (condition) {
+				await new Promise(resolve => setTimeout(() => {
+					@data = 'loaded';
+					resolve();
+				}, 10));
+			}
+
+			<div>{@data}</div>
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>loaded</div>');
+	});
+
+	it('should handle await inside for...of loop', async () => {
+		component App() {
+			const items = [1, 2, 3];
+			let result = '';
+
+			for (const item of items) {
+				await new Promise(resolve => setTimeout(resolve, 5));
+				result += item;
+			}
+
+			<div>{result}</div>
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>123</div>');
+	});
+
+			it('should handle await inside switch statement', async () => {
+				component App() {
+					let value = 'b';
+	
+					switch (value) {
+						case 'a':
+							<div>{'Case A'}</div>
+							break;
+						case 'b':
+							await new Promise(resolve => setTimeout(resolve, 10));
+							<div>{'Case B'}</div>
+							break;
+						default:
+							<div>{'Default Case'}</div>
+					}
+				}
+	
+				const { body } = await render(App);
+				expect(body).toBe('<div>Case B</div>');
+			});});

package/tests/server/for.test.ripple

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'ripple/server';
+
+describe('for statements in SSR', () => {
+	it('renders a simple static array', async () => {
+		component App() {
+			const items = ['Item 1', 'Item 2', 'Item 3'];
+
+			for (const item of items) {
+				<div class={item}>{item}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div class="Item 1">Item 1</div><div class="Item 2">Item 2</div><div class="Item 3">Item 3</div>');
+	});
+
+	it('renders nested for...of loops', async () => {
+		component App() {
+			const groups = [
+				{
+					name: 'Group 1',
+					items: ['Item 1.1', 'Item 1.2']
+				},
+				{
+					name: 'Group 2',
+					items: ['Item 2.1', 'Item 2.2']
+				}
+			];
+
+			for (const group of groups) {
+				<h1>{group.name}</h1>
+				<ul>
+					for (const item of group.items) {
+						<li>{item}</li>
+					}
+				</ul>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<h1>Group 1</h1><ul><li>Item 1.1</li><li>Item 1.2</li></ul><h1>Group 2</h1><ul><li>Item 2.1</li><li>Item 2.2</li></ul>');
+	});
+});

package/tests/server/if.test.ripple

@@ -63,4 +63,24 @@ describe('if statements in SSR', () => {
 		const { body } = await render(App);
 		expect(body).toBe('<div>Default Case</div>');
 	});
-});
+
+	it('renders nested if-else blocks correctly', async () => {
+		component App() {
+			let outer = true;
+			let inner = false;
+
+			if (outer) {
+				if (inner) {
+					<div>{'Outer true, Inner true'}</div>
+				} else {
+					<div>{'Outer true, Inner false'}</div>
+				}
+			} else {
+				<div>{'Outer false'}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>Outer true, Inner false</div>');
+	});
+});