ripple 0.4.2 → 0.4.3

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

@@ -14,6 +14,7 @@ import { hydrate_next, hydrate_node, hydrating } from './hydration.js';
 import { create_text, resolve_anchor } from './operations.js';
 import { active_block, probe_if, run_untracked } from './runtime.js';
 import { append } from './template.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
  * The if block renders its branch directly: the block owns the branch's DOM
@@ -108,7 +109,9 @@ function destroy_branch(state, block) {
  * is materialized as late as possible: when a branch swap needs the position
  * of the branch being replaced (still rendered), or when the if renders
  * nothing and would otherwise have no position at all. Until then a list of
- * `@if` items keeps no anchor nodes in the DOM.
+ * `@if` items keeps no anchor nodes in the DOM. A tail sentinel (the if is
+ * the last thing rendered into its parent) is never materialized: appending
+ * to the parent stays right for the if's whole life.
  * @param {IfState} state
  * @param {Block} block
  */
@@ -147,9 +150,14 @@ function update_branch(state, fn) {
 
 	var block = /** @type {Block} */ (active_block);
 
+	var anchor = /** @type {AppendIntoAnchor} */ (state.a);
+	// A sentinel the if may still materialize (a tail sentinel never is).
+	var sentinel = anchor.into === true && anchor.tail !== true;
+
 	if (previous !== UNINITIALIZED) {
-		if (/** @type {AppendIntoAnchor} */ (state.a).into === true) {
+		if (sentinel) {
 			materialize_anchor(state, block);
+			sentinel = false;
 		}
 		destroy_branch(state, block);
 	}
@@ -161,14 +169,10 @@ function update_branch(state, fn) {
 
 		if (o !== null) {
 			move_block_last(o);
-		} else if (
-			/** @type {AppendIntoAnchor} */ (state.a).into === true &&
-			state.start === null &&
-			first_child_node(block, null) === null
-		) {
+		} else if (sentinel && state.start === null && first_child_node(block, null) === null) {
 			materialize_anchor(state, block);
 		}
-	} else if (/** @type {AppendIntoAnchor} */ (state.a).into === true) {
+	} else if (sentinel) {
 		materialize_anchor(state, block);
 	}
 }
@@ -222,7 +226,7 @@ export function if_block(node, fn, root_controlled, x) {
 	var boundary;
 	var anchor = node;
 
-	if (!hydrating) {
+	if (!(HYDRATION && hydrating)) {
 		// Evaluate the condition before deciding whether the if needs a block:
 		// a condition that read no tracked state has its branch rendered by the
 		// probe itself, directly under the current block, with no if block, no

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

@@ -14,8 +14,7 @@ export {
 	set_text,
 	set_text_content,
 	set_class,
-	set_style,
-	set_attribute,
+	set_class_value,
 	set_value,
 	set_checked,
 	set_selected,
@@ -23,7 +22,6 @@ export {
 
 export {
 	render,
-	render_spread,
 	ref,
 	branch,
 	destroy_block,
@@ -41,7 +39,8 @@ export {
 	SUSPENSE_REJECTED,
 	RENDER_ENTRY as $r,
 } from './constants.js';
-export { event, render_event, delegate } from './events.js';
+export { event, render_event, delegate, listen } from './events.js';
+export { set_style, set_attribute, render_spread } from './attributes.js';
 export { portal } from './portal.js';
 
 export {
@@ -63,7 +62,7 @@ export {
 	update_property,
 	update_pre_property,
 	track,
-	track_async,
+	track_read_only,
 	is_tracked_pending,
 	peek_tracked,
 	push_component,
@@ -80,6 +79,8 @@ export {
 	schedule_update,
 } from './runtime.js';
 
+export { track_async } from './track-async.js';
+
 export { composite } from './composite.js';
 
 export { render_component } from './component.js';
@@ -96,7 +97,14 @@ export { if_block as switch } from './if.js';
 
 export { template, append, text } from './template.js';
 
-export { ripple_array } from '../../array.js';
+export { template_ns } from './template-ns.js';
+
+export {
+	ripple_array,
+	ripple_array_from,
+	ripple_array_of,
+	ripple_array_from_async,
+} from '../../array.js';
 
 export { ripple_object } from '../../object.js';
 

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

@@ -8,6 +8,7 @@ import {
 	set_hydrate_node,
 } from './hydration.js';
 import { get_descriptor } from '@tsrx/core/runtime/language-helpers';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 export { hydrate_first_child, hydrate_next_sibling };
 
@@ -76,7 +77,7 @@ export function get_last_child(node) {
  * @returns {Node | null}
  */
 export function first_child(node, is_text) {
-	if (!hydrating) {
+	if (!(HYDRATION && hydrating)) {
 		return node.firstChild;
 	}
 	return hydrate_first_child(is_text);
@@ -89,10 +90,13 @@ export function first_child(node, is_text) {
  * hydration we descend the cursor into `parent` (mirroring first_child) so the
  * first appended component adopts the server's first child of `parent`.
  * @param {Node} parent
+ * @param {boolean} [tail] the sentinel stands for the tail of `parent`: what
+ *   it anchors is the last thing the framework appends there, so it stays the
+ *   right insertion point for its whole life (see the `if` runtime)
  * @returns {AppendIntoAnchor}
  */
-export function append_into(parent) {
-	if (hydrating) {
+export function append_into(parent, tail) {
+	if (HYDRATION && hydrating) {
 		var child = get_first_child(/** @type {Node} */ (hydrate_node));
 
 		if (child === null) {
@@ -102,7 +106,7 @@ export function append_into(parent) {
 		set_hydrate_node(child);
 	}
 
-	return { parent, into: true };
+	return { parent, into: true, tail: tail === true };
 }
 
 /**
@@ -121,7 +125,7 @@ export function resolve_anchor(node) {
 	if (/** @type {AppendIntoAnchor} */ (node).into !== true) {
 		return /** @type {Node} */ (node);
 	}
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		return /** @type {Node} */ (hydrate_node);
 	}
 	return /** @type {AppendIntoAnchor} */ (node).parent.appendChild(create_text());
@@ -136,7 +140,7 @@ export function resolve_anchor(node) {
 export function first_child_frag(node, is_text) {
 	// During hydration, for fragment templates, hydrate_node is already
 	// pointing to the first element of the fragment. Don't descend into it.
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		return hydrate_node;
 	}
 	var child = /** @type {Text} */ (first_child(node, is_text));
@@ -163,7 +167,7 @@ export function get_next_sibling(node) {
  * @returns {Node | null}
  */
 export function next_sibling(node, is_text) {
-	if (!hydrating) {
+	if (!(HYDRATION && hydrating)) {
 		return node.nextSibling;
 	}
 	return hydrate_next_sibling(is_text);

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

@@ -6,6 +6,7 @@ import { handle_root_events, release_root_events } from './events.js';
 import { active_block } from './runtime.js';
 import { hydrating, hydrate_node, set_hydration, set_hydrating } from './hydration.js';
 import { is_tsrx_element, tsrx_element } from '../../element.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
  * @typedef {(anchor: AppendIntoAnchor, block: Block) => void} PortalRender
@@ -67,7 +68,7 @@ function run_portal(s) {
 		end: null,
 		r: s.r,
 		c: next_children,
-		a: { parent: next_target, into: true },
+		a: { parent: next_target, into: true, tail: false },
 		b: /** @type {Block} */ (s.p),
 	});
 
@@ -126,7 +127,7 @@ function create_portal(get_target, render_children, get_children) {
 		p: null,
 	};
 
-	if (!hydrating) {
+	if (!(HYDRATION && hydrating)) {
 		render(run_portal, state);
 		return;
 	}

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

@@ -1,21 +1,9 @@
 /** @import { Block } from '#client' */
 
-import { branch, destroy_block, ref } from './blocks.js';
-import { DESTROYED, REF_PROP } from './constants.js';
-import { isRefProp as is_ref_prop } from '@tsrx/core/runtime/ref';
-import { is_ripple_object } from './utils.js';
-import {
-	get_descriptors,
-	get_own_property_symbols,
-	get_prototype_of,
-} from '@tsrx/core/runtime/language-helpers';
-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';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 import { TEXT_NODE } from '../../../constants.js';
-import { clsx } from 'clsx';
-import { normalize_css_property_name } from '@tsrx/core/runtime/html';
+import { class_name } from '../../../utils/class-name.js';
 
 /**
  * Sets the text of an element whose only child is that text. The template
@@ -31,7 +19,7 @@ import { normalize_css_property_name } from '@tsrx/core/runtime/html';
  */
 export function set_text_content(element, value, prev) {
 	var str = value == null ? '' : value + '';
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		var text = element.firstChild;
 		if (text === null) {
 			if (str !== '') {
@@ -63,166 +51,35 @@ export function set_text(text, 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) {
+	if (HYDRATION && hydrating && text.nodeValue === str) {
 		return;
 	}
 	text.nodeValue = str;
 }
 
-/** @type {Map<string, string[]>} */
-var setters_cache = new Map();
-
-/**
- * @param {Element} element
- * @returns {string[]}
- */
-function get_setters(element) {
-	var setters = setters_cache.get(element.nodeName);
-	if (setters) return setters;
-	setters_cache.set(element.nodeName, (setters = []));
-
-	var descriptors;
-	var proto = element; // In the case of custom elements there might be setters on the instance
-	var element_proto = Element.prototype;
-
-	// Stop at Element, from there on there's only unnecessary setters we're not interested in
-	// Do not use constructor.name here as that's unreliable in some browser environments
-	while (element_proto !== proto) {
-		descriptors = get_descriptors(proto);
-
-		for (var key in descriptors) {
-			if (descriptors[key].set) {
-				setters.push(key);
-			}
-		}
-
-		proto = get_prototype_of(proto);
-	}
-
-	return setters;
-}
-
-/**
- * @param {Element} element
- * @param {any} value
- * @param {Record<string, string | number | null | undefined> | undefined} prev
- * @returns {void}
- */
-export function set_style(element, value, prev = {}) {
-	if (value == null) {
-		element.removeAttribute('style');
-	} else if (typeof value !== 'string') {
-		apply_styles(/** @type {HTMLElement} */ (element), value, prev);
-	} else {
-		// @ts-ignore
-		element.style.cssText = value;
-	}
-}
-
-/**
- * @param {Element} element
- * @param {string} attribute
- * @param {any} value
- * @returns {void}
- */
-export function set_attribute(element, attribute, value) {
-	if (value == null) {
-		element.removeAttribute(attribute);
-	} else if (typeof value !== 'string' && get_setters(element).includes(attribute)) {
-		/** @type {any} */ (element)[attribute] = value;
-	} else {
-		element.setAttribute(attribute, value);
-	}
-}
-
-/**
- * @param {HTMLElement} element
- * @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;
-
-	// Apply new styles
-	for (const key in new_styles) {
-		const css_prop = normalize_css_property_name(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);
-		}
-	}
-
-	// Remove properties that were in prev but not in new_styles
-	for (const key in prev) {
-		if (!(key in new_styles)) {
-			const css_prop = normalize_css_property_name(key);
-			style.removeProperty(css_prop);
-		}
-	}
-}
-
-/**
- * Helper function to set a single attribute
- * @param {Element} element
- * @param {string} key
- * @param {any} value
- * @param {Record<string, (() => void) | undefined>} remove_listeners
- * @param {Record<string | symbol, any>} prev
- */
-function set_attribute_helper(element, key, value, remove_listeners, prev) {
-	if (key === 'class') {
-		const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
-		set_class(/** @type {HTMLElement} */ (element), value, undefined, is_html);
-	} else if (key === 'innerHTML') {
-		element.removeAttribute('innerhtml');
-		/** @type {HTMLElement} */ (element).innerHTML = value == null ? '' : String(value);
-	} else if (key === 'style') {
-		set_style(element, value, prev.style);
-	} else if (key === '#class') {
-		// Special case for the scope classes of an element that spreads props:
-		// one token per scope hash and applied theme.
-		element.classList.add(...String(value).split(' ').filter(Boolean));
-	} else if (typeof key === 'string' && is_event_attribute(key)) {
-		// Handle event handlers in spread props
-		if (remove_listeners[key]) {
-			remove_listeners[key]();
-			remove_listeners[key] = undefined;
-		}
-		if (value != null) {
-			const event_name = get_attribute_event_name(key, value);
-			remove_listeners[key] = event_listener(event_name, element, value);
-		}
-	} else {
-		set_attribute(element, key, value);
-	}
-}
-
 /**
+ * Writes a class the compiler proved to be a string (or 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).
  * @param {HTMLElement} dom
- * @param {string} value
+ * @param {string | null | undefined} value
  * @param {string} [hash]
  * @param {boolean} [is_html]
  * @returns {void}
  */
 export function set_class(dom, value, hash, is_html = true) {
-	var class_value =
-		value == null
-			? hash === undefined
-				? null
-				: hash
-			: // Fast-path for string values
-				typeof value === 'string'
-				? value + (hash ? ' ' + hash : '')
-				: clsx([value, hash]);
+	/** @type {string | null} */
+	var class_value;
+	if (value == null) {
+		class_value = hash === undefined ? null : hash;
+	} else {
+		class_value = hash ? (value === '' ? hash : value + ' ' + hash) : value;
+	}
 
-	// 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) {
@@ -234,6 +91,24 @@ export function set_class(dom, value, hash, is_html = true) {
 	}
 }
 
+/**
+ * `set_class` for a value of any shape: arrays, objects and numbers compose
+ * as clsx does. Only a bundle with such a class expression carries the joiner.
+ * @param {HTMLElement} dom
+ * @param {any} value
+ * @param {string} [hash]
+ * @param {boolean} [is_html]
+ * @returns {void}
+ */
+export function set_class_value(dom, value, hash, is_html = true) {
+	set_class(
+		dom,
+		value == null || typeof value === 'string' ? value : class_name(value),
+		hash,
+		is_html,
+	);
+}
+
 /**
  * @param {HTMLInputElement | HTMLProgressElement | HTMLOptionElement} element
  * @param {any} value
@@ -266,18 +141,12 @@ export function set_value(element, value) {
  * @returns {void}
  */
 export function set_checked(element, checked) {
-	var attributes = (element.__attributes ??= {});
-
-	if (
-		attributes.checked ===
-		(attributes.checked =
-			// treat null and undefined the same for the initial value
-			checked ?? undefined)
-	) {
-		return;
+	// Compared against the element itself rather than a record of the last
+	// write: no expando per checkbox, and a box the user just toggled to the
+	// value being set needs no write at all.
+	if (element.checked !== (checked = !!checked)) {
+		element.checked = checked;
 	}
-
-	element.checked = checked;
 }
 
 /**
@@ -296,155 +165,3 @@ export function set_selected(element, selected) {
 		element.removeAttribute('selected');
 	}
 }
-
-/**
- * @param {Element} element
- * @param {() => Record<string | symbol, any>} fn
- * @returns {() => void}
- */
-export function apply_element_spread(element, fn) {
-	/** @type {Record<string | symbol, any>} */
-	var prev = {};
-	/** @type {Record<string | symbol, Block | undefined>} */
-	var effects = {};
-	/** @type {Record<string | symbol, (() => void) | undefined>} */
-	var remove_listeners = {};
-
-	/** @type {Record<symbol, any>} */
-	var prev_symbols = {};
-	/** @type {Record<string, any>} */
-	var prev_ref_props = {};
-
-	return () => {
-		var next = fn();
-		var current_symbols = /** @type {Record<symbol, any>} */ ({});
-
-		for (const symbol of get_own_property_symbols(next)) {
-			if (symbol.description !== REF_PROP) {
-				continue;
-			}
-			const ref_fn = next[symbol];
-			current_symbols[symbol] = ref_fn;
-
-			if (
-				!(symbol in prev_symbols) ||
-				ref_fn !== prev_symbols[symbol] ||
-				(effects[symbol] && (effects[symbol].f & DESTROYED) !== 0)
-			) {
-				if (effects[symbol] && (effects[symbol].f & DESTROYED) === 0) {
-					destroy_block(effects[symbol]);
-				}
-				effects[symbol] = create_spread_ref_effect(element, ref_fn);
-			}
-		}
-
-		for (const symbol of get_own_property_symbols(prev_symbols)) {
-			if (!(symbol in current_symbols) && effects[symbol]) {
-				destroy_block(/** @type {Block} */ (effects[symbol]));
-				effects[symbol] = undefined;
-			}
-		}
-
-		prev_symbols = current_symbols;
-
-		/** @type {Record<string, any>} */
-		var current_ref_props = {};
-		var keys = spread_keys(next);
-
-		for (const key of keys) {
-			const ref_fn = next[key];
-			if (!is_ref_prop(ref_fn)) {
-				continue;
-			}
-
-			current_ref_props[key] = ref_fn;
-
-			if (
-				!(key in prev_ref_props) ||
-				ref_fn !== prev_ref_props[key] ||
-				(effects[key] && (effects[key].f & DESTROYED) !== 0)
-			) {
-				if (effects[key] && (effects[key].f & DESTROYED) === 0) {
-					destroy_block(effects[key]);
-				}
-				effects[key] = create_spread_ref_effect(element, ref_fn);
-			}
-		}
-
-		for (const key in prev_ref_props) {
-			if (!(key in current_ref_props) && effects[key]) {
-				destroy_block(/** @type {Block} */ (effects[key]));
-				effects[key] = undefined;
-			}
-		}
-
-		prev_ref_props = current_ref_props;
-
-		for (let key in remove_listeners) {
-			// Remove event listeners that are no longer present
-			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 (!keys.includes(key) || is_ref_prop(next[key])) {
-				if (key === '#class') {
-					continue;
-				}
-				set_attribute_helper(element, key, null, remove_listeners, prev);
-			}
-		}
-
-		/** @type {typeof prev} */
-		const current = {};
-		for (const key of keys) {
-			if (key === 'children') continue;
-
-			let value = next[key];
-			if (is_ref_prop(value)) {
-				continue;
-			}
-			if (is_ripple_object(value)) {
-				value = get(value);
-			}
-			current[key] = value;
-
-			if (key in prev && prev[key] === value && key !== '#class') {
-				continue;
-			}
-
-			set_attribute_helper(element, key, value, remove_listeners, prev);
-		}
-		prev = current;
-	};
-}
-
-/**
- * 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
- * previous and current ref values.
- *
- * @param {Element} element
- * @param {any} ref_fn
- * @returns {Block}
- */
-function create_spread_ref_effect(element, ref_fn) {
-	return branch(() => {
-		ref(element, () => ref_fn);
-	});
-}

package/src/runtime/internal/client/root-boundary-enabled.js

@@ -0,0 +1,7 @@
+/**
+ * Whether `mount()` and `hydrate()` render the app under a default
+ * try/pending/catch boundary. The Vite plugin's `rootBoundary: false` build
+ * aliases this module to one exporting `false`; the bundler then drops the
+ * boundary runtime from an app that renders without one.
+ */
+export const ROOT_BOUNDARY = true;