ripple 0.3.128 → 0.4.1

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

@@ -1,13 +1,25 @@
 /** @import { AppendIntoAnchor } from '#client' */
 
-import { TEXT_NODE } from '../../../constants.js';
-import { hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
+import {
+	hydrate_first_child,
+	hydrate_next_sibling,
+	hydrate_node,
+	hydrate_text_child,
+	hydrating,
+	set_hydrate_node,
+} from './hydration.js';
 import { get_descriptor } from '@tsrx/core/runtime/language-helpers';
 
+export { hydrate_first_child, hydrate_next_sibling, hydrate_text_child };
+
+/**
+ * The `firstChild` / `nextSibling` getters, called directly so a traversal
+ * site never becomes a megamorphic property read across node types.
+ * @type {(() => Node | null)}
+ */
+export var first_child_getter;
 /** @type {(() => Node | null)} */
-var first_child_getter;
-/** @type {(() => Node | null)} */
-var next_sibling_getter;
+export var next_sibling_getter;
 /** @type {(() => Node | null)} */
 var last_child_getter;
 
@@ -37,8 +49,6 @@ export function init_operations() {
 
 	// the following assignments improve perf of lookups on DOM nodes
 	element_prototype.__click = undefined;
-	element_prototype.__className = undefined;
-	Text.prototype.__t = undefined;
 	event_target_prototype.__root = undefined;
 }
 
@@ -73,28 +83,6 @@ export function first_child(node, is_text) {
 	return hydrate_first_child(is_text);
 }
 
-/**
- * @param {boolean} [is_text]
- * @returns {Node | null}
- */
-export function hydrate_first_child(is_text) {
-	var child = get_first_child(/** @type {Node} */ (hydrate_node));
-
-	// Handles the case where we have `<p>{text}</p>`, where `text` is empty
-	if (child === null) {
-		child = /** @type {Node} */ (hydrate_node).appendChild(create_text());
-	} else if (is_text && child.nodeType !== TEXT_NODE) {
-		var text = create_text();
-		/** @type {Element | Text | Comment} */ (child)?.before(text);
-		set_hydrate_node(text);
-		return text;
-	}
-
-	set_hydrate_node(child);
-
-	return child;
-}
-
 /**
  * Anchor sentinel for all-component children: components render directly into
  * `parent` instead of each inserting before a placeholder comment. `append()`
@@ -115,7 +103,29 @@ export function append_into(parent) {
 		set_hydrate_node(child);
 	}
 
-	return { parent };
+	return { parent, into: true };
+}
+
+/**
+ * Resolves the anchor for a block that keeps inserting relative to it for its
+ * whole life (root-controlled control flow). An append-into sentinel is only
+ * valid for a one-shot append: a later branch swap or list move must land at
+ * the block's own position, not after whatever siblings were appended since,
+ * so the sentinel is materialized into a text anchor at the current end of
+ * the parent. During hydration the cursor sits on the block's SSR boundary
+ * marker, which is exactly the anchor a non-sentinel root-controlled block
+ * receives, so it serves as the anchor there.
+ * @param {Node | AppendIntoAnchor} node
+ * @returns {Node}
+ */
+export function resolve_anchor(node) {
+	if (/** @type {AppendIntoAnchor} */ (node).into !== true) {
+		return /** @type {Node} */ (node);
+	}
+	if (hydrating) {
+		return /** @type {Node} */ (hydrate_node);
+	}
+	return /** @type {AppendIntoAnchor} */ (node).parent.appendChild(create_text());
 }
 
 /**
@@ -160,37 +170,6 @@ export function next_sibling(node, is_text) {
 	return hydrate_next_sibling(is_text);
 }
 
-/**
- * @param {boolean} [is_text]
- * @returns {Node | null}
- */
-export function hydrate_next_sibling(is_text) {
-	var next_sibling = /** @type {ChildNode | null} */ (
-		get_next_sibling(/** @type {ChildNode} */ (hydrate_node))
-	);
-	var last_sibling = next_sibling;
-
-	// if a sibling {expression} is empty during SSR, there might be no
-	// text node to hydrate — we must therefore create one
-	if (is_text && next_sibling?.nodeType !== TEXT_NODE) {
-		var text = create_text();
-		// If the next sibling is `null` and we're handling text then it's because
-		// the SSR content was empty for the text, so we need to generate a new text
-		// node and insert it after the last sibling
-		if (next_sibling === null) {
-			/** @type {ChildNode} */ (last_sibling).after(text);
-		} else {
-			/** @type {ChildNode} */ (next_sibling).before(text);
-		}
-		set_hydrate_node(text);
-		return text;
-	}
-
-	set_hydrate_node(next_sibling);
-
-	return next_sibling;
-}
-
 export function create_text(value = '') {
 	return document.createTextNode(value);
 }

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

@@ -1,97 +1,175 @@
-/** @import { Block } from '#client' */
+/** @import { AppendIntoAnchor, Block } from '#client' */
 
-import { branch, destroy_block, remove_block_dom, render } from './blocks.js';
-import { UNINITIALIZED } from './constants.js';
-import { handle_root_events } from './events.js';
-import { create_text } from './operations.js';
+import { branch, destroy_block, render } from './blocks.js';
+import { DESTROYED, DETACHED_BLOCK, UNINITIALIZED } from './constants.js';
+import { handle_root_events, release_root_events } from './events.js';
 import { active_block } from './runtime.js';
-import { hydrating, hydrate_node, set_hydrating, set_hydrate_node } from './hydration.js';
+import { hydrating, hydrate_node, set_hydration, set_hydrating } from './hydration.js';
 import { is_tsrx_element, tsrx_element } from '../../element.js';
 
+/**
+ * @typedef {(anchor: AppendIntoAnchor, block: Block) => void} PortalRender
+ * @typedef {{
+ *   g: () => Element;
+ *   r: PortalRender | null;
+ *   c: () => any;
+ *   t: Element | typeof UNINITIALIZED;
+ *   k: any;
+ *   b: Block | null;
+ *   e: import('./events.js').RootTargetRef | null;
+ *   p: Block | null;
+ * }} PortalState
+ * @typedef {{
+ *   start: Node | null;
+ *   end: Node | null;
+ *   r: PortalRender | null;
+ *   c: any;
+ *   a: AppendIntoAnchor;
+ *   b: Block;
+ * }} PortalBranchState
+ */
+
+/**
+ * @param {PortalState} s
+ */
+function run_portal(s) {
+	// The render block itself; lets the shared teardown tell destroy from re-run.
+	s.p = /** @type {Block} */ (active_block);
+
+	var next_target = s.g();
+	var next_children = s.c();
+
+	if (s.t === next_target && s.k === next_children) return;
+
+	if (s.t !== next_target) {
+		// The target's delegated root listeners are only released and
+		// re-acquired when the target changes — a children-only update must not
+		// touch them.
+		if (s.e !== null) {
+			release_root_events(s.e);
+		}
+		s.e = handle_root_events(next_target);
+	}
+
+	s.t = next_target;
+	s.k = next_children;
+
+	if (s.b !== null) {
+		destroy_block(s.b);
+	}
+
+	// Portal content always appends at the end of its target, so an
+	// append-into sentinel replaces a placeholder text anchor: no extra node to
+	// create, insert before, or remove on teardown. The branch is detached: its
+	// DOM is removed even when a destroyed ancestor already removed its own.
+	s.b = branch(run_portal_children, DETACHED_BLOCK, {
+		start: null,
+		end: null,
+		r: s.r,
+		c: next_children,
+		a: { parent: next_target, into: true },
+		b: /** @type {Block} */ (s.p),
+	});
+
+	return portal_teardown;
+}
+
+/**
+ * @param {PortalBranchState} state
+ */
+function run_portal_children(state) {
+	var render_children = state.r;
+	if (render_children !== null) {
+		render_children(state.a, state.b);
+		return;
+	}
+	var children = state.c;
+	if (is_tsrx_element(children)) {
+		children.render(state.a, state.b, children.p);
+	}
+}
+
+/**
+ * Only the destroy path releases the target's listeners; a re-run diffs the
+ * target itself in `run_portal`.
+ * @this {null}
+ * @param {PortalState} s
+ */
+function portal_teardown(s) {
+	var block = /** @type {Block} */ (s.p);
+	if ((block.f & DESTROYED) !== 0 && s.e !== null) {
+		release_root_events(s.e);
+		s.e = null;
+	}
+}
+
+/**
+ * @param {() => Element} get_target
+ * @param {PortalRender | null} render_children
+ * @param {() => any} get_children
+ */
+function create_portal(get_target, render_children, get_children) {
+	/** @type {PortalState} */
+	var state = {
+		g: get_target,
+		r: render_children,
+		c: get_children,
+		// current target
+		t: UNINITIALIZED,
+		// current children value (component form only)
+		k: UNINITIALIZED,
+		// branch rendering the content into the target
+		b: null,
+		// delegated root listener ref for the current target
+		e: null,
+		// the render block, assigned on its first run
+		p: null,
+	};
+
+	if (!hydrating) {
+		render(run_portal, state);
+		return;
+	}
+
+	// Portals are client-only and don't participate in hydration; the
+	// compiler-generated code already advanced past the SSR marker. Disable
+	// hydration for the portal content and restore the cursor afterwards.
+	var previous_hydrate_node = hydrate_node;
+	set_hydrating(false);
+	try {
+		render(run_portal, state);
+	} finally {
+		set_hydration(true, previous_hydrate_node);
+	}
+}
+
+function no_children() {
+	return null;
+}
+
+/**
+ * Compiler fast path for `<Portal target={...}>...</Portal>`: no props object,
+ * component context, or element wrapper — the children render function is
+ * fixed for the life of the portal.
+ * @param {Node} _anchor
+ * @param {() => Element} get_target
+ * @param {PortalRender} render_children
+ * @returns {void}
+ */
+export function portal(_anchor, get_target, render_children) {
+	create_portal(get_target, render_children, no_children);
+}
+
 /**
  * @param {{ target: Element, children: import('../../element.js').TSRXElement }} props
  * @returns {import('../../element.js').TSRXElement}
  */
 export function Portal(props) {
 	return tsrx_element(function render_portal() {
-		// 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 {import('../../element.js').TSRXElement | symbol} */
-		let children = UNINITIALIZED;
-		/** @type {Block | null} */
-		var b = null;
-		/** @type {Text | null} */
-		var anchor = null;
-		/** @type {Node | null} */
-		var dom_start = null;
-		/** @type {Node | null} */
-		var dom_end = null;
-
-		// Temporarily disable hydration for portal content
-		if (was_hydrating) {
-			set_hydrating(false);
-		}
-
-		try {
-			// Root event delegation lives in its own render block so it only
-			// re-runs when `props.target` changes — a children-only update must
-			// not release and re-acquire the target's delegated listeners.
-			render(() => {
-				const cleanup_events = handle_root_events(/** @type {Element} */ (props.target));
-				return cleanup_events;
-			});
-
-			render(() => {
-				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);
-				}
-
-				if (anchor !== null) {
-					anchor.remove();
-				}
-
-				dom_start = dom_end = null;
-
-				anchor = create_text();
-				/** @type {Element} */ (target).append(anchor);
-
-				var block = /** @type {Block} */ (active_block);
-
-				b = branch(() => {
-					if (is_tsrx_element(children)) {
-						children.render(/** @type {Text} */ (anchor), block);
-					}
-				});
-
-				dom_start = b?.s?.start;
-				dom_end = b?.s?.end;
-
-				return () => {
-					/** @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));
-			}
-		}
+		create_portal(
+			() => props.target,
+			null,
+			() => props.children,
+		);
 	});
 }

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

@@ -9,7 +9,7 @@ import {
 	get_own_property_symbols,
 	get_prototype_of,
 } from '@tsrx/core/runtime/language-helpers';
-import { event } from './events.js';
+import { event_listener } from './events.js';
 import { get_attribute_event_name, is_event_attribute } from '@tsrx/core/runtime/events';
 import { get } from './runtime.js';
 import { hydrating } from './hydration.js';
@@ -22,18 +22,14 @@ import { normalize_css_property_name } from '@tsrx/core/runtime/html';
  * @returns {void}
  */
 export function set_text(text, value) {
-	// For objects, we apply string coercion
-	var str = value == null ? '' : typeof value === 'object' ? value + '' : value;
-	var previous = text.__t;
-	// Only server-rendered text can already hold the value; a fresh template
-	// text node never does, so skip reading it back.
-	if (previous === undefined && hydrating) {
-		previous = text.__t = text.nodeValue;
-	}
-	if (str !== previous) {
-		text.__t = str;
-		text.nodeValue = str + '';
+	var str = value == null ? '' : value + '';
+	// The compiled render block compares against the value it last wrote, so
+	// nothing is cached on the node. Only server-rendered text can already
+	// hold the value; a fresh template text node never does.
+	if (hydrating && text.nodeValue === str) {
+		return;
 	}
+	text.nodeValue = str;
 }
 
 /** @type {Map<string, string[]>} */
@@ -72,7 +68,7 @@ function get_setters(element) {
 /**
  * @param {Element} element
  * @param {any} value
- * @param {Record<string, string> | undefined} prev
+ * @param {Record<string, string | number | null | undefined> | undefined} prev
  * @returns {void}
  */
 export function set_style(element, value, prev = {}) {
@@ -104,8 +100,8 @@ export function set_attribute(element, attribute, value) {
 
 /**
  * @param {HTMLElement} element
- * @param {Record<string, string | number>} new_styles
- * @param {Record<string, string>} prev
+ * @param {Record<string, string | number | null | undefined>} new_styles
+ * @param {Record<string, string | number | null | undefined>} prev
  */
 function apply_styles(element, new_styles, prev) {
 	const style = element.style;
@@ -113,7 +109,8 @@ function apply_styles(element, new_styles, prev) {
 	// Apply new styles
 	for (const key in new_styles) {
 		const css_prop = normalize_css_property_name(key);
-		const value = String(new_styles[key]);
+		const raw_value = new_styles[key];
+		const value = raw_value == null ? null : String(raw_value);
 
 		if (!(key in prev) || prev[key] !== value) {
 			style.setProperty(css_prop, value);
@@ -158,7 +155,7 @@ function set_attribute_helper(element, key, value, remove_listeners, prev) {
 		}
 		if (value != null) {
 			const event_name = get_attribute_event_name(key, value);
-			remove_listeners[key] = event(event_name, element, value);
+			remove_listeners[key] = event_listener(event_name, element, value);
 		}
 	} else {
 		set_attribute(element, key, value);
@@ -183,27 +180,20 @@ export function set_class(dom, value, hash, is_html = true) {
 				? value + (hash ? ' ' + hash : '')
 				: clsx([value, hash]);
 
-	// Skip the DOM write when the class we last applied is unchanged, or when
-	// an element that never had a class would only receive an empty one (the
-	// server omits an empty class attribute as well).
-	var previous = dom.__className;
-	if (previous === class_value || (previous === undefined && class_value === '')) {
-		dom.__className = class_value;
-		return;
-	}
-	dom.__className = class_value;
-
-	// Removing the attribute when the value is only an empty string causes
-	// performance issues vs simply making the className an empty string. So
-	// we should only remove the class if the value is nullish.
+	// The compiled render block compares against the class it last applied,
+	// so nothing is cached on the element. Removing the attribute when the
+	// value is only an empty string costs more than an empty className, so the
+	// class is removed only for a nullish value; an element that has no class
+	// does not receive an empty one either (the server omits an empty class
+	// attribute as well).
 	if (class_value === null) {
 		dom.removeAttribute('class');
-	} else {
-		if (is_html) {
+	} else if (is_html) {
+		if (class_value !== '' || dom.className !== '') {
 			dom.className = class_value;
-		} else {
-			dom.setAttribute('class', class_value);
 		}
+	} else if (class_value !== '' || dom.getAttribute('class')) {
+		dom.setAttribute('class', class_value);
 	}
 }
 
@@ -273,10 +263,9 @@ export function set_selected(element, selected) {
 /**
  * @param {Element} element
  * @param {() => Record<string | symbol, any>} fn
- * @param {string} [exclude_prop]
  * @returns {() => void}
  */
-export function apply_element_spread(element, fn, exclude_prop) {
+export function apply_element_spread(element, fn) {
 	/** @type {Record<string | symbol, any>} */
 	var prev = {};
 	/** @type {Record<string | symbol, Block | undefined>} */
@@ -323,10 +312,9 @@ export function apply_element_spread(element, fn, exclude_prop) {
 
 		/** @type {Record<string, any>} */
 		var current_ref_props = {};
+		var keys = spread_keys(next);
 
-		for (const key in next) {
-			if (key === exclude_prop) continue;
-
+		for (const key of keys) {
 			const ref_fn = next[key];
 			if (!is_ref_prop(ref_fn)) {
 				continue;
@@ -357,14 +345,14 @@ export function apply_element_spread(element, fn, exclude_prop) {
 
 		for (let key in remove_listeners) {
 			// Remove event listeners that are no longer present
-			if ((!(key in next) || is_ref_prop(next[key])) && remove_listeners[key]) {
+			if ((!keys.includes(key) || is_ref_prop(next[key])) && remove_listeners[key]) {
 				remove_listeners[key]();
 				remove_listeners[key] = undefined;
 			}
 		}
 
 		for (const key in prev) {
-			if (!(key in next) || is_ref_prop(next[key])) {
+			if (!keys.includes(key) || is_ref_prop(next[key])) {
 				if (key === '#class') {
 					continue;
 				}
@@ -374,8 +362,8 @@ export function apply_element_spread(element, fn, exclude_prop) {
 
 		/** @type {typeof prev} */
 		const current = {};
-		for (const key in next) {
-			if (key === 'children' || key === exclude_prop) continue;
+		for (const key of keys) {
+			if (key === 'children') continue;
 
 			let value = next[key];
 			if (is_ref_prop(value)) {
@@ -396,6 +384,19 @@ export function apply_element_spread(element, fn, exclude_prop) {
 	};
 }
 
+/**
+ * The keys an element spread applies: every prop of a props instance, or the
+ * enumerable keys of a plain object.
+ * @param {Record<string | symbol, any>} next
+ * @returns {string[]}
+ */
+function spread_keys(next) {
+	/** @type {string[]} */
+	var keys = [];
+	for (var key in next) keys.push(key);
+	return keys;
+}
+
 /**
  * Keep spread refs in a branch block so ordinary spread updates do not destroy
  * and recreate the ref block before `apply_element_spread` can compare the

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

@@ -1,11 +1,11 @@
-import * as devalue from 'devalue';
+import { encode, revive } from './transport.js';
 
 /**
  * @param {string} hash
  * @param {any[]} args
  */
 export async function rpc(hash, args) {
-	const body = devalue.stringify(args);
+	const body = encode(args);
 	/** @type {Response} */
 	let response;
 
@@ -55,5 +55,5 @@ export async function rpc(hash, args) {
 		);
 	}
 
-	return devalue.parse(data).value;
+	return revive(data).value;
 }