ripple 0.2.108 → 0.2.109

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.108",
+  "version": "0.2.109",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",

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

@@ -178,10 +178,9 @@ const visitors = {
 						add_ripple_internal_import(context);
 						return b.call('_$_.get', build_getter(node, context));
 					}
-
-					add_ripple_internal_import(context);
-					return build_getter(node, context);
 				}
+				add_ripple_internal_import(context);
+				return build_getter(node, context);
 			}
 		}
 	},

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

@@ -2,10 +2,12 @@
 
 import { branch, destroy_block, render } from './blocks.js';
 import { COMPOSITE_BLOCK } from './constants.js';
+import { apply_element_spread } from './render';
 import { active_block } from './runtime.js';
 
 /**
- * @param {() => (anchor: Node, props: Record<string, any>, block: Block | null) => void} get_component
+ * @typedef {((anchor: Node, props: Record<string, any>, block: Block | null) => void)} ComponentFunction
+ * @param {() => ComponentFunction | keyof HTMLElementTagNameMap} get_component
  * @param {Node} node
  * @param {Record<string, any>} props
  * @returns {void}
@@ -23,9 +25,39 @@ export function composite(get_component, node, props) {
 			b = null;
 		}
 
-		b = branch(() => {
-			var block = active_block;
-			component(anchor, props, block);
-		});
+		if (typeof component === 'function') {
+			// Handle as regular component
+			b = branch(() => {
+				var block = active_block;
+				/** @type {ComponentFunction} */ (component)(anchor, props, block);
+			});
+		} else {
+			// Custom element
+			b = branch(() => {
+				var block = /** @type {Block} */ (active_block);
+
+				var element = document.createElement(
+					/** @type {keyof HTMLElementTagNameMap} */ (component),
+				);
+				/** @type {ChildNode} */ (anchor).before(element);
+
+				if (block.s === null) {
+					block.s = {
+						start: element,
+						end: element,
+					};
+				}
+
+				const spread_fn = apply_element_spread(element, () => props || {});
+				spread_fn();
+
+				if (typeof props?.children === 'function') {
+					var child_anchor = document.createComment('');
+					element.appendChild(child_anchor);
+
+					props?.children?.(child_anchor, {}, block);
+				}
+			});
+		}
 	}, COMPOSITE_BLOCK);
 }

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

