ripple 0.4.1 → 0.4.3

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

@@ -0,0 +1,313 @@
+/** @import { Block } from '#client' */
+
+import { block, branch, destroy_block, ref } from './blocks.js';
+import { DESTROYED, REF_PROP, RENDER_BLOCK } 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 {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_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, 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);
+	}
+}
+
+/**
+ * @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);
+	});
+}
+/**
+ * A render block that applies a spread of attributes to an element.
+ * @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));
+}

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

@@ -18,7 +18,6 @@ import {
 } 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,
@@ -34,15 +33,15 @@ import {
 	untrack,
 } 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 +84,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 +107,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 });
 }
 

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));
 }

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

@@ -1,13 +1,17 @@
 /** @import { Block } from '#client' */
+import { component_invalid } from './errors.js';
 
-import { branch, destroy_block, render, render_spread } from './blocks.js';
+import { branch, destroy_block, render } from './blocks.js';
+import { render_spread } from './attributes.js';
 import { COMPOSITE_BLOCK, DEFAULT_NAMESPACE, NAMESPACE_URI } from './constants.js';
 import { hydrate_node, hydrate_next, hydrating, set_hydrate_node } from './hydration.js';
 import { first_child } from './operations.js';
 import { active_block, active_namespace, get, untrack, with_ns } from './runtime.js';
 import { top_element_to_ns } from './utils.js';
+import { install_ns_templates } from './template-ns.js';
 import { is_tsrx_element } from '../../element.js';
 import { render_component } from './component.js';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
  * @typedef {Function | string | null | undefined | false} CompositeTarget
