ripple 0.4.3 → 0.4.4

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

@@ -1,131 +1,323 @@
-/** @import { Block } from '#client' */
+/** @import { AppendIntoAnchor, Block } from '#client' */
+/** @import { SpreadState } from './attributes.js' */
 import { component_invalid } from './errors.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 { branch, destroy_block, destroy_block_children, render } from './blocks.js';
+import { release_spread, spread } from './attributes.js';
+import { COMPOSITE_BLOCK, DEFAULT_NAMESPACE, NAMESPACE_URI, UNINITIALIZED } 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 { active_block, active_namespace, get, set_ns, set_tracking, untrack } from './runtime.js';
 import { top_element_to_ns } from './utils.js';
-import { install_ns_templates } from './template-ns.js';
+import { push_ns, with_ns } from './template-ns.js';
+import { append } from './template.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
+ * The state of a composite block. A tag target is the block's own DOM range
+ * (`start`/`end`, the element) and its attributes the block's own spread; a
+ * component target renders in a branch, a child of the block.
+ * @typedef {{
+ *   start: Element | null;
+ *   end: Element | null;
+ *   g: () => CompositeTarget;
+ *   a: Node | AppendIntoAnchor;
+ *   p: () => Record<string, any>;
+ *   c: CompositeTarget | typeof UNINITIALIZED;
+ *   s: SpreadState | undefined;
+ * }} CompositeState
+ */
+
+/**
+ * @param {CompositeState} state
+ */
+function run_composite(state) {
+	var block = /** @type {Block} */ (active_block);
+	// @ts-ignore — get() handles non-tracked values via is_ripple_object() check
+	var component = get(state.g());
+	var current = state.c;
+	var old = state.start;
+
+	if (component === current && typeof component === 'string') {
+		// The same tag keeps its element: only the attributes follow the props.
+		state.s = spread(/** @type {Element} */ (old), state.p(), state.s);
+		return;
+	}
+
+	if (current !== UNINITIALIZED) {
+		// The previous target's blocks: the children rendered into the element,
+		// whose DOM goes with it, or a component's branch, which removes its own.
+		destroy_block_children(block, old === null);
+		state.s = undefined;
+	}
+	state.c = component;
+
+	if (typeof component === 'function') {
+		if (old !== null) {
+			old.remove();
+			state.start = state.end = null;
+		}
+		var anchor = state.a;
+		var get_props = state.p;
+		// Handle as regular component
+		branch(() => {
+			var props = untrack(get_props);
+			render_component(component, /** @type {Node} */ (anchor), props);
+		});
+		return;
+	}
+	if (is_tsrx_element(component)) {
+		component_invalid(true);
+	}
+	if (component == null) {
+		if (old !== null) {
+			old.remove();
+			state.start = state.end = null;
+		}
+		return;
+	}
+
+	// A tag: the element is created in the namespace the tag resolves to.
+	var ns = top_element_to_ns(component, active_namespace);
+	/** @type {Element} */
+	var element;
+	if (HYDRATION && hydrating) {
+		// Claim the SSR-rendered element instead of creating a new one.
+		element = /** @type {Element} */ (hydrate_node);
+	} else {
+		element =
+			ns !== DEFAULT_NAMESPACE
+				? document.createElementNS(
+						NAMESPACE_URI[ns],
+						/** @type {keyof HTMLElementTagNameMap} */ (component),
+					)
+				: document.createElement(/** @type {keyof HTMLElementTagNameMap} */ (component));
+		if (old !== null) {
+			// A tag change takes the previous element's place.
+			old.before(element);
+			old.remove();
+		} else {
+			append(/** @type {ChildNode | AppendIntoAnchor} */ (state.a), element);
+		}
+	}
+	state.start = state.end = element;
+
+	// The spread reads the props once, tracked: a props change re-runs the
+	// block, which diffs the attributes above. The children come from that
+	// same read.
+	var spread_state = (state.s = spread(element, state.p(), undefined));
+	var props = /** @type {Record<string, any>} */ (spread_state.n);
+	if (is_tsrx_element(props.children)) {
+		/** @type {Node} */
+		var child_anchor;
+		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));
+		} else {
+			child_anchor = document.createComment('');
+			element.appendChild(child_anchor);
+		}
+
+		// The children render untracked, as a branch renders its content. The
+		// children of a `foreignObject` are HTML whatever namespace the element
+		// itself takes.
+		var child_ns = component === 'foreignObject' ? DEFAULT_NAMESPACE : ns;
+		set_tracking(false);
+		if (child_ns !== active_namespace) {
+			with_ns(child_ns, () => props.children.render(child_anchor, block, props.children.p));
+		} else {
+			props.children.render(child_anchor, block, props.children.p);
+		}
+		set_tracking(true);
+
+		if (HYDRATION && hydrating) {
+			// Reset the cursor to the claimed element so sibling traversal
+			// continues after it.
+			set_hydrate_node(element);
+		}
+	}
+}
+
+/**
+ * Renders a dynamic element or component (`<{expr}>`): the block re-runs
+ * when the expression or the props change. A tag that stays the same keeps
+ * its element and diffs the attributes; a new tag or component replaces the
+ * content in place.
  * @param {() => CompositeTarget} get_component
- * @param {Node} node
+ * @param {Node | AppendIntoAnchor} node
  * @param {() => Record<string, any>} get_props the props literal of the call
  *   site: read once per rendered component (props are plain values), and
  *   re-read as element attributes when the target is a tag
+ * @param {keyof typeof NAMESPACE_URI} [namespace] the namespace of the
+ *   template the call site sits in, when it is not HTML
  * @returns {void}
  */
