ripple 0.2.208 → 0.2.210

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

@@ -5,9 +5,11 @@ import {
 	TEMPLATE_USE_IMPORT_NODE,
 	TEMPLATE_SVG_NAMESPACE,
 	TEMPLATE_MATHML_NAMESPACE,
+	HYDRATION_START,
+	HYDRATION_END,
 } from '../../../constants.js';
 import { hydrate_next, hydrate_node, hydrating, pop } from './hydration.js';
-import { create_text, get_first_child, is_firefox } from './operations.js';
+import { create_text, get_first_child, get_next_sibling, is_firefox } from './operations.js';
 import { active_block, active_namespace } from './runtime.js';
 
 /**
@@ -68,30 +70,103 @@ export function template(content, flags) {
 	var is_comment = content === '<!>';
 	var has_start = !is_comment && !content.startsWith('<!>');
 
+	// For fragments, eagerly create the node so we can walk its children
+	// during hydration to find the correct end node. The eagerly-created
+	// node is reused as the clone template in the non-hydrating path.
+	if (is_fragment) {
+		node = create_fragment_from_html(
+			has_start ? content : '<!>' + content,
+			use_svg_namespace,
+			use_mathml_namespace,
+		);
+	}
+
 	return () => {
 		if (hydrating) {
-			assign_nodes(/** @type {Node} */ (hydrate_node), /** @type {Node} */ (hydrate_node));
+			if (is_fragment) {
+				// Walk the template fragment's children in lockstep with hydrated
+				// DOM siblings. Comment nodes (<!>) are control flow anchors whose
+				// hydration markers (<!--[-->...<!--]-->) are consumed by block
+				// processing, so we skip them and only advance for element/text nodes.
+				var start = /** @type {Node} */ (hydrate_node);
+				var end = start;
+				var children = /** @type {DocumentFragment} */ (node).childNodes;
+				var is_first = true;
+
+				for (var i = 0; i < children.length; i++) {
+					if (children[i].nodeType === 8) continue;
+
+					if (is_first) {
+						is_first = false;
+						continue;
+					}
+
+					// Advance past comment nodes in the hydrated DOM. Each <!>
+					// anchor in the template expands to a <!--[-->...<!--]-->
+					// region, and there may be consecutive ones. Track depth so
+					// nested blocks are skipped, and stop at the first non-comment
+					// node at depth 0.
+					var next = get_next_sibling(end);
+					var depth = 0;
+
+					while (next !== null) {
+						if (next.nodeType === 8) {
+							var data = /** @type {Comment} */ (next).data;
+							if (data === HYDRATION_START) {
+								depth++;
+							} else if (data === HYDRATION_END) {
+								if (depth > 0) {
+									depth--;
+								} else {
+									// Reached a close marker that belongs to a parent block
+									next = null;
+									break;
+								}
+							}
+							next = get_next_sibling(next);
+							continue;
+						}
+
+						if (depth === 0) {
+							break;
+						}
+						next = get_next_sibling(next);
+					}
+
+					if (next === null) {
+						break;
+					}
+					end = next;
+				}
+
+				assign_nodes(start, end);
+				return start;
+			} else {
+				assign_nodes(/** @type {Node} */ (hydrate_node), /** @type {Node} */ (hydrate_node));
+			}
 			return /** @type {Node} */ (hydrate_node);
 		}
 		// If using runtime namespace, check active_namespace
 		var svg = !is_comment && (use_svg_namespace || active_namespace === 'svg');
 		var mathml = !is_comment && (use_mathml_namespace || active_namespace === 'mathml');
 
