ripple 0.3.62 → 0.3.64

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # ripple
 
+## 0.3.64
+
+## 0.3.63
+
+### Patch Changes
+
+- [#1153](https://github.com/Ripple-TS/ripple/pull/1153)
+  [`9df9fe3`](https://github.com/Ripple-TS/ripple/commit/9df9fe3a2d26978e69172db84994ac496761cd04)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Parse nested `<tsrx>` islands
+  inside `<tsx>` expression containers as native TSRX so setup declarations and
+  references keep Volar mappings, and hydrate deeply nested `<tsx>`/`<tsrx>`
+  expression values without skipping server markers.
+
+- [#1153](https://github.com/Ripple-TS/ripple/pull/1153)
+  [`9df9fe3`](https://github.com/Ripple-TS/ripple/commit/9df9fe3a2d26978e69172db84994ac496761cd04)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Avoid duplicating plain text
+  when hydrating mixed TSRX collection values.
+
+- [#1153](https://github.com/Ripple-TS/ripple/pull/1153)
+  [`9df9fe3`](https://github.com/Ripple-TS/ripple/commit/9df9fe3a2d26978e69172db84994ac496761cd04)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Fix to_ts output for nested
+  `<tsrx>` islands inside `<tsx>` blocks.
+
+  Type JSX expression values as `TSRXElement` so IntelliSense reports assigned
+  TSX/TSRX fragments as renderable values instead of `void`.
+
+  Fix TextMate highlighting for nested `<tsrx>` and `<tsx>` tags inside JSX
+  expression containers.
+
+- [#1153](https://github.com/Ripple-TS/ripple/pull/1153)
+  [`9df9fe3`](https://github.com/Ripple-TS/ripple/commit/9df9fe3a2d26978e69172db84994ac496761cd04)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Render nested `<tsx>` and
+  `<tsrx>` expression values, including arrays returned from JSX-style
+  expressions.
+
+- Updated dependencies
+  [[`2acbbea`](https://github.com/Ripple-TS/ripple/commit/2acbbea9253ac8f516fe0d3a7a38331490e6fd8b),
+  [`9df9fe3`](https://github.com/Ripple-TS/ripple/commit/9df9fe3a2d26978e69172db84994ac496761cd04),
+  [`9df9fe3`](https://github.com/Ripple-TS/ripple/commit/9df9fe3a2d26978e69172db84994ac496761cd04),
+  [`9df9fe3`](https://github.com/Ripple-TS/ripple/commit/9df9fe3a2d26978e69172db84994ac496761cd04),
+  [`9df9fe3`](https://github.com/Ripple-TS/ripple/commit/9df9fe3a2d26978e69172db84994ac496761cd04)]:
+  - @tsrx/core@0.1.12
+  - @tsrx/ripple@0.1.12
+
 ## 0.3.62
 
 ### 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.62",
+  "version": "0.3.64",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -74,10 +74,12 @@
     "clsx": "^2.1.1",
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "0.1.11",
-    "@tsrx/ripple": "0.1.11"
+    "@tsrx/core": "0.1.12",
+    "@tsrx/ripple": "0.1.12"
   },
   "devDependencies": {
+    "@types/estree": "^1.0.8",
+    "@types/estree-jsx": "^1.0.5",
     "@types/node": "^24.3.0"
   }
 }

package/src/jsx-runtime.d.ts

@@ -1,9 +1,10 @@
-import type { AddEventObject } from '#public';
+import type { AddEventObject, TSRXElement } from '#public';
 import type { Nullable } from '#helpers';
 
 /**
  * Ripple JSX Runtime Type Definitions
- * Ripple components are imperative and don't return JSX elements
+ * Ripple components are imperative, but JSX expressions still represent
+ * renderable TSRX values when used in expression positions.
  */
 
 // Ripple components don't return JSX elements - they're imperative
@@ -17,13 +18,13 @@ export function jsx(
 	type: string | ComponentType<any>,
 	props?: any,
 	key?: string | number | null,
-): void;
+): TSRXElement;
 
 export function rsx(
 	type: string | ComponentType<any>,
 	props?: any,
 	key?: string | number | null,
-): void;
+): TSRXElement;
 
 /**
  * Create a JSX element with static children (optimization for multiple children)
@@ -33,13 +34,13 @@ export function jsxs(
 	type: string | ComponentType<any>,
 	props?: any,
 	key?: string | number | null,
-): void;
+): TSRXElement;
 
 /**
  * JSX Fragment component
- * In Ripple, fragments are imperative and don't return anything
+ * Ripple fragments are renderable expression values.
  */
-export function Fragment(props: { children?: any }): void;
+export function Fragment(props: { children?: any }): TSRXElement;
 
 export type ClassValue = string | import('clsx').ClassArray | import('clsx').ClassDictionary;
 
@@ -819,8 +820,8 @@ interface SVGTextAttributes {
 // Global JSX namespace for TypeScript
 declare global {
 	namespace JSX {
-		// In Ripple, JSX expressions don't return elements - they're imperative
-		type Element = void;
+		type Element = TSRXElement;
+		type ElementType = keyof IntrinsicElements | ComponentType<any>;
 
 		interface IntrinsicElements {
 			// Document metadata

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

@@ -1,10 +1,12 @@
 /** @import { Block } from '#client' */
 
+import { is_array } from '@tsrx/core/runtime/language-helpers';
 import { branch, destroy_block, render } from './blocks.js';
 import { BRANCH_BLOCK, UNINITIALIZED } from './constants.js';
 import { create_text, get_next_sibling } from './operations.js';
+import { assign_nodes } from './template.js';
 import { active_block } from './runtime.js';
-import { hydrating, set_hydrate_node } from './hydration.js';
+import { hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { COMMENT_NODE, HYDRATION_END, HYDRATION_START, TEXT_NODE } from '../../../constants.js';
 import { is_tsrx_element } from '../../element.js';
 
@@ -23,6 +25,93 @@ function find_enclosing_branch(block) {
 	return null;
 }
 
+/**
+ * @param {any[]} value
+ * @param {ChildNode} anchor
+ * @param {Block} block
+ * @returns {void}
+ */
+function render_tsrx_collection(value, anchor, block) {
+	if (hydrating) {
+		assign_nodes(/** @type {Node} */ (hydrate_node ?? anchor), anchor);
+		render_tsrx_collection_items(value, anchor, block);
+		return;
+	}
+
+	var start = document.createComment('');
+	var end = document.createComment('');
+
+	anchor.before(start, end);
+	assign_nodes(start, end);
+	render_tsrx_collection_items(value, end, block);
+}
+
+/**
+ * @param {any[]} value
+ * @param {ChildNode} anchor
+ * @param {Block} block
+ * @returns {void}
+ */
+function render_tsrx_collection_items(value, anchor, block) {
+	for (var i = 0; i < value.length; i++) {
+		var item = value[i];
+
+		if (is_tsrx_element(item)) {
+			item.render(anchor, block);
+		} else if (is_array(item)) {
+			render_tsrx_collection_items(item, anchor, block);
+		} else if (item != null) {
+			render_tsrx_collection_text(item + '', anchor);
+		}
+	}
+}
+
+/**
+ * @param {string} value
+ * @param {ChildNode} anchor
+ * @returns {void}
+ */
+function render_tsrx_collection_text(value, anchor) {
+	if (!hydrating) {
+		anchor.before(create_text(value));
+		return;
+	}
+
+	var node = hydrate_node;
+
+	if (node?.nodeType === TEXT_NODE) {
+		var current_value = /** @type {Text} */ (node).nodeValue ?? '';
+
+		if (current_value !== value) {
+			/** @type {Text} */ (node).nodeValue = value;
+
+			if (current_value.startsWith(value)) {
+				var remaining = current_value.slice(value.length);
+
+				if (remaining !== '') {
+					var remaining_text = create_text(remaining);
+					/** @type {ChildNode} */ (node).after(remaining_text);
+					set_hydrate_node(remaining_text);
+					return;
+				}
+			}
+		}
+
+		set_hydrate_node(get_next_sibling(node) ?? anchor);
+		return;
+	}
+
+	var new_text = create_text(value);
+
+	if (node !== null && node !== anchor) {
+		/** @type {ChildNode} */ (node).before(new_text);
+	} else {
+		anchor.before(new_text);
+	}
+
+	set_hydrate_node(node ?? anchor);
+}
+
 /**
  * @param {Node} node
  * @param {() => any} get_value
@@ -47,7 +136,8 @@ export function expression(node, get_value) {
 
 	render(() => {
 		var next_value = get_value();
-		var next_is_element = is_tsrx_element(next_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;
 
 		if (is_hydration_marker) {
@@ -93,8 +183,12 @@ export function expression(node, get_value) {
 			var parent_branch = find_enclosing_branch(active_block);
 
 			child_block = branch(() => {
-				var block = active_block;
-				next_value.render(end ?? anchor, block);
+				var block = /** @type {Block} */ (active_block);
+				if (next_is_collection) {
+					render_tsrx_collection(next_value, end ?? anchor, block);
+				} else {
+					next_value.render(end ?? anchor, block);
+				}
 			});
 
 			// Update parent branch's s.start to include content inserted before anchor.

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

@@ -1,6 +1,9 @@
 /** @import { Block } from '#client' */
 
 import {
+	COMMENT_NODE,
+	HYDRATION_END,
+	HYDRATION_START,
 	TEMPLATE_FRAGMENT,
 	TEMPLATE_USE_IMPORT_NODE,
 	TEMPLATE_SVG_NAMESPACE,
@@ -177,6 +180,10 @@ export function append(anchor, dom, skip_advance) {
 			if (s !== null) {
 				s.end = /** @type {Node} */ (hydrate_node);
 			}
+
+			if (is_after_hydration_block(dom, hydrate_node)) {
+				return;
+			}
 		}
 
 		// Only advance if there's a next sibling. At the end of a component's
@@ -187,6 +194,44 @@ export function append(anchor, dom, skip_advance) {
 	anchor.before(/** @type {Node} */ (dom));
 }
 
+/**
+ * @param {Node} start
+ * @param {Node | null} target
+ * @returns {boolean}
+ */
+function is_after_hydration_block(start, target) {
+	if (
+		target === null ||
+		start.nodeType !== COMMENT_NODE ||
+		/** @type {Comment} */ (start).data !== HYDRATION_START
+	) {
+		return false;
+	}
+
+	var current = get_next_sibling(start);
+	var depth = 0;
+
+	while (current !== null && current !== target) {
+		if (current.nodeType === COMMENT_NODE) {
+			var data = /** @type {Comment} */ (current).data;
+
+			if (data === HYDRATION_START) {
+				depth += 1;
+			} else if (data === HYDRATION_END) {
+				if (depth === 0) {
+					return true;
+				}
+
+				depth -= 1;
+			}
+		}
+
+		current = get_next_sibling(current);
+	}
+
+	return false;
+}
+
 export function text(data = '') {
 	if (hydrating) {
 		assign_nodes(/** @type {Node} */ (hydrate_node), /** @type {Node} */ (hydrate_node));

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

@@ -28,7 +28,7 @@ import {
 } from '../client/constants.js';
 import { DEV } from 'esm-env';
 import { is_ripple_object } from '../client/utils.js';
-import { array_slice } from '@tsrx/core/runtime/language-helpers';
+import { array_slice, is_array } from '@tsrx/core/runtime/language-helpers';
 import {
 	escape,
 	escape_script,
@@ -83,6 +83,24 @@ export class TrackAsyncRunError extends Error {
 
 export function noop() {}
 
+/**
+ * @param {any[]} value
+ * @returns {void}
+ */
+function render_tsrx_collection(value) {
+	for (var i = 0; i < value.length; i++) {
+		var item = value[i];
+
+		if (is_tsrx_element(item)) {
+			item.render({});
+		} else if (is_array(item)) {
+			render_tsrx_collection(item);
+		} else if (item != null) {
+			output_push(escape(item));
+		}
+	}
+}
+
 /**
  * @param {any} value
  * @returns {void}
@@ -92,6 +110,8 @@ export function render_expression(value) {
 
 	if (is_tsrx_element(value)) {
 		value.render({});
+	} else if (is_array(value)) {
+		render_tsrx_collection(value);
 	} else {
 		output_push(escape(value ?? ''));
 	}

package/tests/client/basic/basic.collections.test.tsrx

@@ -2,6 +2,17 @@ import { RippleArray, flushSync, track } from 'ripple';
 import { TRACKED_ARRAY } from '../../../src/runtime/internal/client/constants.js';
 
 describe('basic client > collections', () => {
+	function countCommentNodes(node: Node) {
+		const walker = document.createTreeWalker(node, NodeFilter.SHOW_COMMENT);
+		let count = 0;
+
+		while (walker.nextNode()) {
+			count++;
+		}
+
+		return count;
+	}
+
 	it('renders with simple reactive objects', () => {
 		component Basic() {
 			let &[user] = track({
@@ -106,4 +117,113 @@ describe('basic client > collections', () => {
 		expect(pre1.textContent).toBe('4');
 		expect(pre2.textContent).toBe('2');
 	});
+
+	it('cleans up mixed tsrx collection sentinels and trailing text on rerender', () => {
+		component App() {
+			let &[primary] = track(true);
+
+			<div class="frame">
+				{<tsx>
+					{primary
+						? [
+								'first:',
+								<strong class="middle">
+									{'one'}
+								</strong>,
+								':tail',
+							]
+						: [
+								'second:',
+								<strong class="middle">
+									{'two'}
+								</strong>,
+								':done',
+							]}
+				</tsx>}
+			</div>
+			<button
+				onClick={() => {
+					primary = !primary;
+				}}
+			>
+				{'toggle'}
+			</button>
+		}
+
+		render(App);
+
+		const frame = container.querySelector('.frame');
+		const button = container.querySelector('button');
+		const initialCommentCount = countCommentNodes(frame);
+
+		expect(frame.textContent).toBe('first:one:tail');
+		expect(frame.querySelectorAll('.middle')).toHaveLength(1);
+
+		button.click();
+		flushSync();
+
+		expect(frame.textContent).toBe('second:two:done');
+		expect(frame.querySelectorAll('.middle')).toHaveLength(1);
+		expect(countCommentNodes(frame)).toBe(initialCommentCount);
+
+		button.click();
+		flushSync();
+
+		expect(frame.textContent).toBe('first:one:tail');
+		expect(frame.querySelectorAll('.middle')).toHaveLength(1);
+		expect(countCommentNodes(frame)).toBe(initialCommentCount);
+	});
+
+	it('flattens nested primitive arrays inside mixed tsrx collections', () => {
+		component App() {
+			<div class="frame">
+				{<tsx>
+					{[
+						'start:',
+						['one', 2, true, null, false],
+						<strong>
+							{'!'}
+						</strong>,
+						':end',
+					]}
+				</tsx>}
+			</div>
+		}
+
+		render(App);
+
+		expect(container.querySelector('.frame').textContent).toBe('start:one2truefalse!:end');
+	});
+
+	it('flattens direct primitive array expressions', () => {
+		component App() {
+			const items = ['start:', ['one', 2], null, true, false, ':end'];
+
+			<div class="frame">{['start:', ['one', 2], null, true, false, ':end']}</div>
+			<div class="bound-frame">{items}</div>
+		}
+
+		render(App);
+
+		expect(container.querySelector('.frame').textContent).toBe('start:one2truefalse:end');
+		expect(container.querySelector('.bound-frame').textContent).toBe('start:one2truefalse:end');
+	});
+
+	it('flattens conditional primitive array expressions', () => {
+		component App() {
+			const condition = true;
+			const ternary_items = condition
+				? ['start:', ['one', 2], null, true, false, ':end']
+				: ['fallback'];
+			const logical_items = condition && ['start:', ['one', 2], null, true, false, ':end'];
+
+			<div class="ternary-frame">{ternary_items}</div>
+			<div class="logical-frame">{logical_items}</div>
+		}
+
+		render(App);
+
+		expect(container.querySelector('.ternary-frame').textContent).toBe('start:one2truefalse:end');
+		expect(container.querySelector('.logical-frame').textContent).toBe('start:one2truefalse:end');
+	});
 });

package/tests/client/compiler/compiler.basic.test.tsrx

@@ -350,6 +350,25 @@ const Inline = component(props) {
 		expect(result).not.toContain('const Inline = (__anchor, props, __block) => {');
 	});
 
+	it('emits function calls with nested template returns as expressions in client output', () => {
+		const source = `
+component App() {
+	function make(flag) {
+		if (flag) {
+			return <tsx><span>{'nested'}</span></tsx>;
+		}
+
+		return null;
+	}
+
+	<div>{make(true)}</div>
+}
+`;
+		const result = compile(source, 'nested-template-return.tsrx', { mode: 'client' }).code;
+
+		expect(result).toContain('_$_.expression(expression, () => make(true))');
+	});
+
 	// 	it(
 	// 		'imports and uses only obfuscated Tracked imports when encountering only shorthand syntax',
 	// 		() => {
@@ -460,6 +479,70 @@ component App() {
 		expect(track_result).not.toContain('lazy0');
 	});
 
+	it('lowers nested tsrx inside tsx in to_ts output', () => {
+		const source = `
+component App() {
+	const content = <tsx>
+		{<tsrx>
+			const nested = <tsx>
+				<span class="nested-tsx">
+					{'inside nested tsx'}
+				</span>
+			</tsx>;
+			<div class="native">{nested}</div>
+		</tsrx>}
+	</tsx>;
+
+	{content}
+}
+`;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
+
+		expect(result).not.toContain('<tsrx>');
+		expect(result).not.toContain('</tsrx>');
+		expect(result).not.toContain('<tsx>');
+		expect(result).not.toContain('</tsx>');
+		expect(result).toContain('const nested = <>');
+		expect(result).toContain('children.push(<div class="native">');
+	});
+
+	it('maps identifiers from nested tsrx inside tsx in to_ts output', () => {
+		const source = `
+component App() {
+	const content = <tsx>
+		{<tsrx>
+			const nested = <tsx>
+				<span class="nested-tsx">
+					{'inside nested tsx'}
+				</span>
+			</tsx>;
+			<div class="native">{nested}</div>
+		</tsrx>}
+	</tsx>;
+
+	{content}
+}
+`;
+		const result = compile_to_volar_mappings(source, 'test.tsrx', { loose: true });
+		const source_declaration = source.indexOf('nested =');
+		const source_reference = source.indexOf('nested}</div>');
+		const generated_declaration = result.code.indexOf('const nested') + 'const '.length;
+		const generated_reference = result.code.indexOf('nested;', generated_declaration);
+
+		function find_mapping(source_offset: number, generated_offset: number) {
+			return result.mappings.find(
+				(mapping) =>
+					mapping.sourceOffsets[0] === source_offset &&
+						mapping.generatedOffsets[0] === generated_offset &&
+						mapping.lengths[0] === 'nested'.length &&
+						mapping.generatedLengths[0] === 'nested'.length,
+			);
+		}
+
+		expect(find_mapping(source_declaration, generated_declaration)).toBeDefined();
+		expect(find_mapping(source_reference, generated_reference)).toBeDefined();
+	});
+
 	it('preserves optional markers in to_ts TypeScript output', () => {
 		const source = `
 export type OptionalTuple = [bar: string, baz?: string];
@@ -586,10 +669,11 @@ export function optionalFn(declRequired: string, declMaybe?: string) {
 					generatedOffsets: number[];
 					lengths: number[];
 					generatedLengths: number[];
-				}) => mapping.sourceOffsets[0] === source_offset &&
-					mapping.generatedOffsets[0] === generated_offset &&
-					mapping.lengths[0] === identifier.length &&
-					mapping.generatedLengths[0] === identifier.length,
+				}) =>
+					mapping.sourceOffsets[0] === source_offset &&
+						mapping.generatedOffsets[0] === generated_offset &&
+						mapping.lengths[0] === identifier.length &&
+						mapping.generatedLengths[0] === identifier.length,
 			);
 
 			expect(source_offset).toBeGreaterThan(-1);
@@ -887,10 +971,11 @@ component App() {
 			generated_length = length,
 		) {
 			return result.mappings.find(
-				(mapping) => mapping.sourceOffsets[0] === source_offset &&
-					mapping.generatedOffsets[0] === generated_offset &&
-					mapping.lengths[0] === length &&
-					mapping.generatedLengths[0] === generated_length,
+				(mapping) =>
+					mapping.sourceOffsets[0] === source_offset &&
+						mapping.generatedOffsets[0] === generated_offset &&
+						mapping.lengths[0] === length &&
+						mapping.generatedLengths[0] === generated_length,
 			);
 		}