ripple 0.2.112 → 0.2.113

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.112",
+  "version": "0.2.113",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -38,6 +38,11 @@
       "require": "./src/compiler/index.js",
       "default": "./src/compiler/index.js"
     },
+    "./bindings": {
+      "types": "./src/bindings/index.d.ts",
+      "require": "./src/bindings/index.js",
+      "default": "./src/bindings/index.js"
+    },
     "./validator": {
       "types": "./types/index.d.ts",
       "require": "./validator/index.js",

package/src/bindings/index.d.ts

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,79 @@
+/** @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;
+  };
+}

package/src/runtime/internal/client/types.d.ts

@@ -17,12 +17,12 @@ export type Dependency = {
 	n: null | Dependency;
 };
 
-export type Tracked = {
+export type Tracked<V = any> = {
 	a: { get?: Function, set?: Function };
 	b: Block;
 	c: number;
 	f: number;
-	v: any;
+	v: V;
 };
 
 export type Derived = {

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

@@ -0,0 +1,63 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, track, effect } from 'ripple';
+import { value, checked } from 'ripple/bindings';
+
+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', () => {
+		component App() {
+			const text = track('');
+
+			effect(() => {
+				console.log('text changed', @text);
+			});
+
+			<input type="text" {ref value(text)} />
+		}
+		render(App);
+		flushSync();
+
+		const input = container.querySelector('input');
+		input.value = 'Hello';
+		input.dispatchEvent(new Event('input'));
+		flushSync();
+		expect(input.value).toBe('Hello');
+	});
+
+	it('should update checked on input', () => {
+		component App() {
+			const value = track(false);
+
+			effect(() => {
+				console.log('checked changed', @value);
+			});
+
+			<input type="checkbox" {ref checked(value)} />
+		}
+		render(App);
+		flushSync();
+
+		const input = container.querySelector('input');
+		input.checked = true;
+		input.dispatchEvent(new Event('input'));
+		flushSync();
+		expect(input.checked).toBe(true);
+	});
+});