@@ -19,7 +23,7 @@ import { render_component } from './component.js';
  * @returns {void}
  */
 export function composite(get_component, node, get_props) {
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		// During hydration, `node` may already point at the first real SSR node
 		// (e.g. layout children). Only skip forward when we are on an empty
 		// comment anchor from a client template placeholder.
@@ -49,16 +53,20 @@ export function composite(get_component, node, get_props) {
 					render_component(component, anchor, props);
 				});
 			} else if (is_tsrx_element(component)) {
-				throw new TypeError('Invalid component type: received a TSRXElement value.');
+				component_invalid(true);
 			} else if (component != null) {
 				// Custom element - only create if component is not null/undefined
 				const ns = top_element_to_ns(component, active_namespace);
+				if (ns !== DEFAULT_NAMESPACE) {
+					// Templates cloned inside the element parse in its namespace.
+					install_ns_templates();
+				}
 				var run = () => {
 					var block = /** @type {Block} */ (active_block);
 
 					/** @type {Element} */
 					var element;
-					if (hydrating) {
+					if (HYDRATION && hydrating) {
 						// Claim the SSR-rendered element instead of creating a new one.
 						element = /** @type {Element} */ (hydrate_node);
 					} else {
@@ -86,7 +94,7 @@ export function composite(get_component, node, get_props) {
 					if (is_tsrx_element(props.children)) {
 						/** @type {Node} */
 						var child_anchor;
-						if (hydrating) {
+						if (HYDRATION && hydrating) {
 							// The server renders children directly inside the element with no
 							// extra markers; descend the cursor so they claim those nodes.
 							child_anchor = /** @type {Node} */ (first_child(element));
@@ -101,7 +109,7 @@ export function composite(get_component, node, get_props) {
 							props.children.render(child_anchor, block, props.children.p);
 						}
 
-						if (hydrating) {
+						if (HYDRATION && hydrating) {
 							// Reset the cursor to the claimed element so sibling traversal
 							// continues after it.
 							set_hydrate_node(element);

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

@@ -29,11 +29,17 @@ export var SELECTOR = 1 << 23;
 export var RELEASED = 1 << 24;
 /** A block whose latest run created deriveds that are recorded for release (see `release_deriveds`). */
 export var CREATES_DERIVEDS = 1 << 25;
+/**
+ * A list item block that carries its body's render block itself (see the
+ * runtime's `item`): a branch block for its DOM range, and a reaction that
+ * re-runs the body's update function.
+ */
+export var ITEM_BLOCK = 1 << 26;
 
 export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | SWITCH_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
 
 /** @type {unique symbol} */
-export const UNINITIALIZED = Symbol('uninitialized');
+export const UNINITIALIZED = Symbol();
 /** @type {unique symbol} */
 export const TRACKED_ARRAY = Symbol();
 /** @type {unique symbol} */
@@ -52,13 +58,13 @@ export const NAMESPACE_URI = {
 	mathml: 'http://www.w3.org/1998/Math/MathML',
 };
 /** @type {unique symbol} */
-export const TRACKED_UPDATED = Symbol('TRACKED_UPDATED');
+export const TRACKED_UPDATED = Symbol();
 /** @type {unique symbol} */
-export const SUSPENSE_PENDING = Symbol('suspense_pending');
+export const SUSPENSE_PENDING = Symbol();
 /** @type {unique symbol} */
-export const SUSPENSE_REJECTED = Symbol('suspense_rejected');
+export const SUSPENSE_REJECTED = Symbol();
 /** @type {unique symbol} */
-export const ASYNC_DERIVED_READ_THROWN = Symbol('async_derived_read_thrown');
+export const ASYNC_DERIVED_READ_THROWN = Symbol();
 
 /** The hoisted render function a module-level component carries (see `render_component`). */
-export const RENDER_ENTRY = Symbol('render');
+export const RENDER_ENTRY = Symbol();

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

@@ -1,4 +1,5 @@
 /** @import { Component, ContextEntry } from '#client' */
+import { context_orphan } from './errors.js';
 
 import { active_component } from './runtime.js';
 
@@ -18,7 +19,7 @@ export class Context {
 		const component = active_component;
 
 		if (component === null) {
-			throw new Error('No active component found, cannot get context');
+			context_orphan(false);
 		}
 
 		// A component inherits its parent's chain of set entries when it is
@@ -45,7 +46,7 @@ export class Context {
 		const component = active_component;
 
 		if (component === null) {
-			throw new Error('No active component found, cannot set context');
+			context_orphan(true);
 		}
 
 		component.c = { k: this, v: value, n: component.c };

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

@@ -24,49 +24,34 @@ function remove() {
 }
 
 /**
- * @param {function} callback
+ * Calls back once every stylesheet link has loaded (or failed).
+ * @param {() => void} callback
  * @returns {void}
  */
 function remove_when_css_loaded(callback) {
-	/** @type {HTMLLinkElement[]} */
-	const links = Array.from(
-		/** @type {NodeListOf<HTMLLinkElement>} */ (
-			document.querySelectorAll('link[rel="stylesheet"]')
-		),
+	var links = /** @type {NodeListOf<HTMLLinkElement>} */ (
+		document.querySelectorAll('link[rel="stylesheet"]')
 	);
-	let remaining = links.length;
+	var remaining = links.length;
 
 	if (remaining === 0) {
 		callback();
 		return;
 	}
 
-	const done = () => {
-		remaining--;
-		if (remaining === 0) {
-			// clean up all listeners
-			links.forEach((link) => {
-				link.removeEventListener('load', onLoad);
-				link.removeEventListener('error', onError);
-			});
+	var done = () => {
+		if (--remaining === 0) {
 			callback();
 		}
 	};
 
-	function onLoad() {
-		done();
-	}
-	function onError() {
-		done();
-	}
-
-	links.forEach((link) => {
+	for (var link of links) {
 		if (link.sheet) {
 			// already loaded (possibly cached)
 			done();
 		} else {
-			link.addEventListener('load', onLoad);
-			link.addEventListener('error', onError);
+			link.addEventListener('load', done, { once: true });
+			link.addEventListener('error', done, { once: true });
 		}
-	});
+	}
 }