ripple 0.2.203 → 0.2.205

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.205",
   "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.205"
   }
 }

package/src/compiler/phases/1-parse/index.js

@@ -1749,15 +1749,7 @@ function RipplePlugin(config) {
 			jsx_parseAttributeValue() {
 				switch (this.type) {
 					case tt.braceL:
-						const t = this.jsx_parseExpressionContainer();
-						return (
-							t.expression.type === 'JSXEmptyExpression' &&
-								this.raise(
-									/** @type {AST.NodeWithLocation} */ (t).start,
-									'attributes must only be assigned a non-empty expression',
-								),
-							t
-						);
+						return this.jsx_parseExpressionContainer();
 					case tstt.jsxTagStart:
 					case tt.string:
 						return this.parseExprAtom();

package/src/compiler/phases/2-analyze/index.js

@@ -10,7 +10,10 @@
 	StyleClasses,
 } from '#compiler';
  */
-/** @import * as AST from 'estree' */
+/**
+@import * as AST from 'estree';
+@import * as ESTreeJSX from 'estree-jsx';
+*/
 
 import * as b from '../../../utils/builders.js';
 import { walk } from 'zimmerframe';
@@ -959,6 +962,31 @@ const visitors = {
 
 			for (const attr of node.attributes) {
 				if (attr.type === 'Attribute') {
+					if (attr.value && attr.value.type === 'JSXEmptyExpression') {
+						const value = /** @type {ESTreeJSX.JSXEmptyExpression & AST.NodeWithLocation} */ (
+							attr.value
+						);
+						error(
+							'attributes must only be assigned a non-empty expression',
+							state.analysis.module.filename,
+							{
+								...value,
+								start: value.start - 1,
+								end: value.end + 1,
+								loc: {
+									start: {
+										line: value.loc.start.line,
+										column: value.loc.start.column - 1,
+									},
+									end: {
+										line: value.loc.end.line,
+										column: value.loc.end.column + 1,
+									},
+								},
+							},
+							context.state.loose ? context.state.analysis.errors : undefined,
+						);
+					}
 					if (attr.name.type === 'Identifier') {
 						attribute_names.add(attr.name);
 

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

@@ -2492,11 +2492,16 @@ function transform_ts_child(node, context) {
 			if (attr.type === 'Attribute') {
 				const metadata = { await: false };
 				const name = visit(attr.name, { ...state, metadata });
+				const attr_value = /** @type { AST.Expression & AST.NodeWithLocation | null} */ (
+					attr.value
+				);
 				const value =
-					attr.value === null
-						? b.literal(true)
+					attr_value === null
+						? // <div attr>, not adding `name` for loc because `jsx_name` below
+							// will take care of the mapping JSXAttribute's JSXIdentifier
+							b.literal(true)
 						: // reset init, update, final to avoid adding attr value to the component body
-							visit(attr.value, SetStateForOutsideComponent(state, { metadata }));
+							visit(attr_value, SetStateForOutsideComponent(state, { metadata }));
 
 				// Handle both regular identifiers and tracked identifiers
 				/** @type {string} */
@@ -2524,7 +2529,23 @@ function transform_ts_child(node, context) {
 					jsx_name,
 					b.jsx_expression_container(
 						/** @type {AST.Expression} */ (value),
-						/** @type {AST.NodeWithLocation} */ (attr.value),
+						attr_value === null
+							? /** @type {AST.NodeWithLocation} */ (value)
+							: // account location for opening and closing braces around the expression
+								/** @type {AST.NodeWithLocation} */ ({
+									start: attr_value.start - 1,
+									end: attr_value.end + 1,
+									loc: {
+										start: {
+											line: attr_value.loc.start.line,
+											column: attr_value.loc.start.column - 1,
+										},
+										end: {
+											line: attr_value.loc.end.line,
+											column: attr_value.loc.end.column + 1,
+										},
+									},
+								}),
 					),
 					attr.shorthand ?? false,
 					/** @type {AST.NodeWithLocation} */ (attr),
@@ -3587,6 +3608,16 @@ function create_tsx_with_typescript_support(comments) {
 			context.write(node.name);
 			context.location(loc.end.line, loc.end.column);
 		},
+		JSXExpressionContainer(node, context) {
+			const loc = /** @type {AST.SourceLocation} */ (node.loc);
+			if (!loc) {
+				base_tsx.JSXExpressionContainer?.(node, context);
+				return;
+			}
+			context.location(loc.start.line, loc.start.column);
+			base_tsx.JSXExpressionContainer?.(node, context);
+			context.location(loc.end.line, loc.end.column);
+		},
 		MethodDefinition(node, context) {
 			node.value.metadata.is_method = true;
 			/** @type {AST.Position | undefined} */
@@ -3684,6 +3715,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

@@ -652,6 +652,11 @@ export function convert_source_map_to_mappings(
 				}
 				return;
 			} else if (node.type === 'JSXExpressionContainer') {
+				if (node.loc) {
+					mappings.push(
+						get_mapping_from_node(node, src_to_gen_map, gen_line_offsets, mapping_data_verify_only),
+					);
+				}
 				// Visit the expression inside {}
 				if (node.expression) {
 					visit(node.expression);

package/src/compiler/types/index.d.ts

@@ -131,6 +131,7 @@ declare module 'estree' {
 		StyleIdentifier: StyleIdentifier;
 		ServerIdentifier: ServerIdentifier;
 		Text: TextNode;
+		JSXEmptyExpression: ESTreeJSX.JSXEmptyExpression;
 	}
 
 	// Missing estree type

package/src/runtime/date.js

@@ -15,7 +15,7 @@ export class TrackedDate extends Date {
 		// @ts-ignore
 		super(...params);
 
-		var block = this.#block = safe_scope();
+		var block = (this.#block = safe_scope());
 		this.#time = tracked(super.getTime(), block);
 
 		if (!init) this.#init();

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';
 
 /**
@@ -216,11 +216,12 @@ export function bindValue(maybe_tracked, set_func = undefined) {
 					value = [].map.call(select.querySelectorAll(query), get_option_value);
 				} else {
 					/** @type {HTMLOptionElement | null} */
-					// @ts-ignore
 					var selected_option =
-						select.querySelector(query) ??
+						/** @type {HTMLOptionElement | null} */ (select.querySelector(query)) ??
 						// will fall back to first non-disabled option if no option is selected
-						select.querySelector('option:not([disabled])');
+						/** @type {HTMLOptionElement | null} */ (
+							select.querySelector('option:not([disabled])')
+						);
 					value = selected_option && get_option_value(selected_option);
 				}
 
@@ -234,8 +235,9 @@ export function bindValue(maybe_tracked, set_func = undefined) {
 				// Mounting and value undefined -> take selection from dom
 				if (mounting && value === undefined) {
 					/** @type {HTMLOptionElement | null} */
-					// @ts-ignore
-					var selected_option = select.querySelector(':checked');
+					var selected_option = /** @type {HTMLOptionElement | null} */ (
+						select.querySelector(':checked')
+					);
 					if (selected_option !== null) {
 						value = get_option_value(selected_option);
 						setter(value);
@@ -246,26 +248,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 +271,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 ?? '';
+					}
 				}
 			});
 
@@ -527,11 +534,9 @@ export function bind_content_editable(maybe_tracked, property, set_func = undefi
 			var value = getter();
 			if (element[property] !== value) {
 				if (value == null) {
-					// @ts-ignore
 					var non_null_value = element[property];
 					setter(non_null_value);
 				} else {
-					// @ts-ignore
 					element[property] = 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', () => {