ripple 0.2.113 → 0.2.114

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, flushSync, track, effect } from 'ripple';
-import { value, checked } from 'ripple/bindings';
+import { bindValue, bindChecked } from 'ripple';
 
 describe('use value()', () => {
 	let container;
@@ -22,42 +22,102 @@ describe('use value()', () => {
 	});
 
 	it('should update value on input', () => {
+		const logs = [];
+
 		component App() {
 			const text = track('');
 
 			effect(() => {
-				console.log('text changed', @text);
+				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 value(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(() => {
-				console.log('checked changed', @value);
+				logs.push('checked changed', @value);
 			});
 
-			<input type="checkbox" {ref checked(value)} />
+			<input type="checkbox" {ref bindChecked(value)} />
 		}
 		render(App);
 		flushSync();
 
 		const input = container.querySelector('input');
 		input.checked = true;
-		input.dispatchEvent(new Event('input'));
+		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;

package/src/bindings/index.d.ts

@@ -1,13 +0,0 @@
-import type { Tracked } from "ripple";
-
-/**
- * @param {Tracked<V>} tracked
- * @returns {(node: HTMLInputElement) => void}
- */
-export declare function value<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;
-
-/**
- * @param {Tracked<V>} tracked
- * @returns {(node: HTMLInputElement) => void}
- */
-export declare function checked<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;

package/src/bindings/index.js

@@ -1,79 +0,0 @@
-/** @import {Block, Tracked} from '#client' */
-
-import { active_block, get, set, tick } from '../runtime/internal/client';
-import { on } from '../runtime/internal/client/events';
-import { is_tracked_object } from '../runtime/internal/client/utils';
-
-/**
- * @param {string} value
- */
-function to_number(value) {
-	return value === '' ? null : +value;
-}
-
-/**
- * @param {HTMLInputElement} input
- */
-function is_numberlike_input(input) {
-	var type = input.type;
-	return type === 'number' || type === 'range';
-}
-
-/**
- * @param {unknown} maybe_tracked
- * @returns {(node: HTMLInputElement) => void}
- */
-export function value(maybe_tracked) {
-	if (!is_tracked_object(maybe_tracked)) {
-		throw new TypeError('value() argument is not a tracked object');
-	}
-
-	const block = /** @type {Block} */ (active_block);
-	const tracked = /** @type {Tracked} */ (maybe_tracked);
-
-	return (input) => {
-		const clear_event = on(input, 'input', async () => {
-			/** @type {any} */
-			var value = input.value;
-			value = is_numberlike_input(input) ? to_number(value) : value;
-			set(tracked, value, block);
-
-			await tick();
-
-			if (value !== (value = get(tracked))) {
-				var start = input.selectionStart;
-				var end = input.selectionEnd;
-				input.value = value ?? '';
-
-				// Restore selection
-				if (end !== null) {
-					input.selectionStart = start;
-					input.selectionEnd = Math.min(end, input.value.length);
-				}
-			}
-		});
-
-		return clear_event;
-	};
-}
-
-/**
- * @param {unknown} maybe_tracked
- * @returns {(node: HTMLInputElement) => void}
- */
-export function checked(maybe_tracked) {
-  if (!is_tracked_object(maybe_tracked)) {
-    throw new TypeError('checked() argument is not a tracked object');
-  }
-
-  const block = /** @type {any} */ (active_block);
-  const tracked = /** @type {Tracked<any>} */ (maybe_tracked);
-
-  return (input) => {
-    const clear_event = on(input, 'change', () => {
-      set(tracked, input.checked, block);
-    });
-
-    return clear_event;
-  };
-}