ripple 0.2.207 → 0.2.210

package/src/jsx-runtime.js

@@ -13,15 +13,15 @@
  * @returns {void} Ripple components don't return anything
  */
 export function jsx(type, props, key) {
-  // Ripple components are imperative - they don't return JSX elements
-  // This is a placeholder for the actual Ripple rendering logic
-  if (typeof type === 'function') {
-    // Call the Ripple component function
-    type(props);
-  } else {
-    // Handle DOM elements
-    console.warn('DOM element rendering not implemented in jsx runtime:', type, props);
-  }
+	// Ripple components are imperative - they don't return JSX elements
+	// This is a placeholder for the actual Ripple rendering logic
+	if (typeof type === 'function') {
+		// Call the Ripple component function
+		type(props);
+	} else {
+		// Handle DOM elements
+		console.warn('DOM element rendering not implemented in jsx runtime:', type, props);
+	}
 }
 
 /**
@@ -32,7 +32,7 @@ export function jsx(type, props, key) {
  * @returns {void} Ripple components don't return anything
  */
 export function jsxs(type, props, key) {
-  return jsx(type, props, key);
+	return jsx(type, props, key);
 }
 
 /**
@@ -41,6 +41,6 @@ export function jsxs(type, props, key) {
  * @returns {void} Ripple fragments don't return anything
  */
 export function Fragment(props) {
-  // Ripple fragments are imperative
-  console.warn('Fragment rendering not implemented in jsx runtime:', props);
+	// Ripple fragments are imperative
+	console.warn('Fragment rendering not implemented in jsx runtime:', props);
 }

package/src/runtime/array.js

@@ -9,12 +9,12 @@ import { array_proxy } from './proxy.js';
  * @returns {TrackedArray<T>}
  */
 export function TrackedArray(...elements) {
-  if (!new.target) {
-    throw new Error("TrackedArray must be called with 'new'");
-  }
+	if (!new.target) {
+		throw new Error("TrackedArray must be called with 'new'");
+	}
 
-  var block = safe_scope();
-  return array_proxy({ elements, block });
+	var block = safe_scope();
+	return array_proxy({ elements, block });
 }
 
 /**
@@ -25,9 +25,9 @@ export function TrackedArray(...elements) {
  * @returns {TrackedArray<T>}
  */
 TrackedArray.from = function (arrayLike, mapFn, thisArg) {
-  var block = safe_scope();
-  var elements = mapFn ? Array.from(arrayLike, mapFn, thisArg) : Array.from(arrayLike);
-  return array_proxy({ elements, block, from_static: true });
+	var block = safe_scope();
+	var elements = mapFn ? Array.from(arrayLike, mapFn, thisArg) : Array.from(arrayLike);
+	return array_proxy({ elements, block, from_static: true });
 };
 
 /**
@@ -36,9 +36,9 @@ TrackedArray.from = function (arrayLike, mapFn, thisArg) {
  * @returns {TrackedArray<T>}
  */
 TrackedArray.of = function (...items) {
-  var block = safe_scope();
-  var elements = Array.of(...items);
-  return array_proxy({ elements, block, from_static: true });
+	var block = safe_scope();
+	var elements = Array.of(...items);
+	return array_proxy({ elements, block, from_static: true });
 };
 
 /**
@@ -49,11 +49,11 @@ TrackedArray.of = function (...items) {
  * @returns {Promise<TrackedArray<T>>}
  */
 TrackedArray.fromAsync = async function (arrayLike, mapFn, thisArg) {
-  var block = safe_scope();
-  var elements = mapFn
-    ? await Array.fromAsync(arrayLike, mapFn, thisArg)
-    : await Array.fromAsync(arrayLike);
-  return array_proxy({ elements, block, from_static: true });
+	var block = safe_scope();
+	var elements = mapFn
+		? await Array.fromAsync(arrayLike, mapFn, thisArg)
+		: await Array.fromAsync(arrayLike);
+	return array_proxy({ elements, block, from_static: true });
 };
 
 /**
@@ -63,5 +63,5 @@ TrackedArray.fromAsync = async function (arrayLike, mapFn, thisArg) {
  * @returns {TrackedArray<T>}
  */
 export function tracked_array(elements, block) {
-  return array_proxy({ elements, block, from_static: true });
+	return array_proxy({ elements, block, from_static: true });
 }

package/src/runtime/create-subscriber.js

@@ -1,6 +1,6 @@
 /** @import { createSubscriber } from '#public' */
 import { untrack, queue_microtask } from './internal/client/runtime.js';
