ripple 0.2.149 → 0.2.151

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.149",
+  "version": "0.2.151",
   "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.149"
+    "ripple": "0.2.151"
   }
 }

package/src/jsx-runtime.d.ts

@@ -32,9 +32,11 @@ export function jsxs(
  */
 export function Fragment(props: { children?: any }): void;
 
+export type ClassValue = string | import('clsx').ClassArray | import('clsx').ClassDictionary;
+
 // Base HTML attributes
 interface HTMLAttributes {
-	class?: string;
+	class?: ClassValue | undefined | null;
 	className?: string;
 	id?: string;
 	style?: string | Record<string, string | number>;

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

@@ -1,12 +1,13 @@
-/** @import { Block, Component } from '#client' */
+/** @import { Block } from '#client' */
 
 import { branch, destroy_block, render, render_spread } from './blocks.js';
 import { COMPOSITE_BLOCK, NAMESPACE_URI, DEFAULT_NAMESPACE } from './constants.js';
-import { active_block, active_namespace } from './runtime.js';
+import { active_block, active_namespace, with_ns } from './runtime.js';
+import { top_element_to_ns } from './utils.js';
 
 /**
  * @typedef {((anchor: Node, props: Record<string, any>, block: Block | null) => void)} ComponentFunction
- * @param {() => ComponentFunction | keyof HTMLElementTagNameMap} get_component
+ * @param {() => ComponentFunction | keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap | keyof MathMLElementTagNameMap} get_component
  * @param {Node} node
  * @param {Record<string, any>} props
  * @returns {void}
@@ -33,7 +34,7 @@ export function composite(get_component, node, props) {
 				});
 			} else {
 				// Custom element
-				b = branch(() => {
+				var run = () => {
 					var block = /** @type {Block} */ (active_block);
 
 					var element =
@@ -61,7 +62,16 @@ export function composite(get_component, node, props) {
 
 						props?.children?.(child_anchor, {}, block);
 					}
-				});
+				};
+
+				const ns = top_element_to_ns(component, active_namespace);
+
+				if (ns !== active_namespace) {
+					// support top-level dynamic element svg/math <@tag />
+					b = branch(() => with_ns(ns, run));
+				} else {
+					b = branch(run);
+				}
 			}
 		},
 		null,

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

@@ -50,7 +50,7 @@ export let active_reaction = null;
 export let active_scope = null;
 /** @type {null | Component} */
 export let active_component = null;
-/** @type {keyof NAMESPACE_URI} */
+/** @type {keyof typeof NAMESPACE_URI} */
 export let active_namespace = DEFAULT_NAMESPACE;
 /** @type {boolean} */
 export let is_mutating_allowed = true;
@@ -1170,7 +1170,7 @@ export function pop_component() {
 /**
  * @template T
  * @param {() => T} fn
- * @param {keyof NAMESPACE_URI} namespace
+ * @param {keyof typeof NAMESPACE_URI} namespace
  * @returns {T}
  */
 export function with_ns(namespace, fn) {

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

@@ -1,3 +1,5 @@
+/** @import { NAMESPACE_URI } from './constants.js' */
+
 /** @type {typeof Object.getOwnPropertyDescriptor} */
 export var get_descriptor = Object.getOwnPropertyDescriptor;
 /** @type {typeof Object.getOwnPropertyDescriptors} */
@@ -43,3 +45,19 @@ export function create_anchor() {
 export function is_tracked_object(v) {
 	return typeof v === 'object' && v !== null && typeof (/** @type {any} */ (v).f) === 'number';
 }
+
+/**
+ * Converts a tag name to its corresponding namespace.
+ * @param {keyof SVGElementTagNameMap | keyof MathMLElementTagNameMap | keyof HTMLElementTagNameMap} element
+ * @param {keyof typeof NAMESPACE_URI} current_namespace
+ * @returns {keyof typeof NAMESPACE_URI}
+ */
+export function top_element_to_ns(element, current_namespace) {
+	if (element === 'svg') {
+		return 'svg';
+	} else if (element === 'math') {
+		return 'mathml';
+	} else {
+		return current_namespace;
+	}
+}

package/tests/client/svg.test.ripple

@@ -331,6 +331,35 @@ describe('SVG namespace handling', () => {
 		expect(polygon.namespaceURI).toBe('http://www.w3.org/2000/svg');
 	});
 
+	it('should render SVG as a dynamic top element with any dynamic children elements', () => {
+		component SVG({ children }) {
+			const tag = track('svg');
+			<@tag width={100} height={50} fill="red" viewBox="0 0 30 10" preserveAspectRatio="none">
+				<children />
+			</@tag>
+		}
+
+		component Polygon({ points }) {
+			let dynTag = track('polygon');
+			<@dynTag {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 = [