ripple 0.4.2 → 0.4.4

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

@@ -48,6 +48,11 @@ export type AppendIntoAnchor = {
 	parent: Node;
 	/** Marks the sentinel; a missing-property read on a DOM node is cheaper than `in`. */
 	into: true;
+	/**
+	 * The sentinel is the tail of `parent`: nothing the framework renders
+	 * follows what it anchors, so an `@if` there never needs an anchor node.
+	 */
+	tail: boolean;
 };
 
 export type Block = {
@@ -77,30 +82,50 @@ export type TryPendingFunction = (anchor: Node) => void;
  * helpers are module functions that compile only when a boundary uses them.
  */
 export type TryState = {
-	anchor: Node;
-	try_fn: (anchor: Node, block?: Block) => void;
-	catch_fn: TryCatchFunction | null;
-	pending_fn: TryPendingFunction | null;
+	/** anchor */
+	a: Node;
+	/** try function */
+	fn: (anchor: Node, block?: Block) => void;
+	/** catch function */
+	c: TryCatchFunction | null;
+	/** pending function */
+	p: TryPendingFunction | null;
 	/** the catch branch's `reset` callback, created on first use */
-	reset: (() => void) | null;
-	pending_count: number;
-	request_version: number;
-	active_requests: Set<number>;
-	try_block: Block | null;
-	resolved_branch: Block | null;
-	pending_branch: Block | null;
-	catch_branch: Block | null;
-	offscreen_fragment: DocumentFragment | null;
-	has_resolved: boolean;
-	mode: 'resolved' | 'pending' | 'catch';
-	pending_deferreds: Map<number, (reason: any) => void>;
-	paused_blocks: Set<Block>;
+	r: (() => void) | null;
+	/** pending request count */
+	n: number;
+	/** request version */
+	v: number;
+	/** active request ids */
+	q: Set<number>;
+	/** the try block */
+	b: Block | null;
+	/** resolved branch */
+	rb: Block | null;
+	/** pending branch */
+	pb: Block | null;
+	/** catch branch */
+	cb: Block | null;
+	/** fragment holding the resolved branch while it is offscreen */
+	o: DocumentFragment | null;
+	/** has resolved */
+	h: boolean;
+	/** mode: 0 resolved, 1 pending, 2 catch */
+	m: 0 | 1 | 2;
+	/** deferred rejections by request id */
+	d: Map<number, (reason: any) => void>;
+	/** blocks paused on a pending read */
+	z: Set<Block>;
 	/** a streamed slot this boundary hydrated, until its chunk activates it */
-	streamed_id: string | null;
-	streamed_errored: boolean;
-	streamed_fallback: boolean;
-	slot_open: Comment | null;
-	slot_close: Comment | null;
+	si: string | null;
+	/** the streamed slot errored */
+	se: boolean;
+	/** the streamed slot carries a hydratable fallback */
+	sf: boolean;
+	/** streamed slot open marker */
+	so: Comment | null;
+	/** streamed slot close marker */
+	sc: Comment | null;
 };
 
 export type BlockWithTryBoundary = Omit<Block, 's'> & {
@@ -108,7 +133,7 @@ export type BlockWithTryBoundary = Omit<Block, 's'> & {
 };
 
 export type BlockWithTryBoundaryAndCatch = Omit<BlockWithTryBoundary, 's'> & {
-	s: TryState & { catch_fn: TryCatchFunction };
+	s: TryState & { c: TryCatchFunction };
 };
 
 export type RootBoundaryOptions = {
@@ -144,7 +169,6 @@ declare global {
 
 	interface Element {
 		__attributes?: {
-			checked?: boolean;
 			value?: string;
 		};
 		__click?: () => void;

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

@@ -60,7 +60,7 @@ import {
 	is_boolean_attribute,
 	normalize_css_property_name,
 } from '@tsrx/core/runtime/html';
-import { clsx } from 'clsx';
+import { class_name } from '../../../utils/class-name.js';
 import { create_ref_prop } from '@tsrx/core/runtime/ref';
 import {
 	BLOCK_CLOSE,
@@ -1599,7 +1599,7 @@ export function attr(name, value, is_boolean = false) {
 	}
 	if (value == null || (!value && is_boolean)) return '';
 	const normalized = (name in replacements && replacements[name].get(value)) || value;
-	let value_to_escape = name === 'class' ? clsx(normalized) : normalized;
+	let value_to_escape = name === 'class' ? class_name(normalized) : normalized;
 	value_to_escape =
 		name === 'style'
 			? typeof value !== 'string'
@@ -1719,15 +1719,6 @@ class TrackedValue {
 	set value(v) {
 		set(/** @type {Tracked} */ (this), v);
 	}
-	/**
-	 * A read-only view: a derived over this value, for a receiver that should
-	 * read but not write it. Equivalent to `track(() => tracked.value)`. The
-	 * view has no hash of its own: it is not a serialized value.
-	 * @returns {Derived}
-	 */
-	readOnly() {
-		return derived(() => get_tracked(/** @type {Tracked} */ (this)));
-	}
 }
 
 class DerivedValue {
@@ -1765,17 +1756,6 @@ class DerivedValue {
 	set value(v) {
 		set(/** @type {Derived} */ (this), v);
 	}
-	/**
-	 * A read-only view (see `TrackedValue#readOnly`). A derived without a
-	 * setter is already read-only and is returned as is; a writable one is
-	 * wrapped in a derived that follows it.
-	 * @returns {Derived}
-	 */
-	readOnly() {
-		return this.a.set === undefined
-			? /** @type {Derived} */ (this)
-			: derived(() => get_derived(/** @type {Derived} */ (this)));
-	}
 }
 
 /**
@@ -1804,6 +1784,25 @@ function derived(v, hash, get, set) {
 	);
 }
 
+/**
+ * A read-only view of a tracked or derived value (see the client runtime's
+ * `track_read_only`). The view has no hash of its own: it is not a serialized
+ * value.
+ * @param {any} value
+ * @returns {any}
+ */
+export function track_read_only(value) {
+	if (!is_ripple_object(value)) {
+		return value;
+	}
+	if ((value.f & DERIVED) !== 0) {
+		var d = /** @type {Derived} */ (value);
+		return d.a.set === undefined ? d : derived(() => get_derived(d));
+	}
+	var t = /** @type {Tracked} */ (value);
+	return derived(() => get_tracked(t));
+}
+
 /**
  * @param {any} v
  * @param {string} hash
@@ -2278,7 +2277,7 @@ function run_track_async(t, fn, block, dr, dj) {
 /**
  * The hashes of the compile-time tracked values a trackAsync read, recorded
  * in its hydration envelope so the client re-subscribes to them. A dependency
- * without a hash that is itself a derived (a `readOnly()` view, a derived made
+ * without a hash that is itself a derived (a `trackReadOnly()` view, a derived made
  * outside a compiled call) stands for what it read: its own dependencies are
  * recorded in its place.
  * @param {Dependency | null} head
@@ -2530,35 +2529,38 @@ export function ripple_array(...elements) {
 }
 
 /**
+ * `RippleArray.from(...)`
  * @template T
  * @param {ArrayLike<T> | Iterable<T>} arrayLike
  * @param {(v: T, k: number) => any | undefined} [map_fn]
  * @param {any} [thisArg]
  * @returns {T[]}
  */
-ripple_array.from = function (arrayLike, map_fn, thisArg) {
+export function ripple_array_from(arrayLike, map_fn, thisArg) {
 	return map_fn ? Array.from(arrayLike, map_fn, thisArg) : Array.from(arrayLike);
-};
+}
 
 /**
+ * `RippleArray.of(...)`
  * @template T
  * @param  {...T} items
  * @returns {T[]}
  */
-ripple_array.of = function (...items) {
+export function ripple_array_of(...items) {
 	return Array.of(...items);
-};
+}
 
 /**
+ * `RippleArray.fromAsync(...)`
  * @template T
  * @param {ArrayLike<T> | Iterable<T>} arrayLike
  * @param {(v: T, k: number) => any | undefined} [map_fn]
  * @param {any} [thisArg]
  * @returns {Promise<T[]>}
  */
-ripple_array.from_async = async function (arrayLike, map_fn, thisArg) {
+export async function ripple_array_from_async(arrayLike, map_fn, thisArg) {
 	return map_fn ? Array.fromAsync(arrayLike, map_fn, thisArg) : Array.fromAsync(arrayLike);
-};
+}
 
 /**
  * @param {object} obj

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

@@ -0,0 +1,27 @@
+/** @import { RenderComponent } from './index.js' */
+/** @import { RenderResult } from 'ripple/server' */
+/** @import { RootBoundaryOptions } from '#public' */
+
+import { render } from './index.js';
+import { get_css_text } from './css-registry.js';
+
+/**
+ * Renders a component to static HTML: buffered, every `@try` boundary and
+ * `trackAsync` settled before it resolves, with the scoped CSS as text. The
+ * static-generation counterpart of `render()`, for HTML written at build time
+ * that `hydrate()` picks up like any server-rendered page.
+ * @param {RenderComponent} component
+ * @param {{ rootBoundary?: RootBoundaryOptions }} [options]
+ * @returns {Promise<{ head: string, body: string, css: string, topLevelError: Error | null }>}
+ */
+export async function prerender(component, options = {}) {
+	const result = /** @type {RenderResult} */ (
+		await render(component, { rootBoundary: options.rootBoundary })
+	);
+	return {
+		head: result.head,
+		body: result.body,
+		css: get_css_text(result.css),
+		topLevelError: result.topLevelError ?? null,
+	};
+}

package/src/server/index.js

@@ -1,6 +1,7 @@
 // SSR helpers
 export { create_ssr_stream as createStream, render } from '../runtime/internal/server/index.js';
 export { get_css_text as getCss } from '../runtime/internal/server/css-registry.js';
+export { prerender } from '../runtime/internal/server/prerender.js';
 export { executeServerFunction } from '../runtime/internal/server/rpc.js';
 
 // Re-export server runtime for components compiled for SSR

package/src/utils/class-name.js

@@ -0,0 +1,28 @@
+/**
+ * clsx-style class composition, shared by the client and server renderers: a
+ * string as it is, a truthy number, the truthy items of an array, the keys of
+ * an object with truthy values, nested arrays flattened, everything else
+ * dropped.
+ * @param {any} value
+ * @returns {string}
+ */
+export function class_name(value) {
+	if (typeof value === 'string') {
+		return value;
+	}
+	if (typeof value !== 'object' || value === null) {
+		return typeof value === 'number' && value ? '' + value : '';
+	}
+	var str = '';
+	if (Array.isArray(value)) {
+		for (var i = 0; i < value.length; i++) {
+			var item = value[i] && class_name(value[i]);
+			if (item) str = str ? str + ' ' + item : item;
+		}
+	} else {
+		for (var key in value) {
+			if (value[key]) str = str ? str + ' ' + key : key;
+		}
+	}
+	return str;
+}

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

@@ -126,7 +126,7 @@ describe('basic client > errors', () => {
 
 		render(Basic);
 
-		expect(error).toBe(
+		expect(error).toContain(
 			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
 		);
 	});
@@ -148,7 +148,7 @@ describe('basic client > errors', () => {
 
 		render(Basic);
 
-		expect(error).toBe(
+		expect(error).toContain(
 			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
 		);
 	});
@@ -169,7 +169,7 @@ describe('basic client > errors', () => {
 
 		render(Basic);
 
-		expect(error).toBe(
+		expect(error).toContain(
 			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
 		);
 	});

package/tests/client/compiler/__snapshots__/compiler.typescript.test.tsrx.snap

@@ -30,8 +30,6 @@ exports[`compiler > typescript > removes class extends type arguments from JS ou
 
 class StringMap extends Map {
 	constructor() {
-		var __block = _$_.scope();
-
 		super();
 	}
 }"

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

@@ -213,8 +213,8 @@ export function App() @{
 
 		// Already a string: no String(… ?? '') double wrap around it, and the
 		// scope wrapper sits on the user call, not on the coercion.
-		expect(code).toContain('String(_$_.with_scope(__prev.___block, fetchLabel))');
-		expect(code).not.toContain('_$_.with_scope(__prev.___block, () => String(');
+		expect(code).toMatch(/String\(_\$_\.with_scope\(__prev\._[a-z]+, fetchLabel\)\)/);
+		expect(code).not.toMatch(/_\$_\.with_scope\(__prev\._[a-z]+, \(\) => String\(/);
 		expect(code).not.toContain('String(String(');
 		expect(code).not.toContain('?? \'\'');
 	});

package/tests/client/compiler/compiler.tracked-access.test.tsrx

@@ -5,7 +5,7 @@ const value_message = /Accessing a tracked object directly is not allowed, use `
 describe('Compiler: Tracked Object Direct Access Checks', () => {
 	it('should error on direct access to __v of a tracked object', () => {
 		const code = `
-import { track } from 'ripple';
+import { track, trackReadOnly } from 'ripple';
             export default function App() @{
                 let count = track(0);
                 console.log(count.__v);
@@ -200,12 +200,12 @@ import { track } from 'ripple';
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
-	it('should allow .readOnly() on a tracked object', () => {
+	it('should allow .trackReadOnly() on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
             export default function App() @{
                 let count = track(0);
-                const view = count.readOnly();
+                const view = trackReadOnly(count);
                 <>{view.value}</>
             }
         `;

package/tests/client/composite/composite.dynamic-components.test.tsrx

@@ -76,6 +76,46 @@ describe('composite > dynamic components', () => {
 		expect(container.textContent).toBe('hidden');
 	});
 
+	it(
+		'remounts a childless dynamic component with fresh props when its tag expression re-evaluates',
+		() => {
+			let bump: () => void = () => {};
+			let poke: () => void = () => {};
+
+			function Child(props: { n: number }) @{
+				<span>{props.n}</span>
+			}
+
+			function App() @{
+				const n = track(0);
+				const flag = track(true);
+				bump = () => {
+					n.value++;
+				};
+				poke = () => {
+					flag.value = !flag.value;
+				};
+				// The tag expression reads `flag`, but always resolves to `Child`.
+				<{flag.value || !flag.value ? Child : null} n={n.value} />
+			}
+
+			render(App);
+			flushSync();
+			const span = () => container.querySelector('span');
+			expect(span()?.textContent).toBe('0');
+
+			// A prop is a value: the instance keeps the number it got.
+			bump();
+			flushSync();
+			expect(span()?.textContent).toBe('0');
+
+			// The tag expression re-evaluated: a new instance reads the literal again.
+			poke();
+			flushSync();
+			expect(span()?.textContent).toBe('1');
+		},
+	);
+
 	it('handles dynamic component switching', () => {
 		function Child1() @{
 			<div>{'I am child 1'}</div>

package/tests/client/composite/composite.props.test.tsrx

@@ -1,8 +1,8 @@
 import type { Derived, Tracked, Props } from 'ripple';
-import { effect, flushSync, track } from 'ripple';
+import { effect, flushSync, track, trackReadOnly } from 'ripple';
 
 describe('composite > props', () => {
-	it('hands a child a read-only view through readOnly()', () => {
+	it('hands a child a read-only view through trackReadOnly()', () => {
 		function Child({ count }: { count: Derived<number> }) @{
 			<span class="child">{count.value}</span>
 		}
@@ -10,7 +10,7 @@ describe('composite > props', () => {
 		function App() @{
 			const count = track(0);
 			<>
-				<Child count={count.readOnly()} />
+				<Child count={trackReadOnly(count)} />
 				<button onClick={() => count.value++}>{'inc'}</button>
 			</>
 		}
@@ -24,13 +24,13 @@ describe('composite > props', () => {
 		expect(container.querySelector('.child').textContent).toBe('1');
 	});
 
-	it('returns a read-only derived from readOnly() as is and wraps a writable one', () => {
+	it('returns a read-only derived from trackReadOnly() as is and wraps a writable one', () => {
 		function App() @{
 			const count = track(1);
 			const double = track(() => count.value * 2);
 			const draft = track(() => count.value, undefined, true);
-			const double_view = double.readOnly();
-			const draft_view = draft.readOnly();
+			const double_view = trackReadOnly(double);
+			const draft_view = trackReadOnly(draft);
 			expect(double_view).toBe(double);
 			expect(draft_view).not.toBe(draft);
 			<>
@@ -51,7 +51,7 @@ describe('composite > props', () => {
 		expect(container.querySelector('.view').textContent).toBe('42');
 	});
 
-	it('releases a readOnly() view with the block that created it', () => {
+	it('releases a trackReadOnly() view with the block that created it', () => {
 		let set_rows: (rows: number[]) => void = () => {};
 		let bump: () => void = () => {};
 		let source: Tracked<number> | undefined;
@@ -73,7 +73,7 @@ describe('composite > props', () => {
 			<ul>
 				@for (const row of rows.value; key row) {
 					<li>
-						<Child count={count.readOnly()} />
+						<Child count={trackReadOnly(count)} />
 					</li>
 				}
 			</ul>
@@ -106,12 +106,12 @@ describe('composite > props', () => {
 		expect(subscribers()).toBe(0);
 	});
 
-	it('keeps a readOnly() view from writing through to its source', () => {
+	it('keeps a trackReadOnly() view from writing through to its source', () => {
 		const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
 		try {
 			function App() @{
 				const count = track(1);
-				const view = count.readOnly();
+				const view = trackReadOnly(count);
 				const write = () => {
 					view.value = 99;
 				};

package/tests/client/css/scoped-styles.test.tsrx

@@ -645,8 +645,10 @@ export function Precedence() @{
 			// block is written after the nested scope.
 			expect(black).toBeLessThan(italic);
 			expect(italic).toBeLessThan(blue);
+			// The outer div shares a fragment template with the placeholder that
+			// follows it; the inner div is a flat element template of its own.
 			expect(code).toContain(`class="outer ${outer} ${theme_hash}"`);
-			expect(code).toContain(`class="inner ${outer} ${inner} ${theme_hash}"`);
+			expect(code).toContain(`'class', 'inner ${outer} ${inner} ${theme_hash}'`);
 		},
 	);
 });

package/tests/client/derived-release.test.tsrx

@@ -1,5 +1,5 @@
 import type { Derived, Tracked } from 'ripple';
-import { effect, flushSync, track } from 'ripple';
+import { effect, flushSync, track, trackReadOnly } from 'ripple';
 
 /** The runtime's own subscriber list of a tracked value (`sb` / `sn`). */
 function subscribers(source: Tracked<number>) {
@@ -34,7 +34,7 @@ describe('derived release', () => {
 					const label = track(() => 'n=' + count.value);
 					<>
 						<span class="label">{label.value}</span>
-						<Child count={count.readOnly()} />
+						<Child count={trackReadOnly(count)} />
 					</>
 				}
 			</>
@@ -73,7 +73,7 @@ describe('derived release', () => {
 			<ul>
 				@for (const row of rows.value; key row) {
 					<li>
-						<Child count={count.readOnly()} />
+						<Child count={trackReadOnly(count)} />
 					</li>
 				}
 			</ul>

package/tests/client/for-item.test.tsrx

@@ -270,6 +270,45 @@ describe('trailing control flow appends into the parent', () => {
 		expect(div.lastElementChild?.localName).toBe('span');
 	});
 
+	it('leaves no anchor node behind a trailing @if', () => {
+		let set: (value: boolean) => void = () => {};
+
+		function App() @{
+			const open = track(false);
+			set = (value) => {
+				open.value = value;
+			};
+			<div>
+				<b>{'head'}</b>
+				@if (open.value) {
+					<span>{'open'}</span>
+				}
+			</div>
+		}
+
+		render(App);
+		flushSync();
+		const div = container.querySelector('div')!;
+		// The if is the div's tail: nothing follows it, so it needs no anchor,
+		// off or on.
+		expect(div.childNodes.length).toBe(1);
+
+		set(true);
+		flushSync();
+		expect(div.innerHTML).toBe('<b>head</b><span>open</span>');
+		expect(div.childNodes.length).toBe(2);
+
+		set(false);
+		flushSync();
+		expect(div.innerHTML).toBe('<b>head</b>');
+		expect(div.childNodes.length).toBe(1);
+
+		set(true);
+		flushSync();
+		expect(div.innerHTML).toBe('<b>head</b><span>open</span>');
+		expect(div.childNodes.length).toBe(2);
+	});
+
 	it('keeps a trailing @for with @empty in place', () => {
 		let set: (items: string[]) => void = () => {};
 

package/tests/client/for-selector.test.tsrx

@@ -219,3 +219,98 @@ describe('keyed reconciliation with most items moving', () => {
 		expect(after.map((el) => el.textContent)).toEqual(order.map(String));
 	});
 });
+
+// An `@if (outer === item.key)` in a keyed loop body lowers to the same
+// selector as an attribute comparison would, reading the block's key: a
+// change of the outer value re-runs the ifs of its previous and next key
+// alone, and a replaced item never re-runs its if.
+describe('@if selector comparisons', () => {
+	interface Item {
+		id: number;
+		label: string;
+	}
+	let select: (id: number | undefined) => void = () => {};
+	let setItems: (items: Item[]) => void = () => {};
+
+	function App() @{
+		const items = track<Item[]>([
+			{ id: 1, label: 'one' },
+			{ id: 2, label: 'two' },
+			{ id: 3, label: 'three' },
+		]);
+		const selected = track<number | undefined>(undefined);
+		select = (id) => {
+			selected.value = id;
+		};
+		setItems = (next) => {
+			items.value = next;
+		};
+
+		<ul>
+			@for (const item of items.value; key item.id) {
+				<li data-id={item.id}>
+					<span>{item.label}</span>
+					@if (selected.value === item.id) {
+						<b>{'current'}</b>
+					}
+				</li>
+			}
+		</ul>
+	}
+
+	function marked(): string[] {
+		return Array.from(container.querySelectorAll('li')).map(
+			(li) => `${li.getAttribute('data-id')}:${li.textContent}`,
+		);
+	}
+
+	it('moves the marker between rows and keeps it on a replaced row', () => {
+		render(App);
+		flushSync();
+		expect(marked()).toEqual(['1:one', '2:two', '3:three']);
+
+		select(2);
+		flushSync();
+		expect(marked()).toEqual(['1:one', '2:twocurrent', '3:three']);
+		const b = container.querySelector('b')!;
+
+		select(3);
+		flushSync();
+		expect(marked()).toEqual(['1:one', '2:two', '3:threecurrent']);
+
+		// The selected row's object is replaced under its key: the label
+		// updates and the marker stays, in place behind the label.
+		setItems([
+			{ id: 1, label: 'uno' },
+			{ id: 2, label: 'dos' },
+			{ id: 3, label: 'tres' },
+		]);
+		flushSync();
+		expect(marked()).toEqual(['1:uno', '2:dos', '3:trescurrent']);
+		expect(container.querySelector('li:last-child')!.childNodes.length).toBe(2);
+		expect(container.querySelector('b')).not.toBe(b);
+
+		select(undefined);
+		flushSync();
+		expect(marked()).toEqual(['1:uno', '2:dos', '3:tres']);
+		// Off again, and no anchor node is left behind the label.
+		for (const li of container.querySelectorAll('li')) {
+			expect(li.childNodes.length).toBe(1);
+		}
+	});
+
+	it('marks a row created after the selection was set', () => {
+		render(App);
+		flushSync();
+		select(4);
+		flushSync();
+		expect(marked()).toEqual(['1:one', '2:two', '3:three']);
+
+		setItems([
+			{ id: 4, label: 'four' },
+			{ id: 1, label: 'one' },
+		]);
+		flushSync();
+		expect(marked()).toEqual(['4:fourcurrent', '1:one']);
+	});
+});