ripple 0.3.84 → 0.3.86

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

@@ -1,8 +1,8 @@
 /** @import { Block } from '#client' */
 
-import { branch, destroy_block, render } from './blocks.js';
+import { branch, destroy_block, get_first_node, get_last_node, render } from './blocks.js';
 import { SWITCH_BLOCK } from './constants.js';
-import { hydrate_next, hydrating } from './hydration.js';
+import { hydrate_next, hydrate_node, hydrating } from './hydration.js';
 import { next_sibling } from './operations.js';
 import { append } from './template.js';
 
@@ -13,8 +13,22 @@ import { append } from './template.js';
  * @returns {void}
  */
 function move(block, anchor) {
-	var node = block.s.start;
-	var end = block.s.end;
+	// Fast path: a normal case records its own range. Only an optimized single
+	// control-flow / component root case (DOM rendered through a descendant
+	// block, `s.start` null) needs the descent via `get_first_node`/`get_last_node`.
+	var s = block.s;
+	var node = s !== null ? s.start : null;
+	var end;
+
+	if (node === null) {
+		node = get_first_node(block);
+		if (node === null) {
+			return;
+		}
+		end = get_last_node(block);
+	} else {
+		end = s.end;
+	}
 	/** @type {Node | null} */
 	var sibling;
 
@@ -32,10 +46,20 @@ function move(block, anchor) {
 /**
  * @param {ChildNode} anchor
  * @param {() => ((anchor: ChildNode) => void)[] | null} fn
+ * @param {boolean} [root_controlled] When true the block renders before the
+ *   component's `__anchor` (no `<!>` wrapper); during hydration the SSR boundary
+ *   marker is handed to `append()` afterwards for the context-aware cursor
+ *   advance the eliminated wrapper used to perform.
  * @returns {void}
  */
-export function switch_block(anchor, fn) {
+export function switch_block(anchor, fn, root_controlled) {
+	/** @type {Node | undefined} */
+	var boundary;
+
 	if (hydrating) {
+		if (root_controlled) {
+			boundary = /** @type {Node} */ (hydrate_node);
+		}
 		hydrate_next();
 	}
 
@@ -82,4 +106,8 @@ export function switch_block(anchor, fn) {
 		null,
 		SWITCH_BLOCK,
 	);
+
+	if (hydrating && root_controlled) {
+		append(anchor, /** @type {Node} */ (boundary));
+	}
 }

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

@@ -1,4 +1,4 @@
-/** @import { Block } from '#client' */
+/** @import { AppendIntoAnchor, Block } from '#client' */
 
 import {
 	COMMENT_NODE,
@@ -137,7 +137,7 @@ export function template(content, flags, count = 1) {
 
 /**
  * Appends a DOM node before the anchor node.
- * @param {ChildNode} anchor - The anchor node.
+ * @param {ChildNode | AppendIntoAnchor} anchor - The anchor node.
  * @param {Node} dom - The DOM node to append.
  * @param {boolean} [skip_advance] - If true, don't advance hydrate_node (used when next() already positioned it).
  */
@@ -191,6 +191,14 @@ export function append(anchor, dom, skip_advance) {
 		hydrate_advance();
 		return;
 	}
+	if ('parent' in anchor) {
+		// Append-into-parent sentinel: an all-component-children element passes a
+		// `{ parent }` object (no `nodeType`) so each component's root appends as
+		// the host's last child instead of inserting before a placeholder comment.
+		// The block still self-marks its range via assign_nodes, so teardown works.
+		anchor.parent.appendChild(dom);
+		return;
+	}
 	anchor.before(/** @type {Node} */ (dom));
 }
 

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

@@ -9,7 +9,8 @@ import {
 	resume_block,
 } from './blocks.js';
 import { TRY_BLOCK } from './constants.js';
-import { hydrate_next, hydrating } from './hydration.js';
+import { hydrate_next, hydrate_node, hydrating } from './hydration.js';
+import { append } from './template.js';
 import {
 	active_block,
 	queue_microtask,
@@ -34,8 +35,10 @@ import {
  * @param {PendingFunction | null} [pending_fn=null]
  * @returns {void}
  */
-export function try_block(node, try_fn, catch_fn, pending_fn = null) {
+export function try_block(node, try_fn, catch_fn, pending_fn = null, root_controlled = false) {
 	var anchor = node;
+	/** @type {Node | undefined} */
+	var boundary;
 	var pending_count = 0;
 	var request_version = 0;
 	/** @type {Set<number>} */
@@ -316,12 +319,19 @@ export function try_block(node, try_fn, catch_fn, pending_fn = null) {
 		if (pending_fn !== null) {
 			has_resolved = true;
 		}
+		if (root_controlled) {
+			boundary = /** @type {Node} */ (hydrate_node);
+		}
 		hydrate_next(); // consume <!--[-->
 	}
 
 	try_block = create_try_block(() => {
 		resolved_branch = boundary_fn_running_block(() => try_fn(anchor));
 	}, state);
+
+	if (hydrating && root_controlled) {
+		append(/** @type {ChildNode} */ (node), /** @type {Node} */ (boundary));
+	}
 }
 
 /**

package/src/runtime/internal/client/types.d.ts

@@ -26,6 +26,10 @@ export type DeferredTrackedEntry = {
 	r: number; // request version id
 };
 
+export type AppendIntoAnchor = {
+	parent: Node;
+};
+
 export type Block = {
 	co: null | Component;
 	d: null | Dependency;

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

@@ -319,7 +319,6 @@ exports[`for statements > renders a simple dynamic array 2`] = `
 
 exports[`for statements > renders a simple static array 1`] = `
 <div>
-  <!---->
   <div
     class="Item 1"
   >
@@ -335,7 +334,6 @@ exports[`for statements > renders a simple static array 1`] = `
   >
     Item 3
   </div>
-  <!---->
   
 </div>
 `;

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

@@ -579,8 +579,11 @@ function App() @{
 `;
 		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
-		expect(result).toContain('const nested = <span class="nested-tsx">');
-		expect(result).toContain('return content;');
+		// An authored `<>…</>` is kept verbatim — both as a value (the `nested`
+		// initializer) and as the component's render output (`<>{content}</>`) —
+		// instead of unwrapping to its single child.
+		expect(result).toContain('const nested = <><span class="nested-tsx">');
+		expect(result).toContain('return <>{content}</>;');
 		expect(result).toContain('const content = <div class="native">');
 	});
 

package/tests/client/composite/__snapshots__/composite.render.test.tsrx.snap

@@ -2,7 +2,6 @@
 
 exports[`composite > render > correct handles passing through component props and children 1`] = `
 <div>
-  <!---->
   <div>
     <div>
       I am A
@@ -17,21 +16,18 @@ exports[`composite > render > correct handles passing through component props an
     </div>
     <!---->
   </div>
-  <!---->
   
 </div>
 `;
 
 exports[`composite > render > render simple text as children 1`] = `
 <div>
-  <!---->
   <button
     class="my-button"
   >
     Click Me
     <!---->
   </button>
-  <!---->
   
 </div>
 `;

package/tests/client/for-single-root-items.test.tsrx

@@ -0,0 +1,130 @@
+import { RippleArray, flushSync, track } from 'ripple';
+
+// Regression tests for the 0.3.85 optimization (PR #1307) that elides the
+// `<!>` wrapper for single control-flow / component root scopes. When such a
+// scope renders its DOM through a descendant block, the owning block's
+// `s.start` is null, so keyed-for reconciliation must resolve the real first
+// node by descending child blocks instead of reading `s.start` directly.
+// Previously this threw `Cannot use 'in' operator to search for 'parent' in
+// null` from `append()` on a reactive insert.
+
+describe('keyed for with single-root item bodies (#1307 regression)', () => {
+	it(
+		'prepends into a keyed @for whose body is a single component (single control-flow root)',
+		() => {
+			function MuzeCard(props) @{
+				@if (true) {
+					<p>{props.muze.muzeId}</p>
+				}
+			}
+			function App() @{
+				const muzes = new RippleArray({ muzeId: 'b' }, { muzeId: 'c' });
+				<>
+					<button onClick={() => muzes.unshift({ muzeId: 'a' })}>{'add'}</button>
+					@for (const muze of muzes; key muze.muzeId) {
+						<MuzeCard {muze} />
+					}
+				</>
+			}
+			render(App);
+			expect(container.querySelectorAll('p').length).toBe(2);
+
+			container.querySelector('button').click();
+			flushSync();
+
+			expect(Array.from(container.querySelectorAll('p')).map((p) => p.textContent)).toEqual([
+				'a',
+				'b',
+				'c',
+			]);
+		},
+	);
+
+	it('reorders a keyed @for of single-control-flow-root components', () => {
+		function MuzeCard(props) @{
+			@if (true) {
+				<p>{props.muze.muzeId}</p>
+			}
+		}
+		function App() @{
+			const muzes = new RippleArray({ muzeId: 'a' }, { muzeId: 'b' }, { muzeId: 'c' });
+			<>
+				<button onClick={() => muzes.reverse()}>{'reverse'}</button>
+				@for (const muze of muzes; key muze.muzeId) {
+					<MuzeCard {muze} />
+				}
+			</>
+		}
+		render(App);
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(Array.from(container.querySelectorAll('p')).map((p) => p.textContent)).toEqual([
+			'c',
+			'b',
+			'a',
+		]);
+	});
+
+	it('inserts in the middle of a keyed @for whose item body is a single @for', () => {
+		function App() @{
+			const groups = new RippleArray({ id: 'g1', items: ['1'] }, { id: 'g3', items: ['3'] });
+			<>
+				<button onClick={() => groups.splice(1, 0, { id: 'g2', items: ['2'] })}>{'insert'}</button>
+				@for (const group of groups; key group.id) {
+					@for (const item of group.items; key item) {
+						<p>{item}</p>
+					}
+				}
+			</>
+		}
+		render(App);
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(Array.from(container.querySelectorAll('p')).map((p) => p.textContent)).toEqual([
+			'1',
+			'2',
+			'3',
+		]);
+	});
+
+	it('realistic shape: keyed @for of components inside an @if > fragment', () => {
+		function MuzeCard(props) @{
+			@if (true) {
+				<p class="muze">{props.muze.muzeId}</p>
+			}
+		}
+		function App() @{
+			let &[loaded, loadedT] = track(true);
+			const muzes = new RippleArray({ muzeId: 'b' }, { muzeId: 'c' });
+			<>
+				<button onClick={() => muzes.unshift({ muzeId: 'a' })}>{'add'}</button>
+				@if (loaded) {
+					<>
+						@for (const muze of muzes; key muze.muzeId) {
+							<MuzeCard {muze} />
+						}
+						@if (muzes.length > 0) {
+							<span class="count">{String(muzes.length)}</span>
+						}
+					</>
+				}
+			</>
+		}
+		render(App);
+		expect(container.querySelectorAll('.muze').length).toBe(2);
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(Array.from(container.querySelectorAll('.muze')).map((p) => p.textContent)).toEqual([
+			'a',
+			'b',
+			'c',
+		]);
+		expect(container.querySelector('.count').textContent).toBe('3');
+	});
+});

package/tests/client/scoped-flush.test.tsrx

@@ -0,0 +1,105 @@
+import { flushSync, track, Context } from 'ripple';
+
+describe('scoped flush', () => {
+	// Scoped descent must not change observable behaviour: a tracked shared across
+	// sibling subtrees via a module-level variable (escaping its owner subtree)
+	// must still update its out-of-subtree subscriber.
+	it('updates a sibling subtree that reads a module-smuggled tracked', () => {
+		let shared = null;
+		let bump = null;
+
+		function Producer() @{
+			let &[v, vT] = track(0);
+			shared = vT;
+			bump = () => {
+				v += 1;
+			};
+			<div class="producer">{'producer'}</div>
+		}
+
+		function Consumer() @{
+			<div class="consumer">
+				{shared ? shared.value : -1}
+			</div>
+		}
+
+		function App() @{
+			<>
+				<Producer />
+				<Consumer />
+			</>
+		}
+
+		render(App);
+
+		expect(container.querySelector('.consumer').textContent).toBe('0');
+
+		flushSync(() => bump());
+
+		expect(container.querySelector('.consumer').textContent).toBe('1');
+
+		flushSync(() => bump());
+
+		expect(container.querySelector('.consumer').textContent).toBe('2');
+	});
+
+	// The common, scope-safe case: a Context-provided tracked read at many leaves.
+	// A root update must fan out to all leaves; a scoped update must reach only the
+	// targeted subtree's leaf and leave the others untouched.
+	it('fans out a root update and scopes a nested update', () => {
+		const Ctx = new Context(null);
+		let bumpRoot = null;
+		let bumpLeftLocal = null;
+
+		function Leaf(props) @{
+			const rootT = Ctx.get();
+			<span class={'leaf-' + props.id}>
+				{rootT ? rootT.value : -1}
+			</span>
+		}
+
+		function Branch(props) @{
+			let &[local, localT] = track(0);
+			if (props.side === 'L') {
+				bumpLeftLocal = () => {
+					local += 1;
+				};
+			}
+			<div class={'branch-' + props.side}>
+				<Leaf id={props.side + '0'} />
+				<Leaf id={props.side + '1'} />
+			</div>
+		}
+
+		function App() @{
+			let &[root, rootT] = track(0);
+			Ctx.set(rootT);
+			bumpRoot = () => {
+				root += 1;
+			};
+			<div>
+				<Branch side="L" />
+				<Branch side="R" />
+			</div>
+		}
+
+		render(App);
+
+		const leaves = () => ['L0', 'L1', 'R0', 'R1'].map(
+			(id) => container.querySelector('.leaf-' + id).textContent,
+		);
+
+		expect(leaves()).toEqual(['0', '0', '0', '0']);
+
+		flushSync(() => bumpRoot());
+		expect(leaves()).toEqual(['1', '1', '1', '1']);
+
+		flushSync(() => bumpLeftLocal());
+		// Local bump touches no Context value, so leaf text is unchanged, but the
+		// update must flush without error and not disturb sibling subtrees.
+		expect(leaves()).toEqual(['1', '1', '1', '1']);
+
+		flushSync(() => bumpRoot());
+		expect(leaves()).toEqual(['2', '2', '2', '2']);
+	});
+});