ripple 0.2.107 → 0.2.109

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

@@ -4,15 +4,15 @@ import { branch, create_try_block, destroy_block, is_destroyed, resume_block } f
 import { TRY_BLOCK } from './constants.js';
 import { next_sibling } from './operations.js';
 import {
-  active_block,
-  active_component,
-  active_reaction,
-  queue_microtask,
-  set_active_block,
-  set_active_component,
-  set_active_reaction,
-  set_tracking,
-  tracking,
+	active_block,
+	active_component,
+	active_reaction,
+	queue_microtask,
+	set_active_block,
+	set_active_component,
+	set_active_reaction,
+	set_tracking,
+	tracking,
 } from './runtime.js';
 
 /**
@@ -23,142 +23,144 @@ import {
  * @returns {void}
  */
 export function try_block(node, fn, catch_fn, pending_fn = null) {
-  var anchor = node;
-  /** @type {Block | null} */
-  var b = null;
-  /** @type {Block | null} */
-  var suspended = null;
-  var pending_count = 0;
-  /** @type {DocumentFragment | null} */
-  var offscreen_fragment = null;
-
-  /**
-   * @param {Block} block
-   * @param {DocumentFragment} fragment
-   * @returns {void}
-   */
-  function move_block(block, fragment) {
-    var state = block.s;
-    var node = state.start;
-    var end = state.end;
-
-    while (node !== null) {
-      var next = node === end ? null : next_sibling(node);
-
-      fragment.append(node);
-      node = next;
-    }
-  }
-
-  function handle_await() {
-    if (pending_count++ === 0) {
-      queue_microtask(() => {
-        if (b !== null) {
-          suspended = b;
-          offscreen_fragment = document.createDocumentFragment();
-          move_block(b, offscreen_fragment);
-
-          b = branch(() => {
-            /** @type {(anchor: Node) => void} */ (pending_fn)(anchor);
-          });
-        }
-      });
-    }
-
-    return () => {
-      if (--pending_count === 0) {
-        if (b !== null) {
-          destroy_block(b);
-        }
-        /** @type {ChildNode} */ (anchor).before(/** @type {DocumentFragment} */ (offscreen_fragment));
-        offscreen_fragment = null;
-        resume_block(/** @type {Block} */ (suspended));
-        b = suspended;
-        suspended = null;
-      }
-    };
-  }
-
-  /**
-   * @param {any} error
-   * @returns {void}
-   */
-  function handle_error(error) {
-    if (b !== null) {
-      destroy_block(b);
-    }
-
-    b = branch(() => {
-      /** @type {(anchor: Node, error: any) => void} */ (catch_fn)(anchor, error);
-    });
-  }
-
-  var state = {
-    a: pending_fn !== null ? handle_await : null,
-    c: catch_fn !== null ? handle_error : null,
-  };
-
-  create_try_block(() => {
-    b = branch(() => {
-      fn(anchor);
-    });
-  }, state);
+	var anchor = node;
+	/** @type {Block | null} */
+	var b = null;
+	/** @type {Block | null} */
+	var suspended = null;
+	var pending_count = 0;
+	/** @type {DocumentFragment | null} */
+	var offscreen_fragment = null;
+
+	/**
+	 * @param {Block} block
+	 * @param {DocumentFragment} fragment
+	 * @returns {void}
+	 */
+	function move_block(block, fragment) {
+		var state = block.s;
+		var node = state.start;
+		var end = state.end;
+
+		while (node !== null) {
+			var next = node === end ? null : next_sibling(node);
+
+			fragment.append(node);
+			node = next;
+		}
+	}
+
+	function handle_await() {
+		if (pending_count++ === 0) {
+			queue_microtask(() => {
+				if (b !== null) {
+					suspended = b;
+					offscreen_fragment = document.createDocumentFragment();
+					move_block(b, offscreen_fragment);
+
+					b = branch(() => {
+						/** @type {(anchor: Node) => void} */ (pending_fn)(anchor);
+					});
+				}
+			});
+		}
+
+		return () => {
+			if (--pending_count === 0) {
+				if (b !== null) {
+					destroy_block(b);
+				}
+				/** @type {ChildNode} */ (anchor).before(
+					/** @type {DocumentFragment} */ (offscreen_fragment),
+				);
+				offscreen_fragment = null;
+				resume_block(/** @type {Block} */ (suspended));
+				b = suspended;
+				suspended = null;
+			}
+		};
+	}
+
+	/**
+	 * @param {any} error
+	 * @returns {void}
+	 */
+	function handle_error(error) {
+		if (b !== null) {
+			destroy_block(b);
+		}
+
+		b = branch(() => {
+			/** @type {(anchor: Node, error: any) => void} */ (catch_fn)(anchor, error);
+		});
+	}
+
+	var state = {
+		a: pending_fn !== null ? handle_await : null,
+		c: catch_fn !== null ? handle_error : null,
+	};
+
+	create_try_block(() => {
+		b = branch(() => {
+			fn(anchor);
+		});
+	}, state);
 }
 
 /**
  * @returns {() => void}
  */
 export function suspend() {
-  var current = active_block;
+	var current = active_block;
 
-  while (current !== null) {
-    var state = current.s;
-    if ((current.f & TRY_BLOCK) !== 0 && state.a !== null) {
-      return state.a();
-    }
-    current = current.p;
-  }
+	while (current !== null) {
+		var state = current.s;
+		if ((current.f & TRY_BLOCK) !== 0 && state.a !== null) {
+			return state.a();
+		}
+		current = current.p;
+	}
 
-  throw new Error('Missing parent `try { ... } pending { ... }` statement');
+	throw new Error('Missing parent `try { ... } pending { ... }` statement');
 }
 
 /**
  * @returns {void}
  */
 function exit() {
-  set_tracking(false);
-  set_active_reaction(null);
-  set_active_block(null);
-  set_active_component(null);
+	set_tracking(false);
+	set_active_reaction(null);
+	set_active_block(null);
+	set_active_component(null);
 }
 
 /**
  * @returns {() => void}
  */
 export function capture() {
-  var previous_tracking = tracking;
-  var previous_block = active_block;
-  var previous_reaction = active_reaction;
-  var previous_component = active_component;
-
-  return () => {
-    set_tracking(previous_tracking);
-    set_active_block(previous_block);
-    set_active_reaction(previous_reaction);
-    set_active_component(previous_component);
-
-    queue_microtask(exit);
-  };
+	var previous_tracking = tracking;
+	var previous_block = active_block;
+	var previous_reaction = active_reaction;
+	var previous_component = active_component;
+
+	return () => {
+		set_tracking(previous_tracking);
+		set_active_block(previous_block);
+		set_active_reaction(previous_reaction);
+		set_active_component(previous_component);
+
+		queue_microtask(exit);
+	};
 }
 
 /**
  * @returns {boolean}
  */
 export function aborted() {
-  if (active_block === null) {
-    return true;
-  }
-  return is_destroyed(active_block);
+	if (active_block === null) {
+		return true;
+	}
+	return is_destroyed(active_block);
 }
 
 /**
@@ -167,11 +169,11 @@ export function aborted() {
  * @returns {Promise<() => T>}
  */
 export async function resume_context(promise) {
-  var restore = capture();
-  var value = await promise;
+	var restore = capture();
+	var value = await promise;
 
-  return () => {
-    restore();
-    return value;
-  };
+	return () => {
+		restore();
+		return value;
+	};
 }

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

@@ -30,9 +30,9 @@ export var array_prototype = Array.prototype;
  * @returns {Text}
  */
 export function create_anchor() {
-  var t = document.createTextNode('');
-  /** @type {any} */ (t).__t = '';
-  return t;
+	var t = document.createTextNode('');
+	/** @type {any} */ (t).__t = '';
+	return t;
 }
 
 /**
@@ -40,7 +40,7 @@ export function create_anchor() {
  * @returns {boolean}
  */
 export function is_positive_integer(value) {
-  return Number.isInteger(value) && /**@type {number} */ (value) >= 0;
+	return Number.isInteger(value) && /**@type {number} */ (value) >= 0;
 }
 
 /**
@@ -49,5 +49,5 @@ export function is_positive_integer(value) {
  * @returns {boolean}
  */
 export function is_tracked_object(v) {
-  return typeof v === 'object' && v !== null && typeof /** @type {any} */ (v).f === 'number';
+	return typeof v === 'object' && v !== null && typeof (/** @type {any} */ (v).f) === 'number';
 }

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