-		if (node === undefined) {
+		if (node === undefined || use_svg_namespace !== svg || use_mathml_namespace !== mathml) {
 			node = create_fragment_from_html(has_start ? content : '<!>' + content, svg, mathml);
 			if (!is_fragment) node = /** @type {Node} */ (get_first_child(node));
 		}
 
+		/** @type {DocumentFragment | Node} */
 		var clone =
 			use_import_node || is_firefox
 				? document.importNode(/** @type {Node} */ (node), true)
 				: /** @type {Node} */ (node).cloneNode(true);
 
 		if (is_fragment) {
-			var start = get_first_child(clone);
-			var end = clone.lastChild;
+			// we know for sure that children exist
+			var start = /** @type {Node} */ (get_first_child(/** @type {DocumentFragment} */ (clone)));
+			var end = /** @type {Node} */ (/** @type {DocumentFragment} */ (clone).lastChild);
 
-			assign_nodes(/** @type {Node} */ (start), /** @type {Node} */ (end));
+			assign_nodes(start, end);
 		} else {
 			assign_nodes(clone, clone);
 		}
@@ -104,15 +179,44 @@ export function template(content, flags) {
  * Appends a DOM node before the anchor node.
  * @param {ChildNode} anchor - The anchor node.
  * @param {Node} dom - The DOM node to append.
+ * @param {boolean} [skip_advance] - If true, don't advance hydrate_node (used when next() already positioned it).
  */
-export function append(anchor, dom) {
+export function append(anchor, dom, skip_advance) {
 	if (hydrating) {
-		pop(dom);
+		// When skip_advance is true, the caller (e.g., a fragment component) has already
+		// used next() to position hydrate_node correctly. We must NOT reset it.
+		if (skip_advance) {
+			return;
+		}
+
 		// During hydration, if anchor === dom, we're hydrating a child component
 		// where the "anchor" IS the content. Don't advance past it.
-		if (anchor !== dom) {
-			hydrate_next();
+		if (anchor === dom) {
+			pop(dom);
+			return;
 		}
+
+		// If the hydration cursor has descended into dom's children (e.g. after
+		// child()/sibling() traversal inside a single-node template), we need
+		// pop() to reset back to dom's sibling level before advancing.
+		// But if the cursor is already at dom's sibling level (e.g. because
+		// nested control flow blocks advanced it past dom via sibling traversal),
+		// pop() would incorrectly reset backwards — so we skip it.
+		if (hydrate_node?.parentNode === dom) {
+			pop(dom);
+		} else if (hydrate_node !== dom) {
+			// Cursor has advanced past dom via sibling traversal (due to nested
+			// block processing). Update the branch block's end to reflect the
+			// actual extent, which may be past the statically-assigned end from
+			// the template's assign_nodes call.
+			var block = /** @type {Block} */ (active_block);
+			var s = block.s;
+			if (s !== null) {
+				s.end = /** @type {Node} */ (hydrate_node);
+			}
+		}
+
+		hydrate_next();
 		return;
 	}
 	anchor.before(/** @type {Node} */ (dom));
@@ -123,7 +227,9 @@ export function text(data = '') {
 		assign_nodes(/** @type {Node} */ (hydrate_node), /** @type {Node} */ (hydrate_node));
 		return /** @type {Node} */ (hydrate_node);
 	}
-	return create_text(data);
+	var node = create_text(data);
+	assign_nodes(node, node);
+	return node;
 }
 
 /**

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

@@ -39,6 +39,7 @@ export function try_block(node, fn, catch_fn, pending_fn = null) {
 	 */
 	function move_block(block, fragment) {
 		var state = block.s;
+		if (state === null) return;
 		var node = state.start;
 		var end = state.end;
 

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

@@ -1,6 +1,6 @@
 /**
 @import { Component, Dependency, Derived, Tracked } from '#server';
-@import { render, renderToStream, SSRComponent } from 'ripple/server';
+@import { SSRComponent } from 'ripple/server';
 */
 
 import { Readable } from 'stream';
@@ -11,9 +11,14 @@ import { is_boolean_attribute } from '../../../compiler/utils.js';
 import { clsx } from 'clsx';
 import { normalize_css_property_name } from '../../../utils/normalize_css_property_name.js';
 import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../constants.js';
+import {
+	is_tag_valid_with_parent,
+	is_tag_valid_with_ancestor,
+} from '../../../html-tree-validation.js';
 
 export { escape };
 export { register_component_css as register_css } from './css-registry.js';
+export { hash } from '../../../utils/hashing.js';
 
 /** @type {null | Component} */
 export let active_component = null;
@@ -225,6 +230,9 @@ export async function render(component) {
 	let body = '';
 	let css = new Set();
 
+	// Reset dev-mode element tracking state at the start of each render
+	reset_element_state();
+
 	try {
 		if (component.async) {
 			await component(output, {});
@@ -240,6 +248,8 @@ export async function render(component) {
 		css = output.css;
 	} catch (error) {
 		console.log(error);
+	} finally {
+		reset_element_state();
 	}
 	return { head, body, css };
 }
@@ -260,6 +270,9 @@ export function renderToStream(component) {
  * @param {Output} output
  */
 async function render_in_chunks(component, stream, output) {
+	// Reset dev-mode element tracking state at the start of each render
+	reset_element_state();
+
 	try {
 		if (component.async) {
 			await component(output, {});
@@ -273,6 +286,8 @@ async function render_in_chunks(component, stream, output) {
 	} catch (error) {
 		console.error(error);
 		stream.emit('error', error);
+	} finally {
+		reset_element_state();
 	}
 }
 /**
@@ -294,6 +309,103 @@ export function pop_component() {
 	active_component = component.p;
 }
 
+/**
+ * @typedef {{
+ * 	tag: string;
+ * 	parent: undefined | ElementContext;
+ *  filename: undefined | string;
+ *  line: number;
+ *  column: number;
+ * }} ElementContext
+ */
+
+/** @type {ElementContext | undefined} */
+let current_element;
+
+/**
+ * @type {Set<string>}
+ */
+let seen_warnings = new Set();
+
+/**
+ * @param {string} message
+ */
+function print_nesting_error(message) {
+	message =
+		`node_invalid_placement_ssr: ${message}\n\n` +
+		'This can cause content to shift around as the browser repairs the HTML, and will likely result in a hydration mismatch.';
+
+	if (seen_warnings.has(message)) return;
+	seen_warnings.add(message);
+
+	// eslint-disable-next-line no-console
+	console.error(message);
+}
+
+/**
+ * Pushes an element onto the element stack and validates its nesting.
+ * Used during DEV mode SSR to detect invalid HTML nesting that would cause
+ * the browser to repair the HTML, breaking hydration.
+ * @param {string} tag
+ * @param {string} filename
+ * @param {number} line
+ * @param {number} column
+ * @returns {void}
+ */
+export function push_element(tag, filename, line, column) {
+	var parent = current_element;
+	var element = { tag, parent, filename, line, column };
+
+	if (parent !== undefined) {
+		var ancestor = parent.parent;
+		var ancestors = [parent.tag];
+
+		const child_loc = filename ? `${filename}:${line}:${column}` : undefined;
+		const parent_loc = parent.filename
+			? `${parent.filename}:${parent.line}:${parent.column}`
+			: undefined;
+
+		const message = is_tag_valid_with_parent(tag, parent.tag, child_loc, parent_loc);
+		if (message) print_nesting_error(message);
+
+		while (ancestor != null) {
+			ancestors.push(ancestor.tag);
+			const ancestor_loc = ancestor.filename
+				? `${ancestor.filename}:${ancestor.line}:${ancestor.column}`
+				: undefined;
+
+			const ancestor_message = is_tag_valid_with_ancestor(tag, ancestors, child_loc, ancestor_loc);
+			if (ancestor_message) print_nesting_error(ancestor_message);
+
+			ancestor = ancestor.parent;
+		}
+	}
+
+	current_element = element;
+}
+
+/**
+ * Pops the current element from the element stack.
+ * @returns {void}
+ */
+export function pop_element() {
+	if (current_element !== undefined) {
+		current_element = current_element.parent;
+	}
+}
+
+/**
+ * Resets the dev-mode element tracking state.
+ * Called automatically at the start/end of each render to prevent
+ * state from leaking between renders (e.g., if a render throws).
+ * Also exported for testing purposes.
+ * @returns {void}
+ */
+export function reset_element_state() {
+	seen_warnings = new Set();
+	current_element = undefined;
+}
+
 /**
  * @param {() => any} fn
  * @returns {Promise<void>}

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

@@ -3,11 +3,11 @@ import * as devalue from 'devalue';
 /**
  * @template {any[]} T
  * @template V
- * @param {(...args: T) => Promise<V>} fn 
+ * @param {(...args: T) => Promise<V>} fn
  * @param {string} rpc_arguments_string
  */
 export async function executeServerFunction(fn, rpc_arguments_string) {
-  const rpc_arguments = devalue.parse(rpc_arguments_string);
-  const result = await fn.apply(null, rpc_arguments);
+	const rpc_arguments = devalue.parse(rpc_arguments_string);
+	const result = await fn.apply(null, rpc_arguments);
 	return devalue.stringify({ value: result });
-}
+}

package/src/runtime/map.js

@@ -24,7 +24,7 @@ export class TrackedMap extends Map {
 	constructor(iterable) {
 		super();
 
-		var block = this.#block = safe_scope();
+		var block = (this.#block = safe_scope());
 
 		if (iterable) {
 			for (var [key, value] of iterable) {
@@ -49,7 +49,7 @@ export class TrackedMap extends Map {
 		var map_proto = Map.prototype;
 
 		for (const method of introspect_methods) {
-      /** @type {any} */ (proto)[method] = function (/** @type {...any} */ ...v) {
+			/** @type {any} */ (proto)[method] = function (/** @type {...any} */ ...v) {
 				this.size;
 				this.#read_all();
 

package/src/runtime/object.js

@@ -9,13 +9,13 @@ import { object_proxy } from './proxy.js';
  * @returns {TrackedObject<T>}
  */
 export function TrackedObject(obj) {
-  if (!new.target) {
-    throw new Error("TrackedObject must be called with 'new'");
-  }
+	if (!new.target) {
+		throw new Error("TrackedObject must be called with 'new'");
+	}
 
-  var block = safe_scope();
+	var block = safe_scope();
 
-  return object_proxy(obj, block);
+	return object_proxy(obj, block);
 }
 
 /**
@@ -25,5 +25,5 @@ export function TrackedObject(obj) {
  * @returns {TrackedObject<T>}
  */
 export function tracked_object(obj, block) {
-  return object_proxy(obj, block);
+	return object_proxy(obj, block);
 }

package/src/runtime/proxy.js

@@ -26,10 +26,10 @@ import {
 export function proxy(value, block) {
 	// if non-proxyable, or is already a proxy, return `value`
 	if (
-		typeof value !== 'object'
-		|| value === null
-		|| TRACKED_ARRAY in value
-		|| TRACKED_OBJECT in value
+		typeof value !== 'object' ||
+		value === null ||
+		TRACKED_ARRAY in value ||
+		TRACKED_OBJECT in value
 	) {
 		return value;
 	}
@@ -153,7 +153,9 @@ export function proxy(value, block) {
 		},
 
 		setPrototypeOf() {
-			throw new Error(`Cannot set prototype of ${is_proxied_array ? '\`TrackedArray\`' : '\`TrackedObject\`'}`);
+			throw new Error(
+				`Cannot set prototype of ${is_proxied_array ? '\`TrackedArray\`' : '\`TrackedObject\`'}`,
+			);
 		},
 
 		deleteProperty(target, prop) {
@@ -185,7 +187,7 @@ export function proxy(value, block) {
 
 			if (t !== undefined || !exists || get_descriptor(target, prop)?.writable) {
 				if (t === undefined) {
-					t = tracked(exists ?  /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
+					t = tracked(exists ? /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
 
 					tracked_elements.set(prop, t);
 				}
@@ -257,14 +259,13 @@ export function proxy(value, block) {
 						enumerable: true,
 						configurable: true,
 						value,
-						writable: true
+						writable: true,
 					};
 				}
 			}
 
 			return descriptor;
 		},
-
 	});
 }
 
@@ -284,7 +285,7 @@ export function array_proxy({ elements, block, from_static = false, use_array =
 
 	if (
 		from_static &&
-		(first = get_first_if_length(/** @type {Array<T>} */(elements))) !== undefined
+		(first = get_first_if_length(/** @type {Array<T>} */ (elements))) !== undefined
 	) {
 		arr = new Array();
 		arr[0] = first;
@@ -334,8 +335,8 @@ function get_first_if_length(array) {
 		array.length === 1 &&
 		0 in array &&
 		Number.isInteger(first) &&
-    /** @type {number} */ (first) >= 0 &&
-    /** @type {number} */ (first) <= MAX_ARRAY_LENGTH
+		/** @type {number} */ (first) >= 0 &&
+		/** @type {number} */ (first) <= MAX_ARRAY_LENGTH
 	) {
 		return /** @type {number} */ (first);
 	}

package/src/runtime/reactive-value.js

@@ -17,5 +17,13 @@ export function ReactiveValue(fn, start) {
 	const s = createSubscriber(start);
 	const block = safe_scope();
 
-	return (derived(fn, block, () => { s(); return fn(); }, (_, prev) => prev));
+	return derived(
+		fn,
+		block,
+		() => {
+			s();
+			return fn();
+		},
+		(_, prev) => prev,
+	);
 }

package/src/runtime/set.js

@@ -28,7 +28,7 @@ export class TrackedSet extends Set {
 	constructor(iterable) {
 		super();
 
-		var block = this.#block = safe_scope();
+		var block = (this.#block = safe_scope());
 
 		if (iterable) {
 			for (var item of iterable) {
@@ -57,7 +57,7 @@ export class TrackedSet extends Set {
 				continue;
 			}
 
-      /** @type {any} */ (proto)[method] = function (/** @type {...any} */ ...v) {
+			/** @type {any} */ (proto)[method] = function (/** @type {...any} */ ...v) {
 				this.size;
 
 				return /** @type {any} */ (set_proto)[method].apply(this, v);
@@ -69,7 +69,10 @@ export class TrackedSet extends Set {
 				continue;
 			}
 
-      /** @type {any} */ (proto)[method] = function (/** @type {any} */ other, /** @type {...any} */ ...v) {
+			/** @type {any} */ (proto)[method] = function (
+				/** @type {any} */ other,
+				/** @type {...any} */ ...v
+			) {
 				this.size;
 
 				if (other instanceof TrackedSet) {
@@ -85,14 +88,17 @@ export class TrackedSet extends Set {
 				continue;
 			}
 
-      /** @type {any} */ (proto)[method] = function (/** @type {any} */ other, /** @type {...any} */ ...v) {
+			/** @type {any} */ (proto)[method] = function (
+				/** @type {any} */ other,
+				/** @type {...any} */ ...v
+			) {
 				this.size;
 
 				if (other instanceof TrackedSet) {
 					other.size;
 				}
 
-				return new TrackedSet(/** @type {any} */(set_proto)[method].apply(this, [other, ...v]));
+				return new TrackedSet(/** @type {any} */ (set_proto)[method].apply(this, [other, ...v]));
 			};
 		}
 	}
@@ -138,9 +144,8 @@ export class TrackedSet extends Set {
 	/**
 	 * @param {T} value
 	 * @return {boolean}
-	*/
+	 */
 	has(value) {
-
 		var has = super.has(value);
 		var tracked_items = this.#tracked_items;
 		var t = tracked_items.get(value);

package/src/runtime/url-search-params.js

@@ -3,7 +3,6 @@ import { get_current_url } from './url.js';
 
 export const REPLACE = Symbol();
 
-
 export class TrackedURLSearchParams extends URLSearchParams {
 	#block = safe_scope();
 	#version = tracked(0, this.#block);

package/src/server/index.js

@@ -1,3 +1,7 @@
+// SSR helpers
 export { render, renderToStream } from '../runtime/internal/server/index.js';
 export { get_css_for_hashes } from '../runtime/internal/server/css-registry.js';
 export { executeServerFunction } from '../runtime/internal/server/rpc.js';
+
+// Re-export server runtime for components compiled for SSR
+export * from '../runtime/index-server.js';

package/src/utils/hashing.js

@@ -0,0 +1,15 @@
+const regex_return_characters = /\r/g;
+
+/**
+ * Hashes a string to a base36 value
+ * @param {string} str
+ * @returns {string}
+ */
+export function hash(str) {
+	str = str.replace(regex_return_characters, '');
+	let hash = 5381;
+	let i = str.length;
+
+	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
+	return (hash >>> 0).toString(36);
+}

package/src/utils/normalize_css_property_name.js

@@ -16,7 +16,7 @@ export function normalize_css_property_name(str) {
 		return normalized_result;
 	}
 
-	normalized_result = str.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
+	normalized_result = str.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
 	normalized_properties_cache.set(str, normalized_result);
 
 	return normalized_result;

package/tests/client/array/array.mutations.test.ripple

@@ -5,7 +5,7 @@ describe('TrackedArray > mutations', () => {
 		component ArrayTest() {
 			let items = new TrackedArray(1, 2, 3);
 
-			<button onClick={() => items[items.length] = items.length + 1}>{'increment'}</button>
+			<button onClick={() => (items[items.length] = items.length + 1)}>{'increment'}</button>
 
 			<Child {items} />
 		}
@@ -234,7 +234,7 @@ describe('TrackedArray > mutations', () => {
 		component ArrayTest() {
 			let items = new TrackedArray(1, 2, 3);
 
-			<button onClick={() => items.forEach((item, i) => items[i] = item * 2)}>
+			<button onClick={() => items.forEach((item, i) => (items[i] = item * 2))}>
 				{'double all'}
 			</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -258,7 +258,7 @@ describe('TrackedArray > mutations', () => {
 		component ArrayTest() {
 			let items = new TrackedArray(1, 2, 3);
 
-			<button onClick={() => items.forEach((item, i) => items[i] = item * 2)}>
+			<button onClick={() => items.forEach((item, i) => (items[i] = item * 2))}>
 				{'double all'}
 			</button>
 
@@ -291,7 +291,7 @@ describe('TrackedArray > mutations', () => {
 			let firstItem = track(() => items[0]);
 			let secondItem = track(() => items[1]);
 
-			<button onClick={() => items[0] = 100}>{'change first'}</button>
+			<button onClick={() => (items[0] = 100)}>{'change first'}</button>
 			<pre>{@firstItem}</pre>
 			<pre>{@secondItem}</pre>
 			<pre>{items[0]}</pre>
@@ -323,8 +323,8 @@ describe('TrackedArray > mutations', () => {
 			let items = new TrackedArray(1, 2, 3);
 			let length = track(() => items.length);
 
-			<button onClick={() => items.length = 5}>{'expand'}</button>
-			<button onClick={() => items.length = 2}>{'shrink'}</button>
+			<button onClick={() => (items.length = 5)}>{'expand'}</button>
+			<button onClick={() => (items.length = 2)}>{'shrink'}</button>
 			<pre>{JSON.stringify(items)}</pre>
 			<pre>{@length}</pre>
 		}
@@ -357,8 +357,8 @@ describe('TrackedArray > mutations', () => {
 		component ArrayTest() {
 			let items = new TrackedArray(1, 2, 3, 4, 5);
 
-			<button onClick={() => items.length = 3}>{'truncate'}</button>
-			<button onClick={() => items.length = 7}>{'expand'}</button>
+			<button onClick={() => (items.length = 3)}>{'truncate'}</button>
+			<button onClick={() => (items.length = 7)}>{'expand'}</button>
 			<pre>{JSON.stringify(items)}</pre>
 			<pre>{items.length}</pre>
 		}