ripple 0.2.206 → 0.2.208

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.206",
+  "version": "0.2.208",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -76,7 +76,7 @@
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.5",
-    "@sveltejs/acorn-typescript": "^1.0.6",
+    "@sveltejs/acorn-typescript": "^1.0.9",
     "acorn": "^8.15.0",
     "clsx": "^2.1.1",
     "devalue": "^5.3.2",
@@ -97,6 +97,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.206"
+    "ripple": "0.2.208"
   }
 }

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

@@ -104,30 +104,28 @@ function visit_function(node, context) {
 		}
 	}
 
-	let body = context.visit(node.body, {
-		...state,
-		// we are new context so tracking no longer applies
-		metadata: { ...state.metadata, tracking: false },
-	});
-
-	if (metadata?.tracked === true) {
-		const new_body = [];
-
-		if (!is_inside_component(context, true) && is_component_level_function(context)) {
-			new_body.push(b.var('__block', b.call('_$_.scope')));
-		}
-		if (body.type === 'BlockStatement') {
-			new_body.push(...body.body);
-		}
+	let body = /** @type {AST.BlockStatement | AST.Expression} */ (
+		context.visit(node.body, {
+			...state,
+			// we are new context so tracking no longer applies
+			metadata: { ...state.metadata, tracking: false },
+		})
+	);
 
-		return {
-			...node,
-			params: node.params.map((param) => context.visit(param, state)),
-			body: body.type === 'BlockStatement' ? { ...body, body: new_body } : body,
-		};
+	if (
+		metadata?.tracked === true &&
+		!is_inside_component(context, true) &&
+		is_component_level_function(context) &&
+		body.type === 'BlockStatement'
+	) {
+		body = { ...body, body: [b.var('__block', b.call('_$_.scope')), ...body.body] };
 	}
 
-	return context.next(state);
+	return {
+		...node,
+		params: node.params.map((param) => context.visit(param, state)),
+		body,
+	};
 }
 
 /**
@@ -2896,12 +2894,20 @@ function transform_children(children, context) {
 				: node.type == 'Text'
 					? state.scope.generate('text')
 					: state.scope.generate('node'),
+			/** @type {AST.NodeWithLocation} */ (node.type === 'Element' ? node.openingElement : node),
 		);
 	};
 
 	/** @param {AST.Node} node */
 	const create_initial = (node) => {
-		const id = is_fragment ? b.id(state.scope.generate('fragment')) : get_id(node);
+		const id = is_fragment
+			? b.id(
+					state.scope.generate('fragment'),
+					/** @type {AST.NodeWithLocation} */ (
+						node.type === 'Element' ? node.openingElement : node
+					),
+				)
+			: get_id(node);
 		initial = id;
 		template_id = state.scope.generate('root');
 		state.init?.push(b.var(id, b.call(template_id)));

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

@@ -248,15 +248,35 @@ export function bindValue(maybe_tracked, set_func = undefined) {
 			});
 		} else {
 			var input = /** @type {HTMLInputElement} */ (node);
-			var selection_restore_needed = false;
 
 			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);
+				const getter_value = getter();
+
+				// Check the getter to see if it's different from the input.value
+				// The setter may have decided not to update its track value or update it to something else
+				// We treat the getter as the source of truth since we cannot verify the change otherwise
+				// If getter() !== input.value, we set the input value right away
+				// the `render` block may be scheduled only if the tracked value has changed
+				// but it will not do anything if getter() === input.value
+				// The result is: the `render` block will ALWAYS exit early if the microtask
+				// came from this event handler
+				if (value !== getter_value) {
+					var start = input.selectionStart;
+					var end = input.selectionEnd;
+
+					input.value = getter_value ?? '';
+
+					if (end !== null && start !== null) {
+						end = Math.min(end, input.value.length);
+						start = Math.min(start, end);
+						input.selectionStart = start;
+						input.selectionEnd = end;
+					}
+				}
 			});
 
 			render(() => {
@@ -271,23 +291,9 @@ export function bindValue(maybe_tracked, set_func = undefined) {
 				}
 
 				if (value !== input.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 ?? '';
-					}
+					// this can only get here if the tracked value was changed directly,
+					// and not via the input event
+					input.value = value ?? '';
 				}
 			});
 

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

@@ -31,7 +31,11 @@ function remove() {
  */
 function remove_when_css_loaded(callback) {
 	/** @type {HTMLLinkElement[]} */
-	const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
+	const links = Array.from(
+		/** @type {NodeListOf<HTMLLinkElement>} */ (
+			document.querySelectorAll('link[rel="stylesheet"]')
+		),
+	);
 	let remaining = links.length;
 
 	if (remaining === 0) {

package/src/utils/builders.js

@@ -320,10 +320,14 @@ export function get(name, body) {
 
 /**
  * @param {string} name
+ * @param {AST.NodeWithLocation} [loc_info]
  * @returns {AST.Identifier}
  */
-export function id(name) {
-	return { type: 'Identifier', name, metadata: { path: [] } };
+export function id(name, loc_info) {
+	/** @type {AST.Identifier} */
+	const node = { type: 'Identifier', name, metadata: { path: [] } };
+
+	return set_location(node, loc_info);
 }
 
 /**

package/tests/client/basic/basic.rendering.test.ripple

@@ -231,4 +231,47 @@ describe('basic client > rendering & text', () => {
 		render(App);
 		expect(container).toMatchSnapshot();
 	});
+
+	it('should handle consecutive text nodes without duplication', () => {
+		component App() {
+			const Something = conditional('a');
+
+			<Something />
+
+			function conditional(item: 'a') {
+				let hello = 'Hello';
+				const obj = {
+					a: component() {
+						<div>
+							{'a'}
+							{' '}
+							{hello}
+						</div>
+					},
+				};
+
+				return obj[item];
+			}
+		}
+
+		render(App);
+		const div = container.querySelector('div');
+		expect(div.textContent).toEqual('a Hello');
+	});
+
+	it('should handle multiple consecutive text expressions', () => {
+		component App() {
+			let name = 'World';
+			<div>
+				{'Hello'}
+				{' '}
+				{name}
+				{'!'}
+			</div>
+		}
+
+		render(App);
+		const div = container.querySelector('div');
+		expect(div.textContent).toEqual('Hello World!');
+	});
 });