ripple 0.4.3 → 0.4.4

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

@@ -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
@@ -1827,6 +1875,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,61 @@ 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 template that is one HTML element with static attributes and at most one
+ * text child, built with DOM calls instead of parsed: a `<template>` parse
+ * has a fixed cost that dwarfs the element itself, and an app's first render
+ * pays it once per distinct template. The compiler decides which templates
+ * qualify (`template_el` in the client transform); every other shape still
+ * parses. The element is created in the inert template document and in the
+ * active namespace, as a parsed template would be.
+ * @param {string} tag
+ * @param {string[] | null} [attributes] - flat name/value pairs
+ * @param {string} [text]
+ * @returns {() => Node}
+ */
+export function template_el(tag, attributes = null, text = '') {
+	/** @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_document ??= document.createElement('template').content.ownerDocument);
+			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 (text !== '') {
+				node.textContent = text;
+			}
+			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}'`);
 		},
 	);
 });

package/tests/client/svg.test.tsrx

@@ -1,7 +1,279 @@
-import { track } from 'ripple';
+import { track, flushSync } from 'ripple';
 import type { Component, PropsWithChildren, PropsWithExtras } from 'ripple';
 
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const HTML_NS = 'http://www.w3.org/1999/xhtml';
+
+// The namespace is only known at runtime here: the component's children are
+// compiled without it and rendered into an `<svg>` the component owns, so
+// every block must keep the namespace it was created in when it reruns.
+describe('SVG namespace in runtime-only contexts', () => {
+	function SVG({ children }: PropsWithChildren<{}>) @{
+		<svg>{children}</svg>
+	}
+
+	it('parses a nested template in the SVG namespace', () => {
+		function App() @{
+			<SVG>
+				<g class="group">
+					<circle r="1" />
+				</g>
+			</SVG>
+		}
+
+		render(App);
+		expect(container.querySelector('.group').namespaceURI).toBe(SVG_NS);
+		expect(container.querySelector('circle').namespaceURI).toBe(SVG_NS);
+	});
+
+	it('keeps the namespace when an @if in component children toggles', () => {
+		let setFlag: ((value: boolean) => void) | undefined;
+
+		function App() @{
+			const flag = track(true);
+			setFlag = (value) => {
+				flag.value = value;
+			};
+			<SVG>
+				@if (flag.value) {
+					<polygon class="a" points="0,0 1,1" />
+				} @else {
+					<g class="b">
+						<rect width="1" height="1" />
+					</g>
+				}
+			</SVG>
+		}
+
+		render(App);
+		expect(container.querySelector('.a').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setFlag?.(false));
+		expect(container.querySelector('.b').namespaceURI).toBe(SVG_NS);
+		expect(container.querySelector('rect').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setFlag?.(true));
+		expect(container.querySelector('.a').namespaceURI).toBe(SVG_NS);
+	});
+
+	it('keeps the namespace when an @if in a leaf component toggles', () => {
+		let setFlag: ((value: boolean) => void) | undefined;
+
+		function Shape() @{
+			const flag = track(true);
+			setFlag = (value) => {
+				flag.value = value;
+			};
+			@if (flag.value) {
+				<polygon class="a" points="0,0 1,1" />
+			} @else {
+				<rect class="b" width="1" height="1" />
+			}
+		}
+
+		function App() @{
+			<svg>
+				<Shape />
+			</svg>
+		}
+
+		render(App);
+		expect(container.querySelector('.a').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setFlag?.(false));
+		expect(container.querySelector('.b').namespaceURI).toBe(SVG_NS);
+	});
+
+	it('keeps the namespace when a dynamic tag in component children changes', () => {
+		let setTag: ((value: string) => void) | undefined;
+
+		function App() @{
+			const tag = track('polygon');
+			setTag = (value) => {
+				tag.value = value;
+			};
+			<SVG>
+				<{tag.value} class="shape" />
+			</SVG>
+		}
+
+		render(App);
+		expect(container.querySelector('.shape').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setTag?.('rect'));
+		const shape = container.querySelector('.shape');
+		expect(shape.localName).toBe('rect');
+		expect(shape.namespaceURI).toBe(SVG_NS);
+	});
+
+	it('keeps the namespace for items added to an @for in component children', () => {
+		let setItems: ((value: string[]) => void) | undefined;
+
+		function App() @{
+			const items = track(['a']);
+			setItems = (value) => {
+				items.value = value;
+			};
+			<SVG>
+				@for (const id of items.value) {
+					<circle data-id={id} r="1" />
+				}
+			</SVG>
+		}
+
+		render(App);
+		expect(container.querySelector('[data-id=a]').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setItems?.(['a', 'b']));
+		expect(container.querySelector('[data-id=b]').namespaceURI).toBe(SVG_NS);
+	});
+
+	it('renders HTML inside a foreignObject in component children', () => {
+		let setTag: ((value: string) => void) | undefined;
+
+		function App() @{
+			const tag = track('div');
+			setTag = (value) => {
+				tag.value = value;
+			};
+			<SVG>
+				<foreignObject>
+					@if (tag.value !== 'none') {
+						<div class="static-label">
+							<span>hi</span>
+						</div>
+					}
+					<{tag.value} class="html-label">Label</{tag.value}>
+				</foreignObject>
+				<circle class="after" r="1" />
+			</SVG>
+		}
+
+		render(App);
+		expect(container.querySelector('.static-label').namespaceURI).toBe(HTML_NS);
+		expect(container.querySelector('span').namespaceURI).toBe(HTML_NS);
+		expect(container.querySelector('.html-label').namespaceURI).toBe(HTML_NS);
+		expect(container.querySelector('.after').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setTag?.('span'));
+		const label = container.querySelector('.html-label');
+		expect(label.localName).toBe('span');
+		expect(label.namespaceURI).toBe(HTML_NS);
+	});
+
+	it('sets a dynamic class on SVG elements in component children', () => {
+		let setName: ((value: string) => void) | undefined;
+
+		function App() @{
+			const name = track('one');
+			setName = (value) => {
+				name.value = value;
+			};
+			<SVG>
+				<circle class={name.value} r="1" />
+				<a class={name.value} href="#link">
+					<text>link</text>
+				</a>
+			</SVG>
+		}
+
+		render(App);
+		expect(container.querySelector('circle').getAttribute('class')).toBe('one');
+		expect(container.querySelector('a').getAttribute('class')).toBe('one');
+		flushSync(() => setName?.('two'));
+		expect(container.querySelector('circle').getAttribute('class')).toBe('two');
+		expect(container.querySelector('a').getAttribute('class')).toBe('two');
+	});
+});
+
+describe('dynamic element namespace changes', () => {
+	it('switches a root between HTML and SVG with its children', () => {
+		let setTag: ((value: string) => void) | undefined;
+
+		function App() @{
+			const tag = track('div');
+			setTag = (value) => {
+				tag.value = value;
+			};
+			<{tag.value} class="root">
+				<g class="inner">
+					<title>t</title>
+				</g>
+			</{tag.value}>
+		}
+
+		render(App);
+		expect(container.querySelector('.root').namespaceURI).toBe(HTML_NS);
+		expect(container.querySelector('.inner').namespaceURI).toBe(HTML_NS);
+		flushSync(() => setTag?.('svg'));
+		expect(container.querySelector('.root').namespaceURI).toBe(SVG_NS);
+		expect(container.querySelector('.inner').namespaceURI).toBe(SVG_NS);
+		expect(container.querySelector('title').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setTag?.('div'));
+		expect(container.querySelector('.root').namespaceURI).toBe(HTML_NS);
+		expect(container.querySelector('.inner').namespaceURI).toBe(HTML_NS);
+	});
+
+	it('renders HTML children once the tag becomes foreignObject', () => {
+		let setTag: ((value: string) => void) | undefined;
+
+		function App() @{
+			const tag = track('g');
+			setTag = (value) => {
+				tag.value = value;
+			};
+			<svg>
+				<{tag.value} class="host">
+					<a class="content">hi</a>
+				</{tag.value}>
+			</svg>
+		}
+
+		render(App);
+		expect(container.querySelector('.host').namespaceURI).toBe(SVG_NS);
+		expect(container.querySelector('.content').namespaceURI).toBe(SVG_NS);
+		flushSync(() => setTag?.('foreignObject'));
+		const host = container.querySelector('.host');
+		expect(host.localName).toBe('foreignObject');
+		expect(host.namespaceURI).toBe(SVG_NS);
+		expect(container.querySelector('.content').namespaceURI).toBe(HTML_NS);
+		flushSync(() => setTag?.('g'));
+		expect(container.querySelector('.content').namespaceURI).toBe(SVG_NS);
+	});
+});
+
 describe('SVG namespace handling', () => {
+	it('preserves SVG and foreignObject namespaces when dynamic tags change', () => {
+		let setTags: ((svgTag: string, htmlTag: string) => void) | undefined;
+
+		function App() @{
+			const shape = track('circle');
+			const html = track('div');
+			setTags = (svgTag, htmlTag) => {
+				shape.value = svgTag;
+				html.value = htmlTag;
+			};
+			<svg>
+				<{shape.value} class="shape">
+					<title>Dynamic shape</title>
+				</{shape.value}>
+				<foreignObject>
+					<{html.value} class="html-label">Label</{html.value}>
+				</foreignObject>
+			</svg>
+		}
+
+		render(App);
+		for (const [svgTag, htmlTag] of [['circle', 'div'], ['path', 'span'], ['line', 'div']]) {
+			flushSync(() => {
+				setTags?.(svgTag, htmlTag);
+			});
+			const element = container.querySelector('.shape');
+			expect(element.localName).toBe(svgTag);
+			expect(element.namespaceURI).toBe('http://www.w3.org/2000/svg');
+			expect(element.querySelector('title').namespaceURI).toBe('http://www.w3.org/2000/svg');
+			expect(element.textContent).toBe('Dynamic shape');
+			const label = container.querySelector('.html-label');
+			expect(label.localName).toBe(htmlTag);
+			expect(label.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+			expect(label.textContent).toBe('Label');
+		}
+	});
+
 	it('should render static SVG elements with correct namespace', () => {
 		function App() @{
 			<svg