ripple 0.4.3 → 0.4.5

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

@@ -18,6 +18,8 @@ export {
 	set_value,
 	set_checked,
 	set_selected,
+	set_attribute_value,
+	set_property_value,
 } from './render.js';
 
 export {
@@ -40,7 +42,7 @@ export {
 	RENDER_ENTRY as $r,
 } from './constants.js';
 export { event, render_event, delegate, listen } from './events.js';
-export { set_style, set_attribute, render_spread } from './attributes.js';
+export { set_style, set_attribute, render_spread, spread } from './attributes.js';
 export { portal } from './portal.js';
 
 export {
@@ -73,7 +75,7 @@ export {
 	derived,
 	tick,
 	with_block,
-	with_ns,
+	set_ns,
 	handle_error,
 	queue_post_block_flush_callback,
 	schedule_update,
@@ -81,7 +83,7 @@ export {
 
 export { track_async } from './track-async.js';
 
-export { composite } from './composite.js';
+export { composite, dynamic, dynamic_init } from './composite.js';
 
 export { render_component } from './component.js';
 
@@ -89,15 +91,15 @@ export { for_block as for, for_block_keyed as for_keyed, item } from './for.js';
 
 export { selector, selector_match } from './selector.js';
 
-export { if_block as if } from './if.js';
+export { if_block as if, if_static, if_update } from './if.js';
 
 export { try_block as try, get_pending_boundary } from './try.js';
 
 export { if_block as switch } from './if.js';
 
-export { template, append, text } from './template.js';
+export { template, template_el, append, text } from './template.js';
 
-export { template_ns } from './template-ns.js';
+export { template_ns, with_ns, render_component_ns } from './template-ns.js';
 
 export {
 	ripple_array,

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

@@ -32,9 +32,12 @@ export var is_firefox;
 export function init_operations() {
 	var node_prototype = Node.prototype;
 	var element_prototype = Element.prototype;
-	var event_target_prototype = Event.prototype;
 
-	is_firefox = /Firefox/.test(navigator.userAgent);
+	// Firefox prefers `importNode` for template content (see `template.js`).
+	// Its Firefox-only `window` property is the test: the first read of
+	// `navigator` creates its wrapper, about 0.1 ms on a fresh page, paid by
+	// the first mount.
+	is_firefox = 'mozInnerScreenX' in window;
 	document = window.document;
 
 	first_child_getter = /** @type {(() => Node | null)} */ (
@@ -47,9 +50,11 @@ export function init_operations() {
 		get_descriptor(node_prototype, 'lastChild')?.get
 	);
 
-	// the following assignments improve perf of lookups on DOM nodes
+	// Declared on the prototype so a delegated handler lookup on an element
+	// stops at Element instead of walking to Object. `Event.prototype.__root`
+	// is declared with the first delegated listener (`events.js`): touching
+	// `Event.prototype` costs about 0.05 ms on a fresh page.
 	element_prototype.__click = undefined;
-	event_target_prototype.__root = undefined;
 }
 
 /**

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

@@ -165,3 +165,40 @@ export function set_selected(element, selected) {
 		element.removeAttribute('selected');
 	}
 }
+
+/**
+ * Writes an attribute the compiler proved is not a property of its element
+ * (`dom-setters.js` in the compiler), so no setter is looked for: `null` and
+ * `undefined` remove it.
+ * @param {Element} element
+ * @param {string} attribute
+ * @param {any} value
+ * @returns {void}
+ */
+export function set_attribute_value(element, attribute, value) {
+	if (value == null) {
+		element.removeAttribute(attribute);
+	} else {
+		element.setAttribute(attribute, value);
+	}
+}
+
+/**
+ * Writes a name the compiler proved is a settable property of its element:
+ * a string sets the attribute, any other value the property, and `null` or
+ * `undefined` remove the attribute, as `set_attribute` decides at runtime
+ * after discovering the element's setters.
+ * @param {Element} element
+ * @param {string} attribute
+ * @param {any} value
+ * @returns {void}
+ */
+export function set_property_value(element, attribute, value) {
+	if (value == null) {
+		element.removeAttribute(attribute);
+	} else if (typeof value !== 'string') {
+		/** @type {any} */ (element)[attribute] = value;
+	} else {
+		element.setAttribute(attribute, value);
+	}
+}

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

@@ -4,7 +4,7 @@
 /** @typedef {DerivedValue} Derived */
 
 import { DEV } from 'esm-env';
-import { destroy_block, destroy_non_branch_children, effect } from './blocks.js';
+import { block, destroy_block, destroy_non_branch_children } from './blocks.js';
 import {
 	ASYNC_DERIVED_READ_THROWN,
 	BLOCK_HAS_RUN,
@@ -27,10 +27,13 @@ import {
 	SCHEDULED,
 	SELECTOR,
 	IF_BLOCK,
+	COMPOSITE_BLOCK,
 	ITEM_BLOCK,
 	RELEASED,
 	RENDER_ENTRY,
 	CREATES_DERIVEDS,
+	NAMESPACE_BLOCK,
+	SVG_BLOCK,
 } from './constants.js';
 import { is_ripple_object } from './utils.js';
 import { scope_orphan, set_in_derived, track_orphan, update_depth_exceeded } from './errors.js';
@@ -367,9 +370,10 @@ function handle_run_error(error, block) {
  * @returns {Derived[] | null}
  */
 function prepare_rerun(block) {
-	// A list, an if, and a list item re-run only their own logic; their child
-	// blocks (items, the branch's blocks, an item body's nested blocks) stay.
-	if ((block.f & (FOR_BLOCK | IF_BLOCK | ITEM_BLOCK)) === 0) {
+	// A list, an if, a composite and a list item re-run only their own logic;
+	// their child blocks (items, the branch's blocks, a dynamic element's
+	// children, an item body's nested blocks) stay.
+	if ((block.f & (FOR_BLOCK | IF_BLOCK | ITEM_BLOCK | COMPOSITE_BLOCK)) === 0) {
 		destroy_non_branch_children(block);
 	}
 	run_teardown(block);
@@ -393,17 +397,18 @@ function register_teardown(block, teardown) {
 
 /**
  * Runs the body of a branch block that was just created, in place of a first
- * `run_block`: a branch renders untracked and never re-runs, so the only
- * bookkeeping its first run needs is the globals the body reads and the
- * dependencies a nested `item` records on it. Errors are handled as
- * `run_block` handles them.
+ * `run_block`: a branch renders untracked, so the only bookkeeping its first
+ * run needs is the globals the body reads and the dependencies a nested
+ * `item` records on it (a list item re-runs through `run_block`, see
+ * `run_item`). Errors are handled as `run_block` handles them.
  * @param {Block} block
  * @param {(anchor: any, value: any, index?: any, key?: any) => void} fn
  * @param {any} anchor
- * @param {any} value
- * @param {any} [key] a keyed list item's key (see `create_item`)
+ * @param {any} value a list item's value, or its tracked
+ * @param {any} [index] a list item's tracked index (see `create_item`)
+ * @param {any} [key] a keyed list item's key
  */
-export function run_branch(block, fn, anchor, value, key) {
+export function run_branch(block, fn, anchor, value, index, key) {
 	var previous_block = active_block;
 	var previous_reaction = active_reaction;
 	var previous_tracking = tracking;
@@ -416,7 +421,7 @@ export function run_branch(block, fn, anchor, value, key) {
 		active_component = block.co;
 		tracking = false;
 		active_dependency = null;
-		fn(anchor, value, undefined, key);
+		fn(anchor, value, index, key);
 		if (active_dependency !== null) {
 			block.d = active_dependency;
 		}
@@ -431,6 +436,43 @@ export function run_branch(block, fn, anchor, value, key) {
 	}
 }
 
+/**
+ * Runs `fn(block.s, arg)` as a rerun of `block` driven from outside it: an if
+ * whose condition the enclosing render function evaluates renders its branch
+ * this way. The function runs under the block, in the block's namespace, and
+ * the deriveds the block's previous run created are released afterwards
+ * unless still read, as `run_block` does for a rerun. An error propagates to
+ * the caller's block.
+ * @template S, A
+ * @param {Block} block
+ * @param {(state: S, arg: A) => void} fn
+ * @param {A} arg
+ */
+export function run_in_block(block, fn, arg) {
+	var previous_block = active_block;
+	var previous_reaction = active_reaction;
+	var previous_component = active_component;
+	var previous_namespace = active_namespace;
+	var previous_deriveds = (block.f & CREATES_DERIVEDS) !== 0 ? take_created_deriveds(block) : null;
+
+	try {
+		active_block = block;
+		active_reaction = block;
+		active_component = block.co;
+		var ns = block.f & NAMESPACE_BLOCK;
+		active_namespace = ns === 0 ? DEFAULT_NAMESPACE : ns === SVG_BLOCK ? 'svg' : 'mathml';
+		fn(/** @type {S} */ (block.s), arg);
+	} finally {
+		active_block = previous_block;
+		active_reaction = previous_reaction;
+		active_component = previous_component;
+		active_namespace = previous_namespace;
+		if (previous_deriveds !== null) {
+			keep_deriveds(block, release_deriveds(previous_deriveds));
+		}
+	}
+}
+
 /**
  * @param {Block} block
  * @param {boolean} [first_run] true when the block has no children, teardown,
@@ -442,6 +484,7 @@ export function run_block(block, first_run = false) {
 	var previous_tracking = tracking;
 	var previous_dependency = active_dependency;
 	var previous_component = active_component;
+	var previous_namespace = active_namespace;
 	/** @type {Derived[] | null} */
 	var previous_deriveds = null;
 
@@ -449,6 +492,10 @@ export function run_block(block, first_run = false) {
 		active_block = block;
 		active_reaction = block;
 		active_component = block.co;
+		// The namespace the block was created in (see `create_block`): a rerun
+		// from a flush is outside the `with_ns()` call that established it.
+		var ns = block.f & NAMESPACE_BLOCK;
+		active_namespace = ns === 0 ? DEFAULT_NAMESPACE : ns === SVG_BLOCK ? 'svg' : 'mathml';
 
 		if (!first_run) {
 			previous_deriveds = prepare_rerun(block);
@@ -478,6 +525,7 @@ export function run_block(block, first_run = false) {
 		tracking = previous_tracking;
 		active_dependency = previous_dependency;
 		active_component = previous_component;
+		active_namespace = previous_namespace;
 
 		// The previous run's deriveds, whether this run finished or threw, and
 		// after this run's dependencies replaced the old ones (so a derived the
@@ -748,7 +796,9 @@ export function track_read_only(value, block) {
  * @returns {Tracked | Derived}
  */
 export function track(v, b, hash, get, set) {
-	if (is_ripple_object(v)) {
+	// is_ripple_object(), inline: track() is on every component's cold path
+	// (kept identical by tests/utils/inline-drift.test.js).
+	if (typeof v === 'object' && v !== null && typeof v.f === 'number') {
 		return v;
 	}
 	if (b === null) {
@@ -1078,21 +1128,29 @@ function flush_queue(pending) {
 			blocks.sort(by_block_id);
 		}
 
-		var has_effects = false;
+		var effect_kinds = 0;
+		var has_render_blocks = false;
 
 		for (var i = 0; i < length; i++) {
 			var block = blocks[i];
 			var flags = block.f;
 			block.f = flags & ~SCHEDULED;
-			if ((flags & (PRE_EFFECT_BLOCK | EFFECT_BLOCK)) !== 0) {
-				has_effects = true;
+			var kind = flags & (PRE_EFFECT_BLOCK | EFFECT_BLOCK);
+			if (kind !== 0) {
+				effect_kinds |= kind;
+			} else {
+				has_render_blocks = true;
 			}
 		}
 
 		// New schedules land in the queue that replaced `pending`, so the array
-		// can be run in place. Effects need the three-phase ordering; a queue of
-		// only render blocks (the common flush) runs straight through.
-		if (has_effects) {
+		// can be run in place. A queue mixing kinds needs the three-phase
+		// ordering; one of a single kind (the common flush of render blocks,
+		// the first flush of a mounted app's effects) runs straight through.
+		if (
+			effect_kinds === (PRE_EFFECT_BLOCK | EFFECT_BLOCK) ||
+			(effect_kinds !== 0 && has_render_blocks)
+		) {
 			run_phases(blocks, length);
 		} else {
 			run_phase(blocks);
@@ -1805,7 +1863,9 @@ function create_deferred_effects(effects) {
 	for (var i = 0; i < length; i += 3) {
 		active_block = /** @type {Block} */ (effects[i + 1]);
 		active_reaction = /** @type {Block | Derived | null} */ (effects[i + 2]);
-		effect(/** @type {Function} */ (effects[i]));
+		// effect(), inline: one function less on every component's cold path
+		// (kept identical by tests/utils/inline-drift.test.js).
+		block(EFFECT_BLOCK, /** @type {Function} */ (effects[i]));
 	}
 	active_block = previous_block;
 	active_reaction = previous_reaction;
@@ -1827,6 +1887,20 @@ export function with_ns(namespace, fn) {
 	}
 }
 
+/**
+ * Sets the active namespace and returns the previous one, for setup code that
+ * switches namespace part-way through a render function (the children of a
+ * `foreignObject`), where a `with_ns()` thunk would hide its declarations.
+ * `run_block` restores the namespace after the render function either way.
+ * @param {keyof typeof NAMESPACE_URI} namespace
+ * @returns {keyof typeof NAMESPACE_URI}
+ */
+export function set_ns(namespace) {
+	var previous_namespace = active_namespace;
+	active_namespace = namespace;
+	return previous_namespace;
+}
+
 /**
  * @returns {symbol}
  */

package/src/runtime/internal/client/template-ns.js

@@ -1,4 +1,6 @@
+/** @import { NAMESPACE_URI } from './constants.js' */
 import { get_first_child } from './operations.js';
+import { render_component, set_ns, with_ns as run_with_ns } from './runtime.js';
 import { set_ns_parser, template } from './template.js';
 
 /**
@@ -26,12 +28,20 @@ function from_namespace(content, ns) {
 }
 
 /**
- * Makes namespaced template parsing available: called by every path that can
- * clone a template into the SVG or MathML namespace, so an app without one
- * never loads it.
+ * Runs `fn` with `namespace` active: content rendered inside it (children
+ * passed into an `<svg>`, a component rendered there, a dynamic element's
+ * children) creates its DOM in that namespace, and every block created
+ * inside records it (see `create_block`) so its reruns do too. Templates
+ * cloned in the namespace parse through `from_namespace`, so it is installed
+ * here: the compiler only emits this call for the SVG and MathML namespaces.
+ * @template T
+ * @param {keyof typeof NAMESPACE_URI} namespace
+ * @param {() => T} fn
+ * @returns {T}
  */
-export function install_ns_templates() {
+export function with_ns(namespace, fn) {
 	set_ns_parser(from_namespace);
+	return run_with_ns(namespace, fn);
 }
 
 /**
@@ -45,3 +55,34 @@ export function template_ns(content, flags, count) {
 	set_ns_parser(from_namespace);
 	return template(content, flags, count);
 }
+
+/**
+ * Enters `namespace` for the rest of a setup function, as `with_ns` does for
+ * a thunk: the compiler emits this where the content that follows is a
+ * dynamic element or a component called inside an `<svg>` or `<math>`
+ * template. Returns the namespace to restore with `set_ns`.
+ * @param {keyof typeof NAMESPACE_URI} namespace
+ * @returns {keyof typeof NAMESPACE_URI}
+ */
+export function push_ns(namespace) {
+	set_ns_parser(from_namespace);
+	return set_ns(namespace);
+}
+
+/**
+ * `render_component` for a component called inside an `<svg>` or `<math>`
+ * template: its content renders in that namespace.
+ * @param {keyof typeof NAMESPACE_URI} namespace
+ * @param {Function} fn
+ * @param {Node | import('#client').AppendIntoAnchor} anchor
+ * @param {Record<string, any>} props
+ * @returns {void}
+ */
+export function render_component_ns(namespace, fn, anchor, props) {
+	var previous = push_ns(namespace);
+	try {
+		render_component(fn, anchor, props);
+	} finally {
+		set_ns(previous);
+	}
+}

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

@@ -9,6 +9,7 @@ import {
 import { H, hydrate_node, hydrating } from './hydration.js';
 import { create_text, get_first_child, is_firefox } from './operations.js';
 import { active_block, active_namespace } from './runtime.js';
+import { DEFAULT_NAMESPACE, NAMESPACE_URI } from './constants.js';
 import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
@@ -142,6 +143,108 @@ export function template(content, flags = 0, count = 1) {
 			: clone_template(t);
 }
 
+/**
+ * The document that owns parsed template content: it has no browsing
+ * context, so an element created in it does not load its `src` (an image,
+ * a video) until a clone is adopted into the page, exactly like a node
+ * parsed from a `<template>`.
+ * @type {Document | undefined}
+ */
+var inert_document;
+
+/**
+ * A nested element of a DOM-built template: its tag, attributes and children,
+ * trailing absences left out.
+ * @typedef {[string, (string[] | null)?, (string | TemplateChildren)?]} TemplateElementSpec
+ */
+
+/**
+ * The children of a DOM-built template element in order: a nested element,
+ * a text string, or `null` for a placeholder comment.
+ * @typedef {Array<string | null | TemplateElementSpec>} TemplateChildren
+ */
+
+/**
+ * Builds one element of a DOM-built template, in the inert document and
+ * the active namespace, as a parsed template would create it.
+ * @param {Document} doc
+ * @param {keyof typeof NAMESPACE_URI} ns
+ * @param {string} tag
+ * @param {string[] | null | undefined} attributes
+ * @param {string | TemplateChildren | undefined} children
+ * @returns {Element}
+ */
+function build_template_element(doc, ns, tag, attributes, children) {
+	var node =
+		ns === DEFAULT_NAMESPACE ? doc.createElement(tag) : doc.createElementNS(NAMESPACE_URI[ns], tag);
+	if (attributes != null) {
+		for (var i = 0; i < attributes.length; i += 2) {
+			node.setAttribute(attributes[i], attributes[i + 1]);
+		}
+	}
+	if (children === undefined || typeof children === 'string') {
+		if (children !== undefined && children !== '') {
+			node.textContent = children;
+		}
+	} else {
+		for (var j = 0; j < children.length; j++) {
+			var child = children[j];
+			node.appendChild(
+				child === null
+					? doc.createComment('')
+					: typeof child === 'string'
+						? doc.createTextNode(child)
+						: build_template_element(doc, ns, child[0], child[1], child[2]),
+			);
+		}
+	}
+	return node;
+}
+
+/**
+ * A template of a few HTML elements with static attributes, built with DOM
+ * calls instead of parsed: a `<template>` parse has a fixed cost that dwarfs
+ * the elements themselves, and an app's first render pays it once per
+ * distinct template, plus the parser's own start-up on a fresh page. The
+ * compiler decides which templates qualify (`dom_built_template` in the
+ * client transform); every other shape still parses. The nodes are created
+ * in the active namespace, as a parsed template would be, and in the inert
+ * template document when one of them could load a resource (`inert`), also
+ * as parsed; any other master is built in the document itself, which skips
+ * creating the inert document on a fresh page.
+ * @param {string} tag
+ * @param {string[] | null} [attributes] - flat name/value pairs
+ * @param {string | TemplateChildren} [children] - one text child, or the
+ *   child nodes in order
+ * @param {number} [inert] - 1 when an element could load a resource from an
+ *   attribute the master carries
+ * @returns {() => Node}
+ */
+export function template_el(tag, attributes = null, children = '', inert = 0) {
+	/** @type {Element | undefined} */
+	var node;
+	/** @type {string | undefined} */
+	var node_ns;
+
+	return () => {
+		if (HYDRATION && hydrating) {
+			return /** @type {import('./hydrate.js').HydrationRuntime} */ (H).t(false, 1);
+		}
+		var ns = active_namespace;
+		if (node === undefined || node_ns !== ns) {
+			var doc =
+				inert === 0
+					? document
+					: (inert_document ??= document.createElement('template').content.ownerDocument);
+			node = build_template_element(doc, ns, tag, attributes, children);
+			node_ns = ns;
+		}
+		var clone = is_firefox ? document.importNode(node, true) : node.cloneNode(true);
+		assign_nodes(clone, clone);
+		return clone;
+	};
+}
+
 /**
  * Appends a DOM node before the anchor node.
  * @param {ChildNode | AppendIntoAnchor} anchor - The anchor node.

package/tests/client/composite/composite.dynamic-components.test.tsrx

@@ -76,6 +76,46 @@ describe('composite > dynamic components', () => {
 		expect(container.textContent).toBe('hidden');
 	});
 
+	it(
+		'remounts a childless dynamic component with fresh props when its tag expression re-evaluates',
+		() => {
+			let bump: () => void = () => {};
+			let poke: () => void = () => {};
+
+			function Child(props: { n: number }) @{
+				<span>{props.n}</span>
+			}
+
+			function App() @{
+				const n = track(0);
+				const flag = track(true);
+				bump = () => {
+					n.value++;
+				};
+				poke = () => {
+					flag.value = !flag.value;
+				};
+				// The tag expression reads `flag`, but always resolves to `Child`.
+				<{flag.value || !flag.value ? Child : null} n={n.value} />
+			}
+
+			render(App);
+			flushSync();
+			const span = () => container.querySelector('span');
+			expect(span()?.textContent).toBe('0');
+
+			// A prop is a value: the instance keeps the number it got.
+			bump();
+			flushSync();
+			expect(span()?.textContent).toBe('0');
+
+			// The tag expression re-evaluated: a new instance reads the literal again.
+			poke();
+			flushSync();
+			expect(span()?.textContent).toBe('1');
+		},
+	);
+
 	it('handles dynamic component switching', () => {
 		function Child1() @{
 			<div>{'I am child 1'}</div>

package/tests/client/css/scoped-styles.test.tsrx

@@ -645,8 +645,10 @@ export function Precedence() @{
 			// block is written after the nested scope.
 			expect(black).toBeLessThan(italic);
 			expect(italic).toBeLessThan(blue);
+			// The outer div shares a fragment template with the placeholder that
+			// follows it; the inner div is a flat element template of its own.
 			expect(code).toContain(`class="outer ${outer} ${theme_hash}"`);
-			expect(code).toContain(`class="inner ${outer} ${inner} ${theme_hash}"`);
+			expect(code).toContain(`'class', 'inner ${outer} ${inner} ${theme_hash}'`);
 		},
 	);
 });