ripple 0.4.2 → 0.4.4

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

@@ -0,0 +1,439 @@
+/** @import { Block } from '#client' */
+
+import { block, branch, destroy_block, ref } from './blocks.js';
+import { DESTROYED, REF_PROP, RENDER_BLOCK, TRACKED_OBJECT } 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 { normalize_css_property_name } from '@tsrx/core/runtime/html';
+import { set_class_value } from './render.js';
+
+/**
+ * Dynamic attributes, styles and spreads. Apart from `render.js`, so that an
+ * app whose attributes are all static or class/text/value writes never loads
+ * the attribute tables these helpers consult.
+ */
+
+/** @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 {SpreadState} state
+ */
+function set_attribute_helper(element, key, value, state) {
+	if (key === 'class') {
+		const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
+		set_class_value(/** @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, state.p.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 (is_event_attribute(key)) {
+		// Handle event handlers in spread props
+		var listeners = (state.l ??= {});
+		if (listeners[key]) {
+			listeners[key]();
+			listeners[key] = undefined;
+		}
+		if (value != null) {
+			const event_name = get_attribute_event_name(key, value);
+			listeners[key] = event_listener(event_name, element, value);
+		}
+	} else {
+		set_attribute(element, key, value);
+	}
+}
+
+/**
+ * The state of one element spread: the object and values it last applied,
+ * and the listeners and ref effects it owns. `spread()` creates it on its
+ * first call and is handed it back by every later one, so the compiled render
+ * function keeps it in its own state object, and a `render_spread` block in
+ * its block state.
+ */
+export class SpreadState {
+	/** @param {Element} element */
+	constructor(element) {
+		this.e = element;
+		/** @type {Record<string | symbol, any> | null} the object last applied, compared by identity */
+		this.n = null;
+		/** @type {Record<string, any>} the values last applied, by key */
+		this.p = {};
+		/**
+		 * The object last applied was a tracked object, or held a tracked value:
+		 * the same object can carry new values, so it is never skipped on identity.
+		 */
+		this.t = false;
+		/** @type {Record<string, (() => void) | undefined> | null} listeners by event key */
+		this.l = null;
+		/** @type {Record<string | symbol, any> | null} the ref props last applied */
+		this.r = null;
+		/** @type {Record<string | symbol, Block | undefined> | null} the effects of those ref props */
+		this.b = null;
+	}
+}
+
+/** What a nullish or primitive spread value applies. */
+var EMPTY = {};
+
+/**
+ * Applies a spread of attributes to an element, diffing against what the
+ * previous call applied: attributes, `class`, `style` objects, event
+ * listeners and ref props. An object identical to the last one applied is
+ * skipped outright, unless that object was a tracked object or held a
+ * tracked value (its contents can change while its identity does not).
+ * Called from a compiled render function with the state it returned before
+ * (`undefined` the first time), which the render function stores.
+ * @param {Element} element
+ * @param {any} next
+ * @param {SpreadState | undefined} state
+ * @returns {SpreadState}
+ */
+export function spread(element, next, state) {
+	if (next == null || (typeof next !== 'object' && typeof next !== 'function')) {
+		next = EMPTY;
+	}
+	if (state === undefined) {
+		return apply_spread(new SpreadState(element), next);
+	}
+	if (state.n === next && !state.t) {
+		return state;
+	}
+
+	var prev = state.p;
+	/** @type {Record<string, any>} */
+	var current = {};
+	/** @type {Record<string | symbol, any> | null} */
+	var refs = null;
+	var tracked = TRACKED_OBJECT in next;
+	var key;
+
+	// A parent's ref prop travels through a spread on a symbol key.
+	var symbols = get_own_property_symbols(next);
+	for (var i = 0; i < symbols.length; i++) {
+		var symbol = symbols[i];
+		if (symbol.description === REF_PROP) {
+			refs = apply_ref_prop(state, symbol, next[symbol], refs);
+		}
+	}
+
+	// Listeners and attributes that are gone, or now carry a ref prop, are
+	// removed before anything is applied: removing `class` drops the scope
+	// classes too, which `#class` then adds back.
+	var listeners = state.l;
+	if (listeners !== null) {
+		for (key in listeners) {
+			if (listeners[key] !== undefined && (!(key in next) || is_ref_prop(next[key]))) {
+				/** @type {() => void} */ (listeners[key])();
+				listeners[key] = undefined;
+			}
+		}
+	}
+	for (key in prev) {
+		if (key !== '#class' && (!(key in next) || is_ref_prop(next[key]))) {
+			set_attribute_helper(element, key, null, state);
+		}
+	}
+
+	for (key in next) {
+		if (key === 'children') continue;
+
+		var value = next[key];
+		if (typeof value === 'function' && is_ref_prop(value)) {
+			refs = apply_ref_prop(state, key, value, refs);
+			continue;
+		}
+		if (is_ripple_object(value)) {
+			value = get(value);
+			tracked = true;
+		}
+		current[key] = value;
+
+		// The scope classes are added after every run: a `class` write may
+		// have replaced them.
+		if (key !== '#class' && key in prev && prev[key] === value) {
+			continue;
+		}
+		set_attribute_helper(element, key, value, state);
+	}
+
+	if (state.r !== null) {
+		release_ref_props(state, refs);
+	}
+	state.r = refs;
+	state.p = current;
+	state.n = next;
+	state.t = tracked;
+	return state;
+}
+
+/**
+ * The first run of a spread: nothing to remove or compare, every value is
+ * applied.
+ * @param {SpreadState} state
+ * @param {Record<string | symbol, any>} next
+ * @returns {SpreadState}
+ */
+function apply_spread(state, next) {
+	var element = state.e;
+	/** @type {Record<string, any>} */
+	var current = {};
+	/** @type {Record<string | symbol, any> | null} */
+	var refs = null;
+	var tracked = TRACKED_OBJECT in next;
+
+	var symbols = get_own_property_symbols(next);
+	for (var i = 0; i < symbols.length; i++) {
+		var symbol = symbols[i];
+		if (symbol.description === REF_PROP) {
+			refs = apply_ref_prop(state, symbol, next[symbol], refs);
+		}
+	}
+
+	for (var key in next) {
+		if (key === 'children') continue;
+
+		var value = next[key];
+		if (typeof value === 'function' && is_ref_prop(value)) {
+			refs = apply_ref_prop(state, key, value, refs);
+			continue;
+		}
+		if (is_ripple_object(value)) {
+			value = get(value);
+			tracked = true;
+		}
+		current[key] = value;
+		set_attribute_helper(element, key, value, state);
+	}
+
+	state.r = refs;
+	state.p = current;
+	state.n = next;
+	state.t = tracked;
+	return state;
+}
+
+/**
+ * Keeps the effect of a ref prop the spread carried before, or creates one
+ * for a ref prop that is new or changed.
+ * @param {SpreadState} state
+ * @param {string | symbol} key
+ * @param {any} ref_fn
+ * @param {Record<string | symbol, any> | null} refs the ref props of this run
+ * @returns {Record<string | symbol, any>}
+ */
+function apply_ref_prop(state, key, ref_fn, refs) {
+	if (refs === null) {
+		refs = {};
+	}
+	refs[key] = ref_fn;
+
+	var previous = state.r;
+	var blocks = (state.b ??= {});
+	var block = blocks[key];
+	if (
+		previous === null ||
+		!(key in previous) ||
+		previous[key] !== ref_fn ||
+		(block !== undefined && (block.f & DESTROYED) !== 0)
+	) {
+		if (block !== undefined && (block.f & DESTROYED) === 0) {
+			destroy_block(block);
+		}
+		blocks[key] = create_spread_ref_effect(state.e, ref_fn);
+	}
+	return refs;
+}
+
+/**
+ * Destroys the effects of the ref props a spread no longer carries.
+ * @param {SpreadState} state
+ * @param {Record<string | symbol, any> | null} refs the ref props of this run
+ */
+function release_ref_props(state, refs) {
+	var previous = /** @type {Record<string | symbol, any>} */ (state.r);
+	var blocks = /** @type {Record<string | symbol, Block | undefined>} */ (state.b);
+	/** @type {(string | symbol)[]} */
+	var keys = get_own_property_symbols(previous);
+	for (var key in previous) {
+		keys.push(key);
+	}
+	for (var i = 0; i < keys.length; i++) {
+		var k = keys[i];
+		var block = blocks[k];
+		if ((refs === null || !(k in refs)) && block !== undefined) {
+			destroy_block(block);
+			blocks[k] = undefined;
+		}
+	}
+}
+
+/**
+ * Releases what a spread owns when its element is dropped by something other
+ * than its block (a dynamic element replaced by a tag change): its ref
+ * effects, so refs receive null, and its listeners.
+ * @param {SpreadState | undefined} state
+ */
+export function release_spread(state) {
+	if (state === undefined) return;
+	var blocks = state.b;
+	if (blocks !== null) {
+		release_ref_props(state, null);
+	}
+	var listeners = state.l;
+	if (listeners !== null) {
+		for (var key in listeners) {
+			var remove = listeners[key];
+			if (remove !== undefined) {
+				remove();
+				listeners[key] = undefined;
+			}
+		}
+	}
+}
+
+/**
+ * Keep spread refs in a branch block so ordinary spread updates do not destroy
+ * and recreate the ref block before `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);
+	});
+}
+
+/**
+ * @typedef {{ e: Element; f: () => any; s: SpreadState | undefined }} RenderSpreadState
+ */
+
+/**
+ * @param {RenderSpreadState} s
+ */
+function run_spread(s) {
+	s.s = spread(s.e, s.f(), s.s);
+}
+
+/**
+ * A render block that applies a spread of attributes to an element: for a
+ * dynamic element, whose attributes are its props literal. Compiled
+ * elements apply their spread from their own render function instead.
+ * @param {Element} element
+ * @param {() => any} fn
+ * @param {number} [flags]
+ * @returns {Block}
+ */
+export function render_spread(element, fn, flags = 0) {
+	return block(RENDER_BLOCK | flags, run_spread, { e: element, f: fn, s: undefined });
+}

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

@@ -15,10 +15,13 @@ import {
 	HEAD_BLOCK,
 	IF_BLOCK,
 	CREATES_DERIVEDS,
+	COMPOSITE_BLOCK,
+	DEFAULT_NAMESPACE,
+	SVG_BLOCK,
+	MATHML_BLOCK,
 } from './constants.js';
 import { hydrating } from './hydration.js';
 import { next_sibling } from './operations.js';
-import { apply_element_spread } from './render.js';
 import { is_array } from '@tsrx/core/runtime/language-helpers';
 import {
 	active_block,
@@ -32,17 +35,18 @@ import {
 	run_teardown,
 	schedule_update,
 	untrack,
+	active_namespace,
 } from './runtime.js';
 import { is_ripple_object } from './utils.js';
+import { effect_orphan } from './errors.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
  * @param {Function} fn
  */
 export function user_effect(fn) {
 	if (active_block === null) {
-		throw new Error(
-			'effect() must be called within an active context, such as a component or effect',
-		);
+		effect_orphan();
 	}
 
 	var component = active_component;
@@ -85,15 +89,6 @@ export function render(fn, state, flags = 0) {
 	return block;
 }
 
-/**
- * @param {any} element
- * @param {any} fn
- * @param {number} [flags]
- */
-export function render_spread(element, fn, flags = 0) {
-	return block(RENDER_BLOCK | flags, apply_element_spread(element, fn));
-}
-
 /**
  * @param {Function} fn
  * @param {number} [flags]
@@ -117,7 +112,7 @@ function noop() {}
  * @param {Node} anchor
  */
 export function own_anchor(node, anchor) {
-	if (anchor === node || hydrating) return;
+	if (anchor === node || (HYDRATION && hydrating)) return;
 	branch(noop, 0, { start: anchor, end: anchor });
 }
 
@@ -273,7 +268,10 @@ export function create_block(flags, fn, state = null, co) {
 		co: co || active_component,
 		d: null,
 		first: null,
-		f: flags,
+		f:
+			active_namespace === DEFAULT_NAMESPACE
+				? flags
+				: flags | (active_namespace === 'svg' ? SVG_BLOCK : MATHML_BLOCK),
 		fn,
 		i: ++block_id,
 		last: null,
@@ -459,8 +457,8 @@ export function remove_block_dom(node, end) {
 export function move_block(block, target) {
 	var f = block.f;
 
-	// Only branch and if blocks (excluding TRY_BLOCK) can have DOM state to move
-	if ((f & (BRANCH_BLOCK | IF_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) {
+	// Only branch, if and composite blocks (excluding TRY_BLOCK) can have DOM state to move
+	if ((f & (BRANCH_BLOCK | IF_BLOCK | COMPOSITE_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) {
 		var s = block.s;
 		if (s !== null && s.start !== null) {
 			var node = s.start;
@@ -503,7 +501,7 @@ export function move_block(block, target) {
  */
 export function get_first_node(block) {
 	var f = block.f;
-	if ((f & (BRANCH_BLOCK | IF_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) {
+	if ((f & (BRANCH_BLOCK | IF_BLOCK | COMPOSITE_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) {
 		var s = block.s;
 		if (s !== null && s.start !== null) {
 			return s.start;
@@ -527,7 +525,7 @@ export function get_first_node(block) {
  */
 export function get_last_node(block) {
 	var f = block.f;
-	if ((f & (BRANCH_BLOCK | IF_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) {
+	if ((f & (BRANCH_BLOCK | IF_BLOCK | COMPOSITE_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) {
 		var s = block.s;
 		if (s !== null && s.start !== null) {
 			// An if's materialized anchor is its last node.
@@ -561,7 +559,9 @@ export function destroy_block(block, remove_dom = true) {
 	}
 
 	if (
-		(remove_dom && (f & (BRANCH_BLOCK | ROOT_BLOCK | IF_BLOCK)) !== 0 && (f & TRY_BLOCK) === 0) ||
+		(remove_dom &&
+			(f & (BRANCH_BLOCK | ROOT_BLOCK | IF_BLOCK | COMPOSITE_BLOCK)) !== 0 &&
+			(f & TRY_BLOCK) === 0) ||
 		(f & HEAD_BLOCK) !== 0
 	) {
 		var s = block.s;

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

@@ -3,6 +3,7 @@
 import { is_tsrx_element } from '../../element.js';
 import { render_value } from './expression.js';
 import { active_block } from './runtime.js';
+import { component_invalid } from './errors.js';
 
 export { render_component } from './runtime.js';
 
@@ -21,9 +22,5 @@ export function render_tsrx_element(value, anchor, block = active_block) {
  * @returns {never}
  */
 export function throw_invalid_component_type(value) {
-	if (is_tsrx_element(value)) {
-		throw new TypeError('Invalid component type: received a TSRXElement value.');
-	}
-
-	throw new TypeError('Invalid component type: expected a component function.');
+	component_invalid(is_tsrx_element(value));
 }