ripple 0.4.0 → 0.4.2

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

@@ -36,6 +36,7 @@ import {
 	SCHEDULED,
 	SELECTOR,
 	IF_BLOCK,
+	ITEM_BLOCK,
 	RELEASED,
 	RENDER_ENTRY,
 	CREATES_DERIVEDS,
@@ -389,7 +390,9 @@ function handle_run_error(error, block) {
  * @returns {Derived[] | null}
  */
 function prepare_rerun(block) {
-	if ((block.f & (FOR_BLOCK | IF_BLOCK)) === 0) {
+	// A list, an if, and a list item re-run only their own logic; their child
+	// blocks (items, the branch's blocks, an item body's nested blocks) stay.
+	if ((block.f & (FOR_BLOCK | IF_BLOCK | ITEM_BLOCK)) === 0) {
 		destroy_non_branch_children(block);
 	}
 	run_teardown(block);
@@ -411,6 +414,45 @@ function register_teardown(block, teardown) {
 	}
 }
 
+/**
+ * Runs the body of a branch block that was just created, in place of a first
+ * `run_block`: a branch renders untracked and never re-runs, so the only
+ * bookkeeping its first run needs is the globals the body reads and the
+ * dependencies a nested `item` records on it. Errors are handled as
+ * `run_block` handles them.
+ * @param {Block} block
+ * @param {(anchor: any, value: any) => void} fn
+ * @param {any} anchor
+ * @param {any} value
+ */
+export function run_branch(block, fn, anchor, value) {
+	var previous_block = active_block;
+	var previous_reaction = active_reaction;
+	var previous_tracking = tracking;
+	var previous_dependency = active_dependency;
+	var previous_component = active_component;
+
+	try {
+		active_block = block;
+		active_reaction = block;
+		active_component = block.co;
+		tracking = false;
+		active_dependency = null;
+		fn(anchor, value);
+		if (active_dependency !== null) {
+			block.d = active_dependency;
+		}
+	} catch (error) {
+		handle_run_error(error, block);
+	} finally {
+		active_block = previous_block;
+		active_reaction = previous_reaction;
+		tracking = previous_tracking;
+		active_dependency = previous_dependency;
+		active_component = previous_component;
+	}
+}
+
 /**
  * @param {Block} block
  * @param {boolean} [first_run] true when the block has no children, teardown,
@@ -1258,7 +1300,8 @@ function is_tracking_dirty(tracking) {
 export function is_block_dirty(block) {
 	var flags = block.f;
 
-	if ((flags & (ROOT_BLOCK | BRANCH_BLOCK)) !== 0) {
+	// A branch never re-runs, except a list item that carries its render block.
+	if ((flags & ITEM_BLOCK) === 0 && (flags & (ROOT_BLOCK | BRANCH_BLOCK)) !== 0) {
 		return false;
 	}
 	if ((flags & BLOCK_HAS_RUN) === 0) {

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

@@ -1258,7 +1258,6 @@ export async function render(component, options = {}) {
 	}
 }
 
-var CONTENT_SPECIAL = /[&<]/;
 var ATTR_SPECIAL = /[&"<]/;
 var SCRIPT_SPECIAL = /[<>]/;
 
@@ -1275,15 +1274,19 @@ function escape_inline_script(str) {
 
 /**
  * Escapes text or attribute content. Strings without a character to escape
- * (the common case) return as they are after a single regex test; anything
- * else goes through the general escaper.
+ * (the common case) return as they are; anything else goes through the general
+ * escaper. Text content is checked with two single-character searches: on the
+ * short strings a page is made of they beat one character-class regex test.
  * @param {unknown} value
  * @param {boolean} [is_attr]
  * @returns {string}
  */
 export function escape(value, is_attr) {
 	var str = typeof value === 'string' ? value : value == null ? '' : String(value);
-	return (is_attr ? ATTR_SPECIAL : CONTENT_SPECIAL).test(str) ? escape_html(str, is_attr) : str;
+	if (is_attr) {
+		return ATTR_SPECIAL.test(str) ? escape_html(str, true) : str;
+	}
+	return str.includes('&') || str.includes('<') ? escape_html(str, false) : str;
 }
 
 /**
@@ -1610,14 +1613,16 @@ export function attr(name, value, is_boolean = false) {
 }
 
 /**
- * @param {Record<string, string | number>} styles
+ * @param {Record<string, string | number | null | undefined>} styles
  * @returns {string}
  */
 function get_styles(styles) {
 	var result = '';
 	for (const key in styles) {
+		const raw_value = styles[key];
+		if (raw_value == null) continue;
 		const css_prop = normalize_css_property_name(key);
-		const value = String(styles[key]).trim();
+		const value = String(raw_value).trim();
 		result += `${css_prop}: ${value}; `;
 	}
 	return result.trim();

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

@@ -244,6 +244,43 @@ describe('basic client > attribute rendering', () => {
 		expect(div.style.fontWeight).toBe('bold');
 	});
 
+	it.each([undefined, null])('omits %s styles and removes and restores conditional values', (
+		empty,
+	) => {
+		function Basic() @{
+			const active = track(false);
+			<>
+				<button onClick={() => (active.value = !active.value)}>Toggle</button>
+				<div
+					style={{
+						width: active.value ? '400px' : empty,
+						'--scale': active.value ? 2 : empty,
+						margin: 0,
+						opacity: 0,
+						'--literal': 'undefined',
+						'--literal-null': 'null',
+					}}
+				/>
+			</>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const div = container.querySelector('div');
+
+		for (const active of [false, true, false, true]) {
+			expect(div.style.width).toBe(active ? '400px' : '');
+			expect(div.style.getPropertyValue('--scale')).toBe(active ? '2' : '');
+			expect(div.style.margin).toBe('0px');
+			expect(div.style.opacity).toBe('0');
+			expect(div.style.getPropertyValue('--literal')).toBe('undefined');
+			expect(div.style.getPropertyValue('--literal-null')).toBe('null');
+			button.click();
+			flushSync();
+		}
+	});
+
 	it('render tracked variable as style attribute', () => {
 		function Basic() @{
 			const style = track({ color: 'red', fontWeight: 'bold' });

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

@@ -110,8 +110,8 @@ describe('compiler > basics', () => {
 
 		const { code } = compile(source, 'stringish-text.tsrx', { mode: 'client' });
 
-		expect(code).toContain('_$_.set_text');
-		expect(code).toContain('nodeValue = title');
+		expect(code).toContain('_$_.set_text_content');
+		expect(code).toContain('textContent = title');
 		expect(count_occurrences(code, '_$_.expression')).toBe(2);
 	});
 

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

@@ -0,0 +1,404 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync, track, type Tracked } from 'ripple';
+
+interface Cell {
+	id: string;
+	text: string;
+}
+
+interface Row {
+	id: number;
+	label: string;
+	active: boolean;
+	cells: Cell[];
+}
+
+const cells = (prefix: string) => [
+	{ id: 'a', text: `${prefix}a` },
+	{ id: 'b', text: `${prefix}b` },
+];
+
+// An item body whose updates live in one render block carries that block on
+// the item block (`_$_.item`): the item re-runs its update function alone,
+// and the nested blocks of its body (a keyed list of cells here) stay.
+describe('list items carrying their render block', () => {
+	it('re-renders an item replaced under the same key and keeps its nested list', () => {
+		let set: (rows: Row[]) => void = () => {};
+
+		function App() @{
+			const rows = track<Row[]>([
+				{ id: 1, label: 'one', active: false, cells: cells('1') },
+				{ id: 2, label: 'two', active: false, cells: cells('2') },
+			]);
+			set = (next) => {
+				rows.value = next;
+			};
+			<table>
+				<tbody>
+					@for (const row of rows.value; key row.id) {
+						<tr class={row.active ? 'active' : 'inactive'}>
+							<th>{row.label}</th>
+							@for (const cell of row.cells; key cell.id) {
+								<td>{cell.text}</td>
+							}
+						</tr>
+					}
+				</tbody>
+			</table>
+		}
+
+		render(App);
+		flushSync();
+
+		const rows = () => Array.from(container.querySelectorAll('tr'));
+		const text = () => rows().map((tr) => `${tr.className}:${tr.textContent}`);
+		expect(text()).toEqual(['inactive:one1a1b', 'inactive:two2a2b']);
+
+		const [first, second] = rows();
+		const first_cells = Array.from(first.querySelectorAll('td'));
+
+		// The first row object is replaced under its key; its cell objects are
+		// kept, so the nested list has nothing to do.
+		const original = [
+			{ id: 1, label: 'one', active: false, cells: cells('1') },
+			{ id: 2, label: 'two', active: false, cells: cells('2') },
+		];
+		set(original);
+		flushSync();
+		set([{ ...original[0], label: 'uno', active: true }, original[1]]);
+		flushSync();
+
+		expect(text()).toEqual(['active:uno1a1b', 'inactive:two2a2b']);
+		expect(rows()[0]).toBe(first);
+		expect(rows()[1]).toBe(second);
+		expect(Array.from(first.querySelectorAll('td'))).toEqual(first_cells);
+
+		// A new cell array replaces the cells; the row's own DOM is kept.
+		set([
+			{
+				...original[0],
+				cells: [
+					{ id: 'a', text: 'A' },
+					{ id: 'c', text: 'C' },
+				],
+			},
+			original[1],
+		]);
+		flushSync();
+		expect(text()).toEqual(['inactive:oneAC', 'inactive:two2a2b']);
+		expect(rows()[0]).toBe(first);
+	});
+
+	it('updates a plain (unkeyed) item body through the item block', () => {
+		let set: (items: { text: string }[]) => void = () => {};
+
+		function App() @{
+			const items = track([{ text: 'a' }, { text: 'b' }]);
+			set = (next) => {
+				items.value = next;
+			};
+			<div>
+				@for (const item of items.value) {
+					<span>{item.text}</span>
+				}
+			</div>
+		}
+
+		render(App);
+		flushSync();
+		expect(container.querySelector('div')?.textContent).toBe('ab');
+
+		set([{ text: 'a' }, { text: 'c' }, { text: 'd' }]);
+		flushSync();
+		expect(container.querySelector('div')?.textContent).toBe('acd');
+	});
+
+	it('destroys an item that re-ran its update function', () => {
+		let set: (items: { id: number; text: string }[]) => void = () => {};
+
+		function App() @{
+			const items = track([
+				{ id: 1, text: 'a' },
+				{ id: 2, text: 'b' },
+			]);
+			set = (next) => {
+				items.value = next;
+			};
+			<div>
+				@for (const item of items.value; key item.id) {
+					<span>{item.text}</span>
+				}
+			</div>
+		}
+
+		render(App);
+		flushSync();
+
+		set([
+			{ id: 1, text: 'A' },
+			{ id: 2, text: 'B' },
+		]);
+		flushSync();
+		expect(container.querySelector('div')?.textContent).toBe('AB');
+
+		set([
+			{ id: 2, text: 'B' },
+		]);
+		flushSync();
+		expect(container.querySelector('div')?.textContent).toBe('B');
+		expect(container.querySelectorAll('span').length).toBe(1);
+	});
+});
+
+// A keyed list that re-lays most of its range walks it front to back,
+// inserting each item before the first node not yet in place.
+describe('keyed list re-lay', () => {
+	const ids = (n: number) => Array.from({ length: n }, (_, i) => i);
+
+	it('reverses the middle after dropping both ends (kivi worst case)', () => {
+		let set: (items: number[]) => void = () => {};
+
+		function App() @{
+			const items = track(ids(40));
+			set = (next) => {
+				items.value = next;
+			};
+			<div>
+				@for (const item of items.value; key item) {
+					<span data-id={item}>{item}</span>
+				}
+			</div>
+		}
+
+		render(App);
+		flushSync();
+
+		const before = Array.from(container.querySelectorAll('span'));
+		const next = ids(40).slice(1, -1).reverse();
+		set(next);
+		flushSync();
+
+		const after = Array.from(container.querySelectorAll('span'));
+		expect(after.map((el) => el.textContent)).toEqual(next.map(String));
+		for (const el of after) {
+			expect(el).toBe(before[Number(el.dataset.id)]);
+		}
+	});
+
+	it('creates new items inside a re-laid range in order', () => {
+		let set: (items: number[]) => void = () => {};
+
+		function App() @{
+			const items = track(ids(40));
+			set = (next) => {
+				items.value = next;
+			};
+			<div>
+				<b>{'head'}</b>
+				@for (const item of items.value; key item) {
+					<span data-id={item}>{item}</span>
+				}
+				<i>{'tail'}</i>
+			</div>
+		}
+
+		render(App);
+		flushSync();
+
+		const before = Array.from(container.querySelectorAll('span'));
+		const reversed = ids(40).reverse();
+		const next = [100, ...reversed.slice(0, 20), 101, ...reversed.slice(20), 102];
+		set(next);
+		flushSync();
+
+		const children = Array.from(container.querySelector('div')!.children);
+		expect(children[0].localName).toBe('b');
+		expect(children[children.length - 1].localName).toBe('i');
+		expect(children.slice(1, -1).map((el) => el.textContent)).toEqual(next.map(String));
+		for (const el of children.slice(1, -1)) {
+			const id = Number((el as HTMLElement).dataset.id);
+			if (id < 40) expect(el).toBe(before[id]);
+		}
+
+		set(ids(40));
+		flushSync();
+		expect(Array.from(container.querySelectorAll('span')).map((el) => el.textContent)).toEqual(
+			ids(40).map(String),
+		);
+	});
+});
+
+// A trailing `@if` or `@for` behind template siblings appends into its parent
+// (no `<!>` placeholder); the if materializes an anchor when it swaps.
+describe('trailing control flow appends into the parent', () => {
+	it('keeps a trailing @if in place across branch swaps', () => {
+		let set: (value: number) => void = () => {};
+
+		function App() @{
+			const n = track(0);
+			set = (value) => {
+				n.value = value;
+			};
+			<div>
+				<b>{'head'}</b>
+				@if (n.value === 0) {
+					<span>{'zero'}</span>
+				} @else if (n.value === 1) {
+					<em>{'one'}</em>
+				}
+			</div>
+		}
+
+		render(App);
+		flushSync();
+		const div = container.querySelector('div')!;
+		expect(div.innerHTML).toBe('<b>head</b><span>zero</span>');
+
+		set(1);
+		flushSync();
+		expect(div.textContent).toBe('headone');
+		expect(div.querySelector('em')).not.toBeNull();
+
+		set(2);
+		flushSync();
+		expect(div.textContent).toBe('head');
+
+		set(0);
+		flushSync();
+		expect(div.textContent).toBe('headzero');
+		expect(div.firstElementChild?.localName).toBe('b');
+		expect(div.lastElementChild?.localName).toBe('span');
+	});
+
+	it('keeps a trailing @for with @empty in place', () => {
+		let set: (items: string[]) => void = () => {};
+
+		function App() @{
+			const items = track(['a', 'b']);
+			set = (next) => {
+				items.value = next;
+			};
+			<div>
+				<b>{'head'}</b>
+				@for (const item of items.value; key item) {
+					<span>{item}</span>
+				} @empty {
+					<i>{'none'}</i>
+				}
+			</div>
+		}
+
+		render(App);
+		flushSync();
+		const div = container.querySelector('div')!;
+		expect(div.innerHTML).toBe('<b>head</b><span>a</span><span>b</span>');
+
+		set([]);
+		flushSync();
+		expect(div.innerHTML).toBe('<b>head</b><i>none</i>');
+
+		set(['c', 'a']);
+		flushSync();
+		expect(div.innerHTML).toBe('<b>head</b><span>c</span><span>a</span>');
+
+		set(['a', 'c', 'd']);
+		flushSync();
+		expect(div.innerHTML).toBe('<b>head</b><span>a</span><span>c</span><span>d</span>');
+	});
+});
+
+// A keyed item read only by its update function is held as it is (no
+// tracked): a replaced item re-runs its block directly, and tracked values
+// inside the item still subscribe the block.
+describe('local keyed items', () => {
+	it('re-renders a replaced item and follows a tracked value it holds', () => {
+		let set: (items: { id: number; label: Tracked<string> }[]) => void = () => {};
+		let a: Tracked<string>;
+		let b: Tracked<string>;
+		let c: Tracked<string>;
+
+		function App() @{
+			a = track('a');
+			b = track('b');
+			c = track('one');
+			const items = track([
+				{ id: 1, label: a },
+				{ id: 2, label: b },
+			]);
+			set = (next) => {
+				items.value = next;
+			};
+			<div>
+				@for (const item of items.value; key item.id) {
+					<span>{item.id + ':' + item.label.value}</span>
+				}
+			</div>
+		}
+
+		render(App);
+		flushSync();
+		const div = container.querySelector('div')!;
+		expect(div.textContent).toBe('1:a2:b');
+		const spans = Array.from(div.querySelectorAll('span'));
+
+		a.value = 'A';
+		flushSync();
+		expect(div.textContent).toBe('1:A2:b');
+
+		set([
+			{ id: 2, label: b },
+			{ id: 1, label: c },
+		]);
+		flushSync();
+		expect(div.textContent).toBe('2:b1:one');
+		expect(Array.from(div.querySelectorAll('span'))).toEqual([spans[1], spans[0]]);
+
+		a.value = 'AA';
+		flushSync();
+		expect(div.textContent).toBe('2:b1:one');
+	});
+
+	it('clears and restores leaf text', () => {
+		let set: (items: { id: number; text: string }[]) => void = () => {};
+
+		function App() @{
+			const items = track<{ id: number; text: string }[]>([
+				{ id: 1, text: 'x' },
+			]);
+			set = (next) => {
+				items.value = next;
+			};
+			<div>
+				@for (const item of items.value; key item.id) {
+					<span>{item.text}</span>
+				}
+			</div>
+		}
+
+		render(App);
+		flushSync();
+		const span = container.querySelector('span')!;
+		expect(span.textContent).toBe('x');
+		expect(span.childNodes.length).toBe(1);
+
+		set([
+			{ id: 1, text: '' },
+		]);
+		flushSync();
+		expect(span.childNodes.length).toBe(0);
+
+		set([
+			{ id: 1, text: 'y' },
+		]);
+		flushSync();
+		expect(span.textContent).toBe('y');
+		expect(span.childNodes.length).toBe(1);
+
+		set([
+			{ id: 1, text: 'z' },
+		]);
+		flushSync();
+		expect(span.textContent).toBe('z');
+		expect(span.childNodes.length).toBe(1);
+	});
+});