ripple 0.2.185 → 0.2.187

package/src/compiler/source-map-utils.js

@@ -1,9 +1,56 @@
 import { decode } from '@jridgewell/sourcemap-codec';
 
-/** @import { PostProcessingChanges, LineOffsets } from './phases/3-transform/client/index.js' */
+/**
+@import { PostProcessingChanges, LineOffsets } from './phases/3-transform/client/index.js';
+@import * as AST from 'estree';
+*/
+
+/**
+@typedef {{
+	line: number,
+	column: number,
+	end_line: number,
+	end_column: number,
+	code: string,
+	metadata: {
+		css?: AST.Element['metadata']['css']
+	},
+}} CodePosition
+
+@typedef {Map<string, CodePosition[]>} CodeToGeneratedMap
+@typedef {Map<string, {line: number, column: number}[]>} GeneratedToSourceMap
+*/
+
+/**
+ * Convert byte offset to line/column
+ * @param {number} offset
+ * @param {LineOffsets} line_offsets
+ * @returns {{ line: number, column: number }}
+ */
+export const offset_to_line_col = (offset, line_offsets) => {
+	// Binary search
+	let left = 0;
+	let right = line_offsets.length - 1;
+	let line = 1;
+
+	while (left <= right) {
+		const mid = Math.floor((left + right) / 2);
+		if (
+			offset >= line_offsets[mid] &&
+			(mid === line_offsets.length - 1 || offset < line_offsets[mid + 1])
+		) {
+			line = mid + 1;
+			break;
+		} else if (offset < line_offsets[mid]) {
+			right = mid - 1;
+		} else {
+			left = mid + 1;
+		}
+	}
 
-/** @typedef {{line: number, column: number}} GeneratedPosition */
-/** @typedef {Map<string, GeneratedPosition[]>} SourceToGeneratedMap */
+	const column = offset - line_offsets[line - 1];
+	return { line, column };
+};
 
 /**
  * Build a source-to-generated position lookup map from an esrap source map
@@ -11,11 +58,19 @@ import { decode } from '@jridgewell/sourcemap-codec';
  * @param {object} source_map - The source map object from esrap (v3 format)
  * @param {PostProcessingChanges} post_processing_changes - Optional post-processing changes to apply
  * @param {LineOffsets} line_offsets - Pre-computed line offsets array
- * @returns {SourceToGeneratedMap} Map from "sourceLine:sourceColumn" to array of generated positions
+ * @param {string} generated_code - The final generated code (after post-processing)
+ * @returns {[CodeToGeneratedMap, GeneratedToSourceMap]} Tuple of [source-to-generated map, generated-to-source map]
  */
