ripple 0.2.147 → 0.2.149

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.147",
+  "version": "0.2.149",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.147"
+    "ripple": "0.2.149"
   }
 }

package/src/compiler/phases/1-parse/index.js

@@ -39,6 +39,8 @@ const regex_whitespace_only = /\s/;
  */
 function skipWhitespace(parser) {
 	const originalStart = parser.start;
+	/** @type {acorn.Position | undefined} */
+	let lineInfo;
 	while (
 		parser.start < parser.input.length &&
 		regex_whitespace_only.test(parser.input[parser.start])
@@ -47,11 +49,14 @@ function skipWhitespace(parser) {
 	}
 	// Update line tracking if whitespace was skipped
 	if (parser.start !== originalStart) {
-		const lineInfo = acorn.getLineInfo(parser.input, parser.start);
+		lineInfo = acorn.getLineInfo(parser.input, parser.start);
 		parser.curLine = lineInfo.line;
 		parser.lineStart = parser.start - lineInfo.column;
-		parser.startLoc = lineInfo;
 	}
+
+	// After skipping whitespace, update startLoc to reflect our actual position
+	// so the next node's start location is correct
+	parser.startLoc = lineInfo || acorn.getLineInfo(parser.input, parser.start);
 }
 
 function isWhitespaceTextNode(node) {
@@ -73,6 +78,8 @@ function RipplePlugin(config) {
 		const original = acorn.Parser.prototype;
 		const tt = Parser.tokTypes || acorn.tokTypes;
 		const tc = Parser.tokContexts || acorn.tokContexts;
+		const tstt = Parser.acornTypeScript.tokTypes;
+		const tstc = Parser.acornTypeScript.tokContexts;
 
 		class RippleParser extends Parser {
 			/** @type {any[]} */
@@ -214,9 +221,8 @@ function RipplePlugin(config) {
 						if (allWhitespace && this.pos + 1 < this.input.length) {
 							const nextChar = this.input.charCodeAt(this.pos + 1);
 							if (nextChar !== 32 && nextChar !== 9 && nextChar !== 10 && nextChar !== 13) {
-								const tokTypes = this.acornTypeScript.tokTypes;
 								++this.pos;
-								return this.finishToken(tokTypes.jsxTagStart);
+								return this.finishToken(tstt.jsxTagStart);
 							}
 						}
 					}
@@ -592,7 +598,7 @@ function RipplePlugin(config) {
 				this.expect(tt.braceL);
 				this.enterScope(0);
 				while (this.type !== tt.braceR) {
-					var stmt = this.parseStatement(null, true);
+					const stmt = this.parseStatement(null, true);
 					body.body.push(stmt);
 				}
 				this.next();
@@ -986,7 +992,7 @@ function RipplePlugin(config) {
 			}
 
 			jsx_parseTupleContainer() {
-				var t = this.startNode();
+				const t = this.startNode();
 				return (
 					this.next(),
 					(t.expression =
@@ -1057,7 +1063,7 @@ function RipplePlugin(config) {
 				if (this.type.label === '@') {
 					this.next(); // consume @
 
-					if (this.type === tt.name || this.type.label === 'jsxName') {
+					if (this.type === tt.name || this.type === tstt.jsxName) {
 						node.name = this.value;
 						node.tracked = true;
 						this.next();
@@ -1066,14 +1072,14 @@ function RipplePlugin(config) {
 						this.unexpected();
 					}
 				} else if (
-					(this.type === tt.name || this.type.label === 'jsxName') &&
+					(this.type === tt.name || this.type === tstt.jsxName) &&
 					this.value &&
 					this.value.startsWith('@')
 				) {
 					node.name = this.value.substring(1);
 					node.tracked = true;
 					this.next();
-				} else if (this.type === tt.name || this.type.keyword || this.type.label === 'jsxName') {
+				} else if (this.type === tt.name || this.type.keyword || this.type === tstt.jsxName) {
 					node.name = this.value;
 					node.tracked = false; // Explicitly mark as not tracked
 					this.next();
@@ -1085,7 +1091,7 @@ function RipplePlugin(config) {
 			}
 
 			jsx_parseElementName() {
-				if (this.type?.label === 'jsxTagEnd') {
+				if (this.type === tstt.jsxTagEnd) {
 					return '';
 				}
 
@@ -1148,17 +1154,15 @@ function RipplePlugin(config) {
 			}
 
 			jsx_parseAttributeValue() {
-				const tok = this.acornTypeScript.tokTypes;
-
 				switch (this.type) {
 					case tt.braceL:
-						var t = this.jsx_parseExpressionContainer();
+						const t = this.jsx_parseExpressionContainer();
 						return (
 							'JSXEmptyExpression' === t.expression.type &&
 								this.raise(t.start, 'attributes must only be assigned a non-empty expression'),
 							t
 						);
-					case tok.jsxTagStart:
+					case tstt.jsxTagStart:
 					case tt.string:
 						return this.parseExprAtom();
 					default:
@@ -1179,7 +1183,7 @@ function RipplePlugin(config) {
 				}
 
 				if (this.type === tt._catch) {
-					var clause = this.startNode();
+					const clause = this.startNode();
 					this.next();
 					if (this.eat(tt.parenL)) {
 						clause.param = this.parseCatchClauseParam();
@@ -1209,7 +1213,6 @@ function RipplePlugin(config) {
 				}
 				let out = '',
 					chunkStart = this.pos;
-				const tok = this.acornTypeScript.tokTypes;
 
 				while (true) {
 					if (this.pos >= this.input.length) this.raise(this.start, 'Unterminated JSX contents');
@@ -1220,7 +1223,7 @@ function RipplePlugin(config) {
 						case 123: // '{'
 							if (ch === 60 && this.exprAllowed) {
 								++this.pos;
-								return this.finishToken(tok.jsxTagStart);
+								return this.finishToken(tstt.jsxTagStart);
 							}
 							if (ch === 123 && this.exprAllowed) {
 								return this.getTokenFromCode(ch);
@@ -1359,7 +1362,6 @@ function RipplePlugin(config) {
 				const inside_head = this.#path.findLast(
 					(n) => n.type === 'Element' && n.id.type === 'Identifier' && n.id.name === 'head',
 				);
-				const tok = this.acornTypeScript.tokTypes;
 				// Adjust the start so we capture the `<` as part of the element
 				const prev_pos = this.pos;
 				this.pos = this.start - 1;
@@ -1444,7 +1446,7 @@ function RipplePlugin(config) {
 						}
 						this.pos = start + content.length + 1;
 
-						this.type = tok.jsxTagStart;
+						this.type = tstt.jsxTagStart;
 						this.next();
 						if (this.value === '/') {
 							this.next();
@@ -1481,7 +1483,7 @@ function RipplePlugin(config) {
 						}
 						this.pos = start + content.length + 1;
 
-						this.type = tok.jsxTagStart;
+						this.type = tstt.jsxTagStart;
 						this.next();
 						if (this.value === '/') {
 							this.next();
@@ -1495,10 +1497,9 @@ function RipplePlugin(config) {
 						element.children = [parsed_css];
 
 						// Ensure we escape JSX <tag></tag> context
-						const tokContexts = this.acornTypeScript.tokContexts;
 						const curContext = this.curContext();
 
-						if (curContext === tokContexts.tc_expr) {
+						if (curContext === tstc.tc_expr) {
 							this.context.pop();
 						}
 
@@ -1535,7 +1536,7 @@ function RipplePlugin(config) {
 								raise_error();
 							}
 							this.next();
-							if (this.type.label !== 'jsxTagEnd') {
+							if (this.type !== tstt.jsxTagEnd) {
 								raise_error();
 							}
 							this.next();
@@ -1551,10 +1552,9 @@ function RipplePlugin(config) {
 						}
 					}
 					// Ensure we escape JSX <tag></tag> context
-					const tokContexts = this.acornTypeScript.tokContexts;
 					const curContext = this.curContext();
 
-					if (curContext === tokContexts.tc_expr) {
+					if (curContext === tstc.tc_expr) {
 						this.context.pop();
 					}
 				}
@@ -1584,23 +1584,28 @@ function RipplePlugin(config) {
 					this.exprAllowed = true;
 
 					while (true) {
-						const node = super.parseExpression();
-						body.push(node);
-
 						if (this.input.slice(this.pos, this.pos + 5) === '/tsx:') {
 							return;
 						}
+
+						if (this.type === tt.braceL) {
+							const node = this.jsx_parseExpressionContainer();
+							body.push(node);
+						} else {
+							// Parse regular JSX expression (JSXElement, JSXFragment, etc.)
+							const node = super.parseExpression();
+							body.push(node);
+						}
 					}
 				}
-
-				if (this.type.label === '{') {
+				if (this.type === tt.braceL) {
 					const node = this.jsx_parseExpressionContainer();
 					node.type = node.html ? 'Html' : 'Text';
 					delete node.html;
 					body.push(node);
-				} else if (this.type.label === '}') {
+				} else if (this.type === tt.braceR) {
 					return;
-				} else if (this.type.label === 'jsxTagStart') {
+				} else if (this.type === tstt.jsxTagStart) {
 					this.next();
 					if (this.value === '/') {
 						this.next();
@@ -1658,7 +1663,7 @@ function RipplePlugin(config) {
 
 					// Ensure we're not in JSX context before recursing
 					// This is important when elements are parsed at statement level
-					if (this.curContext() === this.acornTypeScript.tokContexts.tc_expr) {
+					if (this.curContext() === tstc.tc_expr) {
 						this.context.pop();
 					}
 				}
@@ -1667,14 +1672,12 @@ function RipplePlugin(config) {
 			}
 
 			parseStatement(context, topLevel, exports) {
-				const tok = this.acornTypeScript.tokContexts;
-
 				if (
 					context !== 'for' &&
 					context !== 'if' &&
 					this.context.at(-1) === tc.b_stat &&
 					this.type === tt.braceL &&
-					this.context.some((c) => c === tok.tc_expr)
+					this.context.some((c) => c === tstt.tc_expr)
 				) {
 					this.next();
 					const node = this.jsx_parseExpressionContainer();
@@ -1739,7 +1742,7 @@ function RipplePlugin(config) {
 					}
 				}
 
-				if (this.type.label === 'jsxTagStart') {
+				if (this.type === tstt.jsxTagStart) {
 					this.next();
 					if (this.value === '/') {
 						this.unexpected();
@@ -1925,7 +1928,11 @@ function get_comment_handlers(source, comments, index = 0) {
 						// Handle JSXEmptyExpression - these represent {/* comment */} in JSX
 						if (node.type === 'JSXEmptyExpression') {
 							// Collect all comments that fall within this JSXEmptyExpression
-							while (comments[0] && comments[0].start >= node.start && comments[0].end <= node.end) {
+							while (
+								comments[0] &&
+								comments[0].start >= node.start &&
+								comments[0].end <= node.end
+							) {
 								comment = /** @type {CommentWithLocation} */ (comments.shift());
 								(node.innerComments ||= []).push(comment);
 							}

package/src/compiler/phases/2-analyze/index.js

@@ -45,8 +45,6 @@ function mark_control_flow_has_template(path) {
 
 function visit_function(node, context) {
 	node.metadata = {
-		hoisted: false,
-		hoisted_params: [],
 		scope: context.state.scope,
 		tracked: false,
 	};
@@ -722,12 +720,7 @@ const visitors = {
 							const handler = visit(attr.value, state);
 							const delegated_event = get_delegated_event(event_name, handler, state);
 
-							if (delegated_event !== null) {
-								if (delegated_event.hoisted) {
-									delegated_event.function.metadata.hoisted = true;
-									delegated_event.hoisted = true;
-								}
-
+							if (delegated_event) {
 								if (attr.metadata === undefined) {
 									attr.metadata = {};
 								}

package/src/compiler/phases/3-transform/client/index.js

@@ -15,9 +15,9 @@ import {
 	TEMPLATE_SVG_NAMESPACE,
 	TEMPLATE_MATHML_NAMESPACE,
 } from '../../../../constants.js';
+import { DEFAULT_NAMESPACE } from '../../../../runtime/internal/client/constants.js';
 import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
 import {
-	build_hoisted_params,
 	is_inside_component,
 	build_assignment,
 	visit_assignment_expression,
@@ -75,16 +75,6 @@ function visit_function(node, context) {
 		}
 	}
 
-	if (metadata?.hoisted === true) {
-		const params = build_hoisted_params(node, context);
-
-		return /** @type {FunctionExpression} */ ({
-			...node,
-			params,
-			body: context.visit(node.body, state),
-		});
-	}
-
 	let body = context.visit(node.body, {
 		...state,
 		// we are new context so tracking no longer applies
@@ -132,13 +122,7 @@ function visit_head_element(node, context) {
 				'_$_.head',
 				b.arrow(
 					[b.id('__anchor')],
-					b.block([
-						...init,
-						...update.map((u) => {
-							debugger;
-						}),
-						...final,
-					]),
+					b.block([...init, ...update.map((u) => u.operation), ...final]),
 				),
 			),
 		);
@@ -985,21 +969,7 @@ const visitors = {
 									state.events.add(event_name);
 								}
 
-								// Hoist function if we can, otherwise we leave the function as is
-								if (attr.metadata.delegated.hoisted) {
-									if (attr.metadata.delegated.function === attr.value) {
-										const func_name = state.scope.root.unique('on_' + event_name);
-										state.hoisted.push(b.var(func_name, handler));
-										handler = func_name;
-									}
-
-									const hoisted_params = /** @type {Expression[]} */ (
-										attr.metadata.delegated.function.metadata.hoisted_params
-									);
-
-									const args = [handler, b.id('__block'), ...hoisted_params];
-									delegated_assignment = b.array(args);
-								} else if (
+								if (
 									(handler.type === 'Identifier' &&
 										is_declared_function_within_component(handler, context)) ||
 									handler.type === 'ArrowFunctionExpression' ||
@@ -1267,31 +1237,36 @@ const visitors = {
 			// We visit, but only to gather metadata
 			b.call(visit(node.id, { ...state, metadata }));
 
+			// We're calling a component from within svg/mathml context
+			const is_with_ns = state.namespace !== DEFAULT_NAMESPACE;
+
 			if (metadata.tracking) {
+				const shared = b.call(
+					'_$_.composite',
+					b.thunk(visit(node.id, state)),
+					id,
+					is_spreading
+						? b.call('_$_.spread_props', b.thunk(b.object(props)), b.id('__block'))
+						: b.object(props),
+				);
 				state.init.push(
-					b.stmt(
-						b.call(
-							'_$_.composite',
-							b.thunk(visit(node.id, state)),
-							id,
-							is_spreading
-								? b.call('_$_.spread_props', b.thunk(b.object(props)), b.id('__block'))
-								: b.object(props),
-						),
-					),
+					is_with_ns
+						? b.call('_$_.with_ns', b.literal(state.namespace), b.thunk(shared))
+						: b.stmt(shared),
 				);
 			} else {
+				const shared = b.call(
+					visit(node.id, state),
+					id,
+					is_spreading
+						? b.call('_$_.spread_props', b.thunk(b.object(props)), b.id('__block'))
+						: b.object(props),
+					b.id('_$_.active_block'),
+				);
 				state.init.push(
-					b.stmt(
-						b.call(
-							visit(node.id, state),
-							id,
-							is_spreading
-								? b.call('_$_.spread_props', b.thunk(b.object(props)), b.id('__block'))
-								: b.object(props),
-							b.id('_$_.active_block'),
-						),
-					),
+					is_with_ns
+						? b.call('_$_.with_ns', b.literal(state.namespace), b.thunk(shared))
+						: b.stmt(shared),
 				);
 			}
 		}
@@ -2125,7 +2100,6 @@ function transform_ts_child(node, context) {
 			.map((child) => visit(child, state))
 			.filter((child) => child.type !== 'JSXText' || child.value.trim() !== '');
 
-		debugger;
 		state.init.push(b.stmt(b.jsx_fragment(children)));
 	} else {
 		throw new Error('TODO');
@@ -2146,6 +2120,7 @@ function transform_children(children, context) {
 				node.type === 'TryStatement' ||
 				node.type === 'ForOfStatement' ||
 				node.type === 'SwitchStatement' ||
+				node.type === 'TsxCompat' ||
 				node.type === 'Html' ||
 				(node.type === 'Element' &&
 					(node.id.type !== 'Identifier' || !is_element_dom_element(node))),

package/src/compiler/types/index.d.ts

@@ -323,8 +323,5 @@ export interface TransformContext {
  * Delegated event result
  */
 export interface DelegatedEventResult {
-	/** Whether event was hoisted */
-	hoisted: boolean;
-	/** The hoisted function */
 	function?: FunctionExpression | FunctionDeclaration | ArrowFunctionExpression;
 }

package/src/compiler/utils.js

@@ -169,206 +169,19 @@ export function is_dom_property(name) {
 	return DOM_PROPERTIES.includes(name);
 }
 
-const unhoisted = { hoisted: false };
-
 /**
- * Determines if an event handler can be hoisted for delegation
+ * Determines if an event handler can be delegated
  * @param {string} event_name
  * @param {Expression} handler
  * @param {CompilerState} state
- * @returns {DelegatedEventResult | null}
+ * @returns {boolean}
  */
 export function get_delegated_event(event_name, handler, state) {
 	// Handle delegated event handlers. Bail out if not a delegated event.
 	if (!handler || !is_delegated(event_name)) {
-		return null;
-	}
-
-	/** @type {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | null} */
-	let target_function = null;
-	let binding = null;
-
-	if (handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') {
-		target_function = handler;
-	} else if (handler.type === 'Identifier') {
-		binding = state.scope.get(handler.name);
-
-		if (state.analysis.module.scope.references.has(handler.name)) {
-			// If a binding with the same name is referenced in the module scope (even if not declared there), bail out
-			return unhoisted;
-		}
-
-		if (binding != null) {
-			for (const { path } of binding.references) {
-				const parent = path.at(-1);
-				if (parent === undefined) {
-					return unhoisted;
-				}
-
-				const grandparent = path.at(-2);
-
-				/** @type {Element | null} */
-				let element = null;
-				/** @type {string | null} */
-				let event_name = null;
-				if (
-					parent.type === 'Expression' &&
-					grandparent?.type === 'Attribute' &&
-					is_event_attribute(grandparent)
-				) {
-					element = /** @type {Element} */ (path.at(-3));
-					const attribute = /** @type {Attribute} */ (grandparent);
-					event_name = get_attribute_event_name(attribute.name.name);
-				}
-
-				if (element && event_name) {
-					if (
-						element.type !== 'Element' ||
-						element.metadata.has_spread ||
-						!is_delegated(event_name)
-					) {
-						return unhoisted;
-					}
-				} else if (
-					parent.type !== 'FunctionDeclaration' &&
-					parent.type !== 'VariableDeclarator' &&
-					parent.type !== 'Attribute'
-				) {
-					return unhoisted;
-				}
-			}
-		}
-
-		// If the binding is exported, bail out
-		if (
-			state.analysis?.exports?.find(
-				(/** @type {{name: string}} */ node) => node.name === handler.name,
-			)
-		) {
-			return unhoisted;
-		}
-
-		if (binding !== null && binding.initial !== null && !binding.updated && !binding.is_called) {
-			const binding_type = binding.initial.type;
-
-			if (
-				binding_type === 'ArrowFunctionExpression' ||
-				binding_type === 'FunctionDeclaration' ||
-				binding_type === 'FunctionExpression'
-			) {
-				target_function = binding.initial;
-			}
-		}
-	}
-
-	// If we can't find a function, or the function has multiple parameters, bail out
-	if (target_function == null || target_function.params.length > 1) {
-		return unhoisted;
-	}
-
-	const visited_references = new Set();
-	const scope = target_function.metadata.scope;
-	for (const [reference, ref_nodes] of scope.references) {
-		// Bail out if the arguments keyword is used or $host is referenced
-		if (reference === 'arguments') return unhoisted;
-
-		const binding = scope.get(reference);
-		const local_binding = state.scope.get(reference);
-
-		if (local_binding === null || binding == null) {
-			return unhoisted;
-		}
-
-		// If we are referencing a binding that is shadowed in another scope then bail out.
-		if (local_binding.node !== binding.node) {
-			return unhoisted;
-		}
-		const is_tracked = ref_nodes.some(({ node }) => node.tracked);
-
-		if (
-			binding !== null &&
-			// Bail out if the the binding is a rest param
-			(binding.declaration_kind === 'rest_param' || // or any normal not reactive bindings that are mutated.
-				// Bail out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
-				(binding.kind === 'normal' && !is_tracked && binding.updated))
-		) {
-			return unhoisted;
-		}
-		visited_references.add(reference);
-	}
-
-	return { hoisted: true, function: target_function };
-}
-
-/**
- * @param {Node} node
- * @param {TransformContext} context
- * @returns {Identifier[]}
- */
-function get_hoisted_params(node, context) {
-	const scope = context.state.scope;
-
-	/** @type {Identifier[]} */
-	const params = [];
-
-	/**
-	 * We only want to push if it's not already present to avoid name clashing
-	 * @param {Identifier} id
-	 */
-	function push_unique(id) {
-		if (!params.find((param) => param.name === id.name)) {
-			params.push(id);
-		}
-	}
-
-	for (const [reference] of scope.references) {
-		let binding = scope.get(reference);
-
-		if (binding !== null && !scope.declarations.has(reference) && binding.initial !== node) {
-			if (binding.kind === 'prop') {
-				push_unique(b.id('__props'));
-			} else if (binding.kind === 'for_pattern') {
-				push_unique(binding.metadata.pattern);
-			} else if (binding.kind === 'prop_fallback') {
-				push_unique(b.id(binding.node.name));
-			} else if (
-				// imports don't need to be hoisted
-				binding.declaration_kind !== 'import'
-			) {
-				// create a copy to remove start/end tags which would mess up source maps
-				push_unique(b.id(binding.node.name));
-			}
-		}
-	}
-	return params;
-}
-
-/**
- * Builds the parameter list for a hoisted function
- * @param {FunctionDeclaration|FunctionExpression|ArrowFunctionExpression} node
- * @param {TransformContext} context
- * @returns {Pattern[]}
- */
-export function build_hoisted_params(node, context) {
-	const hoisted_params = get_hoisted_params(node, context);
-	node.metadata.hoisted_params = hoisted_params;
-
-	/** @type {Pattern[]} */
-	const params = [];
-
-	if (node.params.length === 0) {
-		if (hoisted_params.length > 0) {
-			// For the event object
-			params.push(b.id(context.state.scope.generate('_')));
-		}
-	} else {
-		for (const param of node.params) {
-			params.push(/** @type {Pattern} */ (context.visit(param)));
-		}
+		return false;
 	}
-
-	params.push(...hoisted_params, b.id('__block'));
-	return params;
+	return true;
 }
 
 /**

package/src/constants.js

@@ -4,4 +4,3 @@ export const IS_CONTROLLED = 1 << 2;
 export const IS_INDEXED = 1 << 3;
 export const TEMPLATE_SVG_NAMESPACE = 1 << 5;
 export const TEMPLATE_MATHML_NAMESPACE = 1 << 6;
-

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

@@ -1,8 +1,8 @@
 /** @import { Block, Component } from '#client' */
 
 import { branch, destroy_block, render, render_spread } from './blocks.js';
-import { COMPOSITE_BLOCK } from './constants.js';
-import { active_block } from './runtime.js';
+import { COMPOSITE_BLOCK, NAMESPACE_URI, DEFAULT_NAMESPACE } from './constants.js';
+import { active_block, active_namespace } from './runtime.js';
 
 /**
  * @typedef {((anchor: Node, props: Record<string, any>, block: Block | null) => void)} ComponentFunction
@@ -36,9 +36,14 @@ export function composite(get_component, node, props) {
 				b = branch(() => {
 					var block = /** @type {Block} */ (active_block);
 
-					var element = document.createElement(
-						/** @type {keyof HTMLElementTagNameMap} */ (component),
-					);
+					var element =
+						active_namespace !== DEFAULT_NAMESPACE
+							? document.createElementNS(
+									NAMESPACE_URI[active_namespace],
+									/** @type {keyof HTMLElementTagNameMap} */ (component),
+								)
+							: document.createElement(/** @type {keyof HTMLElementTagNameMap} */ (component));
+
 					/** @type {ChildNode} */ (anchor).before(element);
 
 					if (block.s === null) {

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

@@ -30,3 +30,9 @@ export var REF_PROP = 'ref';
 /** @type {unique symbol} */
 export const ARRAY_SET_INDEX_AT = Symbol();
 export const MAX_ARRAY_LENGTH = 2 ** 32 - 1;
+export const DEFAULT_NAMESPACE = 'html';
+export const NAMESPACE_URI = {
+	html: 'http://www.w3.org/1999/xhtml',
+	svg: 'http://www.w3.org/2000/svg',
+	mathml: 'http://www.w3.org/1998/Math/MathML',
+};

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

@@ -49,6 +49,7 @@ export {
 	tick,
 	proxy_tracked,
 	with_block,
+	with_ns,
 } from './runtime.js';
 
 export { composite } from './composite.js';

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

@@ -1,4 +1,5 @@
 /** @import { Block, Component, Dependency, Derived, Tracked } from '#client' */
+/** @import { NAMESPACE_URI } from './constants.js' */
 
 import { DEV } from 'esm-env';
 import {
@@ -26,6 +27,7 @@ import {
 	UNINITIALIZED,
 	REF_PROP,
 	TRACKED_OBJECT,
+	DEFAULT_NAMESPACE,
 } from './constants.js';
 import { capture, suspend } from './try.js';
 import {
@@ -48,6 +50,8 @@ export let active_reaction = null;
 export let active_scope = null;
 /** @type {null | Component} */
 export let active_component = null;
+/** @type {keyof NAMESPACE_URI} */
+export let active_namespace = DEFAULT_NAMESPACE;
 /** @type {boolean} */
 export let is_mutating_allowed = true;
 
@@ -1163,6 +1167,22 @@ export function pop_component() {
 	active_component = component.p;
 }
 
+/**
+ * @template T
+ * @param {() => T} fn
+ * @param {keyof NAMESPACE_URI} namespace
+ * @returns {T}
+ */
+export function with_ns(namespace, fn) {
+	var previous_namespace = active_namespace;
+	active_namespace = namespace;
+	try {
+		return fn();
+	} finally {
+		active_namespace = previous_namespace;
+	}
+}
+
 /**
  * @returns {symbol}
  */

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

@@ -7,7 +7,7 @@ import {
 	TEMPLATE_MATHML_NAMESPACE,
 } from '../../../constants.js';
 import { first_child, is_firefox } from './operations.js';
-import { active_block } from './runtime.js';
+import { active_block, active_namespace } from './runtime.js';
 
 /**
  * Assigns start and end nodes to the active block's state.
@@ -64,15 +64,16 @@ export function template(content, flags) {
 	var use_mathml_namespace = (flags & TEMPLATE_MATHML_NAMESPACE) !== 0;
 	/** @type {Node | DocumentFragment | undefined} */
 	var node;
-	var has_start = !content.startsWith('<!>');
+	var is_comment = content === '<!>';
+	var has_start = !is_comment && !content.startsWith('<!>');
 
 	return () => {
+		// If using runtime namespace, check active_namespace
+		var svg = !is_comment && (use_svg_namespace || active_namespace === 'svg');
+		var mathml = !is_comment && (use_mathml_namespace || active_namespace === 'mathml');
+
 		if (node === undefined) {
-			node = create_fragment_from_html(
-				has_start ? content : '<!>' + content,
-				use_svg_namespace,
-				use_mathml_namespace,
-			);
+			node = create_fragment_from_html(has_start ? content : '<!>' + content, svg, mathml);
 			if (!is_fragment) node = /** @type {Node} */ (first_child(node));
 		}
 
@@ -119,8 +120,9 @@ function from_namespace(content, ns = 'svg') {
 	var root = /** @type {Element} */ (first_child(fragment));
 	var result = document.createDocumentFragment();
 
-	while (first_child(root)) {
-		result.appendChild(/** @type {Node} */ (first_child(root)));
+	var first;
+	while ((first = first_child(root))) {
+		result.appendChild(/** @type {Node} */ (first));
 	}
 
 	return result;

package/tests/client/svg.test.ripple

@@ -1,3 +1,5 @@
+import { track } from 'ripple';
+
 describe('SVG namespace handling', () => {
 	it('should render static SVG elements with correct namespace', () => {
 		component App() {
@@ -228,6 +230,107 @@ describe('SVG namespace handling', () => {
 		expect(div.textContent).toBe('HTML inside SVG');
 	});
 
+	it('should render SVG with children as svg elements', () => {
+		component SVG({ children }) {
+			<svg width={20} height={20} fill="blue" viewBox="0 0 30 10" preserveAspectRatio="none">
+				<children />
+			</svg>
+		}
+
+		component App() {
+			let isDiamond = true;
+			<SVG>
+				if (isDiamond) {
+					<polygon points="0,0 30,0 15,10" />
+				} else {
+					<polygon points="0,0 30,0 15,10" />
+				}
+			</SVG>
+		}
+
+		render(App);
+
+		const svg = container.querySelector('svg');
+		const polygon = container.querySelector('polygon');
+
+		expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(polygon.namespaceURI).toBe('http://www.w3.org/2000/svg');
+	});
+
+	it('should render SVG with props as svg elements', () => {
+		component SVG({ Polygon }) {
+			<svg width={20} height={20} fill="blue" viewBox="0 0 30 10" preserveAspectRatio="none">
+				<Polygon />
+			</svg>
+		}
+
+		component App() {
+			<SVG {Polygon} />
+		}
+
+		component Polygon() {
+			<polygon points="0,0 30,0 15,10" />
+		}
+
+		render(App);
+
+		const svg = container.querySelector('svg');
+		const polygon = container.querySelector('polygon');
+
+		expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(polygon.namespaceURI).toBe('http://www.w3.org/2000/svg');
+	});
+
+	it('should render SVG with children as dynamic elements', () => {
+		component SVG({ children }) {
+			<svg width={20} height={20} fill="blue" viewBox="0 0 30 10" preserveAspectRatio="none">
+				<children />
+			</svg>
+		}
+
+		component App() {
+			let dynTag = track('polygon');
+			<SVG>
+				<@dynTag points="0,0 30,0 15,10" />
+			</SVG>
+		}
+
+		render(App);
+
+		const svg = container.querySelector('svg');
+		const polygon = container.querySelector('polygon');
+
+		expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(polygon.namespaceURI).toBe('http://www.w3.org/2000/svg');
+	});
+
+	it('should render SVG with children as dynamic components', () => {
+		component SVG({ children }) {
+			<svg width={20} height={20} fill="blue" viewBox="0 0 30 10" preserveAspectRatio="none">
+				<children />
+			</svg>
+		}
+
+		component Polygon({ points }) {
+			<polygon {points} />
+		}
+
+		component App() {
+			let Component = track(() => Polygon);
+			<SVG>
+				<@Component points="0,0 30,0 15,10" />
+			</SVG>
+		}
+
+		render(App);
+
+		const svg = container.querySelector('svg');
+		const polygon = container.querySelector('polygon');
+
+		expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(polygon.namespaceURI).toBe('http://www.w3.org/2000/svg');
+	});
+
 	it('should compare static vs dynamic SVG rendering (original problem case)', () => {
 		component App() {
 			const d = [