-export function composite(get_component, node, get_props) {
+export function composite(get_component, node, get_props, namespace) {
 	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.
-		if (node.nodeType === 8 && /** @type {Comment} */ (node).data === '') {
+		if (/** @type {Node} */ (node).nodeType === 8 && /** @type {Comment} */ (node).data === '') {
 			hydrate_next();
 		}
 	}
 
-	var anchor = node;
-	/** @type {Block | null} */
-	var b = null;
+	/** @type {CompositeState} */
+	var state = {
+		start: null,
+		end: null,
+		g: get_component,
+		a: node,
+		p: get_props,
+		c: UNINITIALIZED,
+		s: undefined,
+	};
+	if (namespace === undefined) {
+		render(run_composite, state, COMPOSITE_BLOCK);
+		return;
+	}
+	var previous = push_ns(namespace);
+	try {
+		render(run_composite, state, COMPOSITE_BLOCK);
+	} finally {
+		set_ns(previous);
+	}
+}
 
-	render(
-		() => {
-			// @ts-ignore — get() handles non-tracked values via is_ripple_object() check
-			var component = get(get_component());
+/**
+ * The state of a dynamic element the enclosing render function drives (see
+ * `dynamic`): the element rendered for a tag, or the branch rendered for a
+ * component, and the tag or component itself.
+ * @typedef {{
+ *   e: Element | null;
+ *   b: Block | null;
+ *   t: CompositeTarget | typeof UNINITIALIZED;
+ *   s: SpreadState | undefined;
+ *   g: (() => CompositeTarget) | null;
+ *   p: (() => Record<string, any>) | null;
+ * }} DynamicState
+ */
 
-			if (b !== null) {
-				destroy_block(b);
-				b = null;
+/**
+ * A dynamic element without children, applied from the render function of
+ * the content it sits in instead of a block of its own: `<{tag} {...attrs} />`
+ * compiles to `__prev.x = _$_.dynamic(__prev.x, anchor, tag, props)`, so the
+ * tag and the props are read by that render function, and a run whose tag is
+ * unchanged only diffs the attributes. The element sits in the enclosing
+ * template's range, which owns it. A component target is handed to a
+ * composite block of its own (in a branch the render function keeps), which
+ * reads the tag and the props through the thunks kept since creation and so
+ * remounts the component with fresh props whenever the tag expression
+ * re-evaluates, exactly as `<{expr}>` did before; from then on the slot is
+ * null and the calls are no-ops.
+ * @param {DynamicState | null | undefined} state null once a composite block
+ *   owns the content (a component target, or the hydration claim, see
+ *   `dynamic_init`)
+ * @param {Node | AppendIntoAnchor} anchor
+ * @param {CompositeTarget} tag
+ * @param {Record<string, any> | null | undefined} props
+ * @param {keyof typeof NAMESPACE_URI} [namespace] the namespace of the
+ *   template the call site sits in, when it is not HTML
+ * @returns {DynamicState | null}
+ */
+export function dynamic(state, anchor, tag, props, namespace) {
+	if (state === null) {
+		return null;
+	}
+	// @ts-ignore — get() handles non-tracked values via is_ripple_object() check
+	tag = get(tag);
+	/** @type {DynamicState} */
+	var s;
+	if (state === undefined) {
+		s = { e: null, b: null, t: UNINITIALIZED, s: undefined, g: null, p: null };
+	} else {
+		s = state;
+		if (tag === s.t) {
+			if (s.e !== null) {
+				s.s = spread(s.e, props, s.s);
 			}
+			return s;
+		}
+	}
 
-			if (typeof component === 'function') {
-				// Handle as regular component
-				b = branch(() => {
-					var props = untrack(get_props);
-					render_component(component, anchor, props);
-				});
-			} else if (is_tsrx_element(component)) {
-				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 (HYDRATION && hydrating) {
-						// Claim the SSR-rendered element instead of creating a new one.
-						element = /** @type {Element} */ (hydrate_node);
-					} else {
-						element =
-							ns !== DEFAULT_NAMESPACE
-								? document.createElementNS(
-										NAMESPACE_URI[ns],
-										/** @type {keyof HTMLElementTagNameMap} */ (component),
-									)
-								: document.createElement(/** @type {keyof HTMLElementTagNameMap} */ (component));
-
-						/** @type {ChildNode} */ (anchor).before(element);
-					}
-
-					if (block.s === null) {
-						block.s = {
-							start: element,
-							end: element,
-						};
-					}
-
-					render_spread(element, get_props, 0);
-
-					var props = untrack(get_props);
-					if (is_tsrx_element(props.children)) {
-						/** @type {Node} */
-						var child_anchor;
-						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));
-						} else {
-							child_anchor = document.createComment('');
-							element.appendChild(child_anchor);
-						}
-
-						if (ns !== DEFAULT_NAMESPACE) {
-							with_ns(ns, () => props.children.render(child_anchor, block, props.children.p));
-						} else {
-							props.children.render(child_anchor, block, props.children.p);
-						}
-
-						if (HYDRATION && hydrating) {
-							// Reset the cursor to the claimed element so sibling traversal
-							// continues after it.
-							set_hydrate_node(element);
-						}
-					}
-				};
-
-				if (ns !== active_namespace) {
-					// support top-level dynamic element svg/math tags
-					b = branch(() => with_ns(ns, run));
-				} else {
-					b = branch(run);
-				}
-			}
-		},
-		null,
-		COMPOSITE_BLOCK,
+	var old = s.e;
+	if (s.b !== null) {
+		destroy_block(s.b);
+		s.b = null;
+	}
+	// The previous element's refs and listeners go with it.
+	release_spread(s.s);
+	s.t = tag;
+	s.s = undefined;
+
+	if (typeof tag === 'function') {
+		if (old !== null) {
+			old.remove();
+			s.e = null;
+		}
+		const get_component = s.g;
+		const get_props = s.p;
+		if (get_component !== null && get_props !== null) {
+			branch(() => composite(get_component, anchor, get_props, namespace));
+			return null;
+		}
+		// No thunks (a call site compiled without `dynamic_init`): the
+		// component renders once with these props.
+		s.b = branch(() => {
+			render_component(tag, /** @type {Node} */ (anchor), props ?? {});
+		});
+		return s;
+	}
+	if (is_tsrx_element(tag)) {
+		component_invalid(true);
+	}
+	if (tag == null || tag === false) {
+		if (old !== null) {
+			old.remove();
+			s.e = null;
+		}
+		return s;
+	}
+
+	var ns = top_element_to_ns(
+		/** @type {Parameters<typeof top_element_to_ns>[0]} */ (tag),
+		namespace === undefined ? active_namespace : namespace,
 	);
