ripple 0.2.112 → 0.2.114

package/tests/client/input-value.test.ripple

@@ -0,0 +1,123 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, track, effect } from 'ripple';
+import { bindValue, bindChecked } from 'ripple';
+
+describe('use value()', () => {
+	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('should update value on input', () => {
+		const logs = [];
+
+		component App() {
+			const text = track('');
+
+			effect(() => {
+				logs.push('text changed', @text);
+			});
+
+			<input type="text" {ref bindValue(text)} />
+		}
+		render(App);
+		flushSync();
+
+		const input = container.querySelector('input');
+		input.value = 'Hello';
+		input.dispatchEvent(new Event('input'));
+		flushSync();
+		expect(input.value).toBe('Hello');
+		expect(logs).toEqual(['text changed', '', 'text changed', 'Hello']);
+	});
+
+		it('should update value on input with a predefined value', () => {
+		const logs = [];
+
+		component App() {
+			const text = track('foo');
+
+			effect(() => {
+				logs.push('text changed', @text);
+			});
+
+			<input type="text" {ref bindValue(text)} />
+		}
+		render(App);
+		flushSync();
+
+		expect(container.querySelector('input').value).toBe('foo');
+		const input = container.querySelector('input');
+		input.value = 'Hello';
+		input.dispatchEvent(new Event('input'));
+		flushSync();
+		expect(input.value).toBe('Hello');
+		expect(logs).toEqual(['text changed', 'foo', 'text changed', 'Hello']);
+	});
+
+	it('should update checked on input', () => {
+		const logs = [];
+
+		component App() {
+			const value = track(false);
+
+			effect(() => {
+				logs.push('checked changed', @value);
+			});
+
+			<input type="checkbox" {ref bindChecked(value)} />
+		}
+		render(App);
+		flushSync();
+
+		const input = container.querySelector('input');
+		input.checked = true;
+		input.dispatchEvent(new Event('change'));
+		flushSync();
+		
+		expect(input.checked).toBe(true);
+		expect(logs).toEqual(['checked changed', false, 'checked changed', true]);
+	});
+
+	it('should update select value on change', () => {
+		const logs = [];
+
+		component App() {
+			const select = track('2');
+
+			effect(() => {
+				logs.push('select changed', @select);
+			});
+
+			<select {ref bindValue(select)}>
+				<option value="1">{"One"}</option>
+				<option value="2">{"Two"}</option>
+				<option value="3">{"Three"}</option>
+			</select>
+		}
+
+		render(App);
+		flushSync();
+
+		const select = container.querySelector('select');
+		select.value = '3';
+		select.dispatchEvent(new Event('change'));
+		flushSync();
+
+		expect(select.value).toBe('3');
+		expect(logs).toEqual(['select changed', '2', 'select changed', '3']);
+	});
+});

package/types/index.d.ts

@@ -200,3 +200,15 @@ export declare const MediaQuery: {
 };
 
 export function Portal<V = HTMLElement>({ target, children: Component }: { target: V, children?: Component }): void;
+
+/**
+ * @param {Tracked<V>} tracked
+ * @returns {(node: HTMLInputElement | HTMLSelectElement) => void}
+ */
+export declare function bindValue<V>(tracked: Tracked<V>): (node: HTMLInputElement | HTMLSelectElement) => void;
+
+/**
+ * @param {Tracked<V>} tracked
+ * @returns {(node: HTMLInputElement) => void}
+ */
+export declare function bindChecked<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;