ripple 0.2.203 → 0.2.204

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.203",
+  "version": "0.2.204",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -97,6 +97,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.203"
+    "ripple": "0.2.204"
   }
 }

package/src/compiler/phases/3-transform/client/index.js

@@ -3684,6 +3684,16 @@ function create_tsx_with_typescript_support(comments) {
 				context.visit(node.value.body);
 			}
 		},
+		TSAsExpression(node, context) {
+			if (!node.loc) {
+				base_tsx.TSAsExpression?.(node, context);
+				return;
+			}
+			const loc = /** @type {AST.SourceLocation} */ (node.loc);
+			context.location(loc.start.line, loc.start.column);
+			base_tsx.TSAsExpression?.(node, context);
+			context.location(loc.end.line, loc.end.column);
+		},
 		TSObjectKeyword(node, context) {
 			if (node.loc) {
 				context.location(node.loc.start.line, node.loc.start.column);

package/src/runtime/internal/client/bindings.js

@@ -9,7 +9,7 @@
 
 import { effect, render } from './blocks.js';
 import { on } from './events.js';
-import { get, set, tick, untrack } from './runtime.js';
+import { get, set } from './runtime.js';
 import { is_array, is_tracked_object } from './utils.js';
 
 /**
@@ -246,26 +246,15 @@ export function bindValue(maybe_tracked, set_func = undefined) {
 			});
 		} else {
 			var input = /** @type {HTMLInputElement} */ (node);
+			var selection_restore_needed = false;
 
-			clear_event = on(input, 'input', async () => {
+			clear_event = on(input, 'input', () => {
+				selection_restore_needed = true;
 				/** @type {any} */
 				var value = input.value;
 				value = is_numberlike_input(input) ? to_number(value) : value;
+				// the setter will schedule a microtask and the render block below will run
 				setter(value);
-
-				await tick();
-
-				if (value !== getter()) {
-					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);
-					}
-				}
 			});
 
 			render(() => {
@@ -280,7 +269,23 @@ export function bindValue(maybe_tracked, set_func = undefined) {
 				}
 
 				if (value !== input.value) {
-					input.value = value ?? '';
+					if (selection_restore_needed) {
+						var start = input.selectionStart;
+						var end = input.selectionEnd;
+
+						input.value = value ?? '';
+
+						// Restore selection
+						if (end !== null && start !== null) {
+							end = Math.min(end, input.value.length);
+							start = Math.min(start, end);
+							input.selectionStart = start;
+							input.selectionEnd = end;
+						}
+						selection_restore_needed = false;
+					} else {
+						input.value = value ?? '';
+					}
 				}
 			});
 

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

@@ -2,6 +2,7 @@ import {
 	flushSync,
 	track,
 	effect,
+	untrack,
 	TrackedObject,
 	bindValue,
 	bindChecked,
@@ -239,7 +240,7 @@ describe('use value()', () => {
 	});
 
 	it('should update checked on input', () => {
-		const logs: string[] = [];
+		const logs: (string | boolean)[] = [];
 
 		component App() {
 			const value = track(false);
@@ -335,7 +336,7 @@ describe('use value()', () => {
 	});
 
 	it('should update indeterminate on input', () => {
-		const logs: string[] = [];
+		const logs: (string | boolean)[] = [];
 
 		component App() {
 			const value = track(false);
@@ -2533,6 +2534,305 @@ describe('bindNode', () => {
 
 		expect(input.value).toBe('Set by ref');
 	});
+
+	it('should accurately reflect values mutated through a tracked setter', () => {
+		component App() {
+			let value = track(
+				'',
+				(val) => {
+					return val;
+				},
+				(next) => {
+					if (next.includes('c')) {
+						next = next.replace(/c/g, '');
+					}
+					return next;
+				},
+			);
+
+			<input type="text" {ref bindValue(value)} />
+			<div>{@value}</div>
+		}
+
+		render(App);
+		flushSync();
+
+		const input = container.querySelector('input') as HTMLInputElement;
+		const div = container.querySelector('div') as HTMLDivElement;
+
+		expect(input.value).toBe('');
+		expect(div.textContent).toBe('');
+
+		input.value = 'abc';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		flushSync();
+
+		expect(input.value).toBe('ab');
+		expect(div.textContent).toBe('ab');
+	});
+
+	it('should accurately reflect values when a getter modifies value', () => {
+		component App() {
+			let value = track(
+				'',
+				(val) => {
+					if (val.includes('c')) {
+						val = val.replace(/c/g, '');
+					}
+					return val;
+				},
+				(next) => {
+					return next;
+				},
+			);
+
+			<input type="text" {ref bindValue(value)} />
+			<div>{@value}</div>
+		}
+
+		render(App);
+		flushSync();
+
+		const input = container.querySelector('input') as HTMLInputElement;
+		const div = container.querySelector('div') as HTMLDivElement;
+
+		expect(input.value).toBe('');
+		expect(div.textContent).toBe('');
+
+		input.value = 'abc';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		flushSync();
+
+		expect(input.value).toBe('ab');
+		expect(div.textContent).toBe('ab');
+	});
+
+	it('should always prefer what getter returns even if setter mutates next', () => {
+		component App() {
+			let value = track(
+				'',
+				(val) => {
+					return val.replace(/[c,b]+/g, '');
+				},
+				(next) => {
+					if (next.includes('c')) {
+						next = next.replace(/c/g, '');
+					}
+					return next;
+				},
+			);
+
+			<input type="text" {ref bindValue(value)} />
+			<div>{@value}</div>
+		}
+
+		render(App);
+		flushSync();
+
+		const input = container.querySelector('input') as HTMLInputElement;
+		const div = container.querySelector('div') as HTMLDivElement;
+
+		expect(input.value).toBe('');
+		expect(div.textContent).toBe('');
+
+		input.value = 'abc';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		flushSync();
+
+		expect(input.value).toBe('a');
+		expect(div.textContent).toBe('a');
+	});
+
+	it(
+		'should accurately reflect values mutated through an effect even after a setter mutation',
+		() => {
+			component App() {
+				let value = track(
+					'',
+					(val) => {
+						return val;
+					},
+					(next) => {
+						if (next.includes('c')) {
+							next = next.replace(/c/g, '');
+						}
+						return next;
+					},
+				);
+
+				effect(() => {
+					@value;
+
+					untrack(() => {
+						if (@value.includes('a')) {
+							@value = @value.replace(/a/g, '');
+						}
+					});
+				});
+				<input type="text" {ref bindValue(value)} />
+				<div>{@value}</div>
+			}
+
+			render(App);
+			flushSync();
+
+			const input = container.querySelector('input') as HTMLInputElement;
+			const div = container.querySelector('div') as HTMLDivElement;
+
+			expect(input.value).toBe('');
+			expect(div.textContent).toBe('');
+
+			input.value = 'abc';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			flushSync();
+
+			expect(input.value).toBe('b');
+			expect(div.textContent).toBe('b');
+		},
+	);
+
+	it('should accurately reflect values mutated through a tracked setter via bind accessors', () => {
+		component App() {
+			let value = track('');
+			const value_accessors = [
+				() => {
+					return @value;
+				},
+				(v: string) => {
+					if (v.includes('c')) {
+						v = v.replace(/c/g, '');
+					}
+					@value = v;
+				},
+			];
+
+			<input type="text" {ref bindValue(...value_accessors)} />
+		}
+
+		render(App);
+		flushSync();
+
+		const input = container.querySelector('input') as HTMLInputElement;
+
+		expect(input.value).toBe('');
+
+		input.value = 'abc';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		flushSync();
+
+		expect(input.value).toBe('ab');
+	});
+
+	it('should prefer what getter returns via bind accessors', () => {
+		component App() {
+			let value = track('');
+			const value_accessors = [
+				() => {
+					if (@value.includes('c')) {
+						return @value.replace(/c/g, '');
+					}
+					return @value;
+				},
+				(v: string) => {
+					@value = v;
+				},
+			];
+
+			<input type="text" {ref bindValue(...value_accessors)} />
+		}
+
+		render(App);
+		flushSync();
+
+		const input = container.querySelector('input') as HTMLInputElement;
+
+		expect(input.value).toBe('');
+
+		input.value = 'abc';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		flushSync();
+
+		expect(input.value).toBe('ab');
+	});
+
+	it(
+		'should always prefer what getter returns even if setter mutates next via bind accessors',
+		() => {
+			component App() {
+				let value = track('');
+				const value_accessors = [
+					() => {
+						return @value.replace(/[c,b]+/g, '');
+					},
+					(v: string) => {
+						if (v.includes('c')) {
+							v = v.replace(/c/g, '');
+						}
+						@value = v;
+					},
+				];
+
+				<input type="text" {ref bindValue(...value_accessors)} />
+			}
+
+			render(App);
+			flushSync();
+
+			const input = container.querySelector('input') as HTMLInputElement;
+
+			expect(input.value).toBe('');
+
+			input.value = 'abc';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			flushSync();
+
+			expect(input.value).toBe('a');
+		},
+	);
+
+	it(
+		'should accurately reflect values mutated through an effect even after a setter mutation via bind accessors',
+		() => {
+			component App() {
+				let value = track('');
+				const value_accessors = [
+					() => {
+						return @value;
+					},
+					(v: string) => {
+						if (v.includes('c')) {
+							v = v.replace(/c/g, '');
+						}
+						@value = v;
+					},
+				];
+
+				effect(() => {
+					@value;
+
+					untrack(() => {
+						if (@value.includes('a')) {
+							@value = @value.replace(/a/g, '');
+						}
+					});
+				});
+				<input type="text" {ref bindValue(...value_accessors)} />
+			}
+
+			render(App);
+			flushSync();
+
+			const input = container.querySelector('input') as HTMLInputElement;
+
+			expect(input.value).toBe('');
+
+			input.value = 'abc';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			flushSync();
+
+			expect(input.value).toBe('b');
+		},
+	);
 });
 
 describe('bindFiles', () => {