+	var element =
+		ns !== DEFAULT_NAMESPACE
+			? document.createElementNS(NAMESPACE_URI[ns], /** @type {string} */ (tag))
+			: document.createElement(/** @type {string} */ (tag));
+	if (old !== null) {
+		old.before(element);
+		old.remove();
+	} else {
+		append(/** @type {ChildNode | AppendIntoAnchor} */ (anchor), element);
+	}
+	s.e = element;
+	s.s = spread(element, props, undefined);
+	return s;
+}
+
+/**
+ * The initial state of a `dynamic` slot: the tag and props thunks a
+ * component target is handed over with. While hydrating, the element is
+ * rendered here by a composite block of its own, which claims its server
+ * nodes in document order and owns the content from then on, so the render
+ * function's `dynamic` calls are no-ops (null).
+ * @param {Node | AppendIntoAnchor} node
+ * @param {() => CompositeTarget} get_component
+ * @param {() => Record<string, any>} get_props
+ * @param {keyof typeof NAMESPACE_URI} [namespace]
+ * @returns {DynamicState | null}
+ */
+export function dynamic_init(node, get_component, get_props, namespace) {
+	if (HYDRATION && hydrating) {
+		composite(get_component, node, get_props, namespace);
+		return null;
+	}
+	return { e: null, b: null, t: UNINITIALIZED, s: undefined, g: get_component, p: get_props };
 }

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

