ripple 0.2.6 → 0.2.8

package/tests/composite.test.ripple

@@ -0,0 +1,151 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+
+import { mount, flushSync } from 'ripple';
+
+describe('composite components', () => {
+	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 composite components', () => {
+		component Button({ $count }) {
+			<div>{$count}</div>
+		}
+
+		component App() {
+			let $count = 0;
+			<button onClick={() => $count++}>{'Increment'}</button>
+			<Button $count={$count} />
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('1');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('2');
+	});
+
+	it('renders composite components with object state', () => {
+		component Button({ obj }) {
+			<button class='count2' onClick={() => {
+				obj.$count++;
+			}}>{obj.$count}</button>
+		}
+
+		component App() {
+			<div>
+				let obj = {
+					$count: 0
+				};
+				let $button = true;
+
+				<span class='count'>{obj.$count}</span>
+				<span>{' '}</span>
+				<Button obj={obj} />
+			</div>
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('.count').textContent).toBe('1');
+		expect(container.querySelector('.count2').textContent).toBe('1');
+	});
+
+	it('renders composite components with object state', () => {
+		component Button({ obj }) {
+			<button class='count2' onClick={() => {
+				obj.$count++;
+			}}>{obj.$count}</button>
+		}
+
+		component App() {
+			<div>
+				let obj = {
+					$count: 0
+				};
+
+				<span class='count'>{obj.$count}</span>
+				<Button obj={obj} />
+			</div>
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('.count').textContent).toBe('1');
+		expect(container.querySelector('.count2').textContent).toBe('1');
+	});
+
+	it('renders composite components with object state wrapped in an if statement', () => {
+		component Button({ obj }) {
+			<button class='count2' onClick={() => {
+				obj.$count++;
+			}}>{obj.$count}</button>
+		}
+
+		component OtherComponent({ obj }) {
+			<div class='count3'>{obj.$count}</div>
+		}
+
+		component App() {
+			<div>
+				let obj = {
+					$count: 0
+				};
+				let $button = true;
+
+				<span class='count'>{obj.$count}</span>
+				<span>{' '}</span>
+				if (obj) {
+					<Button obj={obj} />
+				}
+
+				if (obj) {
+					<OtherComponent obj={obj} />
+				}
+			</div>
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('.count').textContent).toBe('1');
+		expect(container.querySelector('.count2').textContent).toBe('1');
+		expect(container.querySelector('.count3').textContent).toBe('1');
+	});
+});

package/tests/for.test.ripple

@@ -0,0 +1,58 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+
+import { mount, flushSync, array } from 'ripple';
+
+describe('for 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('render a simple static array', () => {
+		component App() {
+			const items = ['Item 1', 'Item 2', 'Item 3'];
+
+			for (const item of items) {
+				<div class={item}>{item}</div>
+			}
+		}
+
+		render(App);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('render a simple dynamic array', () => {
+		component App() {
+			const items = array('Item 1', 'Item 2', 'Item 3');
+
+			for (const item of items) {
+				<div class={item}>{item}</div>
+			}
+
+			<button onClick={() => items.push(`Item ${items.$length + 1}`)}>{"Add Item"}</button>
+		}
+
+		render(App);
+		expect(container).toMatchSnapshot();
+
+    const button = container.querySelector('button');
+    button.click();
+    flushSync();
+
+    expect(container).toMatchSnapshot();
+	});
+});

package/tests/ref.test.ripple

@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+
+import { mount, flushSync, ref } from 'ripple';
+
+describe('ref', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+	});
+
+	it('creates a reactive ref with initial value', () => {
+		component TestRef() {
+			let $count = 5;
+			<div><span id='count'>{$count}</span></div>
+		}
+
+		render(TestRef);
+
+		expect(container.querySelector('#count').textContent).toBe('5');
+	});
+
+	it('updates when ref value changes', () => {
+		component TestRef() {
+			let $count = 0;
+			<div>
+				<span id='count'>{$count}</span>
+				<button id='btn' onClick={() => $count++}>{'Increment'}</button>
+			</div>
+		}
+
+		render(TestRef);
+
+		expect(container.querySelector('#count').textContent).toBe('0');
+
+		container.querySelector('#btn').click();
+		flushSync();
+
+		expect(container.querySelector('#count').textContent).toBe('1');
+	});
+});

package/tests/use.test.ripple

@@ -1,32 +1,34 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+
 import { mount, flushSync } from 'ripple';
 
 describe('@use element decorators', () => {
-  let container;
-
-  function render(component) {
-    mount(component, { target: container });
-  }
+	let container;
 
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
 
-  afterEach(() => {
-    document.body.removeChild(container);
-    container = null;
-  });
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
 
-  it('capture a <div>', () => {
-    let div;
-    
-    component Component() {
-      <div {@use (node) => { div = node; }}>{"Hello World"}</div>
-    }
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
 
-    render(Component);
+	it('capture a <div>', () => {
+		let div;
 
-    expect(div.textContent).toBe('Hello World');
-  });
+		component Component() {
+			<div {@use (node) => { div = node; }}>{'Hello World'}</div>
+		}
+		render(Component);
+		flushSync();
+		expect(div.textContent).toBe('Hello World');
+	});
 });

package/types/index.d.ts

@@ -2,7 +2,7 @@ export type Component<T = Record<string, any>> = (props: T) => void;
 
 export declare function mount(
 	component: () => void,
-	options: { target: HTMLElement; props?: Record<string, any> }
+	options: { target: HTMLElement; props?: Record<string, any> },
 ): () => void;
 
 export declare function untrack<T>(fn: () => T): T;
@@ -10,3 +10,9 @@ export declare function untrack<T>(fn: () => T): T;
 export declare function flushSync<T>(fn: () => T): T;
 
 export declare function effect(fn: (() => void) | (() => () => void)): void;
+
+export interface Ref<T> {
+	$current: T;
+}
+
+export declare function ref<T>(value: T): Ref<T>;