ripple 0.3.8 → 0.3.10

package/src/compiler/utils.js

@@ -292,25 +292,25 @@ export function is_component_level_function(context) {
  * Returns the matched Ripple tracking call name
  * @param {AST.Expression | AST.Super} callee
  * @param {CommonContext} context
- * @returns {'track' | 'trackSplit' | null}
+ * @returns {'track' | null}
  */
 export function is_ripple_track_call(callee, context) {
 	// Super expressions cannot be Ripple track calls
 	if (callee.type === 'Super') return null;
 
-	if (callee.type === 'Identifier' && (callee.name === 'track' || callee.name === 'trackSplit')) {
-		return is_ripple_import(callee, context) ? callee.name : null;
+	if (callee.type === 'Identifier' && callee.name === 'track') {
+		return is_ripple_import(callee, context) ? 'track' : null;
 	}
 
 	if (
 		callee.type === 'MemberExpression' &&
 		callee.object.type === 'Identifier' &&
 		callee.property.type === 'Identifier' &&
-		(callee.property.name === 'track' || callee.property.name === 'trackSplit') &&
+		callee.property.name === 'track' &&
 		!callee.computed &&
 		is_ripple_import(callee, context)
 	) {
-		return callee.property.name;
+		return 'track';
 	}
 
 	return null;
@@ -606,21 +606,8 @@ export function is_element_dynamic(node) {
  * @returns {boolean}
  */
 function is_id_dynamic(node) {
-	if (node.type === 'Identifier' || node.type === 'Literal') {
-		if (node.tracked) {
-			return true;
-		}
-
-		return false;
-	} else if (node.type === 'MemberExpression') {
-		if (/** @type {AST.Identifier} */ (node.object).tracked === true) {
-			return true;
-		}
-		if (node.property.type === 'MemberExpression') {
-			return is_id_dynamic(node.property);
-		}
-
-		return !!(/** @type {AST.Identifier} */ (node.property).tracked);
+	if (node.type === 'Identifier') {
+		return !!node.tracked;
 	}
 
 	return false;
@@ -644,7 +631,22 @@ export function normalize_children(children, context) {
 		const child = normalized[i];
 		const prev_child = normalized[i - 1];
 
-		if (child.type === 'Text' && prev_child?.type === 'Text') {
+		if (
+			(child.type === 'RippleExpression' || child.type === 'Text') &&
+			(prev_child?.type === 'RippleExpression' || prev_child?.type === 'Text')
+		) {
+			if (
+				(child.type === 'RippleExpression' &&
+					is_children_template_expression(child.expression, context.state.scope)) ||
+				(prev_child.type === 'RippleExpression' &&
+					is_children_template_expression(prev_child.expression, context.state.scope))
+			) {
+				continue;
+			}
+
+			if (prev_child.type === 'Text' || child.type === 'Text') {
+				prev_child.type = 'Text';
+			}
 			if (child.expression.type === 'Literal' && prev_child.expression.type === 'Literal') {
 				prev_child.expression = b.literal(
 					prev_child.expression.value + String(child.expression.value),
@@ -663,6 +665,91 @@ export function normalize_children(children, context) {
 	return normalized;
 }
 
+/**
+ * @param {AST.Expression} expression
+ * @returns {AST.Expression}
+ */
+export function unwrap_template_expression(expression) {
+	/** @type {AST.Expression} */
+	let node = expression;
+
+	while (true) {
+		if (
+			node.type === 'ParenthesizedExpression' ||
+			node.type === 'TSAsExpression' ||
+			node.type === 'TSSatisfiesExpression' ||
+			node.type === 'TSNonNullExpression' ||
+			node.type === 'TSInstantiationExpression'
+		) {
+			node = /** @type {AST.Expression} */ (node.expression);
+			continue;
+		}
+
+		if (node.type === 'ChainExpression') {
+			node = /** @type {AST.Expression} */ (node.expression);
+			continue;
+		}
+
+		break;
+	}
+
+	return node;
+}
+
+/**
+ * @param {AST.Expression} expression
+ * @param {ScopeInterface | null | undefined} scope
+ * @param {ScopeInterface | null} [component_scope]
+ * @returns {boolean}
+ */
+export function is_children_template_expression(expression, scope, component_scope = null) {
+	if (scope == null) {
+		return false;
+	}
+
+	const unwrapped = unwrap_template_expression(expression);
+
+	if (unwrapped.type === 'MemberExpression') {
+		let property_name = null;
+
+		if (!unwrapped.computed && unwrapped.property.type === 'Identifier') {
+			property_name = unwrapped.property.name;
+		} else if (
+			unwrapped.computed &&
+			unwrapped.property.type === 'Literal' &&
+			typeof unwrapped.property.value === 'string'
+		) {
+			property_name = unwrapped.property.value;
+		}
+
+		if (property_name === 'children') {
+			const target = unwrap_template_expression(/** @type {AST.Expression} */ (unwrapped.object));
+
+			if (target.type === 'Identifier') {
+				const binding = scope.get(target.name);
+				return (
+					binding?.declaration_kind === 'param' &&
+					(component_scope === null || binding.scope === component_scope)
+				);
+			}
+		}
+	}
+
+	if (unwrapped.type !== 'Identifier' || unwrapped.name !== 'children') {
+		return false;
+	}
+
+	const binding = scope.get(unwrapped.name);
+	return (
+		(binding?.declaration_kind === 'param' ||
+			binding?.kind === 'prop' ||
+			binding?.kind === 'prop_fallback' ||
+			binding?.kind === 'lazy' ||
+			binding?.kind === 'lazy_fallback') &&
+		(component_scope === null || binding.scope === component_scope)
+	);
+}
+
 /**
  * @param {AST.Node} node
  * @param {AST.Node[]} normalized
@@ -686,6 +773,52 @@ function normalize_child(node, normalized, context) {
 	}
 }
 
+/**
+ * Replaces any lazy subpatterns in a parameter pattern with their generated identifiers.
+ * This is used by client and server transforms so nested lazy destructuring can coexist
+ * with otherwise normal object/array params.
+ * @param {AST.Pattern} pattern
+ * @returns {AST.Pattern}
+ */
+export function replace_lazy_param_pattern(pattern) {
+	switch (pattern.type) {
+		case 'AssignmentPattern':
+			return { ...pattern, left: replace_lazy_param_pattern(pattern.left) };
+
+		case 'ObjectPattern':
+			if (pattern.lazy && pattern.metadata?.lazy_id) {
+				return /** @type {AST.Pattern} */ (b.id(pattern.metadata.lazy_id));
+			}
+
+			return {
+				...pattern,
+				properties: pattern.properties.map((property) =>
+					property.type === 'RestElement'
+						? { ...property, argument: replace_lazy_param_pattern(property.argument) }
+						: { ...property, value: replace_lazy_param_pattern(property.value) },
+				),
+			};
+
+		case 'ArrayPattern':
+			if (pattern.lazy && pattern.metadata?.lazy_id) {
+				return /** @type {AST.Pattern} */ (b.id(pattern.metadata.lazy_id));
+			}
+
+			return {
+				...pattern,
+				elements: pattern.elements.map((element) =>
+					element === null ? null : replace_lazy_param_pattern(element),
+				),
+			};
+
+		case 'RestElement':
+			return { ...pattern, argument: replace_lazy_param_pattern(pattern.argument) };
+
+		default:
+			return pattern;
+	}
+}
+
 /**
  * @param {CommonContext} context
  */

package/src/runtime/element.js

@@ -0,0 +1,39 @@
+const RIPPLE_ELEMENT = Symbol.for('ripple.element');
+
+/**
+ * @typedef {{
+ * 	render: Function;
+ * 	[RIPPLE_ELEMENT]: true;
+ * }} RippleElement
+ */
+
+/**
+ * @param {Function} render
+ * @returns {RippleElement}
+ */
+export function ripple_element(render) {
+	return {
+		render,
+		[RIPPLE_ELEMENT]: true,
+	};
+}
+
+/**
+ * @param {any} value
+ * @returns {value is RippleElement}
+ */
+export function is_ripple_element(value) {
+	return value != null && value[RIPPLE_ELEMENT] === true;
+}
+
+/**
+ * @param {any} value
+ * @returns {any}
+ */
+export function normalize_children(value) {
+	if (value == null || is_ripple_element(value) || typeof value !== 'function') {
+		return value;
+	}
+
+	return ripple_element(value);
+}

package/src/runtime/index-client.js

@@ -102,13 +102,7 @@ export function hydrate(component, options) {
 
 export { Context } from './internal/client/context.js';
 
-export {
-	flush_sync as flushSync,
-	track,
-	track_split as trackSplit,
-	untrack,
-	tick,
-} from './internal/client/runtime.js';
+export { flush_sync as flushSync, track, untrack, tick } from './internal/client/runtime.js';
 
 export { RippleArray } from './array.js';
 
@@ -165,10 +159,5 @@ import { RippleURL } from './url.js';
 import { RippleURLSearchParams } from './url-search-params.js';
 import { RippleDate } from './date.js';
 import { MediaQuery } from './media-query.js';
-import {
-	track,
-	track_split as trackSplit,
-	untrack,
-	ref_prop as createRefKey,
-} from './internal/client/runtime.js';
+import { track, untrack, ref_prop as createRefKey } from './internal/client/runtime.js';
 import { user_effect as effect } from './internal/client/blocks.js';

package/src/runtime/index-server.js

@@ -1,8 +1,8 @@
-import { get, set, untrack, track, track_split } from './internal/server/index.js';
+import { get, set, untrack, track } from './internal/server/index.js';
 
 export { Context } from './internal/server/context.js';
 
-export { get, set, untrack, track, track_split as trackSplit };
+export { get, set, untrack, track };
 
 function noop() {}
 

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

@@ -186,7 +186,9 @@ function select_option(select, value, mounting = false) {
 
 		// Otherwise, update the selection
 		for (var option of select.options) {
-			option.selected = /** @type {string[]} */ (value).includes(get_option_value(option));
+			option.selected = /** @type {string[]} */ (value).includes(
+				/** @type {string} */ (get_option_value(option)),
+			);
 		}
 
 		return;

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

@@ -5,6 +5,7 @@ import { COMPOSITE_BLOCK, DEFAULT_NAMESPACE, NAMESPACE_URI } from './constants.j
 import { hydrate_next, hydrating } from './hydration.js';
 import { active_block, active_namespace, get, with_ns } from './runtime.js';
 import { top_element_to_ns } from './utils.js';
+import { is_ripple_element } from '../../element.js';
 
 /**
  * @typedef {((anchor: Node, props: Record<string, any>, block: Block | null) => void)} ComponentFunction
@@ -29,6 +30,7 @@ export function composite(get_component, node, props) {
 
 	render(
 		() => {
+			// @ts-ignore — get() handles non-tracked values via is_ripple_object() check
 			var component = get(get_component());
 
 			if (b !== null) {
@@ -44,13 +46,14 @@ export function composite(get_component, node, props) {
 				});
 			} else if (component != null) {
 				// Custom element - only create if component is not null/undefined
+				const ns = top_element_to_ns(component, active_namespace);
 				var run = () => {
 					var block = /** @type {Block} */ (active_block);
 
 					var element =
-						active_namespace !== DEFAULT_NAMESPACE
+						ns !== DEFAULT_NAMESPACE
 							? document.createElementNS(
-									NAMESPACE_URI[active_namespace],
+									NAMESPACE_URI[ns],
 									/** @type {keyof HTMLElementTagNameMap} */ (component),
 								)
 							: document.createElement(/** @type {keyof HTMLElementTagNameMap} */ (component));
@@ -66,16 +69,18 @@ export function composite(get_component, node, props) {
 
 					render_spread(element, () => props || {});
 
-					if (typeof props?.children === 'function') {
+					if (is_ripple_element(props?.children)) {
 						var child_anchor = document.createComment('');
 						element.appendChild(child_anchor);
 
-						props?.children?.(child_anchor, {}, block);
+						if (ns !== DEFAULT_NAMESPACE) {
+							with_ns(ns, () => props.children.render(child_anchor, {}, block));
+						} else {
+							props.children.render(child_anchor, {}, block);
+						}
 					}
 				};
 
-				const ns = top_element_to_ns(component, active_namespace);
-
 				if (ns !== active_namespace) {
 					// support top-level dynamic element svg/math <@tag />
 					b = branch(() => with_ns(ns, run));

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

@@ -168,7 +168,7 @@ export function handle_event_propagation(event) {
 				null;
 
 			try {
-				var delegated = current_target['__' + event_name];
+				var delegated = /** @type {Record<string, any>} */ (current_target)['__' + event_name];
 
 				if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
 					if (is_array(delegated)) {

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

@@ -0,0 +1,218 @@
+/** @import { Block } from '#client' */
+
+import { branch, destroy_block, render } from './blocks.js';
+import { UNINITIALIZED } from './constants.js';
+import { create_text, get_next_sibling } from './operations.js';
+import { active_block } from './runtime.js';
+import { hydrating, set_hydrate_node } from './hydration.js';
+import { COMMENT_NODE, HYDRATION_END, HYDRATION_START, TEXT_NODE } from '../../../constants.js';
+import { is_ripple_element } from '../../element.js';
+
+/**
+ * @param {Node} node
+ * @param {() => any} get_value
+ * @returns {void}
+ */
+export function expression(node, get_value) {
+	var anchor = /** @type {ChildNode} */ (node);
+	/** @type {Block | null} */
+	var child_block = null;
+	/** @type {Comment | null} */
+	var end = null;
+	/** @type {Text | null} */
+	var text = null;
+	/** @type {string | import('../../element.js').RippleElement | typeof UNINITIALIZED} */
+	var value = UNINITIALIZED;
+	var is_element = false;
+	var initialized = false;
+
+	render(() => {
+		var next_value = get_value();
+		var next_is_element = is_ripple_element(next_value);
+		var is_hydration_marker = hydrating && anchor.nodeType === COMMENT_NODE;
+
+		if (is_hydration_marker) {
+			end ??= ensure_expression_end(anchor);
+		}
+
+		if (next_is_element) {
+			if (initialized && is_element && value === next_value) {
+				if (end !== null) {
+					advance_hydration(end);
+				}
+				return;
+			}
+
+			if (anchor.nodeType === TEXT_NODE) {
+				/** @type {Text} */ (anchor).nodeValue = '';
+			} else if (text !== null) {
+				text.remove();
+				text = null;
+			}
+
+			if (child_block !== null) {
+				destroy_block(child_block);
+				child_block = null;
+			}
+
+			if (end !== null && (initialized || !hydrating)) {
+				clear_expression_range(anchor, end);
+			}
+
+			if (is_hydration_marker) {
+				set_hydrate_node(get_next_sibling(anchor) ?? end);
+			}
+
+			child_block = branch(() => {
+				var block = active_block;
+				next_value.render(end ?? anchor, {}, block);
+			});
+
+			value = next_value;
+			is_element = true;
+			initialized = true;
+			if (end !== null) {
+				advance_hydration(end);
+			}
+			return;
+		}
+
+		var next_text = (next_value ?? '') + '';
+
+		if (initialized && !is_element && value === next_text) {
+			if (end !== null) {
+				advance_hydration(end);
+			}
+			return;
+		}
+
+		if (child_block !== null) {
+			destroy_block(child_block);
+			child_block = null;
+		}
+
+		if (is_hydration_marker) {
+			text = get_hydrated_text(anchor, /** @type {Comment} */ (end));
+
+			if (next_text === '') {
+				if (text !== null) {
+					text.remove();
+					text = null;
+				}
+			} else if (text === null) {
+				text = create_text(next_text);
+				/** @type {Comment} */ (end).before(text);
+			} else if (text.nodeValue !== next_text) {
+				text.nodeValue = next_text;
+			}
+		} else if (anchor.nodeType === COMMENT_NODE) {
+			if (next_text === '') {
+				if (text !== null) {
+					text.remove();
+					text = null;
+				}
+			} else if (text === null) {
+				text = create_text(next_text);
+				(end ?? anchor).before(text);
+			} else if (text.nodeValue !== next_text) {
+				text.nodeValue = next_text;
+			}
+		} else if (anchor.nodeType === TEXT_NODE) {
+			/** @type {Text} */ (anchor).nodeValue = next_text;
+		}
+
+		value = next_text;
+		is_element = false;
+		initialized = true;
+		if (end !== null) {
+			advance_hydration(end);
+		}
+	});
+}
+
+/**
+ * @param {Node} anchor
+ * @returns {Comment}
+ */
+function ensure_expression_end(anchor) {
+	if (hydrating) {
+		/** @type {Node | null} */
+		var current = get_next_sibling(anchor);
+		var depth = 0;
+
+		while (current !== null) {
+			if (current.nodeType === COMMENT_NODE) {
+				var data = /** @type {Comment} */ (current).data;
+
+				if (data === HYDRATION_START) {
+					depth += 1;
+				} else if (data === HYDRATION_END) {
+					if (depth === 0) {
+						return /** @type {Comment} */ (current);
+					}
+
+					depth -= 1;
+				}
+			}
+
+			current = get_next_sibling(current);
+		}
+
+		throw new Error('Hydration mismatch: expected end marker for expression block');
+	}
+
+	var end = document.createComment(HYDRATION_END);
+	/** @type {ChildNode} */ (anchor).after(end);
+	return end;
+}
+
+/**
+ * @param {Node} anchor
+ * @param {Node} end
+ * @returns {Text | null}
+ */
+function get_hydrated_text(anchor, end) {
+	var first = get_next_sibling(anchor);
+
+	if (first === end) {
+		return null;
+	}
+
+	if (first?.nodeType === TEXT_NODE && get_next_sibling(first) === end) {
+		return /** @type {Text} */ (first);
+	}
+
+	clear_expression_range(anchor, end);
+	return null;
+}
+
+/**
+ * @param {Node} anchor
+ * @param {Node} end
+ * @returns {void}
+ */
+function clear_expression_range(anchor, end) {
+	var current = get_next_sibling(anchor);
+
+	while (current !== null && current !== end) {
+		var next = get_next_sibling(current);
+		/** @type {ChildNode} */ (current).remove();
+		current = next;
+	}
+}
+
+/**
+ * @param {Comment} end
+ * @returns {void}
+ */
+function advance_hydration(end) {
+	if (!hydrating) {
+		return;
+	}
+
+	var next = get_next_sibling(end);
+
+	if (next !== null) {
+		set_hydrate_node(next);
+	}
+}

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

@@ -1,4 +1,3 @@
-/** @import { TemplateNode } from '#client' */
 import { render } from './blocks.js';
 import { HEAD_BLOCK } from './constants.js';
 import { COMMENT_NODE } from '../../../constants.js';
@@ -38,8 +37,8 @@ export function head(hash, render_fn) {
 		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
+			var start = get_next_sibling(head_anchor);
+			/** @type {ChildNode} */ (head_anchor).remove(); // in case this component is repeated
 
 			set_hydrate_node(start);
 		}
@@ -54,7 +53,7 @@ export function head(hash, render_fn) {
 	} finally {
 		if (was_hydrating) {
 			set_hydrating(true);
-			set_hydrate_node(/** @type {TemplateNode} */ (previous_hydrate_node));
+			set_hydrate_node(previous_hydrate_node);
 		}
 	}
 }

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

@@ -52,7 +52,6 @@ export {
 	update_property,
 	update_pre_property,
 	track,
-	track_split,
 	push_component,
 	pop_component,
 	untrack,
@@ -106,6 +105,8 @@ export { script } from './script.js';
 
 export { html } from './html.js';
 
+export { expression } from './expression.js';
+
 export { rpc } from './rpc.js';
 
 export { tsx_compat } from './compat.js';
@@ -115,3 +116,5 @@ export { TRY_BLOCK, HMR } from './constants.js';
 export { hmr } from './hmr.js';
 
 export { pop, next } from './hydration.js';
+
+export { ripple_element, normalize_children } from '../../element.js';

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

@@ -12,10 +12,11 @@ import {
 	set_hydrating,
 	set_hydrate_node,
 } from './hydration.js';
+import { is_ripple_element } from '../../element.js';
 
 /**
  * @param {any} _
- * @param {{ target: Element, children: (anchor: Node, props: {}, block: Block) => void }} props
+ * @param {{ target: Element, children: import('../../element.js').RippleElement }} props
  * @returns {void}
  */
 export function Portal(_, props) {
@@ -26,7 +27,7 @@ export function Portal(_, props) {
 
 	/** @type {Element | symbol} */
 	let target = UNINITIALIZED;
-	/** @type {((anchor: Node, props: {}, block: Block) => void) | symbol} */
+	/** @type {import('../../element.js').RippleElement | symbol} */
 	let children = UNINITIALIZED;
 	/** @type {Block | null} */
 	var b = null;
@@ -44,8 +45,13 @@ export function Portal(_, props) {
 
 	try {
 		render(() => {
-			if (target === (target = props.target)) return;
-			if (children === (children = props.children)) return;
+			const next_target = props.target;
+			const next_children = props.children;
+
+			if (target === next_target && children === next_children) return;
+
+			target = next_target;
+			children = next_children;
 
 			if (b !== null) {
 				destroy_block(b);
@@ -65,8 +71,8 @@ export function Portal(_, props) {
 			var block = /** @type {Block} */ (active_block);
 
 			b = branch(() => {
-				if (typeof children === 'function') {
-					children(/** @type {Text} */ (anchor), {}, block);
+				if (is_ripple_element(children)) {
+					children.render(/** @type {Text} */ (anchor), {}, block);
 				}
 			});