ripple 0.2.145 → 0.2.146

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.145",
+  "version": "0.2.146",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.145"
+    "ripple": "0.2.146"
   }
 }

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

@@ -39,7 +39,10 @@ const regex_whitespace_only = /\s/;
  */
 function skipWhitespace(parser) {
 	const originalStart = parser.start;
-	while (parser.start < parser.input.length && regex_whitespace_only.test(parser.input[parser.start])) {
+	while (
+		parser.start < parser.input.length &&
+		regex_whitespace_only.test(parser.input[parser.start])
+	) {
 		parser.start++;
 	}
 	// Update line tracking if whitespace was skipped
@@ -1093,7 +1096,8 @@ function RipplePlugin(config) {
 						// Check if the next character after @ is [
 						const nextChar = this.input.charCodeAt(this.pos);
 
-						if (nextChar === 91) { // [ character
+						if (nextChar === 91) {
+							// [ character
 							memberExpr.computed = true;
 
 							// Consume the @ token
@@ -1142,7 +1146,7 @@ function RipplePlugin(config) {
 						var t = this.jsx_parseExpressionContainer();
 						return (
 							'JSXEmptyExpression' === t.expression.type &&
-							this.raise(t.start, 'attributes must only be assigned a non-empty expression'),
+								this.raise(t.start, 'attributes must only be assigned a non-empty expression'),
 							t
 						);
 					case tok.jsxTagStart:
@@ -1315,14 +1319,14 @@ function RipplePlugin(config) {
 							this.raise(
 								this.pos,
 								'Unexpected token `' +
-								this.input[this.pos] +
-								'`. Did you mean `' +
-								(ch === 62 ? '&gt;' : '&rbrace;') +
-								'` or ' +
-								'`{"' +
-								this.input[this.pos] +
-								'"}' +
-								'`?',
+									this.input[this.pos] +
+									'`. Did you mean `' +
+									(ch === 62 ? '&gt;' : '&rbrace;') +
+									'` or ' +
+									'`{"' +
+									this.input[this.pos] +
+									'"}' +
+									'`?',
 							);
 						}
 
@@ -1584,7 +1588,9 @@ function RipplePlugin(config) {
 					const node = this.jsx_parseExpressionContainer();
 					node.type = node.html ? 'Html' : 'Text';
 					delete node.html;
-					body.push(node);
+					if (node.expression.type !== 'JSXEmptyExpression') {
+						body.push(node);
+					}
 				} else if (this.type.label === '}') {
 					return;
 				} else if (this.type.label === 'jsxTagStart') {
@@ -1979,7 +1985,7 @@ function get_comment_handlers(source, comments, index = 0) {
 										const nextChar = getNextNonWhitespaceCharacter(source, potentialComment.end);
 										if (nextChar === ')') {
 											(node.trailingComments ||= []).push(
-												/** @type {CommentWithLocation} */(comments.shift()),
+												/** @type {CommentWithLocation} */ (comments.shift()),
 											);
 											continue;
 										}

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

@@ -35,6 +35,7 @@ import {
 	normalize_children,
 	build_getter,
 	determine_namespace_for_children,
+	index_to_key,
 } from '../../../utils.js';
 import is_reference from 'is-reference';
 import { object } from '../../../../utils/ast.js';
@@ -127,7 +128,77 @@ function visit_head_element(node, context) {
 
 	if (init.length > 0 || update.length > 0 || final.length > 0) {
 		context.state.init.push(
-			b.call('_$_.head', b.arrow([b.id('__anchor')], b.block([...init, ...update, ...final]))),
+			b.call(
+				'_$_.head',
+				b.arrow(
+					[b.id('__anchor')],
+					b.block([
+						...init,
+						...update.map((u) => {
+							debugger;
+						}),
+						...final,
+					]),
+				),
+			),
+		);
+	}
+}
+
+function apply_updates(init, update) {
+	if (update.length === 1) {
+		init.push(
+			b.stmt(
+				b.call(
+					'_$_.render',
+					b.thunk(
+						b.block(
+							update.map((u) => {
+								if (u.initial) {
+									return u.operation(u.expression);
+								}
+								return u.operation;
+							}),
+						),
+						!!update.async,
+					),
+				),
+			),
+		);
+	} else {
+		const index_map = new Map();
+		const initial = [];
+		const render_statements = [];
+		let index = 0;
+
+		for (const u of update) {
+			if (u.initial) {
+				const key = index_to_key(index);
+				index_map.set(u.operation, key);
+				initial.push(b.prop('init', b.id(key), u.initial));
+				render_statements.push(
+					b.var('__' + key, u.expression),
+					b.if(
+						b.binary('!==', b.member(b.id('__prev'), b.id(key)), b.id('__' + key)),
+						b.block([
+							u.operation(b.assignment('=', b.member(b.id('__prev'), b.id(key)), b.id('__' + key))),
+						]),
+					),
+				);
+				index++;
+			} else {
+				render_statements.push(u.operation);
+			}
+		}
+
+		init.push(
+			b.stmt(
+				b.call(
+					'_$_.render',
+					b.arrow([b.id('__prev')], b.block(render_statements), !!update.async),
+					b.object(initial),
+				),
+			),
 		);
 	}
 }
@@ -862,7 +933,7 @@ const visitors = {
 							const expression = visit(attr.value, { ...state, metadata });
 
 							if (metadata.tracking) {
-								local_updates.push(b.stmt(b.call('_$_.set_value', id, expression)));
+								local_updates.push({ operation: b.stmt(b.call('_$_.set_value', id, expression)) });
 							} else {
 								state.init.push(b.stmt(b.call('_$_.set_value', id, expression)));
 							}
@@ -876,7 +947,9 @@ const visitors = {
 							const expression = visit(attr.value, { ...state, metadata });
 
 							if (name === '$checked' || metadata.tracking) {
-								local_updates.push(b.stmt(b.call('_$_.set_checked', id, expression)));
+								local_updates.push({
+									operation: b.stmt(b.call('_$_.set_checked', id, expression)),
+								});
 							} else {
 								state.init.push(b.stmt(b.call('_$_.set_checked', id, expression)));
 							}
@@ -889,7 +962,9 @@ const visitors = {
 							const expression = visit(attr.value, { ...state, metadata });
 
 							if (metadata.tracking) {
-								local_updates.push(b.stmt(b.call('_$_.set_selected', id, expression)));
+								local_updates.push({
+									operation: b.stmt(b.call('_$_.set_selected', id, expression)),
+								});
 							} else {
 								state.init.push(b.stmt(b.call('_$_.set_selected', id, expression)));
 							}
@@ -968,11 +1043,15 @@ const visitors = {
 							const id = state.flush_node();
 
 							if (is_dom_property(attribute)) {
-								local_updates.push(b.stmt(b.assignment('=', b.member(id, attribute), expression)));
+								local_updates.push({
+									operation: b.stmt(b.assignment('=', b.member(id, attribute), expression)),
+								});
 							} else {
-								local_updates.push(
-									b.stmt(b.call('_$_.set_attribute', id, b.literal(attribute), expression)),
-								);
+								local_updates.push({
+									operation: b.stmt(
+										b.call('_$_.set_attribute', id, b.literal(attribute), expression),
+									),
+								});
 							}
 						} else {
 							const id = state.flush_node();
@@ -1012,9 +1091,12 @@ const visitors = {
 					const is_html = context.state.namespace === 'html' && node.id.name !== 'svg';
 
 					if (metadata.tracking) {
-						local_updates.push(
-							b.stmt(b.call('_$_.set_class', id, expression, hash_arg, b.literal(is_html))),
-						);
+						local_updates.push({
+							operation: (key) =>
+								b.stmt(b.call('_$_.set_class', id, key, hash_arg, b.literal(is_html))),
+							expression,
+							initial: b.literal(''),
+						});
 					} else {
 						state.init.push(
 							b.stmt(b.call('_$_.set_class', id, expression, hash_arg, b.literal(is_html))),
@@ -1037,7 +1119,7 @@ const visitors = {
 					const statement = b.stmt(b.call('_$_.set_attribute', id, b.literal(name), expression));
 
 					if (metadata.tracking) {
-						local_updates.push(statement);
+						local_updates.push({ operation: statement });
 					} else {
 						state.init.push(statement);
 					}
@@ -1069,7 +1151,7 @@ const visitors = {
 
 			if (update.length > 0) {
 				if (state.scope.parent.declarations.size > 0) {
-					init.push(b.stmt(b.call('_$_.render', b.thunk(b.block(update), !!update.async))));
+					apply_updates(init, update);
 				} else {
 					state.update.push(...update);
 				}
@@ -2168,8 +2250,8 @@ function transform_children(children, context) {
 				context.state.template.push('<!>');
 
 				const id = flush_node();
-				state.update.push(
-					b.stmt(
+				state.update.push({
+					operation: b.stmt(
 						b.call(
 							'_$_.html',
 							id,
@@ -2178,7 +2260,7 @@ function transform_children(children, context) {
 							state.namespace === 'mathml' && b.true,
 						),
 					),
-				);
+				});
 			} else if (node.type === 'Text') {
 				const metadata = { tracking: false, await: false };
 				const expression = visit(node.expression, { ...state, metadata });
@@ -2186,7 +2268,11 @@ function transform_children(children, context) {
 				if (metadata.tracking) {
 					state.template.push(' ');
 					const id = flush_node();
-					state.update.push(b.stmt(b.call('_$_.set_text', id, expression)));
+					state.update.push({
+						operation: (key) => b.stmt(b.call('_$_.set_text', id, key)),
+						expression,
+						initial: b.literal(' '),
+					});
 					if (metadata.await) {
 						state.update.async = true;
 					}
@@ -2203,7 +2289,11 @@ function transform_children(children, context) {
 					// Handle Text nodes in fragments
 					state.template.push(' ');
 					const id = flush_node();
-					state.update.push(b.stmt(b.call('_$_.set_text', id, expression)));
+					state.update.push({
+						operation: (key) => b.stmt(b.call('_$_.set_text', id, key)),
+						expression,
+						initial: b.literal(' '),
+					});
 					if (metadata.await) {
 						state.update.async = true;
 					}
@@ -2279,7 +2369,7 @@ function transform_body(body, { visit, state }) {
 			// In TypeScript mode, just add the update statements directly
 			body_state.init.push(...body_state.update);
 		} else {
-			body_state.init.push(b.stmt(b.call('_$_.render', b.thunk(b.block(body_state.update)))));
+			apply_updates(body_state.init, body_state.update);
 		}
 	}
 
@@ -2335,6 +2425,32 @@ function create_tsx_with_typescript_support() {
 
 	return {
 		...base_tsx,
+		// Custom handler for Property nodes to prevent method shorthand for components
+		// When a component is transformed to a FunctionExpression, we want to preserve
+		// the explicit syntax (key: function name() {}) instead of method shorthand (key() {})
+		// This ensures proper source mapping for the 'function'/'component' keyword
+		Property(node, context) {
+			// Check if the value is a function that was originally a component
+			const isComponent =
+				node.value?.type === 'FunctionExpression' && node.value.metadata?.was_component;
+
+			if (isComponent) {
+				// Manually print as non-method property to preserve 'function' keyword
+				// This ensures esrap creates proper source map entries for the component->function transformation
+				if (node.computed) {
+					context.write('[');
+					context.visit(node.key);
+					context.write(']');
+				} else {
+					context.visit(node.key);
+				}
+				context.write(': ');
+				context.visit(node.value);
+			} else {
+				// Use default handler for non-component properties
+				base_tsx.Property(node, context);
+			}
+		},
 		// Custom handler for ArrayPattern to ensure typeAnnotation is visited
 		// esrap's TypeScript handler doesn't visit typeAnnotation for ArrayPattern (only for ObjectPattern)
 		ArrayPattern(node, context) {

package/src/compiler/utils.js

@@ -913,3 +913,20 @@ export function determine_namespace_for_children(element_name, current_namespace
 
 	return current_namespace;
 }
+
+/**
+ * Converts and index to a key string, where the starting character is a
+ * letter.
+ * @param {number} index
+ */
+export function index_to_key(index) {
+	const letters = 'abcdefghijklmnopqrstuvwxyz';
+	let key = '';
+
+	do {
+		key = letters[index % 26] + key;
+		index = Math.floor(index / 26) - 1;
+	} while (index >= 0);
+
+	return key;
+}

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

@@ -60,10 +60,11 @@ export function effect(fn) {
 
 /**
  * @param {Function} fn
+ * @param {any} [state]
  * @param {number} [flags]
  */
-export function render(fn, flags = 0) {
-	return block(RENDER_BLOCK | flags, fn);
+export function render(fn, state, flags = 0) {
+	return block(RENDER_BLOCK | flags, fn, state);
 }
 
 /**

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

@@ -16,46 +16,50 @@ export function composite(get_component, node, props) {
 	/** @type {Block | null} */
 	var b = null;
 
-	render(() => {
-		var component = get_component();
-
-		if (b !== null) {
-			destroy_block(b);
-			b = null;
-		}
-
-		if (typeof component === 'function') {
-			// Handle as regular component
-			b = branch(() => {
-				var block = active_block;
-				/** @type {ComponentFunction} */ (component)(anchor, props, block);
-			});
-		} else {
-			// Custom element
-			b = branch(() => {
-				var block = /** @type {Block} */ (active_block);
-
-				var element = document.createElement(
-					/** @type {keyof HTMLElementTagNameMap} */ (component),
-				);
-				/** @type {ChildNode} */ (anchor).before(element);
-
-				if (block.s === null) {
-					block.s = {
-						start: element,
-						end: element,
-					};
-				}
-
-				render_spread(element, () => props || {});
-
-				if (typeof props?.children === 'function') {
-					var child_anchor = document.createComment('');
-					element.appendChild(child_anchor);
-
-					props?.children?.(child_anchor, {}, block);
-				}
-			});
-		}
-	}, COMPOSITE_BLOCK);
+	render(
+		() => {
+			var component = get_component();
+
+			if (b !== null) {
+				destroy_block(b);
+				b = null;
+			}
+
+			if (typeof component === 'function') {
+				// Handle as regular component
+				b = branch(() => {
+					var block = active_block;
+					/** @type {ComponentFunction} */ (component)(anchor, props, block);
+				});
+			} else {
+				// Custom element
+				b = branch(() => {
+					var block = /** @type {Block} */ (active_block);
+
+					var element = document.createElement(
+						/** @type {keyof HTMLElementTagNameMap} */ (component),
+					);
+					/** @type {ChildNode} */ (anchor).before(element);
+
+					if (block.s === null) {
+						block.s = {
+							start: element,
+							end: element,
+						};
+					}
+
+					render_spread(element, () => props || {});
+
+					if (typeof props?.children === 'function') {
+						var child_anchor = document.createComment('');
+						element.appendChild(child_anchor);
+
+						props?.children?.(child_anchor, {}, block);
+					}
+				});
+			}
+		},
+		null,
+		COMPOSITE_BLOCK,
+	);
 }

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

@@ -114,15 +114,19 @@ export function for_block(node, get_collection, render_fn, flags) {
 		anchor = node.appendChild(create_text());
 	}
 
-	render(() => {
-		var block = /** @type {Block} */ (active_block);
-		var collection = get_collection();
-		var array = collection_to_array(collection);
-
-		untrack(() => {
-			reconcile_by_ref(anchor, block, array, render_fn, is_controlled, is_indexed);
-		});
-	}, FOR_BLOCK);
+	render(
+		() => {
+			var block = /** @type {Block} */ (active_block);
+			var collection = get_collection();
+			var array = collection_to_array(collection);
+
+			untrack(() => {
+				reconcile_by_ref(anchor, block, array, render_fn, is_controlled, is_indexed);
+			});
+		},
+		null,
+		FOR_BLOCK,
+	);
 }
 
 /**
@@ -144,23 +148,27 @@ export function for_block_keyed(node, get_collection, render_fn, flags, get_key)
 		anchor = node.appendChild(create_text());
 	}
 
-	render(() => {
-		var block = /** @type {Block} */ (active_block);
-		var collection = get_collection();
-		var array = collection_to_array(collection);
-
-		untrack(() => {
-			reconcile_by_key(
-				anchor,
-				block,
-				array,
-				render_fn,
-				is_controlled,
-				is_indexed,
-				/** @type {(item: V) => K} */ (get_key),
-			);
-		});
-	}, FOR_BLOCK);
+	render(
+		() => {
+			var block = /** @type {Block} */ (active_block);
+			var collection = get_collection();
+			var array = collection_to_array(collection);
+
+			untrack(() => {
+				reconcile_by_key(
+					anchor,
+					block,
+					array,
+					render_fn,
+					is_controlled,
+					is_indexed,
+					/** @type {(item: V) => K} */ (get_key),
+				);
+			});
+		},
+		null,
+		FOR_BLOCK,
+	);
 }
 
 /**

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

@@ -10,5 +10,5 @@ export function head(render_fn) {
 	/** @type {Comment | Text} */
 	var anchor = document.head.appendChild(create_text());
 
-	render(() => render_fn(anchor), HEAD_BLOCK);
+	render(() => render_fn(anchor), null, HEAD_BLOCK);
 }

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

@@ -36,11 +36,15 @@ export function if_block(node, fn) {
 		}
 	};
 
-	render(() => {
-		has_branch = false;
-		fn(set_branch);
-		if (!has_branch) {
-			update_branch(null, null);
-		}
-	}, IF_BLOCK);
+	render(
+		() => {
+			has_branch = false;
+			fn(set_branch);
+			if (!has_branch) {
+				update_branch(null, null);
+			}
+		},
+		null,
+		IF_BLOCK,
+	);
 }

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

@@ -28,8 +28,6 @@ export function init_operations() {
 	// @ts-expect-error
 	element_prototype.__click = undefined;
 	// @ts-expect-error
-	element_prototype.__className = '';
-	// @ts-expect-error
 	element_prototype.__attributes = null;
 	// @ts-expect-error
 	element_prototype.__styles = null;

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

@@ -188,51 +188,33 @@ function set_attribute_helper(element, key, value) {
 	}
 }
 
-/**
- * @param {import('clsx').ClassValue} value
- * @param {string} [hash]
- * @returns {string}
- */
-function to_class(value, hash) {
-	return value == null
-		? (hash ?? '')
-		: // Fast-path for string values
-			typeof value === 'string'
-			? value + (hash ? ' ' + hash : '')
-			: clsx([value, hash]);
-}
-
 /**
  * @param {HTMLElement} dom
- * @param {import('clsx').ClassValue} value
+ * @param {string} value
  * @param {string} [hash]
  * @param {boolean} [is_html]
  * @returns {void}
  */
 export function set_class(dom, value, hash, is_html = true) {
-	// @ts-expect-error need to add __className to patched prototype
-	var prev_class_name = dom.__className;
-
-	if (prev_class_name !== value) {
-		var next_class_name = to_class(value, hash);
-
-		if (prev_class_name !== next_class_name) {
-			// Removing the attribute when the value is only an empty string causes
-			// peformance issues vs simply making the className an empty string. So
-			// we should only remove the class if the the value is nullish.
-			if (value == null && !hash) {
-				dom.removeAttribute('class');
-			} else {
-				if (is_html) {
-					dom.className = next_class_name;
-				} else {
-					dom.setAttribute('class', next_class_name);
-				}
-			}
+	var class_value =
+		value == null
+			? (hash ?? '')
+			: // Fast-path for string values
+				typeof value === 'string'
+				? value + (hash ? ' ' + hash : '')
+				: clsx([value, hash]);
+
+	// Removing the attribute when the value is only an empty string causes
+	// peformance issues vs simply making the className an empty string. So
+	// we should only remove the class if the the value is nullish.
+	if (value == null && hash === undefined) {
+		dom.removeAttribute('class');
+	} else {
+		if (is_html) {
+			dom.className = class_value;
+		} else {
+			dom.setAttribute('class', class_value);
 		}
-
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = value;
 	}
 }
 

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

@@ -255,7 +255,7 @@ export function run_block(block) {
 
 		tracking = (block.f & (ROOT_BLOCK | BRANCH_BLOCK)) === 0;
 		active_dependency = null;
-		var res = block.fn();
+		var res = block.fn(block.s);
 
 		if (typeof res === 'function') {
 			block.t = res;
@@ -499,51 +499,55 @@ export function async_computed(fn, block) {
 	/** @type {Map<Tracked, {v: any, c: number}>} */
 	var new_values = new Map();
 
-	render(() => {
-		var [current, deferred] = capture_deferred(() => (promise = fn()));
+	render(
+		() => {
+			var [current, deferred] = capture_deferred(() => (promise = fn()));
 
-		var restore = capture();
-		/** @type {(() => void) | undefined} */
-		var unuspend;
+			var restore = capture();
+			/** @type {(() => void) | undefined} */
+			var unuspend;
 
-		if (deferred === null) {
-			unuspend = suspend();
-		} else {
-			for (var i = 0; i < deferred.length; i++) {
-				var tracked = deferred[i];
-				new_values.set(tracked, { v: tracked.__v, c: tracked.c });
+			if (deferred === null) {
+				unuspend = suspend();
+			} else {
+				for (var i = 0; i < deferred.length; i++) {
+					var tracked = deferred[i];
+					new_values.set(tracked, { v: tracked.__v, c: tracked.c });
+				}
 			}
-		}
 
-		promise.then((v) => {
-			if (parent && is_destroyed(/** @type {Block} */ (parent))) {
-				return;
-			}
-			if (promise === current && t.__v !== v) {
-				restore();
+			promise.then((v) => {
+				if (parent && is_destroyed(/** @type {Block} */ (parent))) {
+					return;
+				}
+				if (promise === current && t.__v !== v) {
+					restore();
 
-				if (t.__v === UNINITIALIZED) {
-					t.__v = v;
-				} else {
-					set(t, v);
+					if (t.__v === UNINITIALIZED) {
+						t.__v = v;
+					} else {
+						set(t, v);
+					}
 				}
-			}
 
-			if (deferred === null) {
-				unuspend?.();
-			} else if (promise === current) {
-				for (var i = 0; i < deferred.length; i++) {
-					var tracked = deferred[i];
-					var stored = /** @type {{ v: any, c: number }} */ (new_values.get(tracked));
-					var { v, c } = stored;
-					tracked.__v = v;
-					tracked.c = c;
-					schedule_update(tracked.b);
+				if (deferred === null) {
+					unuspend?.();
+				} else if (promise === current) {
+					for (var i = 0; i < deferred.length; i++) {
+						var tracked = deferred[i];
+						var stored = /** @type {{ v: any, c: number }} */ (new_values.get(tracked));
+						var { v, c } = stored;
+						tracked.__v = v;
+						tracked.c = c;
+						schedule_update(tracked.b);
+					}
+					new_values.clear();
 				}
-				new_values.clear();
-			}
-		});
-	}, ASYNC_BLOCK);
+			});
+		},
+		null,
+		ASYNC_BLOCK,
+	);
 
 	return new Promise(async (resolve) => {
 		var p;

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

@@ -15,18 +15,22 @@ export function switch_block(node, fn) {
 	/** @type {Block | null} */
 	var b = null;
 
-	render(() => {
-		const branch_fn = fn() ?? null;
-		if (current_branch === branch_fn) return;
-		current_branch = branch_fn;
+	render(
+		() => {
+			const branch_fn = fn() ?? null;
+			if (current_branch === branch_fn) return;
+			current_branch = branch_fn;
 
-		if (b !== null) {
-			destroy_block(b);
-			b = null;
-		}
+			if (b !== null) {
+				destroy_block(b);
+				b = null;
+			}
 
-		if (branch_fn !== null) {
-			b = branch(() => branch_fn(anchor));
-		}
-	}, SWITCH_BLOCK);
+			if (branch_fn !== null) {
+				b = branch(() => branch_fn(anchor));
+			}
+		},
+		null,
+		SWITCH_BLOCK,
+	);
 }