ripple 0.3.68 → 0.3.70

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # ripple
 
+## 0.3.70
+
+### Patch Changes
+
+- Updated dependencies
+  [[`5c0b0ff`](https://github.com/Ripple-TS/ripple/commit/5c0b0ff031ddfb319bb048d627e2d2a2a49c1f1d)]:
+  - @tsrx/core@0.1.18
+  - @tsrx/ripple@0.1.18
+
+## 0.3.69
+
+### Patch Changes
+
+- [#1177](https://github.com/Ripple-TS/ripple/pull/1177)
+  [`054bd1e`](https://github.com/Ripple-TS/ripple/commit/054bd1e75347e395f6c096f8e293d1baf8e03549)
+  Thanks [@trueadm](https://github.com/trueadm)! - Parse tags and bare fragments
+  as native TSRX by default, remove `component` keyword parsing, and
+  compile/format/lint function components that return native TSRX across the
+  React, Preact, Solid, Vue, and Ripple targets. Ripple component compilation now
+  only renders TSRX reachable from returned values and supports string and `null`
+  component returns.
+
+  Ripple now also preserves directly called PascalCase helpers as ordinary
+  functions while still compiling renderable component functions used as
+  components or render entries.
+
+  The old explicit TSRX wrapper tag is no longer special; TSRX elements and
+  fragments are the default expression syntax, and the tag name is treated like
+  any ordinary element name.
+
+  Ripple now exports a typed `Fragment` helper from its public runtimes and
+  supports `innerHTML` on both host elements and `Fragment`. Ripple also treats
+  `innerHTML` from element spreads as rendered content instead of serializing it
+  as an `innerhtml` attribute.
+
+  The `{html ...}` template directive has been removed. Use each target's native
+  raw HTML prop instead, such as `innerHTML` for Ripple/Solid/Vue or
+  `dangerouslySetInnerHTML` for React/Preact.
+
+  The `{text ...}` template directive has also been removed. Text values now use
+  ordinary `{expr}` containers, with explicit coercion written as JavaScript
+  (`String(value)`, `value + ''`, or a typed string value). Ripple optimizes
+  clearly string-shaped expressions and typed string props into text-node updates
+  without requiring a TSRX-specific directive.
+
+- [#1177](https://github.com/Ripple-TS/ripple/pull/1177)
+  [`054bd1e`](https://github.com/Ripple-TS/ripple/commit/054bd1e75347e395f6c096f8e293d1baf8e03549)
+  Thanks [@trueadm](https://github.com/trueadm)! - Compile native TSRX functions
+  as value-producing functions and route component syntax through runtime
+  component helpers.
+
+- Updated dependencies
+  [[`054bd1e`](https://github.com/Ripple-TS/ripple/commit/054bd1e75347e395f6c096f8e293d1baf8e03549),
+  [`054bd1e`](https://github.com/Ripple-TS/ripple/commit/054bd1e75347e395f6c096f8e293d1baf8e03549)]:
+  - @tsrx/core@0.1.17
+  - @tsrx/ripple@0.1.17
+
 ## 0.3.68
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.68",
+  "version": "0.3.70",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -74,8 +74,8 @@
     "clsx": "^2.1.1",
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "0.1.16",
-    "@tsrx/ripple": "0.1.16"
+    "@tsrx/core": "0.1.18",
+    "@tsrx/ripple": "0.1.18"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/jsx-runtime.d.ts

@@ -1,4 +1,4 @@
-import type { AddEventObject, RefKey, TSRXElement } from '#public';
+import type { AddEventObject, FragmentProps, RefKey, TSRXElement } from '#public';
 import type { Nullable } from '#helpers';
 
 /**
@@ -40,7 +40,7 @@ export function jsxs(
  * JSX Fragment component
  * Ripple fragments are renderable expression values.
  */
-export function Fragment(props: { children?: any }): TSRXElement;
+export function Fragment(props: FragmentProps): TSRXElement;
 
 export type ClassValue = string | import('clsx').ClassArray | import('clsx').ClassDictionary;
 

package/src/runtime/element.js

@@ -35,5 +35,5 @@ export function normalize_children(value) {
 		return value;
 	}
 
-	return tsrx_element(value);
+	return tsrx_element(() => value({}));
 }

package/src/runtime/index-client.js

@@ -1,4 +1,4 @@
-/** @import { Block, CompatOptions, RootBoundaryOptions } from '#client' */
+/** @import { CompatOptions, RootBoundaryOptions } from '#client' */
 
 import { destroy_block, root } from './internal/client/blocks.js';
 import { handle_root_events } from './internal/client/events.js';
@@ -7,7 +7,7 @@ import {
 	get_next_sibling,
 	init_operations,
 } from './internal/client/operations.js';
-import { active_block } from './internal/client/runtime.js';
+import { render_component } from './internal/client/component.js';
 import { create_anchor } from './internal/client/utils.js';
 import { try_block } from './internal/client/try.js';
 import { remove_ssr_css } from './internal/client/css.js';
@@ -39,34 +39,34 @@ function get_default_compat() {
 
 /**
  * @param {Node} anchor
- * @param {(anchor: Node) => void} render_component
+ * @param {(anchor: Node) => void} render_content
  * @param {RootBoundaryOptions | undefined} boundary
  * @returns {void}
  */
-function render_root_boundary(anchor, render_component, boundary) {
+function render_root_boundary(anchor, render_content, boundary) {
 	const Pending = boundary?.pending;
 	const Catch = boundary?.catch;
 
 	try_block(
 		anchor,
 		(component_anchor) => {
-			render_component(component_anchor);
+			render_content(component_anchor);
 		},
 		Catch
 			? (catch_anchor, error, reset) => {
-					Catch(catch_anchor, { error, reset: reset ?? (() => {}) }, active_block);
+					render_component(Catch, catch_anchor, { error, reset: reset ?? (() => {}) });
 				}
 			: null,
 		(pending_anchor) => {
 			if (Pending) {
-				Pending(pending_anchor, {}, active_block);
+				render_component(Pending, pending_anchor, {});
 			}
 		},
 	);
 }
 
 /**
- * @param {(anchor: Node, props: Record<string, any>, active_block: Block | null) => void} component
+ * @param {Function} component
  * @param {{ props?: Record<string, any>, target: HTMLElement, rootBoundary?: RootBoundaryOptions }} options
  * @returns {() => void}
  */
@@ -92,7 +92,7 @@ export function mount(component, options) {
 		render_root_boundary(
 			anchor,
 			(component_anchor) => {
-				component(component_anchor, props, active_block);
+				render_component(component, component_anchor, props);
 			},
 			options.rootBoundary,
 		);
@@ -105,7 +105,7 @@ export function mount(component, options) {
 }
 
 /**
- * @param {(anchor: Node, props: Record<string, any>, active_block: Block | null) => void} component
+ * @param {Function} component
  * @param {{ props?: Record<string, any>, target: HTMLElement, rootBoundary?: RootBoundaryOptions }} options
  * @returns {() => void}
  */
@@ -138,7 +138,7 @@ export function hydrate(component, options) {
 			render_root_boundary(
 				/** @type {Comment} */ (anchor),
 				(component_anchor) => {
-					component(component_anchor, props, active_block);
+					render_component(component, component_anchor, props);
 				},
 				options.rootBoundary,
 			);

package/src/runtime/index-server.js

@@ -1,5 +1,6 @@
-import { output_push, noop } from './internal/server/index.js';
+import { output_push, noop, tsrx_element } from './internal/server/index.js';
 
+export { Fragment } from '../jsx-runtime.js';
 export { Context } from './internal/server/context.js';
 export {
 	untrack,
@@ -73,7 +74,9 @@ export const bindOffsetHeight = noop;
  * However, we need to output a marker comment so hydration can work correctly.
  */
 export function Portal() {
-	// Portals are client-only, but we need to output a marker for hydration
-	// Output an empty HTML comment as a placeholder
-	output_push('<!--portal-->');
+	return tsrx_element(function render_portal() {
+		// Portals are client-only, but we need to output a marker for hydration
+		// Output an empty HTML comment as a placeholder
+		output_push('<!--portal-->');
+	});
 }

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

@@ -717,7 +717,7 @@ export function bindFiles(maybe_tracked, set_func = undefined) {
 }
 
 /**
- * Syntactic sugar for binding a HTMLElement with {ref fn}
+ * Syntactic sugar for binding a HTMLElement with ref={fn}
  * @param {unknown} maybe_tracked
  * @param {SetFunction | undefined} set_func
  * @returns {(node: HTMLElement) => void}

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

@@ -18,6 +18,7 @@ import {
 } from './constants.js';
 import { next_sibling } from './operations.js';
 import { apply_element_spread } from './render.js';
+import { is_array } from '@tsrx/core/runtime/language-helpers';
 import {
 	active_block,
 	active_component,
@@ -99,18 +100,19 @@ export function branch(fn, flags = 0, state = null) {
 }
 
 /**
- * Wire up a `{ref expr}` attribute. `expr` may be:
+ * Wire up a `ref={expr}` attribute. `expr` may be:
  *   - a callback function — invoked with the element on mount; if it returns
  *     a function, that function runs as the cleanup on unmount.
  *   - a `Tracked` (e.g. from `track()`) — `tracked.value` is set to the
  *     element on mount and reset to `null` on unmount.
  *   - a plain mutable var (`let foo;`) — the element is assigned to the
  *     variable on mount and reset to `null` on unmount.
+ *   - an array of any of the above.
  *
  * `get_fn` is invoked through `untrack` so the surrounding render block
  * doesn't subscribe to whatever the thunk happens to read. The supported
- * shape is to pass the ref slot itself (`{ref tracker}`); a foot-gun like
- * `{ref tracker.value}` would otherwise read the cell reactively and cause
+ * shape is to pass the ref slot itself (`ref={tracker}`); a foot-gun like
+ * `ref={tracker.value}` would otherwise read the cell reactively and cause
  * spurious re-runs.
  *
  * @param {Element} element
@@ -134,7 +136,14 @@ export function ref(element, get_fn, set_fn) {
 				e = null;
 			}
 
-			if (typeof ref_value === 'function') {
+			if (is_array(ref_value)) {
+				e = branch(() => {
+					for (var i = 0; i < ref_value.length; i++) {
+						let current = ref_value[i];
+						ref(element, () => current);
+					}
+				});
+			} else if (typeof ref_value === 'function') {
 				e = branch(() => {
 					effect(() => ref_value(element));
 				});

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

@@ -0,0 +1,55 @@
+/** @import { Block } from '#client' */
+
+import { is_tsrx_element } from '../../element.js';
+import { render_value } from './expression.js';
+import { active_block, pop_component, push_component } from './runtime.js';
+
+/**
+ * @param {Function} fn
+ * @param {Node} anchor
+ * @param {Record<string, any>} props
+ * @param {Block | null} [block=active_block]
+ * @returns {void}
+ */
+export function render_component(fn, anchor, props, block = active_block) {
+	if (typeof fn !== 'function' || is_tsrx_element(fn)) {
+		throw_invalid_component_type(fn);
+	}
+
+	run_component(fn, anchor, props, block);
+}
+
+/**
+ * @param {Function} fn
+ * @param {Node} anchor
+ * @param {Record<string, any>} props
+ * @param {Block | null} [block=active_block]
+ * @returns {void}
+ */
+function run_component(fn, anchor, props, block = active_block) {
+	push_component();
+	render_value(fn(props), /** @type {ChildNode} */ (anchor), block);
+	pop_component();
+}
+
+/**
+ * @param {import('../../element.js').TSRXElement} value
+ * @param {Node} anchor
+ * @param {Block | null} [block=active_block]
+ * @returns {void}
+ */
+export function render_tsrx_element(value, anchor, block = active_block) {
+	render_value(value, /** @type {ChildNode} */ (anchor), block);
+}
+
+/**
+ * @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.');
+}

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

@@ -6,6 +6,7 @@ import { hydrate_next, hydrating } from './hydration.js';
 import { active_block, active_namespace, get, with_ns } from './runtime.js';
 import { top_element_to_ns } from './utils.js';
 import { is_tsrx_element } from '../../element.js';
+import { render_component } from './component.js';
 
 /**
  * @typedef {((anchor: Node, props: Record<string, any>, block: Block | null) => void)} ComponentFunction
@@ -41,9 +42,10 @@ export function composite(get_component, node, props) {
 			if (typeof component === 'function') {
 				// Handle as regular component
 				b = branch(() => {
-					var block = active_block;
-					/** @type {ComponentFunction} */ (component)(anchor, props, block);
+					render_component(component, anchor, props);
 				});
+			} else if (is_tsrx_element(component)) {
+				throw new TypeError('Invalid component type: received a TSRXElement value.');
 			} else if (component != null) {
 				// Custom element - only create if component is not null/undefined
 				const ns = top_element_to_ns(component, active_namespace);

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

@@ -25,10 +25,29 @@ function find_enclosing_branch(block) {
 	return null;
 }
 
+/**
+ * @param {any} value
+ * @param {ChildNode} anchor
+ * @param {Block | null} block
+ * @returns {void}
+ */
+export function render_value(value, anchor, block) {
+	if (is_tsrx_element(value)) {
+		render_tsrx_element(value, anchor, block);
+	} else if (is_array(value)) {
+		render_tsrx_collection(value, anchor, block);
+	} else if (value != null) {
+		var text = value + '';
+		if (text !== '') {
+			render_tsrx_collection_text(text, anchor, true);
+		}
+	}
+}
+
 /**
  * @param {any[]} value
  * @param {ChildNode} anchor
- * @param {Block} block
+ * @param {Block | null} block
  * @returns {void}
  */
 function render_tsrx_collection(value, anchor, block) {
@@ -49,7 +68,7 @@ function render_tsrx_collection(value, anchor, block) {
 /**
  * @param {any[]} value
  * @param {ChildNode} anchor
- * @param {Block} block
+ * @param {Block | null} block
  * @returns {void}
  */
 function render_tsrx_collection_items(value, anchor, block) {
@@ -57,7 +76,7 @@ function render_tsrx_collection_items(value, anchor, block) {
 		var item = value[i];
 
 		if (is_tsrx_element(item)) {
-			item.render(anchor, block);
+			render_tsrx_element(item, anchor, block);
 		} else if (is_array(item)) {
 			render_tsrx_collection_items(item, anchor, block);
 		} else if (item != null) {
@@ -66,19 +85,46 @@ function render_tsrx_collection_items(value, anchor, block) {
 	}
 }
 
+/**
+ * @param {import('../../element.js').TSRXElement} value
+ * @param {ChildNode} anchor
+ * @param {Block | null} block
+ * @returns {void}
+ */
+function render_tsrx_element(value, anchor, block) {
+	var result = value.render(anchor, block);
+
+	if (is_tsrx_element(result)) {
+		render_tsrx_element(result, anchor, block);
+	} else if (is_array(result)) {
+		render_tsrx_collection(result, anchor, block);
+	} else if (result != null) {
+		render_tsrx_collection_text(result + '', anchor, true);
+	}
+}
+
 /**
  * @param {string} value
  * @param {ChildNode} anchor
+ * @param {boolean} [assign=false]
  * @returns {void}
  */
-function render_tsrx_collection_text(value, anchor) {
+function render_tsrx_collection_text(value, anchor, assign = false) {
 	if (!hydrating) {
-		anchor.before(create_text(value));
+		var text = create_text(value);
+		anchor.before(text);
+		if (assign) {
+			assign_nodes(text, text);
+		}
 		return;
 	}
 
 	var node = hydrate_node;
 
+	if (node?.nodeType === COMMENT_NODE && /** @type {Comment} */ (node).data === HYDRATION_START) {
+		node = get_next_sibling(node);
+	}
+
 	if (node?.nodeType === TEXT_NODE) {
 		var current_value = /** @type {Text} */ (node).nodeValue ?? '';
 
@@ -91,12 +137,18 @@ function render_tsrx_collection_text(value, anchor) {
 				if (remaining !== '') {
 					var remaining_text = create_text(remaining);
 					/** @type {ChildNode} */ (node).after(remaining_text);
+					if (assign) {
+						assign_nodes(node, node);
+					}
 					set_hydrate_node(remaining_text);
 					return;
 				}
 			}
 		}
 
+		if (assign) {
+			assign_nodes(node, node);
+		}
 		set_hydrate_node(get_next_sibling(node) ?? anchor);
 		return;
 	}
@@ -109,6 +161,9 @@ function render_tsrx_collection_text(value, anchor) {
 		anchor.before(new_text);
 	}
 
+	if (assign) {
+		assign_nodes(new_text, new_text);
+	}
 	set_hydrate_node(node ?? anchor);
 }
 
@@ -138,7 +193,10 @@ export function expression(node, get_value) {
 		var next_value = get_value();
 		var next_is_collection = is_array(next_value);
 		var next_is_element = next_is_collection || is_tsrx_element(next_value);
-		var is_hydration_marker = hydrating && anchor.nodeType === COMMENT_NODE;
+		var is_hydration_marker =
+			hydrating &&
+			anchor.nodeType === COMMENT_NODE &&
+			/** @type {Comment} */ (anchor).data === HYDRATION_START;
 
 		if (is_hydration_marker) {
 			end ??= ensure_expression_end(anchor);
@@ -187,7 +245,7 @@ export function expression(node, get_value) {
 				if (next_is_collection) {
 					render_tsrx_collection(next_value, end ?? anchor, block);
 				} else {
-					next_value.render(end ?? anchor, block);
+					render_tsrx_element(next_value, end ?? anchor, block);
 				}
 			});
 

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

@@ -5,8 +5,10 @@ import { HMR } from './constants.js';
 import { hydrate_node, hydrating } from './hydration.js';
 import { branch, destroy_block, render } from './blocks.js';
 import { active_block, get, set, tracked } from './runtime.js';
+import { render_component } from './component.js';
+import { tsrx_element } from '../../element.js';
 
-/** @typedef {(anchor: Node, props: any, block: Block | null) => void} Component */
+/** @typedef {(props?: any) => any} Component */
 
 /** @typedef {Component & { [HMR]: { fn: Component; current: Tracked | undefined; update: (incoming: ComponentWrapper) => void; } }} ComponentWrapper */
 
@@ -23,53 +25,62 @@ export function hmr(fn) {
 	var current;
 
 	/**
-	 * @param {Node} anchor
 	 * @param {any} props
-	 * @param {Block | null} [block]
 	 */
-	function wrapper(anchor, props, block = active_block) {
-		if (current === undefined) {
-			current = wrapper[HMR].current;
-		}
-		/** @type {Node} */
-		var target = anchor;
-
-		if (current === undefined) {
-			current = tracked(fn, /** @type {Block} */ (block));
-			wrapper[HMR].current = current;
-		}
-		var component = {};
-
-		/** @type {Block | null} */
-		var effect = null;
-
-		render(
-			() => {
-				var next_component = get(/** @type {Tracked} */ (current));
-
-				if (component === next_component) {
-					return;
-				}
-
-				component = next_component;
-
-				if (effect) {
-					destroy_block(effect);
-				}
-
-				effect = branch(() => {
-					/** @type {Function} */ (component)(target, props, active_block);
-				});
-			},
-			null,
-			RENDER_BLOCK,
-		);
+	function wrapper(props) {
+		/**
+		 * @param {Node} anchor
+		 * @param {Block | null} [block]
+		 * @returns {void}
+		 */
+		function render_children(anchor, block = active_block) {
+			if (current === undefined) {
+				current = wrapper[HMR].current;
+			}
+			/** @type {Node} */
+			var target = anchor;
 
-		if (hydrating) {
-			target = /** @type {Node} */ (hydrate_node);
+			if (current === undefined) {
+				current = tracked(fn, /** @type {Block} */ (block));
+				wrapper[HMR].current = current;
+			}
+			var component = {};
+
+			/** @type {Block | null} */
+			var effect = null;
+
+			render(
+				() => {
+					var next_component = get(/** @type {Tracked} */ (current));
+
+					if (component === next_component) {
+						return;
+					}
+
+					component = next_component;
+
+					if (effect) {
+						destroy_block(effect);
+					}
+
+					effect = branch(() => {
+						render_component(
+							/** @type {Function} */ (component),
+							/** @type {ChildNode} */ (target),
+							props,
+						);
+					});
+				},
+				null,
+				RENDER_BLOCK,
+			);
+
+			if (hydrating) {
+				target = /** @type {Node} */ (hydrate_node);
+			}
 		}
 
-		return wrapper;
+		return tsrx_element(render_children);
 	}
 
 	wrapper[HMR] = {

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

@@ -85,6 +85,8 @@ export {
 
 export { composite } from './composite.js';
 
+export { render_component } from './component.js';
+
 export { for_block as for, for_block_keyed as for_keyed } from './for.js';
 
 export { if_block as if } from './if.js';
@@ -127,10 +129,12 @@ export { rpc } from './rpc.js';
 
 export { tsx_compat } from './compat.js';
 
+export { render_tsrx_element } from './component.js';
+
 export { TRY_BLOCK, HMR } from './constants.js';
 
 export { hmr } from './hmr.js';
 
 export { pop, next } from './hydration.js';
 
-export { tsrx_element, normalize_children } from '../../element.js';
+export { is_tsrx_element, tsrx_element, normalize_children } from '../../element.js';