ripple 0.3.43 → 0.3.44

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # ripple
 
+## 0.3.44
+
+### Patch Changes
+
+- Updated dependencies
+  [[`f5a3c1b`](https://github.com/Ripple-TS/ripple/commit/f5a3c1b9e915c250c8cd1a7dcf4e80c44abe720f)]:
+  - @tsrx/ripple@0.0.26
+  - ripple@0.3.44
+
 ## 0.3.43
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.43",
+  "version": "0.3.44",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -76,7 +76,7 @@
     "esm-env": "^1.2.2",
     "@types/estree": "^1.0.8",
     "@types/estree-jsx": "^1.0.5",
-    "@tsrx/ripple": "0.0.25"
+    "@tsrx/ripple": "0.0.26"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
@@ -84,9 +84,9 @@
     "typescript": "^5.9.3",
     "@volar/language-core": "~2.4.28",
     "vscode-languageserver-types": "^3.17.5",
-    "@tsrx/core": "0.0.23"
+    "@tsrx/core": "0.0.24"
   },
   "peerDependencies": {
-    "ripple": "0.3.43"
+    "ripple": "0.3.44"
   }
 }

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

@@ -882,6 +882,22 @@ export component App() {}
 		);
 	});
 
+	it('does not let nested for...of continues satisfy an outer if body', () => {
+		const source = `
+export component App({ items }: { items: string[] }) {
+	if (items.length) {
+		for (const item of items) {
+			if (!item) continue
+		}
+	}
+}`;
+
+		const result = compile(source, 'test.tsrx', { collect: true });
+		expect(result.errors.map((error) => error.message)).toContain(
+			'Component if statements must contain a template in their "then" body. Move the if statement into an effect if it does not render anything.',
+		);
+	});
+
 	it('preserves class extends generic type arguments in volar output', () => {
 		const source = `class StringMap extends Map<string, string> {}
 export component App() {}`;

package/tests/client/for.test.tsrx

@@ -1,4 +1,5 @@
 import { RippleArray, flushSync, track } from 'ripple';
+import { compile } from '@tsrx/ripple';
 
 describe('for statements', () => {
 	it('renders a simple static array', () => {
@@ -15,6 +16,71 @@ describe('for statements', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('allows continue to skip an iteration', () => {
+		component App() {
+			const items = ['Item 1', '', 'Item 3'];
+
+			for (const item of items) {
+				if (!item) continue;
+				<div class="item">{item}</div>
+			}
+		}
+
+		render(App);
+
+		expect(Array.from(container.querySelectorAll('.item')).map((el) => el.textContent)).toEqual([
+			'Item 1',
+			'Item 3',
+		]);
+	});
+
+	it('allows continue after setup statements to skip an iteration', () => {
+		const skipped = [];
+
+		component App() {
+			const items = ['Item 1', '', 'Item 3'];
+
+			for (const item of items) {
+				if (!item) {
+					skipped.push('skip');
+					continue;
+				}
+				<div class="item">{item}</div>
+			}
+		}
+
+		render(App);
+
+		expect(skipped).toEqual(['skip']);
+		expect(Array.from(container.querySelectorAll('.item')).map((el) => el.textContent)).toEqual([
+			'Item 1',
+			'Item 3',
+		]);
+	});
+
+	it('does not emit JavaScript continue in for...of skip callbacks', () => {
+		const { js } = compile(
+			`component App() {
+				const items = ['Item 1', '', 'Item 3'];
+				const skipped = [];
+
+				for (const item of items) {
+					if (!item) {
+						skipped.push('skip');
+						continue;
+					}
+					<div class="item">{item}</div>
+				}
+			}`,
+			'App.tsrx',
+			{ mode: 'client' },
+		);
+
+		expect(js.code).toContain('skipped.push(\'skip\')');
+		expect(js.code).not.toContain('continue;');
+		expect(js.code).not.toMatch(/continue;\s*return/);
+	});
+
 	it('renders a simple dynamic array', () => {
 		component App() {
 			const items = new RippleArray('Item 1', 'Item 2', 'Item 3');

package/tests/server/for.test.tsrx

@@ -95,4 +95,71 @@ describe('for statements in SSR', () => {
 			'<div class="Item 1 0">Item 1 0</div><div class="Item 2 1">Item 2 1</div><div class="Item 3 2">Item 3 2</div>',
 		);
 	});
+
+	it('allows continue to skip a for...of iteration', async () => {
+		component App() {
+			const items = ['Item 1', '', 'Item 3'];
+
+			for (const item of items) {
+				if (!item) continue;
+				<div>{item}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBeHtml('<div>Item 1</div><div>Item 3</div>');
+	});
+
+	it('allows ordinary function control flow inside for...of loops', async () => {
+		component App() {
+			const items = ['Item 1', '', 'Item 3'];
+
+			for (const item of items) {
+				function label(value) {
+					for (let i = 0; i < 1; i++) {
+						while (i < 0) {
+							break;
+						}
+						if (!value) return 'missing';
+					}
+					return value;
+				}
+
+				<div>{label(item)}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBeHtml('<div>Item 1</div><div>missing</div><div>Item 3</div>');
+	});
+
+	it('throws for return statements inside for...of loops', () => {
+		expect(
+			() => compile(
+				`component App(items) {
+					for (const item of items) {
+						if (!item) return
+						<div>{item}</div>
+					}
+				}`,
+				'App.tsrx',
+				{ mode: 'server' },
+			),
+		).toThrow('Return statements are not allowed inside component for...of loops');
+	});
+
+	it('throws for break statements targeting for...of loops', () => {
+		expect(
+			() => compile(
+				`component App(items) {
+					for (const item of items) {
+						if (!item) break
+						<div>{item}</div>
+					}
+				}`,
+				'App.tsrx',
+				{ mode: 'server' },
+			),
+		).toThrow('Break statements are not allowed inside component for...of loops');
+	});
 });