@@ -128,39 +128,66 @@ export function apply_styles(element, newStyles) {
  * @returns {void}
  */
 export function set_attributes(element, attributes) {
+	let found_enumerable_keys = false;
+
 	for (const key in attributes) {
 		if (key === 'children') continue;
+		found_enumerable_keys = true;
 
 		let value = attributes[key];
-
 		if (is_tracked_object(value)) {
 			value = get(value);
 		}
+		set_attribute_helper(element, key, value);
+	}
 
-		if (key === 'class') {
-			const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
-			set_class(/** @type {HTMLElement} */ (element), value, undefined, is_html);
-		} else if (key === '#class') {
-			// Special case for static class when spreading props
-			element.classList.add(value);
-		} else if (is_event_attribute(key)) {
-			// Handle event handlers in spread props
-			const event_name = get_attribute_event_name(key);
-
-			if (is_delegated(event_name)) {
-				// Use delegation for delegated events
-				/** @type {any} */ (element)['__' + event_name] = value;
-				delegate([event_name]);
-			} else {
-				// Use addEventListener for non-delegated events
-				event(event_name, element, value);
+	// Only if no enumerable keys but attributes object exists
+	// This handles spread_props Proxy objects from dynamic elements with {...spread}
+	if (!found_enumerable_keys && attributes) {
+		const allKeys = Reflect.ownKeys(attributes);
+		for (const key of allKeys) {
+			if (key === 'children') continue;
+			if (typeof key === 'symbol') continue; // Skip symbols - handled by apply_element_spread
+
+			let value = attributes[key];
+			if (is_tracked_object(value)) {
+				value = get(value);
 			}
-		} else {
-			set_attribute(element, key, value);
+			set_attribute_helper(element, key, value);
 		}
 	}
 }
 
+/**
+ * Helper function to set a single attribute
+ * @param {Element} element
+ * @param {string} key
+ * @param {any} value
+*/
+function set_attribute_helper(element, key, value) {
+  if (key === 'class') {
+    const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
+    set_class(/** @type {HTMLElement} */ (element), value, undefined, is_html);
+  } else if (key === '#class') {
+    // Special case for static class when spreading props
+    element.classList.add(value);
+  } else if (typeof key === 'string' && is_event_attribute(key)) {
+    // Handle event handlers in spread props
+    const event_name = get_attribute_event_name(key);
+
+    if (is_delegated(event_name)) {
+      // Use delegation for delegated events
+      /** @type {any} */ (element)['__' + event_name] = value;
+      delegate([event_name]);
+    } else {
+      // Use addEventListener for non-delegated events
+      event(event_name, element, value);
+    }
+  } else {
+    set_attribute(element, key, value);
+  }
+}
+
 /**
  * @param {import('clsx').ClassValue} value
  * @param {string} [hash]

package/tests/client/dynamic-elements.test.ripple

@@ -0,0 +1,207 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, track, createRefKey } from 'ripple';
+
+describe('dynamic DOM elements', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container,
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
+	it('renders static dynamic element', () => {
+		component App() {
+			let tag = track('div');
+
+			<@tag>{'Hello World'}</@tag>
+		}
+		render(App);
+
+		const element = container.querySelector('div');
+		expect(element).toBeTruthy();
+		expect(element.textContent).toBe('Hello World');
+	});
+	it('renders reactive dynamic element', () => {
+		component App() {
+			let tag = track('div');
+
+			<button onClick={() => {
+					@tag = 'span';
+				}}>{'Change Tag'}</button>
+			<@tag id="dynamic">{'Hello World'}</@tag>
+		}
+		render(App);
+		// Initially should be a div
+		let dynamicElement = container.querySelector('#dynamic');
+		expect(dynamicElement.tagName).toBe('DIV');
+		expect(dynamicElement.textContent).toBe('Hello World');
+		// Click button to change tag
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+		// Should now be a span
+		dynamicElement = container.querySelector('#dynamic');
+		expect(dynamicElement.tagName).toBe('SPAN');
+		expect(dynamicElement.textContent).toBe('Hello World');
+	});
+	it('renders self-closing dynamic element', () => {
+		component App() {
+			let tag = track('input');
+
+			<@tag type="text" value="test" />
+		}
+		render(App);
+
+		const element = container.querySelector('input');
+		expect(element).toBeTruthy();
+		expect(element.type).toBe('text');
+		expect(element.value).toBe('test');
+	});
+	it('handles dynamic element with attributes', () => {
+		component App() {
+			let tag = track('div');
+			let className = track('test-class');
+
+			<@tag class={@className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
+		}
+		render(App);
+
+		const element = container.querySelector('#test');
+		expect(element.tagName).toBe('DIV');
+		expect(element.className).toBe('test-class');
+		expect(element.getAttribute('data-testid')).toBe('dynamic-element');
+		expect(element.textContent).toBe('Content');
+	});
+	it('handles nested dynamic elements', () => {
+		component App() {
+			let outerTag = track('div');
+			let innerTag = track('span');
+
+			<@outerTag class="outer">
+				<@innerTag class="inner">{'Nested content'}</@innerTag>
+			</@outerTag>
+		}
+		render(App);
+
+		const outer = container.querySelector('.outer');
+		const inner = container.querySelector('.inner');
+
+		expect(outer.tagName).toBe('DIV');
+		expect(inner.tagName).toBe('SPAN');
+		expect(inner.textContent).toBe('Nested content');
+		expect(outer.contains(inner)).toBe(true);
+	});
+	it('handles dynamic element with class object', () => {
+		component App() {
+			let tag = track('div');
+			let active = track(true);
+
+			<@tag class={{ active: @active, 'dynamic-element': true }}>
+				{'Element with class object'}
+			</@tag>
+		}
+		render(App);
+
+		const element = container.querySelector('div');
+		expect(element).toBeTruthy();
+		expect(element.classList.contains('active')).toBe(true);
+		expect(element.classList.contains('dynamic-element')).toBe(true);
+	});
+	it('handles dynamic element with style object', () => {
+		component App() {
+			let tag = track('span');
+
+			<@tag style={{ 
+				color: 'red', 
+				fontSize: '16px',
+				fontWeight: 'bold'
+			}}>
+				{'Styled dynamic element'}
+			</@tag>
+		}
+		render(App);
+
+		const element = container.querySelector('span');
+		expect(element).toBeTruthy();
+		expect(element.style.color).toBe('red');
+		expect(element.style.fontSize).toBe('16px');
+		expect(element.style.fontWeight).toBe('bold');
+	});
+	it('handles dynamic element with spread attributes', () => {
+		component App() {
+			let tag = track('section');
+			const attrs = {
+				id: 'spread-section',
+				'data-testid': 'spread-test',
+				class: 'spread-class',
+			};
+
+			<@tag {...attrs} data-extra="additional">
+				{'Element with spread attributes'}
+			</@tag>
+		}
+		render(App);
+
+		const element = container.querySelector('section');
+		expect(element).toBeTruthy();
+		expect(element.id).toBe('spread-section');
+		expect(element.getAttribute('data-testid')).toBe('spread-test');
+		expect(element.className).toBe('spread-class');
+		expect(element.getAttribute('data-extra')).toBe('additional');
+	});
+	it('handles dynamic element with ref', () => {
+		let capturedElement = null;
+
+		component App() {
+			let tag = track('article');
+
+			<@tag {ref (node) => { capturedElement = node; }} id="ref-test">
+				{'Element with ref'}
+			</@tag>
+		}
+		render(App);
+		flushSync();
+		expect(capturedElement).toBeTruthy();
+		expect(capturedElement.tagName).toBe('ARTICLE');
+		expect(capturedElement.id).toBe('ref-test');
+		expect(capturedElement.textContent).toBe('Element with ref');
+	});
+	it('handles dynamic element with createRefKey in spread', () => {
+		component App() {
+			let tag = track('header');
+
+			function elementRef(node) {
+				// Set an attribute on the element to prove ref was called
+				node.setAttribute('data-spread-ref-called', 'true');
+				node.setAttribute('data-spread-ref-tag', node.tagName.toLowerCase());
+			}
+
+			const dynamicProps = {
+				id: 'spread-ref-test',
+				class: 'ref-element',
+				[createRefKey()]: elementRef
+			};
+
+			<@tag {...dynamicProps}>{'Element with spread ref'}</@tag>
+		}
+		render(App);
+		flushSync();
+
+		// Check that the spread ref was called by verifying attributes were set
+		const element = container.querySelector('header');
+		expect(element).toBeTruthy();
+		expect(element.getAttribute('data-spread-ref-called')).toBe('true');
+		expect(element.getAttribute('data-spread-ref-tag')).toBe('header');
+		expect(element.id).toBe('spread-ref-test');
+		expect(element.className).toBe('ref-element');
+	});
+});