ripple 0.2.186 → 0.2.188

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.186",
+  "version": "0.2.188",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -86,6 +86,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.186"
+    "ripple": "0.2.188"
   }
 }

package/src/compiler/phases/2-analyze/index.js

@@ -422,25 +422,11 @@ const visitors = {
 		context.visit(node.discriminant, context.state);
 
 		for (const switch_case of node.cases) {
-			// Fallthrough
+			// Skip empty cases
 			if (switch_case.consequent.length === 0) {
 				continue;
 			}
 
-			// Validate that each cases ends in a break statement, except for the last case
-			const last = switch_case.consequent?.[switch_case.consequent.length - 1];
-
-			if (
-				last.type !== 'BreakStatement' &&
-				node.cases.indexOf(switch_case) !== node.cases.length - 1
-			) {
-				error(
-					'Template switch cases must end with a break statement (with the exception of the last case).',
-					context.state.analysis.module.filename,
-					switch_case,
-				);
-			}
-
 			node.metadata = {
 				...node.metadata,
 				has_template: false,

package/src/compiler/phases/3-transform/client/index.js

@@ -1830,31 +1830,41 @@ const visitors = {
 		const statements = [];
 		const cases = [];
 
-		let i = 1;
-
+		let id_gen = 0;
+		let counter = 0;
 		for (const switch_case of node.cases) {
 			const case_body = [];
+			const consequent = switch_case.consequent;
+
+			if (consequent.length !== 0) {
+				const consequent_scope = context.state.scopes.get(consequent) || context.state.scope;
 
-			if (switch_case.consequent.length !== 0) {
-				const consequent_scope =
-					context.state.scopes.get(switch_case.consequent) || context.state.scope;
+				const block = transform_body(consequent, {
+					...context,
+					state: { ...context.state, scope: consequent_scope },
+				});
+				const has_break = consequent.some((stmt) => stmt.type === 'BreakStatement');
+				const is_last = counter === node.cases.length - 1;
+				const is_default = switch_case.test == null;
 				const consequent_id = context.state.scope.generate(
-					'switch_case_' + (switch_case.test == null ? 'default' : i),
+					'switch_case_' + (is_default ? 'default' : id_gen),
 				);
-				const consequent = b.block(
-					transform_body(switch_case.consequent, {
-						...context,
-						state: { ...context.state, scope: consequent_scope },
-					}),
-				);
-
-				statements.push(b.var(b.id(consequent_id), b.arrow([b.id('__anchor')], consequent)));
 
-				case_body.push(b.return(b.id(consequent_id)));
+				statements.push(b.var(b.id(consequent_id), b.arrow([b.id('__anchor')], b.block(block))));
+				case_body.push(
+					b.stmt(b.call(b.member(b.id('result'), b.id('push'), false), b.id(consequent_id))),
+				);
 
-				i++;
+				// in js, `default:` can be in the middle without a break
+				// so we only add return for the last case or cases with a break
+				if (has_break || is_last) {
+					case_body.push(b.return(b.id('result')));
+				}
+				id_gen++;
 			}
 
+			counter++;
+
 			cases.push(
 				b.switch_case(
 					switch_case.test ? /** @type {AST.Expression} */ (context.visit(switch_case.test)) : null,
@@ -1870,6 +1880,7 @@ const visitors = {
 					id,
 					b.thunk(
 						b.block([
+							b.var(b.id('result'), b.array([])),
 							b.switch(/** @type {AST.Expression} */ (context.visit(node.discriminant)), cases),
 						]),
 					),

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>');
+	});
 });