@@ -35,6 +35,14 @@ export var CREATES_DERIVEDS = 1 << 25;
  * re-runs the body's update function.
  */
 export var ITEM_BLOCK = 1 << 26;
+/**
+ * The namespace a block was created in, so a rerun outside the `with_ns()`
+ * call that established it (a scheduled flush) creates its DOM in the same
+ * namespace. Neither bit set means HTML.
+ */
+export var SVG_BLOCK = 1 << 27;
+export var MATHML_BLOCK = 1 << 28;
+export var NAMESPACE_BLOCK = SVG_BLOCK | MATHML_BLOCK;
 
 export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | SWITCH_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
 

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

@@ -2,7 +2,7 @@
 
 import { is_array } from '@tsrx/core/runtime/language-helpers';
 import { branch, destroy_block, render } from './blocks.js';
-import { BRANCH_BLOCK, IF_BLOCK, UNINITIALIZED } from './constants.js';
+import { BRANCH_BLOCK, COMPOSITE_BLOCK, IF_BLOCK, UNINITIALIZED } from './constants.js';
 import { create_text, get_next_sibling } from './operations.js';
 import { assign_nodes } from './template.js';
 import { active_block } from './runtime.js';
@@ -12,14 +12,14 @@ import { is_tsrx_element, TSRX_ELEMENT } from '../../element.js';
 import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
