ripple 0.2.202 → 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.202",
+  "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.202"
+    "ripple": "0.2.204"
   }
 }

package/src/compiler/index.d.ts

@@ -71,6 +71,10 @@ export interface CodeMapping extends VolarMapping<MappingData> {
 	data: MappingData;
 }
 
+export interface CodeMappingWithAll extends CodeMapping {
+	generatedLengths: number[];
+}
+
 export interface VolarMappingsResult {
 	code: string;
 	mappings: CodeMapping[];

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

@@ -54,6 +54,7 @@ import {
 	determine_namespace_for_children,
 	index_to_key,
 	is_element_dynamic,
+	is_inside_left_side_assignment,
 } from '../../../utils.js';
 import {
 	CSS_HASH_IDENTIFIER,
@@ -413,9 +414,25 @@ const visitors = {
 								is_capitalized: true,
 							},
 						};
-						return b.member(capitalized_node, b.literal('#v'), true, true);
+						const member = b.member(
+							capitalized_node,
+							b.literal('#v'),
+							true,
+							!is_inside_left_side_assignment(node),
+							/** @type {AST.NodeWithLocation} */ (node),
+						);
+						member.tracked = true;
+						return member;
 					}
-					return b.member(node, b.literal('#v'), true, true);
+					const member = b.member(
+						node,
+						b.literal('#v'),
+						true,
+						!is_inside_left_side_assignment(node),
+						/** @type {AST.NodeWithLocation} */ (node),
+					);
+					member.tracked = true;
+					return member;
 				}
 			} else {
 				const binding = context.state.scope.get(node.name);
@@ -754,16 +771,15 @@ const visitors = {
 				);
 
 				// Wrap with ['#v'] access
-				return b.member(
+				const member_expanded = b.member(
 					member,
 					b.literal('#v'),
 					true,
-					// Always set optional just in case as we don't know if the user's
-					// ts declaration had it as optional
-					// It's safe to set it as ts won't report it as such unless the user's ts had it
-					true,
+					!is_inside_left_side_assignment(node),
 					/** @type {AST.NodeWithLocation} */ (node),
 				);
+				member_expanded.tracked = true;
+				return member_expanded;
 			} else {
 				if (!context.state.to_ts) {
 					return b.call(
@@ -3668,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/compiler/phases/3-transform/segments.js

@@ -1031,9 +1031,22 @@ export function convert_source_map_to_mappings(
 				return;
 			} else if (node.type === 'MemberExpression') {
 				if (node.loc) {
-					mappings.push(
-						get_mapping_from_node(node, src_to_gen_map, gen_line_offsets, mapping_data_verify_only),
+					const mapping = get_mapping_from_node(
+						node,
+						src_to_gen_map,
+						gen_line_offsets,
+						mapping_data_verify_only,
 					);
+
+					if (node.tracked) {
+						mapping.generatedLengths[0] = mapping.generatedLengths[0] + "['#v']".length;
+						if (node.optional) {
+							mapping.generatedLengths[0] = mapping.generatedLengths[0] + '.?'.length;
+						}
+						mapping.data.customData.generatedLengths = mapping.generatedLengths;
+					}
+
+					mappings.push(mapping);
 				}
 
 				if (node.object) {

package/src/compiler/source-map-utils.js

@@ -1,7 +1,7 @@
 /**
  @import { PostProcessingChanges, LineOffsets } from './phases/3-transform/client/index.js';
  @import * as AST from 'estree';
- @import { CodeMapping } from 'ripple/compiler';
+ @import { CodeMappingWithAll } from 'ripple/compiler';
  @import { CodeMapping as VolarCodeMapping } from '@volar/language-core';
  @import { RawSourceMap } from 'source-map';
  */
@@ -284,7 +284,7 @@ export function build_line_offsets(text) {
  * @param {Partial<VolarCodeMapping['data']>} [filtered_data]
  * @param {number} [src_max_len]
  * @param {number} [gen_max_len]
- * @returns {CodeMapping | Error}
+ * @returns {CodeMappingWithAll | Error}
  */
 function maybe_get_mapping_from_node(
 	node,
@@ -333,7 +333,7 @@ function maybe_get_mapping_from_node(
  * @param {Partial<VolarCodeMapping['data']>} [filtered_data]
  * @param {number} [src_max_len]
  * @param {number} [gen_max_len]
- * @returns {CodeMapping}
+ * @returns {CodeMappingWithAll}
  */
 export function get_mapping_from_node(
 	node,

package/src/compiler/utils.js

@@ -833,3 +833,79 @@ export function is_inside_try_block(try_parent_stmt, context) {
 
 	return block_node !== null && try_parent_stmt.block === block_node;
 }
+
+/**
+ * Checks if a node is used as the left side of an assignment or update expression.
+ * @param {AST.Node} node
+ * @returns {boolean}
+ */
+export function is_inside_left_side_assignment(node) {
+	const path = node.metadata?.path;
+	if (!path || path.length === 0) {
+		return false;
+	}
+
+	/** @type {AST.Node} */
+	let current = node;
+
+	for (let i = path.length - 1; i >= 0; i--) {
+		const parent = path[i];
+
+		switch (parent.type) {
+			case 'AssignmentExpression':
+			case 'AssignmentPattern':
+				if (parent.right === current) {
+					return false;
+				}
+
+				if (parent.left === current) {
+					return true;
+				}
+				current = parent;
+				continue;
+			case 'UpdateExpression':
+				return true;
+			case 'MemberExpression':
+				// In obj[computeKey()] = 10, computeKey() is evaluated to determine
+				// which property to assign to, but is not itself an assignment target
+				if (parent.computed && parent.property === current) {
+					return false;
+				}
+				current = parent;
+				continue;
+			case 'Property':
+				// exit here to stop promoting current to parent
+				// and thus reaching VariableDeclarator, causing an erroneous truthy result
+				// e.g. const { [computeKey()]: value } = obj; where node = computeKey:
+				if (parent.key === current) {
+					return false;
+				}
+				current = parent;
+				continue;
+			case 'VariableDeclarator':
+				return parent.id === current;
+			case 'ForInStatement':
+			case 'ForOfStatement':
+				return parent.left === current;
+
+			case 'Program':
+			case 'FunctionDeclaration':
+			case 'FunctionExpression':
+			case 'ArrowFunctionExpression':
+			case 'ClassDeclaration':
+			case 'ClassExpression':
+			case 'MethodDefinition':
+			case 'PropertyDefinition':
+			case 'StaticBlock':
+			case 'Component':
+			case 'Element':
+				return false;
+
+			default:
+				current = parent;
+				continue;
+		}
+	}
+
+	return false;
+}

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', () => {

package/types/index.d.ts

@@ -112,7 +112,11 @@ export type PropsNoChildren<T extends object = {}> = Expand<T>;
 
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
-type PickKeys<T, K extends readonly (keyof T)[]> = { [I in keyof K]: Tracked<T[K[I] & keyof T]> };
+type WrapTracked<V> = V extends Tracked<any> ? V : Tracked<V>;
+
+type PickKeys<T, K extends readonly (keyof T)[]> = {
+	[I in keyof K]: WrapTracked<T[K[I] & keyof T]>;
+};
 
 type RestKeys<T, K extends readonly (keyof T)[]> = Expand<Omit<T, K[number]>>;