ripple 0.3.9 → 0.3.11

package/src/runtime/index-client.js

@@ -22,15 +22,24 @@ import { COMMENT_NODE, HYDRATION_START } from '../constants.js';
 // Re-export JSX runtime functions for jsxImportSource: "ripple"
 export { jsx, jsxs, Fragment } from '../jsx-runtime.js';
 
+/**
+ * @returns {CompatOptions | undefined}
+ */
+function get_default_compat() {
+	return /** @type {typeof globalThis & { __RIPPLE_COMPAT__?: CompatOptions }} */ (globalThis)
+		.__RIPPLE_COMPAT__;
+}
+
 /**
  * @param {(anchor: Node, props: Record<string, any>, active_block: Block | null) => void} component
- * @param {{ props?: Record<string, any>, target: HTMLElement, compat?: CompatOptions }} options
+ * @param {{ props?: Record<string, any>, target: HTMLElement }} options
  * @returns {() => void}
  */
 export function mount(component, options) {
 	init_operations();
 	remove_ssr_css();
 
+	const compat = get_default_compat();
 	const props = options.props || {};
 	const target = options.target;
 	const anchor = create_anchor();
@@ -46,7 +55,7 @@ export function mount(component, options) {
 
 	const _root = root(() => {
 		component(anchor, props, active_block);
-	}, options.compat);
+	}, compat);
 
 	return () => {
 		cleanup_events();
@@ -56,13 +65,14 @@ export function mount(component, options) {
 
 /**
  * @param {(anchor: Node, props: Record<string, any>, active_block: Block | null) => void} component
- * @param {{ props?: Record<string, any>, target: HTMLElement, compat?: CompatOptions }} options
+ * @param {{ props?: Record<string, any>, target: HTMLElement }} options
  * @returns {() => void}
  */
 export function hydrate(component, options) {
 	init_operations();
 	remove_ssr_css();
 
+	const compat = get_default_compat();
 	const props = options.props || {};
 	const target = options.target;
 	const was_hydrating = hydrating;
@@ -86,7 +96,7 @@ export function hydrate(component, options) {
 
 		_root = root(() => {
 			component(/** @type {Comment} */ (anchor), props, active_block);
-		}, options.compat);
+		}, compat);
 	} catch (e) {
 		throw e;
 	} finally {

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,280 @@
+/** @import { Block } from '#client' */
+
+import { branch, destroy_block, render } from './blocks.js';
+import { BRANCH_BLOCK, 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';
+
+/**
+ * Finds the nearest enclosing BRANCH_BLOCK in the block hierarchy.
+ * @param {Block | null} block
+ * @returns {Block | null}
+ */
+function find_enclosing_branch(block) {
+	while (block !== null) {
+		if ((block.f & BRANCH_BLOCK) !== 0) {
+			return block;
+		}
+		block = block.p;
+	}
+	return null;
+}
+
+/**
+ * @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;
+	/** @type {Block | null} */
+	var modified_parent_branch = null;
+	/** @type {Node | null} */
+	var original_parent_start = null;
+
+	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;
+				// Restore parent branch's start since we may update it again below
+				if (modified_parent_branch !== null && modified_parent_branch.s !== null) {
+					modified_parent_branch.s.start = original_parent_start;
+					modified_parent_branch = null;
+					original_parent_start = null;
+				}
+			}
+
+			if (end !== null && (initialized || !hydrating)) {
+				clear_expression_range(anchor, end);
+			}
+
+			if (is_hydration_marker) {
+				set_hydrate_node(get_next_sibling(anchor) ?? end);
+			}
+
+			// Find the enclosing branch block BEFORE creating child_block
+			// so we can update its s.start to include content inserted before anchor
+			var parent_branch = find_enclosing_branch(active_block);
+
+			child_block = branch(() => {
+				var block = active_block;
+				next_value.render(end ?? anchor, block);
+			});
+
+			// Update parent branch's s.start to include content inserted before anchor.
+			// This ensures that when the parent branch is destroyed, the full DOM range
+			// (including RippleElement content) is removed.
+			if (
+				parent_branch !== null &&
+				parent_branch.s !== null &&
+				child_block.s !== null &&
+				child_block.s.start !== null
+			) {
+				// The child inserted content before the anchor. Update parent's start
+				// to encompass this content.
+				var child_start = child_block.s.start;
+				var parent_start = parent_branch.s.start;
+
+				// If parent's start is the anchor (or comes after child's start),
+				// update it to include the child's content
+				if (parent_start === anchor || parent_start === end) {
+					// Save original so we can restore it when switching to non-RippleElement
+					if (modified_parent_branch === null) {
+						modified_parent_branch = parent_branch;
+						original_parent_start = parent_start;
+					}
+					parent_branch.s.start = child_start;
+				}
+			}
+
+			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;
+			// Restore parent branch's start to original value since the child's DOM nodes
+			// have been removed and the old start reference would be stale
+			if (modified_parent_branch !== null && modified_parent_branch.s !== null) {
+				modified_parent_branch.s.start = original_parent_start;
+				modified_parent_branch = null;
+				original_parent_start = 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/src/utils/builders.js

@@ -513,6 +513,36 @@ export function ts_intersection_type(types, loc_info) {
 	return set_location(node, loc_info);
 }
 
+/**
+ * @param {'string' | 'number' | 'boolean' | 'any' | 'void' | 'null' | 'undefined' | 'never' | 'unknown' | 'bigint' | 'symbol' | 'object'} keyword
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TypeNode}
+ */
+export function ts_keyword_type(keyword, loc_info) {
+	/** @type {Record<string, string>} */
+	const keyword_to_type = {
+		string: 'TSStringKeyword',
+		number: 'TSNumberKeyword',
+		boolean: 'TSBooleanKeyword',
+		any: 'TSAnyKeyword',
+		void: 'TSVoidKeyword',
+		null: 'TSNullKeyword',
+		undefined: 'TSUndefinedKeyword',
+		never: 'TSNeverKeyword',
+		unknown: 'TSUnknownKeyword',
+		bigint: 'TSBigIntKeyword',
+		symbol: 'TSSymbolKeyword',
+		object: 'TSObjectKeyword',
+	};
+
+	const node = /** @type {AST.TypeNode} */ ({
+		type: keyword_to_type[keyword],
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
 /**
  * @param {AST.Node} type_annotation
  * @param {AST.NodeWithLocation} [loc_info]

package/tests/client/basic/__snapshots__/basic.rendering.test.ripple.snap

@@ -52,6 +52,7 @@ exports[`basic client > rendering & text > should handle lexical scopes correctl
 <div>
   <section>
     Nested scope variable
+    <!---->
   </section>
   
 </div>