ripple 0.4.3 → 0.4.4

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # ripple
 
+## 0.4.4
+
+### Patch Changes
+
+- [#1496](https://github.com/Ripple-TS/ripple/pull/1496)
+  [`0473e93`](https://github.com/Ripple-TS/ripple/commit/0473e93006e53cd15fcf6d851443d427ccf13e8b)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Update `@tsrx/core` to ^0.2.3
+  and use its SVG and MathML tag-name predicates for dynamic class handling,
+  removing the compiler's duplicate tag-name list.
+
+- [#1490](https://github.com/Ripple-TS/ripple/pull/1490)
+  [`ff3a26a`](https://github.com/Ripple-TS/ripple/commit/ff3a26acef0c9584cf41d32bc8cbcc39d863d74c)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Blocks keep the namespace
+  they were created in when they rerun. A dynamic element whose tag changes, an
+  `@if` that toggles, or an `@for` that grows inside an SVG that is only known at
+  runtime (children rendered into a component's `<svg>`, a leaf component rendered
+  there) now creates its elements in the SVG namespace instead of HTML, and a
+  nested template cloned in that context no longer throws before a namespaced
+  template has been parsed. A dynamic element whose tag becomes `foreignObject`
+  renders its children as HTML.
+
+- [#1488](https://github.com/Ripple-TS/ripple/pull/1488)
+  [`b3bf787`](https://github.com/Ripple-TS/ripple/commit/b3bf78756d9235412a2af264e42897652e8f911e)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Build a template that is one
+  element with static attributes and at most a text child with DOM calls instead
+  of parsing it. Parsing a `<template>` has a fixed cost that dwarfs such an
+  element, and an app's first render pays it once per distinct template; a chain
+  of 100 single-element components mounts about 35% faster.
+
+- [#1495](https://github.com/Ripple-TS/ripple/pull/1495)
+  [`1b8381f`](https://github.com/Ripple-TS/ripple/commit/1b8381f31f98f84049764ca56676fc320721e844)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Faster element spreads,
+  dynamic elements and list items. An element spread is applied from the element's
+  own render function instead of a render block of its own, and a spread object
+  identical to the one applied last is skipped without a diff (a spread of a
+  tracked object or of tracked values is always diffed). A dynamic element
+  (`<{tag}>`) is one block that owns its element and applies its attributes
+  itself; a tag that does not change keeps its element and diffs the attributes,
+  so a swap between variants with the same tag no longer recreates the element. An
+  `@if` whose condition reads tracked state is evaluated by the render function of
+  the enclosing content (a list item's, an element's), so the if keeps a block for
+  its branch but not one that runs the condition. A dynamic element or component
+  called inside an `<svg>` or `<math>` template receives the namespace as an
+  argument instead of a `with_ns` closure. A dynamic element without children is
+  driven by the render function of the content it sits in, with no block or
+  closures of its own (`_$_.dynamic`); a build that can hydrate lets a composite
+  block claim the server element while hydrating. With `textTypes`, an attribute
+  value TypeScript proves to be a string is set with a direct `setAttribute` call,
+  and a proven `class` takes the string-only path. On the SVG dashboard benchmark,
+  mounting is about 20% faster and swapping 150 dynamic icons 40% faster.
+- Updated dependencies
+  [[`0473e93`](https://github.com/Ripple-TS/ripple/commit/0473e93006e53cd15fcf6d851443d427ccf13e8b),
+  [`b3bf787`](https://github.com/Ripple-TS/ripple/commit/b3bf78756d9235412a2af264e42897652e8f911e),
+  [`1b8381f`](https://github.com/Ripple-TS/ripple/commit/1b8381f31f98f84049764ca56676fc320721e844),
+  [`ff3a26a`](https://github.com/Ripple-TS/ripple/commit/ff3a26acef0c9584cf41d32bc8cbcc39d863d74c)]:
+  - @tsrx/ripple@0.2.3
+
 ## 0.4.3
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "type": "module",
   "sideEffects": false,
   "module": "src/runtime/index-client.js",
@@ -86,8 +86,8 @@
     "csstype": "^3.2.3",
     "devalue": "^5.9.2",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "^0.2.0",
-    "@tsrx/ripple": "0.2.2"
+    "@tsrx/core": "^0.2.3",
+    "@tsrx/ripple": "0.2.3"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/constants.js

@@ -38,3 +38,9 @@ export const ELEMENT_NODE = 1;
 export const TEXT_NODE = 3;
 export const COMMENT_NODE = 8;
 export const DOCUMENT_FRAGMENT_NODE = 11;
+
+// `if_static` flags (see the runtime's if module): the if renders directly
+// before the component's `__anchor`, and the compiler proved its condition
+// reads tracked state.
+export const IF_ROOT_CONTROLLED = 1;
+export const IF_TRACKED = 1 << 1;

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

@@ -1,7 +1,7 @@
 /** @import { Block } from '#client' */
 
 import { block, branch, destroy_block, ref } from './blocks.js';
-import { DESTROYED, REF_PROP, RENDER_BLOCK } from './constants.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 {
@@ -120,10 +120,9 @@ function apply_styles(element, new_styles, prev) {
  * @param {Element} element
  * @param {string} key
  * @param {any} value
- * @param {Record<string, (() => void) | undefined>} remove_listeners
- * @param {Record<string | symbol, any>} prev
+ * @param {SpreadState} state
  */
-function set_attribute_helper(element, key, value, remove_listeners, prev) {
+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);
@@ -131,20 +130,21 @@ function set_attribute_helper(element, key, value, remove_listeners, prev) {
 		element.removeAttribute('innerhtml');
 		/** @type {HTMLElement} */ (element).innerHTML = value == null ? '' : String(value);
 	} else if (key === 'style') {
-		set_style(element, value, prev.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 (typeof key === 'string' && is_event_attribute(key)) {
+	} else if (is_event_attribute(key)) {
 		// Handle event handlers in spread props
-		if (remove_listeners[key]) {
-			remove_listeners[key]();
-			remove_listeners[key] = undefined;
+		var listeners = (state.l ??= {});
+		if (listeners[key]) {
+			listeners[key]();
+			listeners[key] = undefined;
 		}
 		if (value != null) {
 			const event_name = get_attribute_event_name(key, value);
-			remove_listeners[key] = event_listener(event_name, element, value);
+			listeners[key] = event_listener(event_name, element, value);
 		}
 	} else {
 		set_attribute(element, key, value);
@@ -152,146 +152,257 @@ function set_attribute_helper(element, key, value, remove_listeners, prev) {
 }
 
 /**
- * @param {Element} element
- * @param {() => Record<string | symbol, any>} fn
- * @returns {() => void}
+ * 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 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 = {};
+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;
+	}
+}
 
-	return () => {
-		var next = fn();
-		var current_symbols = /** @type {Record<symbol, any>} */ ({});
+/** What a nullish or primitive spread value applies. */
+var EMPTY = {};
 
-		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);
-			}
+/**
+ * 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);
 		}
+	}
 
-		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;
+	// 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);
+		}
+	}
 
-		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;
-			}
+	for (key in next) {
+		if (key === 'children') 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);
-			}
+		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;
 
-		for (const key in prev_ref_props) {
-			if (!(key in current_ref_props) && effects[key]) {
-				destroy_block(/** @type {Block} */ (effects[key]));
-				effects[key] = undefined;
-			}
+		// 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);
+	}
 
-		prev_ref_props = current_ref_props;
+	if (state.r !== null) {
+		release_ref_props(state, refs);
+	}
+	state.r = refs;
+	state.p = current;
+	state.n = next;
+	state.t = tracked;
+	return state;
+}
 
-		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;
-			}
+/**
+ * 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 (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);
-			}
-		}
+	for (var key in next) {
+		if (key === 'children') continue;
 
-		/** @type {typeof prev} */
-		const current = {};
-		for (const key of keys) {
-			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);
+	}
 
-			let value = next[key];
-			if (is_ref_prop(value)) {
-				continue;
-			}
-			if (is_ripple_object(value)) {
-				value = get(value);
-			}
-			current[key] = value;
+	state.r = refs;
+	state.p = current;
+	state.n = next;
+	state.t = tracked;
+	return state;
+}
 
-			if (key in prev && prev[key] === value && key !== '#class') {
-				continue;
-			}
+/**
+ * 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;
+}
 
-			set_attribute_helper(element, key, value, remove_listeners, prev);
+/**
+ * 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;
 		}
-		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[]}
+ * 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
  */
-function spread_keys(next) {
-	/** @type {string[]} */
-	var keys = [];
-	for (var key in next) keys.push(key);
-	return keys;
+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 `apply_element_spread` can compare the
- * previous and current ref values.
+ * and recreate the ref block before `spread` can compare the previous and
+ * current ref values.
  *
  * @param {Element} element
  * @param {any} ref_fn
@@ -302,12 +413,27 @@ function create_spread_ref_effect(element, ref_fn) {
 		ref(element, () => ref_fn);
 	});
 }
+
 /**
- * A render block that applies a spread of attributes to an element.
- * @param {any} element
- * @param {any} 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, apply_element_spread(element, fn));
+	return block(RENDER_BLOCK | flags, run_spread, { e: element, f: fn, s: undefined });
 }

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

@@ -15,6 +15,10 @@ 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';
@@ -31,6 +35,7 @@ import {
 	run_teardown,
 	schedule_update,
 	untrack,
+	active_namespace,
 } from './runtime.js';
 import { is_ripple_object } from './utils.js';
 import { effect_orphan } from './errors.js';
@@ -263,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,
@@ -449,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;
@@ -493,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;
@@ -517,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.
@@ -551,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;