-import { effect } from './internal/client/blocks.js'
+import { effect } from './internal/client/blocks.js';
 
 /** @type {createSubscriber} */
 export function createSubscriber(start) {

package/src/runtime/index-client.js

@@ -17,7 +17,7 @@ import {
 	set_hydrate_node,
 	set_hydrating,
 } from './internal/client/hydration.js';
-import { COMMENT_NODE, HYDRATION_ERROR, HYDRATION_START } from '../constants.js';
+import { COMMENT_NODE, HYDRATION_START } from '../constants.js';
 
 // Re-export JSX runtime functions for jsxImportSource: "ripple"
 export { jsx, jsxs, Fragment } from '../jsx-runtime.js';
@@ -84,10 +84,6 @@ export function hydrate(component, options) {
 		set_hydrate_node(/** @type {Comment} */ (anchor));
 		hydrate_next();
 
-		if (!anchor) {
-			throw HYDRATION_ERROR;
-		}
-
 		_root = root(() => {
 			component(/** @type {Comment} */ (anchor), props, active_block);
 		}, options.compat);

package/src/runtime/index-server.js

@@ -56,3 +56,18 @@ export const bindTextContent = noop;
 export const bindNode = noop;
 export const bindOffsetWidth = noop;
 export const bindOffsetHeight = noop;
+
+/**
+ * Portal component noop for server-side rendering.
+ * Portals are client-only and do not render on the server.
+ * However, we need to output a marker comment so hydration can work correctly.
+ * @param {any} output
+ * @param {any} __
+ */
+export function Portal(output, __) {
+	// Portals are client-only, but we need to output a marker for hydration
+	// Output an empty HTML comment as a placeholder
+	if (output && typeof output.push === 'function') {
+		output.push('<!--portal-->');
+	}
+}

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/compat.js

@@ -1,13 +1,13 @@
 /** @import { CompatApi } from '#client' */
 
-import { ROOT_BLOCK } from "./constants.js";
-import { active_block } from "./runtime.js";
+import { ROOT_BLOCK } from './constants.js';
+import { active_block } from './runtime.js';
 
 /**
  * @param {string} kind
  * @returns {CompatApi | null}
  */
-function get_compat_from_root(kind)  {
+function get_compat_from_root(kind) {
 	var current = active_block;
 
 	while (current !== null) {

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

@@ -15,7 +15,12 @@ import { top_element_to_ns } from './utils.js';
  */
 export function composite(get_component, node, props) {
 	if (hydrating) {
-		hydrate_next();
+		// During hydration, `node` may already point at the first real SSR node
+		// (e.g. layout children). Only skip forward when we are on an empty
+		// comment anchor from a client template placeholder.
+		if (node.nodeType === 8 && /** @type {Comment} */ (node).data === '') {
+			hydrate_next();
+		}
 	}
 
 	var anchor = node;

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

@@ -1,14 +1,60 @@
+/** @import { TemplateNode } from '#client' */
 import { render } from './blocks.js';
 import { HEAD_BLOCK } from './constants.js';
-import { create_text } from './operations.js';
+import { COMMENT_NODE } from '../../../constants.js';
+import { create_text, get_first_child, get_next_sibling } from './operations.js';
+import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from './hydration.js';
 
 /**
+ * @param {string} hash
  * @param {(anchor: Node) => void} render_fn
  * @returns {void}
  */
-export function head(render_fn) {
+export function head(hash, render_fn) {
+	// The head function may be called after the first hydration pass and ssr comment nodes may still be present,
+	// therefore we need to skip that when we detect that we're not in hydration mode.
+	let previous_hydrate_node = null;
+	let was_hydrating = hydrating;
+
 	/** @type {Comment | Text} */
-	var anchor = document.head.appendChild(create_text());
+	var anchor;
+
+	if (hydrating) {
+		previous_hydrate_node = hydrate_node;
+
+		var head_anchor = get_first_child(document.head);
+
+		// There might be multiple head blocks in our app, and they could have been
+		// rendered in an arbitrary order — find one corresponding to this component
+		while (
+			head_anchor !== null &&
+			(head_anchor.nodeType !== COMMENT_NODE || /** @type {Comment} */ (head_anchor).data !== hash)
+		) {
+			head_anchor = get_next_sibling(head_anchor);
+		}
+
+		// If we can't find an opening hydration marker, skip hydration (this can happen
+		// if a framework rendered body but not head content)
+		if (head_anchor === null) {
+			set_hydrating(false);
+		} else {
+			var start = /** @type {TemplateNode} */ (get_next_sibling(head_anchor));
+			head_anchor.remove(); // in case this component is repeated
+
+			set_hydrate_node(start);
+		}
+	}
+
+	if (!hydrating) {
+		anchor = document.head.appendChild(create_text());
+	}
 
-	render(() => render_fn(anchor), null, HEAD_BLOCK);
+	try {
+		render(() => render_fn(anchor), null, HEAD_BLOCK);
+	} finally {
+		if (was_hydrating) {
+			set_hydrating(true);
+			set_hydrate_node(/** @type {TemplateNode} */ (previous_hydrate_node));
+		}
+	}
 }

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

@@ -1,9 +1,11 @@
 /** @import { Block } from '#client' */
 
 import { remove_block_dom, render } from './blocks.js';
-import { get_first_child } from './operations.js';
+import { get_first_child, get_next_sibling } from './operations.js';
 import { active_block } from './runtime.js';
 import { assign_nodes, create_fragment_from_html } from './template.js';
+import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
+import { COMMENT_NODE } from '../../../constants.js';
 
 /**
  * Renders dynamic HTML content into the DOM by inserting it before the anchor node.
@@ -13,14 +15,41 @@ import { assign_nodes, create_fragment_from_html } from './template.js';
  * @returns {void}
  */
 export function html(node, get_html, svg = false, mathml = false) {
-	/** @type {ChildNode} */
 	var anchor = node;
-	/** @type {string} */
 	var html = '';
 
 	render(() => {
 		var block = /** @type {Block} */ (active_block);
-		html = get_html() + '';
+		var new_html = get_html() + '';
+
+		// If the HTML hasn't changed, skip the update (but still hydrate on first run)
+		if (html === new_html) {
+			// During hydration, we need to skip past the content and end marker even if value hasn't changed
+			if (hydrating) {
+				// The anchor is the hash comment - we need to skip past it and its content
+				set_hydrate_node(anchor);
+				var next = hydrate_next();
+
+				// Walk until we find the empty comment end marker
+				while (
+					next !== null &&
+					(next.nodeType !== COMMENT_NODE || /** @type {Comment} */ (next).data !== '')
+				) {
+					next = get_next_sibling(next);
+				}
+
+				// Move past the end marker (if next sibling exists)
+				if (next !== null) {
+					var next_node = get_next_sibling(next);
+					if (next_node !== null) {
+						set_hydrate_node(next_node);
+					}
+				}
+			}
+			return;
+		}
+
+		html = new_html;
 
 		if (svg) html = `<svg>${html}</svg>`;
 		else if (mathml) html = `<math>${html}</math>`;
@@ -30,25 +59,57 @@ export function html(node, get_html, svg = false, mathml = false) {
 			block.s.start = block.s.end = null;
 		}
 
+		if (hydrating) {
+			set_hydrate_node(anchor);
+
+			/** @type {Node | null} */
+			var next = hydrate_next();
+
+			// Walk through content nodes until we hit the empty comment end marker
+			while (
+				next !== null &&
+				(next.nodeType !== COMMENT_NODE || /** @type {Comment} */ (next).data !== '')
+			) {
+				next = get_next_sibling(next);
+			}
+
+			if (next === null) {
+				throw new Error('Hydration mismatch: expected end marker for HTML block');
+			}
+
+			// Include the hash comment and end marker in the assigned nodes
+			// This follows Svelte's approach where these markers are part of the effect's managed DOM
+			// They will be cleaned up when/if the content updates
+			assign_nodes(anchor, next);
+
+			// Move past the end marker for the next operation
+			// For empty HTML or end of container, next sibling might be null - that's okay
+			var next_node = get_next_sibling(next);
+			if (next_node !== null) {
+				set_hydrate_node(next_node);
+			}
+			return;
+		}
+
 		if (html === '') return;
-		/** @type {DocumentFragment | Element} */
-		var node = create_fragment_from_html(html);
+
+		var fragment = create_fragment_from_html(html);
 
 		if (svg || mathml) {
-			node = /** @type {Element} */ (get_first_child(node));
+			fragment = /** @type {DocumentFragment} */ (get_first_child(fragment));
 		}
 
 		assign_nodes(
-			/** @type {Element} */ (get_first_child(node)),
-			/** @type {Element} */ (node.lastChild),
+			/** @type {Node} */ (get_first_child(fragment)),
+			/** @type {Node} */ (fragment.lastChild),
 		);
 
 		if (svg || mathml) {
-			while (get_first_child(node)) {
-				anchor.before(/** @type {Element} */ (get_first_child(node)));
+			while (get_first_child(fragment)) {
+				anchor.before(/** @type {Node} */ (get_first_child(fragment)));
 			}
 		} else {
-			anchor.before(node);
+			anchor.before(fragment);
 		}
 	});
 }

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

@@ -28,6 +28,18 @@ export function hydrate_next() {
 	return set_hydrate_node(get_next_sibling(/** @type {Node} */ (hydrate_node)));
 }
 
+export function next(n = 1) {
+	if (hydrating) {
+		var node = hydrate_node;
+
+		for (var i = 0; i < n; i++) {
+			node = get_next_sibling(/** @type {Node} */ (node));
+		}
+
+		hydrate_node = node;
+	}
+}
+
 /** @param {Node} node */
 export function pop(node) {
 	if (!hydrating) return;

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

@@ -88,4 +88,4 @@ export { tsx_compat } from './compat.js';
 
 export { TRY_BLOCK } from './constants.js';
 
-export { pop } from './hydration.js';
+export { pop, next } from './hydration.js';

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

@@ -5,6 +5,13 @@ import { UNINITIALIZED } from './constants.js';
 import { handle_root_events } from './events.js';
 import { create_text } from './operations.js';
 import { active_block } from './runtime.js';
+import {
+	hydrating,
+	hydrate_next,
+	hydrate_node,
+	set_hydrating,
+	set_hydrate_node,
+} from './hydration.js';
 
 /**
  * @param {any} _
@@ -12,6 +19,11 @@ import { active_block } from './runtime.js';
  * @returns {void}
  */
 export function Portal(_, props) {
+	// Portals are client-only and don't participate in hydration
+	// The compiler-generated code already handles getting the node via sibling()
+	var was_hydrating = hydrating;
+	var previous_hydrate_node = hydrate_node;
+
 	/** @type {Element | symbol} */
 	let target = UNINITIALIZED;
 	/** @type {((anchor: Node, props: {}, block: Block) => void) | symbol} */
@@ -25,42 +37,55 @@ export function Portal(_, props) {
 	/** @type {Node | null} */
 	var dom_end = null;
 
-	render(() => {
-		if (target === (target = props.target)) return;
-		if (children === (children = props.children)) return;
+	// Temporarily disable hydration for portal content
+	if (was_hydrating) {
+		set_hydrating(false);
+	}
 
-		if (b !== null) {
-			destroy_block(b);
-		}
+	try {
+		render(() => {
+			if (target === (target = props.target)) return;
+			if (children === (children = props.children)) return;
 
-		if (anchor !== null) {
-			anchor.remove();
-		}
+			if (b !== null) {
+				destroy_block(b);
+			}
 
-		dom_start = dom_end = null;
+			if (anchor !== null) {
+				anchor.remove();
+			}
 
-		anchor = create_text();
-		/** @type {Element} */ (target).append(anchor);
+			dom_start = dom_end = null;
 
-		const cleanup_events = handle_root_events(/** @type {Element} */ (target));
+			anchor = create_text();
+			/** @type {Element} */ (target).append(anchor);
 
-		var block = /** @type {Block} */ (active_block);
+			const cleanup_events = handle_root_events(/** @type {Element} */ (target));
 
-		b = branch(() => {
-			if (typeof children === 'function') {
-				children(/** @type {Text} */ (anchor), {}, block);
-			}
-		});
+			var block = /** @type {Block} */ (active_block);
 
-		dom_start = b?.s?.start;
-		dom_end = b?.s?.end;
+			b = branch(() => {
+				if (typeof children === 'function') {
+					children(/** @type {Text} */ (anchor), {}, block);
+				}
+			});
 
-		return () => {
-			cleanup_events();
-			/** @type {Text} */ (anchor).remove();
-			if (dom_start && dom_end) {
-				remove_block_dom(dom_start, dom_end);
-			}
-		};
-	});
+			dom_start = b?.s?.start;
+			dom_end = b?.s?.end;
+
+			return () => {
+				cleanup_events();
+				/** @type {Text} */ (anchor).remove();
+				if (dom_start && dom_end) {
+					remove_block_dom(dom_start, dom_end);
+				}
+			};
+		});
+	} finally {
+		// Restore hydration state
+		if (was_hydrating) {
+			set_hydrating(true);
+			set_hydrate_node(/** @type {any} */ (previous_hydrate_node));
+		}
+	}
 }

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

@@ -22,7 +22,9 @@ export async function rpc(hash, args) {
 	}
 
 	if (data === '') {
-		throw new Error('The server function end-point did not return a response. Are you running a Ripple server?');
+		throw new Error(
+			'The server function end-point did not return a response. Are you running a Ripple server?',
+		);
 	}
 
 	return devalue.parse(data).value;

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

@@ -2,6 +2,7 @@
 
 import { branch, destroy_block, render } from './blocks.js';
 import { SWITCH_BLOCK } from './constants.js';
+import { hydrate_next, hydrating } from './hydration.js';
 import { next_sibling } from './operations.js';
 import { append } from './template.js';
 
@@ -34,6 +35,10 @@ function move(block, anchor) {
  * @returns {void}
  */
 export function switch_block(anchor, fn) {
+	if (hydrating) {
+		hydrate_next();
+	}
+
 	/** @type {((anchor: ChildNode) => void)[]} */
 	var prev = [];
 	/** @type {Map<(anchor: ChildNode) => void, Block>} */