ripple 0.3.9 → 0.3.10

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/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
@@ -45,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));
@@ -67,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/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/index.js

@@ -105,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';
@@ -114,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);
 				}
 			});
 

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

@@ -17,6 +17,7 @@ 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_ripple_element, normalize_children, ripple_element } from '../../element.js';
 import {
 	is_tag_valid_with_parent,
 	is_tag_valid_with_ancestor,
@@ -27,6 +28,30 @@ export { register_component_css as register_css } from './css-registry.js';
 export { hash } from '../../../utils/hashing.js';
 export { context } from './context.js';
 export { array_slice };
+export { ripple_element, normalize_children };
+
+/**
+ * @param {Output} output
+ * @param {any} value
+ * @returns {void}
+ */
+export function render_expression(output, value) {
+	output.push(BLOCK_OPEN);
+
+	if (is_ripple_element(value)) {
+		var result = value.render(output, {});
+
+		if (result && typeof result.then === 'function') {
+			return result.then(() => {
+				output.push(BLOCK_CLOSE);
+			});
+		}
+	} else {
+		output.push(escape(value ?? ''));
+	}
+
+	output.push(BLOCK_CLOSE);
+}
 
 /** @type {null | Component} */
 export let active_component = null;
@@ -596,7 +621,7 @@ export function spread_attrs(attrs, css_hash) {
 	for (name in attrs) {
 		var value = attrs[name];
 
-		if (typeof value === 'function') continue;
+		if (name === 'children' || typeof value === 'function' || is_ripple_element(value)) continue;
 
 		if (is_ripple_object(value)) {
 			value = get(value);

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

@@ -7,21 +7,20 @@ import type {
 	PropsWithChildrenOptional,
 } from 'ripple';
 import { flushSync, track } from 'ripple';
+import { did_error } from '../capture-error.js';
 
 describe('basic client > components & composition', () => {
 	it('renders with component composition and children', () => {
 		component Card(props: PropsWithChildren<{}>) {
-			<div class="card">
-				<props.children />
-			</div>
+			<div class="card">{props.children}</div>
 		}
 
 		component Basic() {
-			<Card>
-				component children() {
-					<p>{'Card content here'}</p>
-				}
-			</Card>
+			component children() {
+				<p>{'Card content here'}</p>
+			}
+
+			<Card {children} />
 		}
 
 		render(Basic);
@@ -37,17 +36,17 @@ describe('basic client > components & composition', () => {
 		component Card(props: PropsWithChildrenOptional<{ test?: Component }>) {
 			<div class="card">
 				if (props.children) {
-					<props.children />
+					{props.children}
 				}
 			</div>
 		}
 
 		component Basic() {
-			<Card>
-				component test() {
-					<p>{'Card content here'}</p>
-				}
-			</Card>
+			component test() {
+				<p>{'Card content here'}</p>
+			}
+
+			<Card {test} />
 		}
 
 		render(Basic);
@@ -59,22 +58,23 @@ describe('basic client > components & composition', () => {
 		expect(paragraph).toBeFalsy();
 	});
 
-	it('allows tracked variable and slot component with same name in nested scope', () => {
+	it('allows tracked variables alongside explicit component props', () => {
 		component Card(props: PropsWithChildrenOptional<{ test?: Component }>) {
 			<div class="card">
 				if (props.children) {
-					<props.children />
+					{props.children}
 				}
 			</div>
 		}
 
 		component Basic() {
 			let &[test] = track(false);
-			<Card>
-				component test() {
-					<p>{'Card content here'}</p>
-				}
-			</Card>
+
+			component TestSlot() {
+				<p>{'Card content here'}</p>
+			}
+
+			<Card test={TestSlot} />
 			<div>{test ? 'yes' : 'no'}</div>
 		}
 
@@ -90,9 +90,7 @@ describe('basic client > components & composition', () => {
 
 	it('renders a component when children is set a component prop', () => {
 		component Card(props: PropsWithChildren<{}>) {
-			<div class="card">
-				<props.children />
-			</div>
+			<div class="card">{props.children}</div>
 		}
 
 		component Basic() {
@@ -211,6 +209,28 @@ describe('basic client > components & composition', () => {
 		expect(countDiv.textContent).toBe('3');
 	});
 
+	it('updates explicit text children props reactively', () => {
+		component TextProp(&{ children }: PropsWithChildren<{}>) {
+			<div class="text-prop">{children}</div>
+		}
+
+		component Basic() {
+			let &[show] = track(false);
+
+			<TextProp children={show ? 'hello' : ''} />
+			<button class="show-text" onClick={() => (show = true)}>{'Show'}</button>
+		}
+
+		render(Basic);
+
+		expect(container.querySelector('.text-prop')?.textContent).toBe('');
+
+		container.querySelector('.show-text')?.click();
+		flushSync();
+
+		expect(container.querySelector('.text-prop')?.textContent).toBe('hello');
+	});
+
 	it('it retains this context with bracketed prop functions and keeps original chaining', () => {
 		component App() {
 			const SYMBOL_PROP = Symbol();
@@ -233,60 +253,40 @@ describe('basic client > components & composition', () => {
 
 			const obj2 = null;
 
+			function trigger_nonexistent() {
+				hasError = did_error(() => {
+					// @ts-ignore
+					obj['nonexistent']();
+				});
+			}
+
+			function trigger_nonexistent_chaining() {
+				hasError = did_error(() => {
+					// @ts-ignore
+					obj['nonexistent']?.();
+				});
+			}
+
+			function trigger_object_null() {
+				hasError = did_error(() => {
+					// @ts-ignore
+					obj2['nonexistent']();
+				});
+			}
+
+			function trigger_object_null_chained() {
+				hasError = did_error(() => {
+					// @ts-ignore
+					obj2?.['nonexistent']?.();
+				});
+			}
+
 			<button onClick={() => obj['increment']()}>{'Increment'}</button>
 			<button onClick={() => obj[SYMBOL_PROP]()}>{'Increment'}</button>
-			<button
-				onClick={() => {
-					hasError = false;
-					try {
-						// @ts-ignore
-						obj['nonexistent']();
-					} catch {
-						hasError = true;
-					}
-				}}
-			>
-				{'Nonexistent'}
-			</button>
-			<button
-				onClick={() => {
-					hasError = false;
-					try {
-						// @ts-ignore
-						obj['nonexistent']?.();
-					} catch {
-						hasError = true;
-					}
-				}}
-			>
-				{'Nonexistent chaining'}
-			</button>
-			<button
-				onClick={() => {
-					hasError = false;
-					try {
-						// @ts-ignore
-						obj2['nonexistent']();
-					} catch {
-						hasError = true;
-					}
-				}}
-			>
-				{'Object null'}
-			</button>
-			<button
-				onClick={() => {
-					hasError = false;
-					try {
-						// @ts-ignore
-						obj2?.['nonexistent']?.();
-					} catch {
-						hasError = true;
-					}
-				}}
-			>
-				{'Object null chained'}
-			</button>
+			<button onClick={trigger_nonexistent}>{'Nonexistent'}</button>
+			<button onClick={trigger_nonexistent_chaining}>{'Nonexistent chaining'}</button>
+			<button onClick={trigger_object_null}>{'Object null'}</button>
+			<button onClick={trigger_object_null_chained}>{'Object null chained'}</button>
 			<button onClick={() => obj.arr[obj.arr.length - 1]()}>{'BinaryExpression prop'}</button>
 
 			<span>{obj.count.value}</span>
@@ -346,21 +346,19 @@ describe('basic client > components & composition', () => {
 				<span>{'Hello from Span'}</span>
 			},
 			button: component({ children }: PropsWithChildren<{}>) {
-				<button>
-					<children />
-				</button>
+				<button>{children}</button>
 			},
 		};
 
 		component App() {
+			component children() {
+				<span>{'Click me!'}</span>
+			}
+
 			<div>
 				<h1>{'Component as Property Test'}</h1>
 				<UI.span />
-				<UI.button>
-					component children() {
-						<span>{'Click me!'}</span>
-					}
-				</UI.button>
+				<UI.button {children} />
 			</div>
 		}
 
@@ -378,13 +376,13 @@ describe('basic client > components & composition', () => {
 
 	it('handles empty string children', () => {
 		component Button({ children }: PropsWithChildren<{}>) {
-			<children />
+			{children}
 		}
 
 		component App() {
-			let text = '';
+			let content = '';
 			<Button>{''}</Button>
-			<Button>{text}</Button>
+			<Button>{content}</Button>
 		}
 
 		expect(() => {