ripple 0.2.108 → 0.2.110

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

@@ -1,4 +1,4 @@
-/** @import { Block } from '#client' */
+/** @import { Block, Tracked } from '#client' */
 
 import { IS_CONTROLLED, IS_INDEXED } from '../../../constants.js';
 import { branch, destroy_block, destroy_block_children, render } from './blocks.js';
@@ -12,31 +12,45 @@ import { array_from, is_array } from './utils.js';
  * @param {Node} anchor
  * @param {V} value
  * @param {number} index
- * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {boolean} is_indexed
+ * @param {boolean} is_keyed
  * @returns {Block}
  */
-function create_item(anchor, value, index, render_fn, is_indexed) {
+function create_item(anchor, value, index, render_fn, is_indexed, is_keyed) {
 	var b = branch(() => {
 		var tracked_index;
+		/** @type {V | Tracked} */
+		var tracked_value = value;
 
-		if (is_indexed) {
+		if (is_indexed || is_keyed) {
 			var block = /** @type {Block} */ (active_block);
 
 			if (block.s === null) {
-				tracked_index = tracked(index, block);
+				if (is_indexed) {
+					tracked_index = tracked(index, block);
+				}
+				if (is_keyed) {
+					tracked_value = tracked(value, block);
+				}
 
 				block.s = {
 					start: null,
 					end: null,
 					i: tracked_index,
+					v: tracked_value,
 				};
 			} else {
-				tracked_index = block.s.i;
+				if (is_indexed) {
+					tracked_index = block.s.i;
+				}
+				if (is_keyed) {
+					tracked_index = block.s.v;
+				}
 			}
-			render_fn(anchor, value, tracked_index);
+			render_fn(anchor, tracked_value, tracked_index);
 		} else {
-			render_fn(anchor, value);
+			render_fn(anchor, tracked_value);
 		}
 	});
 	return b;
@@ -87,7 +101,7 @@ function collection_to_array(collection) {
  * @template V
  * @param {Element} node
  * @param {() => V[] | Iterable<V>} get_collection
- * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {number} flags
  * @returns {void}
  */
@@ -116,7 +130,7 @@ export function for_block(node, get_collection, render_fn, flags) {
  * @template K
  * @param {Element} node
  * @param {() => V[] | Iterable<V>} get_collection
- * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {number} flags
  * @param {(item: V) => K} [get_key]
  * @returns {void}
@@ -175,13 +189,22 @@ function update_index(block, index) {
 	set(block.s.i, index, block);
 }
 
+/**
+ * @param {Block} block
+ * @param {any} value
+ * @returns {void}
+ */
+function update_value(block, value) {
+	set(block.s.v, value, block);
+}
+
 /**
  * @template V
  * @template K
  * @param {Element | Text} anchor
  * @param {Block} block
  * @param {V[]} b
- * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {boolean} is_controlled
  * @param {boolean} is_indexed
  * @param {(item: V) => K} get_key
@@ -236,7 +259,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 	// Fast-path for create
 	if (a_length === 0) {
 		for (; j < b_length; j++) {
-			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed);
+			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed, true);
 		}
 		state.array = b;
 		state.blocks = b_blocks;
@@ -261,6 +284,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 			if (is_indexed) {
 				update_index(b_block, j);
 			}
+			update_value(b_block, b_val);
 			++j;
 			if (j > a_end || j > b_end) {
 				break outer;
@@ -282,6 +306,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 			if (is_indexed) {
 				update_index(b_block, b_end);
 			}
+			update_value(b_block, b_val);
 			a_end--;
 			b_end--;
 			if (j > a_end || j > b_end) {
@@ -301,7 +326,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 			while (j <= b_end) {
 				b_val = b[j];
 				var target = j >= a_length ? anchor : a_blocks[j].s.start;
-				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed);
+				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed, true);
 				j++;
 			}
 		}
@@ -348,6 +373,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 							if (is_indexed) {
 								update_index(b_block, j);
 							}
+							update_value(b_block, b_val);
 							++patched;
 							break;
 						}
@@ -387,9 +413,11 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 							pos = j;
 						}
 						block = b_blocks[j] = a_blocks[i];
+						b_val = b[j];
 						if (is_indexed) {
 							update_index(block, j);
 						}
+						update_value(b_block, b_val);
 						++patched;
 					} else if (!fast_path_removal) {
 						destroy_block(a_blocks[i]);
@@ -417,7 +445,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 				next_pos = pos + 1;
 
 				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed);
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
 				b_val = b[pos];
@@ -437,7 +465,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 				next_pos = pos + 1;
 
 				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed);
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true);
 			}
 		}
 	}
@@ -452,7 +480,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
  * @param {Element | Text} anchor
  * @param {Block} block
  * @param {V[]} b
- * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {boolean} is_controlled
  * @param {boolean} is_indexed
  * @returns {void}
@@ -505,7 +533,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 	// Fast-path for create
 	if (a_length === 0) {
 		for (; j < b_length; j++) {
-			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed);
+			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed, false);
 		}
 		state.array = b;
 		state.blocks = b_blocks;
@@ -560,7 +588,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 			while (j <= b_end) {
 				b_val = b[j];
 				var target = j >= a_length ? anchor : a_blocks[j].s.start;
-				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed);
+				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed, false);
 				j++;
 			}
 		}
@@ -673,7 +701,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 				next_pos = pos + 1;
 
 				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed);
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, false);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
 				b_val = b[pos];
@@ -693,7 +721,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 				next_pos = pos + 1;
 
 				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed);
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, false);
 			}
 		}
 	}

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

@@ -70,3 +70,5 @@ export { head } from './head.js';
 export { script } from './script.js';
 
 export { html } from './html.js';
+
+export { rpc } from './rpc.js';

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/src/runtime/internal/client/rpc.js

@@ -0,0 +1,14 @@
+
+/**
+ * @param {string} hash 
+ * @param {any[]} args 
+ */
+export function rpc(hash, args) {
+  return fetch('/_$_ripple_rpc_$_/' + hash, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(args)
+  }).then(res => res.json());
+}

package/src/utils/builders.js

@@ -220,6 +220,17 @@ export function export_default(declaration) {
   return { type: 'ExportDefaultDeclaration', declaration };
 }
 
+/**
+ * @param {ESTree.Declaration | null} declaration
+ * @param {ESTree.ExportSpecifier[]} [specifiers]
+ * @param {ESTree.ImportAttribute[]} [attributes]
+ * @param {ESTree.Literal | null} [source]
+ * @returns {ESTree.ExportNamedDeclaration}
+ */
+export function export_builder(declaration, specifiers = [], attributes = [], source = null) {
+  return { type: 'ExportNamedDeclaration', declaration, specifiers, attributes, source };
+}
+
 /**
  * @param {ESTree.Identifier} id
  * @param {ESTree.Pattern[]} params
@@ -581,16 +592,17 @@ export function method(kind, key, params, body, computed = false, is_static = fa
  * @param {ESTree.Identifier | null} id
  * @param {ESTree.Pattern[]} params
  * @param {ESTree.BlockStatement} body
+ * @param {boolean} async
  * @returns {ESTree.FunctionExpression}
  */
-function function_builder(id, params, body) {
+function function_builder(id, params, body, async = false) {
   return {
     type: 'FunctionExpression',
     id,
     params,
     body,
     generator: false,
-    async: false,
+    async,
     metadata: /** @type {any} */ (null), // should not be used by codegen
   };
 }
@@ -812,6 +824,7 @@ export {
   let_builder as let,
   const_builder as const,
   var_builder as var,
+  export_builder as export,
   true_instance as true,
   false_instance as false,
   break_statement as break,

package/tests/client/__snapshots__/compiler.test.ripple.snap

@@ -1,5 +1,18 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`compiler success tests > compiles TSInstantiationExpression 1`] = `
+"import * as _$_ from 'ripple/internal/client';
+
+function makeBox(value) {
+	return { value };
+}
+
+const makeStringBox = (makeBox);
+const stringBox = makeStringBox('abc');
+const ErrorMap = (Map);
+const errorMap = new ErrorMap();"
+`;
+
 exports[`compiler success tests > compiles tracked values in effect with assignment expression 1`] = `"state.count = _$_.get(count);"`;
 
 exports[`compiler success tests > compiles tracked values in effect with update expressions 1`] = `

package/tests/client/__snapshots__/for.test.ripple.snap

@@ -198,7 +198,7 @@ exports[`for statements > correctly handles the index in a for...of loop 3`] = `
 </div>
 `;
 
-exports[`for statements > handles reversing an array manually 1`] = `
+exports[`for statements > handles updating with new objects with same key 1`] = `
 <div>
   <!---->
   <div>
@@ -218,17 +218,17 @@ exports[`for statements > handles reversing an array manually 1`] = `
 </div>
 `;
 
-exports[`for statements > handles reversing an array manually 2`] = `
+exports[`for statements > handles updating with new objects with same key 2`] = `
 <div>
   <!---->
   <div>
-    0:Item 3
+    0:Item 1!
   </div>
   <div>
-    1:Item 2
+    1:Item 2!
   </div>
   <div>
-    2:Item 1
+    2:Item 3!
   </div>
   <!---->
   <button>

package/tests/client/compiler.test.ripple

@@ -495,4 +495,19 @@ effect(() => {
 		const effectMatch = result.js.code.match(/effect\(\(\) => \{([\s\S]+?)\n\t\}\)\)/);
 		expect(effectMatch[1].trim()).toMatchSnapshot();
 	});
+
+	it('compiles TSInstantiationExpression', () => {
+		const source =
+`function makeBox<T>(value: T) {
+	return { value };
+}
+const makeStringBox = makeBox<string>;
+const stringBox = makeStringBox('abc');
+const ErrorMap = Map<string, Error>;
+const errorMap = new ErrorMap();`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+
+		expect(result.js.code).toMatchSnapshot();
+	});
 });

package/tests/client/composite.test.ripple

@@ -659,4 +659,35 @@ describe('composite components', () => {
 
 		expect(container.querySelector('#container').textContent).toBe('I am child 1');
 	});
+
+	it('mutating a tracked value prop should work as intended', () => {
+		const logs = [];
+
+		component Counter({count}) {
+			effect(() => {
+				logs.push(@count);
+			})
+			
+			<button onClick={() => @count = @count + 1}>{'+'}</button>
+		} 
+
+		component App() {
+			const count = track(0);
+
+			<div>
+				<Counter count={count} />
+			</div>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(logs).toEqual([0]);
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(logs).toEqual([0, 1]);
+	})
 });

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');
+	});
+});