-export function build_source_to_generated_map(source_map, post_processing_changes, line_offsets) {
-	/** @type {SourceToGeneratedMap} */
+export function build_src_to_gen_map(
+	source_map,
+	post_processing_changes,
+	line_offsets,
+	generated_code,
+) {
+	/** @type {CodeToGeneratedMap} */
 	const map = new Map();
+	/** @type {GeneratedToSourceMap} */
+	const reverse_map = new Map();
 
 	// Decode the VLQ-encoded mappings string
 	// @ts-ignore
@@ -31,101 +86,120 @@ export function build_source_to_generated_map(source_map, post_processing_change
 		return line_offsets[line - 1] + column;
 	};
 
-	/**
-	 * Convert byte offset to line/column
-	 * @param {number} offset
-	 * @returns {{ line: number, column: number }}
-	 */
-	const offset_to_line_col = (offset) => {
-		// Binary search
-		let left = 0;
-		let right = line_offsets.length - 1;
-		let line = 1;
-
-		while (left <= right) {
-			const mid = Math.floor((left + right) / 2);
-			if (
-				offset >= line_offsets[mid] &&
-				(mid === line_offsets.length - 1 || offset < line_offsets[mid + 1])
-			) {
-				line = mid + 1;
-				break;
-			} else if (offset < line_offsets[mid]) {
-				right = mid - 1;
-			} else {
-				left = mid + 1;
-			}
-		}
-
-		const column = offset - line_offsets[line - 1];
-		return { line, column };
-	};
+	// Apply post-processing adjustments to all segments first
+	/** @type {Array<Array<{line: number, column: number, sourceLine: number, sourceColumn: number}>>} */
+	const adjusted_segments = [];
 
-	// decoded is an array of lines, each line is an array of segments
-	// Each segment is [generatedColumn, sourceIndex, sourceLine, sourceColumn, nameIndex?]
 	for (let generated_line = 0; generated_line < decoded.length; generated_line++) {
 		const line = decoded[generated_line];
+		adjusted_segments[generated_line] = [];
 
 		for (const segment of line) {
 			if (segment.length >= 4) {
-				let generated_column = segment[0];
-				// just keeping this unused for context
-				// const source_index = segment[1]; // which source file (we only have one)
-				const source_line = /** @type {number} */ (segment[2]);
-				const source_column = /** @type {number} */ (segment[3]);
-
-				// Apply post-processing adjustments if needed
 				let adjusted_line = generated_line + 1;
-				let adjusted_column = generated_column;
+				let adjusted_column = segment[0];
 
 				if (post_processing_changes) {
 					const line_change = post_processing_changes.get(adjusted_line);
 
 					if (line_change) {
-						// Check if this position is affected by the change
 						const pos_offset = line_col_to_byte_offset(adjusted_line, adjusted_column);
 
 						if (pos_offset >= line_change.offset) {
-							// Position is on or after the change - apply delta
 							const adjusted_offset = pos_offset + line_change.delta;
-							const adjusted_pos = offset_to_line_col(adjusted_offset);
+							const adjusted_pos = offset_to_line_col(adjusted_offset, line_offsets);
 							adjusted_line = adjusted_pos.line;
 							adjusted_column = adjusted_pos.column;
 						}
 					}
 				}
 
-				// Create key from source position (1-indexed line, 0-indexed column)
-				const key = `${source_line + 1}:${source_column}`;
+				adjusted_segments[generated_line].push({
+					line: adjusted_line,
+					column: adjusted_column,
+					sourceLine: /** @type {number} */ (segment[2]),
+					sourceColumn: /** @type {number} */ (segment[3]),
+				});
+			}
+		}
+	}
+
+	// Now build the map using adjusted positions
+	for (let line_idx = 0; line_idx < adjusted_segments.length; line_idx++) {
+		const line_segments = adjusted_segments[line_idx];
+
+		for (let seg_idx = 0; seg_idx < line_segments.length; seg_idx++) {
+			const segment = line_segments[seg_idx];
+			const line = segment.line;
+			const column = segment.column;
+
+			// Determine end position using next segment
+			let end_line = line;
+			let end_column = column;
+
+			// Look for next segment to determine end position
+			if (seg_idx + 1 < line_segments.length) {
+				// Next segment on same line
+				const next_segment = line_segments[seg_idx + 1];
+				end_line = next_segment.line;
+				end_column = next_segment.column;
+			} else if (
+				line_idx + 1 < adjusted_segments.length &&
+				adjusted_segments[line_idx + 1].length > 0
+			) {
+				// Look at first segment of next line
+				const next_segment = adjusted_segments[line_idx + 1][0];
+				end_line = next_segment.line;
+				end_column = next_segment.column;
+			}
+
+			// Extract code snippet
+			const start_offset = line_col_to_byte_offset(line, column);
+			const end_offset = line_col_to_byte_offset(end_line, end_column);
+			const code_snippet = generated_code.slice(start_offset, end_offset);
 
-				// Store adjusted generated position
-				const gen_pos = { line: adjusted_line, column: adjusted_column };
+			// Create key from source position (1-indexed line, 0-indexed column)
+			segment.sourceLine += 1;
+			const key = `${segment.sourceLine}:${segment.sourceColumn}`;
 
-				if (!map.has(key)) {
-					map.set(key, []);
-				}
-				/** @type {GeneratedPosition[]} */ (map.get(key)).push(gen_pos);
+			// Store adjusted generated position with code snippet
+			const gen_pos = { line, column, end_line, end_column, code: code_snippet, metadata: {} };
+
+			if (!map.has(key)) {
+				map.set(key, []);
+			}
+			/** @type {CodePosition[]} */ (map.get(key)).push(gen_pos);
+
+			// Store reverse mapping (generated to source)
+			const gen_key = `${gen_pos.line}:${gen_pos.column}`;
+
+			if (!reverse_map.has(gen_key)) {
+				reverse_map.set(gen_key, []);
 			}
+			reverse_map.get(gen_key)?.push({
+				line: segment.sourceLine,
+				column: segment.sourceColumn,
+			});
 		}
 	}
 
-	return map;
+	return [map, reverse_map];
 }
 
 /**
  * Look up generated position for a given source position
- * @param {number} source_line - 1-based line number in source
- * @param {number} source_column - 0-based column number in source
- * @param {SourceToGeneratedMap} source_to_gen_map - Lookup map
- * @returns {{line: number, column: number}} Generated position
+ * @param {number} src_line - 1-based line number in source
+ * @param {number} src_column - 0-based column number in source
+ * @param {CodeToGeneratedMap} src_to_gen_map - Lookup map
+ * @returns {CodePosition} Generated position
  */
-export function get_generated_position(source_line, source_column, source_to_gen_map) {
-	const key = `${source_line}:${source_column}`;
-	const positions = source_to_gen_map.get(key);
+export function get_generated_position(src_line, src_column, src_to_gen_map) {
+	const key = `${src_line}:${src_column}`;
+	const positions = src_to_gen_map.get(key);
 
 	if (!positions || positions.length === 0) {
 		// No mapping found in source map - this shouldn't happen since all tokens should have mappings
-		throw new Error(`No source map entry for position "${source_line}:${source_column}"`);
+		throw new Error(`No source map entry for position "${src_line}:${src_column}"`);
 	}
 
 	// If multiple generated positions map to same source, return the first

package/src/compiler/types/index.d.ts

@@ -226,6 +226,28 @@ declare module 'estree' {
 		loc: SourceLocation;
 		metadata: BaseNodeMetaData & {
 			ts_name?: string;
+			// for <style> tag
+			styleScopeHash?: string;
+			// for elements with scoped style classes
+			css?: {
+				scopedClasses: Map<
+					string,
+					{
+						start: number;
+						end: number;
+						selector: CSS.ClassSelector;
+					}
+				>;
+				topScopedClasses: Map<
+					string,
+					{
+						start: number;
+						end: number;
+						selector: CSS.ClassSelector;
+					}
+				>;
+				hash: string;
+			};
 		};
 
 		// currently only for <style> and <script> tags

package/src/compiler/types/parse.d.ts

@@ -56,6 +56,12 @@ declare module 'zimmerframe' {
 		state: any,
 		visitors: RippleCompiler.Visitors<AST.Node, any>,
 	): AST.Node;
+
+	export function walk(
+		node: AST.CSS.Node,
+		state: any,
+		visitors: RippleCompiler.Visitors<(AST.CSS.Node), any>,
+	): AST.CSS.Node;
 }
 
 export namespace Parse {

package/src/compiler/utils.js

@@ -1,5 +1,7 @@
-/** @import { CommonContext, NameSpace, ScopeInterface } from '#compiler' */
-/** @import * as AST from 'estree' */
+/**
+@import * as AST from 'estree';
+@import { CommonContext, NameSpace, ScopeInterface } from '#compiler';
+ */
 
 import { build_assignment_value, extract_paths } from '../utils/ast.js';
 import * as b from '../utils/builders.js';

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

@@ -2,32 +2,76 @@
 
 import { branch, destroy_block, render } from './blocks.js';
 import { SWITCH_BLOCK } from './constants.js';
+import { next_sibling } from './operations.js';
+import { append } from './template.js';
 
 /**
- * @param {Node} node
- * @param {() => ((anchor: Node) => void)} fn
+ * Moves a block's DOM nodes to before an anchor node
+ * @param {Block} block
+ * @param {ChildNode} anchor
  * @returns {void}
  */
-export function switch_block(node, fn) {
-	var anchor = node;
-	/** @type {any} */
-	var current_branch = null;
-	/** @type {Block | null} */
-	var b = null;
+function move(block, anchor) {
+	var node = block.s.start;
+	var end = block.s.end;
+	/** @type {Node | null} */
+	var sibling;
+
+	while (node !== null) {
+		if (node === end) {
+			append(anchor, node);
+			break;
+		}
+		sibling = next_sibling(node);
+		append(anchor, node);
+		node = sibling;
+	}
+}
+
+/**
+ * @param {ChildNode} anchor
+ * @param {() => ((anchor: ChildNode) => void)[] | null} fn
+ * @returns {void}
+ */
+export function switch_block(anchor, fn) {
+	/** @type {((anchor: ChildNode) => void)[]} */
+	var prev = [];
+	/** @type {Map<(anchor: ChildNode) => void, Block>} */
+	var blocks = new Map();
 
 	render(
 		() => {
-			const branch_fn = fn() ?? null;
-			if (current_branch === branch_fn) return;
-			current_branch = branch_fn;
+			var funcs = fn();
+			let same = prev.length === funcs?.length || false;
 
-			if (b !== null) {
-				destroy_block(b);
-				b = null;
+			for (var i = 0; i < prev.length; i++) {
+				var p = prev[i];
+
+				if (!funcs || funcs.indexOf(p) === -1) {
+					same = false;
+					destroy_block(/** @type {Block} */ (blocks.get(p)));
+					blocks.delete(p);
+				}
 			}
 
-			if (branch_fn !== null) {
-				b = branch(() => branch_fn(anchor));
+			prev = funcs ?? [];
+
+			if (same || !funcs) {
+				return;
+			}
+
+			for (var i = 0; i < funcs.length; i++) {
+				var n = funcs[i];
+				var b = blocks.get(n);
+				if (b) {
+					move(b, anchor);
+					continue;
+				}
+
+				blocks.set(
+					n,
+					branch(() => n(anchor)),
+				);
 			}
 		},
 		null,

package/tests/client/switch.test.ripple

@@ -89,7 +89,7 @@ describe('switch statements', () => {
 		expect(container.querySelector('div').textContent).toBe('Default for y');
 	});
 
-	it('renders switch using fallthrough without recreating DOM unnecessarily', () => {
+	it('renders switch using empty case fall-through', () => {
 		component App() {
 			let value = track('a');
 
@@ -131,7 +131,7 @@ describe('switch statements', () => {
 		expect(container.querySelector('div').textContent).toBe('DOM check');
 	});
 
-	it('renders switch with template content and JS logic', () => {
+	it('renders switch with template content and reacts to tracked changes', () => {
 		component App() {
 			let status = track('active');
 			let message = track('');
@@ -180,4 +180,140 @@ describe('switch statements', () => {
 		expect(container.querySelector('div').textContent).toBe('Status: An error occurred.');
 		expect(container.querySelector('.error')).toBeTruthy();
 	});
+
+	it(
+		'renders switch with multiple non-empty fall-through cases and reacts to tracked changes without recreating DOM unnecessarily',
+		() => {
+			component App() {
+				let status = track(0);
+				<div>
+					switch (@status) {
+						case -1:
+						case 0:
+							<p>{' Idle'}</p>
+						case 1:
+							<p>{' Loading'}</p>
+						case 2:
+							<p>{' Success'}</p>
+							break;
+						default:
+							<p>{' Unknown status'}</p>
+							<p>{' Unknown 2'}</p>
+						case 3:
+							<p>{' Error'}</p>
+							<p>{' Error 2'}</p>
+							<p>{' Error 3'}</p>
+							break;
+					}
+				</div>
+				<button
+					onClick={() => {
+						@status = (@status + 1) % 5;
+					}}
+				>
+					{'Next Status'}
+				</button>
+			}
+
+			render(App);
+			const button = container.querySelector('button');
+
+			expect(container.querySelector('div').textContent).toBe(' Idle Loading Success');
+
+			button.click();
+			flushSync();
+
+			expect(container.querySelector('div').textContent).toBe(' Loading Success');
+
+			button.click();
+			flushSync();
+
+			expect(container.querySelector('div').textContent).toBe(' Success');
+
+			button.click();
+			flushSync();
+
+			expect(container.querySelector('div').textContent).toBe(' Error Error 2 Error 3');
+
+			button.click();
+			flushSync();
+
+			expect(container.querySelector('div').textContent).toBe(
+				' Unknown status Unknown 2 Error Error 2 Error 3',
+			);
+
+			button.click();
+			flushSync();
+
+			expect(container.querySelector('div').textContent).toBe(' Idle Loading Success');
+		},
+	);
+
+	it(
+		'renders a fall-through default in the middle of switch cases and reacts to changes without recreating DOM unnecessarily',
+		() => {
+			component App() {
+				let value = track('x');
+
+				<button onClick={() => (@value = 'a')}>{'Set A'}</button>
+				<button onClick={() => (@value = 'b')}>{'Set B'}</button>
+				<button onClick={() => (@value = 'c')}>{'Set C'}</button>
+				<button onClick={() => (@value = 'x')}>{'Set X'}</button>
+
+				<div>
+					switch (@value) {
+						case 'a':
+							<div>{' Case A'}</div>
+							break;
+						// NOTE: This should be the default in the middle of the cases
+						// However, jsdom (and other node-based dom libs) has a bug
+						// that breaks out of the switch even if the default doesn't have a break
+						// The browser works correctly.
+						// So, we're just using a defined case in the middle to simulate default.
+						case 'x':
+							<div>{' Default Case for ' + @value}</div>
+						case 'b':
+							<div>{' Case B'}</div>
+							break;
+						case 'c':
+							<div>{' Case C'}</div>
+					}
+				</div>
+			}
+
+			render(App);
+			const [buttonA, buttonB, buttonC, buttonX] = container.querySelectorAll('button');
+
+			expect(container.querySelector('div').textContent).toBe(' Default Case for x Case B');
+			expect(container.querySelector('div').querySelectorAll('div').length).toBe(2);
+
+			buttonA.click();
+			flushSync();
+
+			expect(container.querySelector('div').textContent).toBe(' Case A');
+			expect(container.querySelector('div').querySelectorAll('div').length).toBe(1);
+
+			buttonC.click();
+			flushSync();
+
+			expect(container.querySelector('div').textContent).toBe(' Case C');
+			expect(container.querySelector('div').querySelectorAll('div').length).toBe(1);
+
+			buttonB.click();
+			flushSync();
+
+			const bDiv = container.querySelector('div').querySelectorAll('div')[0];
+			expect(bDiv.textContent).toBe(' Case B');
+			bDiv.id = 'b';
+
+			buttonX.click();
+			flushSync();
+
+			// order should be correct with the previously rendered B element
+			expect(container.querySelector('div').textContent).toBe(' Default Case for x Case B');
+			expect(container.querySelector('div').querySelectorAll('div').length).toBe(2);
+			// the previously rendered div should be preserved
+			expect(container.querySelector('div').querySelectorAll('div')[1].id).toBe('b');
+		},
+	);
 });

package/tests/server/switch.test.ripple

@@ -25,7 +25,7 @@ describe('SSR: switch statements', () => {
 		expect(body).toBe('<div>Case B</div>');
 	});
 
-	it('renders switch using fallthrough case', async () => {
+	it('renders a fall-through with an empty switch case', async () => {
 		component App() {
 			let value = 'b';
 
@@ -45,4 +45,47 @@ describe('SSR: switch statements', () => {
 		const { body } = await render(App);
 		expect(body).toBe('<div>Case B or C</div>');
 	});
+
+	it('renders a fall-through with a case that has elements', async () => {
+		component App() {
+			let value = 'a';
+
+			switch (value) {
+				case 'a':
+					<div>{'Case A'}</div>
+				case 'b':
+					<div>{'Case B'}</div>
+				case 'c':
+					<div>{'Case C'}</div>
+					break;
+				default:
+					<div>{'Default Case'}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>Case A</div><div>Case B</div><div>Case C</div>');
+	});
+
+	it('renders a fall-through with a default case in the middle', async () => {
+		component App() {
+			let value = 'x';
+
+			switch (value) {
+				case 'a':
+					<div>{'Case A'}</div>
+				default:
+					<div>{'Default Case'}</div>
+				case 'b':
+					<div>{'Case B'}</div>
+					break;
+				case 'c':
+					<div>{'Case C'}</div>
+					break;
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>Default Case</div><div>Case B</div>');
+	});
 });