ripple 0.3.68 → 0.3.69

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

@@ -6,86 +6,87 @@ import { handle_root_events } from './events.js';
 import { create_text } from './operations.js';
 import { active_block } from './runtime.js';
 import { hydrating, hydrate_node, set_hydrating, set_hydrate_node } from './hydration.js';
-import { is_tsrx_element } from '../../element.js';
+import { is_tsrx_element, tsrx_element } from '../../element.js';
 
 /**
- * @param {any} _
  * @param {{ target: Element, children: import('../../element.js').TSRXElement }} props
- * @returns {void}
+ * @returns {import('../../element.js').TSRXElement}
  */
-export function Portal(_, props) {
-	// Portals are client-only and don't participate in hydration
-	// The compiler-generated code already handles getting the node via sibling()
-	var was_hydrating = hydrating;
-	var previous_hydrate_node = hydrate_node;
-
-	/** @type {Element | symbol} */
-	let target = UNINITIALIZED;
-	/** @type {import('../../element.js').TSRXElement | symbol} */
-	let children = UNINITIALIZED;
-	/** @type {Block | null} */
-	var b = null;
-	/** @type {Text | null} */
-	var anchor = null;
-	/** @type {Node | null} */
-	var dom_start = null;
-	/** @type {Node | null} */
-	var dom_end = null;
-
-	// Temporarily disable hydration for portal content
-	if (was_hydrating) {
-		set_hydrating(false);
-	}
-
-	try {
-		render(() => {
-			const next_target = props.target;
-			const next_children = props.children;
-
-			if (target === next_target && children === next_children) return;
-
-			target = next_target;
-			children = next_children;
-
-			if (b !== null) {
-				destroy_block(b);
-			}
-
-			if (anchor !== null) {
-				anchor.remove();
-			}
+export function Portal(props) {
+	return tsrx_element(function render_portal() {
+		// Portals are client-only and don't participate in hydration
+		// The compiler-generated code already handles getting the node via sibling()
+		var was_hydrating = hydrating;
+		var previous_hydrate_node = hydrate_node;
+
+		/** @type {Element | symbol} */
+		let target = UNINITIALIZED;
+		/** @type {import('../../element.js').TSRXElement | symbol} */
+		let children = UNINITIALIZED;
+		/** @type {Block | null} */
+		var b = null;
+		/** @type {Text | null} */
+		var anchor = null;
+		/** @type {Node | null} */
+		var dom_start = null;
+		/** @type {Node | null} */
+		var dom_end = null;
+
+		// Temporarily disable hydration for portal content
+		if (was_hydrating) {
+			set_hydrating(false);
+		}
 
-			dom_start = dom_end = null;
+		try {
+			render(() => {
+				const next_target = props.target;
+				const next_children = props.children;
 
-			anchor = create_text();
-			/** @type {Element} */ (target).append(anchor);
+				if (target === next_target && children === next_children) return;
 
-			const cleanup_events = handle_root_events(/** @type {Element} */ (target));
+				target = next_target;
+				children = next_children;
 
-			var block = /** @type {Block} */ (active_block);
+				if (b !== null) {
+					destroy_block(b);
+				}
 
-			b = branch(() => {
-				if (is_tsrx_element(children)) {
-					children.render(/** @type {Text} */ (anchor), block);
+				if (anchor !== null) {
+					anchor.remove();
 				}
-			});
 
-			dom_start = b?.s?.start;
-			dom_end = b?.s?.end;
+				dom_start = dom_end = null;
 
-			return () => {
-				cleanup_events();
-				/** @type {Text} */ (anchor).remove();
-				if (dom_start && dom_end) {
-					remove_block_dom(dom_start, dom_end);
-				}
-			};
-		});
-	} finally {
-		// Restore hydration state
-		if (was_hydrating) {
-			set_hydrating(true);
-			set_hydrate_node(/** @type {any} */ (previous_hydrate_node));
+				anchor = create_text();
+				/** @type {Element} */ (target).append(anchor);
+
+				const cleanup_events = handle_root_events(/** @type {Element} */ (target));
+
+				var block = /** @type {Block} */ (active_block);
+
+				b = branch(() => {
+					if (is_tsrx_element(children)) {
+						children.render(/** @type {Text} */ (anchor), block);
+					}
+				});
+
+				dom_start = b?.s?.start;
+				dom_end = b?.s?.end;
+
+				return () => {
+					cleanup_events();
+					/** @type {Text} */ (anchor).remove();
+					if (dom_start && dom_end) {
+						remove_block_dom(dom_start, dom_end);
+					}
+				};
+			});
+		} finally {
+			// Restore hydration state
+			if (was_hydrating) {
+				set_hydrating(true);
+				set_hydrate_node(/** @type {any} */ (previous_hydrate_node));
+			}
 		}
-	}
+	});
 }

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

@@ -134,6 +134,9 @@ function set_attribute_helper(element, key, value, remove_listeners, prev) {
 	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 === 'innerHTML') {
+		element.removeAttribute('innerhtml');
+		/** @type {HTMLElement} */ (element).innerHTML = value == null ? '' : String(value);
 	} else if (key === 'style') {
 		set_style(element, value, prev.style);
 	} else if (key === '#class') {

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

@@ -64,7 +64,7 @@ export { simple_hash, strong_hash } from '@tsrx/core/runtime/hash';
 export { context } from './context.js';
 export { try_block, component_block, regular_block } from './blocks.js';
 export { array_slice };
-export { tsrx_element, normalize_children };
+export { is_tsrx_element, tsrx_element, normalize_children };
 export { create_ref_prop };
 
 /** @extends Error */
@@ -96,7 +96,7 @@ function render_tsrx_collection(value) {
 		var item = value[i];
 
 		if (is_tsrx_element(item)) {
-			item.render({});
+			render_tsrx_element(item);
 		} else if (is_array(item)) {
 			render_tsrx_collection(item);
 		} else if (item != null) {
@@ -105,6 +105,22 @@ function render_tsrx_collection(value) {
 	}
 }
 
+/**
+ * @param {import('../../element.js').TSRXElement} value
+ * @returns {void}
+ */
+export function render_tsrx_element(value) {
+	const result = value.render({});
+
+	if (is_tsrx_element(result)) {
+		render_tsrx_element(result);
+	} else if (is_array(result)) {
+		render_tsrx_collection(result);
+	} else if (result != null) {
+		output_push(escape(result));
+	}
+}
+
 /**
  * @param {any} value
  * @returns {void}
@@ -113,7 +129,7 @@ export function render_expression(value) {
 	output_push(BLOCK_OPEN);
 
 	if (is_tsrx_element(value)) {
-		value.render({});
+		render_tsrx_element(value);
 	} else if (is_array(value)) {
 		render_tsrx_collection(value);
 	} else {
@@ -123,6 +139,50 @@ export function render_expression(value) {
 	output_push(BLOCK_CLOSE);
 }
 
+/**
+ * @param {Function} fn
+ * @param {Props} props
+ * @returns {void}
+ */
+export function render_component(fn, props) {
+	if (typeof fn !== 'function' || is_tsrx_element(fn)) {
+		throw_invalid_component_type(fn);
+	}
+
+	run_component(fn, props);
+}
+
+/**
+ * @param {Function} fn
+ * @param {Props} props
+ * @returns {void}
+ */
+function run_component(fn, props) {
+	push_component();
+	try {
+		const value = fn(props);
+		if (is_tsrx_element(value)) {
+			render_tsrx_element(value);
+		} else {
+			render_expression(value);
+		}
+	} finally {
+		pop_component();
+	}
+}
+
+/**
+ * @param {any} value
+ * @returns {never}
+ */
+function throw_invalid_component_type(value) {
+	if (is_tsrx_element(value)) {
+		throw new TypeError('Invalid component type: received a TSRXElement value.');
+	}
+
+	throw new TypeError('Invalid component type: expected a component function.');
+}
+
 /**
  * @returns {Stream}
  */
@@ -532,7 +592,7 @@ export class Output {
 			// and append them into the head immediately
 			return;
 		}
-		this.#css.add(hash);
+		this.#root.#css.add(hash);
 	}
 
 	/**
@@ -685,7 +745,7 @@ export async function render(component, passed_in_options = {}) {
 			if (options.stream) {
 				output._setStream(options.stream);
 			}
-			component({});
+			render_component(component, {});
 			output._decrementPending();
 			output._finishSyncRun();
 
@@ -711,14 +771,14 @@ export async function render(component, passed_in_options = {}) {
 				output._finishSyncRun();
 			}
 			if (options.rootBoundary?.catch) {
-				options.rootBoundary.catch({ error, reset: noop });
+				render_component(options.rootBoundary.catch, { error, reset: noop });
 			} else {
 				console.error(error);
 			}
 		},
 		() => {
 			if (options.rootBoundary?.pending) {
-				options.rootBoundary.pending({});
+				render_component(options.rootBoundary.pending, {});
 			}
 		},
 	);
@@ -1193,7 +1253,13 @@ export function spread_attrs(attrs, css_hash) {
 	for (name in attrs) {
 		var value = attrs[name];
 
-		if (name === 'children' || typeof value === 'function' || is_tsrx_element(value)) continue;
+		if (
+			name === 'children' ||
+			name === 'innerHTML' ||
+			typeof value === 'function' ||
+			is_tsrx_element(value)
+		)
+			continue;
 
 		if (is_ripple_object(value)) {
 			value = get(value);
@@ -1209,6 +1275,24 @@ export function spread_attrs(attrs, css_hash) {
 	return attr_str;
 }
 
+/**
+ * @param {Record<string, any>} attrs
+ * @returns {string | undefined}
+ */
+export function spread_inner_html(attrs) {
+	if (!Object.prototype.hasOwnProperty.call(attrs, 'innerHTML')) {
+		return undefined;
+	}
+
+	var value = attrs.innerHTML;
+
+	if (is_ripple_object(value)) {
+		value = get(value);
+	}
+
+	return String(value ?? '');
+}
+
 var empty_get_set = { get: undefined, set: undefined };
 
 class TrackedValue {

package/tests/client/__snapshots__/html.test.tsrx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`html directive > renders dynamic html 1`] = `
+exports[`Fragment innerHTML > renders dynamic innerHTML fragments 1`] = `
 <div>
   <!---->
   <div>
@@ -14,7 +14,7 @@ exports[`html directive > renders dynamic html 1`] = `
 </div>
 `;
 
-exports[`html directive > renders dynamic html 2`] = `
+exports[`Fragment innerHTML > renders dynamic innerHTML fragments 2`] = `
 <div>
   <!---->
   <div>
@@ -28,7 +28,7 @@ exports[`html directive > renders dynamic html 2`] = `
 </div>
 `;
 
-exports[`html directive > renders static html 1`] = `
+exports[`Fragment innerHTML > renders static innerHTML fragments 1`] = `
 <div>
   <!---->
   <div>

package/tests/client/array/array.copy-within.test.tsrx

@@ -2,18 +2,19 @@ import { RippleArray, flushSync, track } from 'ripple';
 
 describe('RippleArray copyWithin', () => {
 	it('handles copyWithin operation with reactivity', () => {
-		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4, 5);
-			let &[firstItem] = track(() => items[0]);
-			let &[thirdItem] = track(() => items[2]);
-			let &[fourthItem] = track(() => items[3]);
-
-			<button onClick={() => items.copyWithin(0, 3)}>{'copy end to start'}</button>
-			<button onClick={() => items.copyWithin(2, 0, 2)}>{'copy start to middle'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{firstItem}</pre>
-			<pre>{thirdItem}</pre>
-			<pre>{fourthItem}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(1, 2, 3, 4, 5);
+				let &[firstItem] = track(() => items[0]);
+				let &[thirdItem] = track(() => items[2]);
+				let &[fourthItem] = track(() => items[3]);
+				<button onClick={() => items.copyWithin(0, 3)}>{'copy end to start'}</button>
+				<button onClick={() => items.copyWithin(2, 0, 2)}>{'copy start to middle'}</button>
+				<pre>{JSON.stringify(items)}</pre>
+				<pre>{firstItem}</pre>
+				<pre>{thirdItem}</pre>
+				<pre>{fourthItem}</pre>
+			</>;
 		}
 
 		render(ArrayTest);
@@ -47,15 +48,16 @@ describe('RippleArray copyWithin', () => {
 	});
 
 	it('handles copyWithin with negative indexes and reactivity', () => {
-		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4, 5);
-			let &[secondItem] = track(() => items[1]);
-			let &[thirdItem] = track(() => items[2]);
-
-			<button onClick={() => items.copyWithin(-4, -2)}>{'copy with negative indexes'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{secondItem}</pre>
-			<pre>{thirdItem}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(1, 2, 3, 4, 5);
+				let &[secondItem] = track(() => items[1]);
+				let &[thirdItem] = track(() => items[2]);
+				<button onClick={() => items.copyWithin(-4, -2)}>{'copy with negative indexes'}</button>
+				<pre>{JSON.stringify(items)}</pre>
+				<pre>{secondItem}</pre>
+				<pre>{thirdItem}</pre>
+			</>;
 		}
 
 		render(ArrayTest);
@@ -78,16 +80,16 @@ describe('RippleArray copyWithin', () => {
 	});
 
 	it('handles copyWithin with overlapping ranges', () => {
-		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4, 5);
-			let &[entries] = track(() => Array.from(items.entries()));
-
-			<button onClick={() => items.copyWithin(2, 1, 4)}>{'copy with overlap'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-
-			for (const [i, value] of entries) {
-				<pre>{`items[${i}]: ${value}`}</pre>
-			}
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(1, 2, 3, 4, 5);
+				let &[entries] = track(() => Array.from(items.entries()));
+				<button onClick={() => items.copyWithin(2, 1, 4)}>{'copy with overlap'}</button>
+				<pre>{JSON.stringify(items)}</pre>
+				for (const [i, value] of entries) {
+					<pre>{`items[${i}]: ${value}`}</pre>
+				}
+			</>;
 		}
 
 		render(ArrayTest);