- * Finds the nearest enclosing block that owns a DOM range (a branch or an if
- * block) in the block hierarchy.
+ * Finds the nearest enclosing block that owns a DOM range (a branch, an if
+ * or a composite block) in the block hierarchy.
  * @param {Block | null} block
  * @returns {Block | null}
  */
 function find_enclosing_branch(block) {
 	while (block !== null) {
-		if ((block.f & (BRANCH_BLOCK | IF_BLOCK)) !== 0) {
+		if ((block.f & (BRANCH_BLOCK | IF_BLOCK | COMPOSITE_BLOCK)) !== 0) {
 			return block;
 		}
 		block = block.p;

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

@@ -2,7 +2,6 @@
 
 import { IS_CONTROLLED, IS_INDEXED, LOCAL_ITEMS, ROOT_CONTROLLED } from '../../../constants.js';
 import {
-	block as create_block,
 	create_block as allocate_block,
 	branch,
 	destroy_block,
@@ -60,21 +59,10 @@ function create_item(anchor, value, index, key, state) {
 		p: null,
 	};
 
-	// An item without a tracked of its own (a plain list's, or a local one)
-	// renders in place: allocated, linked and run through `run_branch`, with
-	// none of the first-run bookkeeping a block that may re-run needs.
-	if (tracked_value === value && tracked_index === undefined) {
-		var lean = allocate_block(BRANCH_BLOCK, run_item, item_state);
-		run_branch(lean, render_fn, anchor, value, key);
-		lean.f ^= BLOCK_HAS_RUN;
-		return lean;
-	}
-
-	// Passed through module state rather than a per-item closure; run_item
-	// reads them before rendering, so nested loops cannot observe a stale pair.
-	item_anchor = anchor;
-	item_render_fn = render_fn;
-	var b = create_block(BRANCH_BLOCK, run_item, item_state);
+	// The item renders in place: allocated, linked and run through
+	// `run_branch`, with none of the first-run bookkeeping a block that may
+	// re-run needs (a rerun is `run_item`'s, through `run_block`).
+	var b = allocate_block(BRANCH_BLOCK, run_item, item_state);
 
 	// The item's tracked value and index are owned by the item block itself.
 	if (tracked_value !== value) {
@@ -83,6 +71,8 @@ function create_item(anchor, value, index, key, state) {
 	if (tracked_index !== undefined) {
 		/** @type {Tracked} */ (tracked_index).b = b;
 	}
+	run_branch(b, render_fn, anchor, tracked_value, tracked_index, key);
+	b.f ^= BLOCK_HAS_RUN;
 	return b;
 }
 
@@ -118,32 +108,17 @@ function controlled_anchor(parent) {
 	return { parent, into: true, tail: false };
 }
 
-/** @type {Node | AppendIntoAnchor | null} */
-var item_anchor = null;
-/** @type {((anchor: Node, value: any, index?: any, key?: any) => Block) | null} */
-var item_render_fn = null;
-
 /**
+ * A re-run of an item that carries its render block (see `item`): only the
+ * body's update function, tracked. The first run is `run_branch`'s, in
+ * `create_item`; an item block with no render block of its own never re-runs.
  * @param {{ i: Tracked | undefined, v: any, k: any, p: any }} state
  */
 function run_item(state) {
-	var p = state.p;
-	if (p !== null) {
-		// A re-run of an item that carries its render block: only the body's
-		// update function, tracked (see `item`).
-		set_tracking(true);
-		/** @type {(prev: any) => void} */ (
-			/** @type {ListState} */ (/** @type {Block} */ (/** @type {Block} */ (active_block).p).s).u
-		)(p);
-		return;
-	}
-	var render_fn = /** @type {(anchor: Node, value: any, index?: any, key?: any) => Block} */ (
-		item_render_fn
-	);
-	var anchor = /** @type {Node} */ (item_anchor);
-	item_render_fn = null;
-	item_anchor = null;
-	render_fn(anchor, state.v, state.i, state.k);
+	set_tracking(true);
+	/** @type {(prev: any) => void} */ (
+		/** @type {ListState} */ (/** @type {Block} */ (/** @type {Block} */ (active_block).p).s).u
+	)(state.p);
 }
 
 /**

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

@@ -3,6 +3,7 @@
 import {
 	block,
 	branch,
+	create_block,
 	destroy_block,
 	get_first_node,
 	get_last_node,
@@ -10,9 +11,10 @@ import {
 	remove_block_dom,
 } from './blocks.js';
 import { DETACHED_BLOCK, IF_BLOCK, RENDER_BLOCK, UNINITIALIZED } from './constants.js';
+import { IF_ROOT_CONTROLLED, IF_TRACKED } from '../../../constants.js';
 import { hydrate_next, hydrate_node, hydrating } from './hydration.js';
 import { create_text, resolve_anchor } from './operations.js';
-import { active_block, probe_if, run_untracked } from './runtime.js';
+import { active_block, probe_if, run_in_block, run_untracked } from './runtime.js';
 import { append } from './template.js';
 import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
@@ -262,3 +264,56 @@ export function if_block(node, fn, root_controlled, x) {
 		append(/** @type {ChildNode} */ (node), /** @type {Node} */ (boundary));
 	}
 }
+
+/**
+ * An if whose condition the enclosing render function evaluates (see the
+ * compiler's if lowering): the block only owns the branch, its DOM range and
+ * its blocks, and never runs itself. The render function calls `if_update`
+ * with the branch the condition selected whenever that changes. As
+ * `if_block` does, a condition that read no tracked state has its branch
+ * rendered by the probe, with no block at all: null is returned and the
+ * updates are no-ops. While hydrating, the if keeps a block of its own that
+ * runs the condition, exactly as `if_block` creates: the branch claims its
+ * server nodes in document order, and that block owns the condition's
+ * subscription and a pending read it throws; null is returned then too.
+ * @param {Node | AppendIntoAnchor} node
+ * @param {IfState['fn']} fn
+ * @param {number} [flags] `IF_ROOT_CONTROLLED` (see `if_block`) and
+ *   `IF_TRACKED`, set when the compiler proved the condition reads tracked
+ *   state, so the probe is skipped
+ * @param {any} [x] see `if_block`
+ * @returns {Block | null}
+ */
+export function if_static(node, fn, flags = 0, x) {
+	var root_controlled = (flags & IF_ROOT_CONTROLLED) !== 0;
+
+	if (HYDRATION && hydrating) {
+		if_block(node, fn, root_controlled, x);
+		return null;
+	}
+	if ((flags & IF_TRACKED) === 0) {
+		var rendered;
+		try {
+			rendered = probe_if(fn, x, node);
+		} catch {
+			rendered = false;
+		}
+		if (rendered) {
+			return null;
+		}
+	}
+
+	return create_block(IF_BLOCK, noop, if_block_state(node, fn, x));
+}
+
+/**
+ * Renders `fn` as the branch of an if created by `if_static`, when it is not
+ * the current one. The branch's blocks belong to the if block.
+ * @param {Block | null} block
+ * @param {Branch | undefined} fn
+ */
+export function if_update(block, fn) {
+	if (block !== null) {
+		run_in_block(block, update_branch, fn);
+	}
+}

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

@@ -40,7 +40,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 +73,7 @@ export {
 	derived,
 	tick,
 	with_block,
-	with_ns,
+	set_ns,
 	handle_error,
 	queue_post_block_flush_callback,
 	schedule_update,
@@ -81,7 +81,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 +89,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,