ripple 0.2.148 → 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.148",
+  "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.148"
+    "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/3-transform/client/index.js

@@ -15,6 +15,7 @@ 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 {
 	is_inside_component,
@@ -1236,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),
 				);
 			}
 		}
@@ -2114,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/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 = [