ripple 0.3.42 → 0.3.44

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # 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
+
+- Updated dependencies
+  [[`5c6ee71`](https://github.com/Ripple-TS/ripple/commit/5c6ee71bfd4f5dc443c43eb34e631bb032606faf),
+  [`83b19fd`](https://github.com/Ripple-TS/ripple/commit/83b19fd67aa27eb10e93205dd88c61b13ffbc523)]:
+  - @tsrx/ripple@0.0.25
+  - ripple@0.3.43
+
 ## 0.3.42
 
 ### 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.42",
+  "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.24"
+    "@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.22"
+    "@tsrx/core": "0.0.24"
   },
   "peerDependencies": {
-    "ripple": "0.3.42"
+    "ripple": "0.3.44"
   }
 }

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

@@ -20,25 +20,25 @@ describe('compiler > basics', () => {
 		const source = `export component App() {
   <div id="myid" class="myclass">{"Hello World"}</div>
 
-  <style>#style</style>
+  <style>__STYLE__</style>
 }`;
 		const style1 = '.myid {color: green }';
 		const style2 = '#myid {color: green }';
 		const style3 = 'div {color: green }';
 
-		let input = source.replace('#style', style1);
+		let input = source.replace('__STYLE__', style1);
 		let ast = parse(input);
 		expect(
 			((ast.body[0] as AST.ExportNamedDeclaration).declaration as unknown as AST.Component)?.css.source,
 		).toEqual(style1);
 
-		input = source.replace('#style', style2);
+		input = source.replace('__STYLE__', style2);
 		ast = parse(input);
 		expect(
 			((ast.body[0] as AST.ExportNamedDeclaration).declaration as unknown as AST.Component)?.css.source,
 		).toEqual(style2);
 
-		input = source.replace('#style', style3);
+		input = source.replace('__STYLE__', style3);
 		ast = parse(input);
 		expect(
 			((ast.body[0] as AST.ExportNamedDeclaration).declaration as unknown as AST.Component)?.css.source,
@@ -756,6 +756,75 @@ export component App() {
 		).toBe(true);
 	});
 
+	it('maps module server import identifiers in Volar output', () => {
+		const source = `module server {
+	export function loadUser() {
+		return { id: '1' };
+	}
+}
+
+import { loadUser as getUser } from server;
+import { loadUser } from server;
+
+component App() {
+	const user = getUser();
+	const user2 = loadUser();
+	<div>{user.id}{user2.id}</div>
+}`;
+		const result = compile_to_volar_mappings(source, 'test.tsrx', { loose: true });
+		const generated_member = '_$_server_$_.loadUser';
+		const generated_member_offset = result.code.indexOf(generated_member);
+		const generated_imported_offset = generated_member_offset + '_$_server_$_'.length + 1;
+		const generated_local_offset = result.code.indexOf('const getUser') + 'const '.length;
+		const generated_non_alias_member_offset =
+			result.code.indexOf(generated_member, generated_member_offset + 1) + '_$_server_$_'.length +
+			1;
+		const generated_non_alias_local_offset =
+			result.code.indexOf('const loadUser') + 'const '.length;
+		const source_imported_offset = source.indexOf('loadUser as');
+		const source_local_offset = source.indexOf('getUser }');
+		const source_non_alias_offset = source.indexOf('loadUser }');
+		const source_server_offset = source.indexOf('server;');
+
+		function find_mapping(
+			source_offset: number,
+			generated_offset: number,
+			length: number,
+			generated_length = length,
+		) {
+			return result.mappings.find(
+				(mapping) => mapping.sourceOffsets[0] === source_offset &&
+					mapping.generatedOffsets[0] === generated_offset &&
+					mapping.lengths[0] === length &&
+					mapping.generatedLengths[0] === generated_length,
+			);
+		}
+
+		expect(result.errors).toEqual([]);
+		expect(result.code).toContain('const getUser = _$_server_$_.loadUser;');
+		expect(result.code).toContain('const loadUser = _$_server_$_.loadUser;');
+		expect(
+			find_mapping(source_imported_offset, generated_imported_offset, 'loadUser'.length),
+		).toBeDefined();
+		expect(
+			find_mapping(source_local_offset, generated_local_offset, 'getUser'.length),
+		).toBeDefined();
+		expect(
+			find_mapping(source_non_alias_offset, generated_non_alias_local_offset, 'loadUser'.length),
+		).toBeDefined();
+		expect(
+			find_mapping(source_non_alias_offset, generated_non_alias_member_offset, 'loadUser'.length),
+		).toBeDefined();
+		expect(
+			find_mapping(
+				source_server_offset,
+				generated_member_offset,
+				'server'.length,
+				'_$_server_$_'.length,
+			),
+		).toBeDefined();
+	});
+
 	it('collects volar parser diagnostics outside loose mode', () => {
 		const result = compile_to_volar_mappings(`component App() {
 				return <div />;
@@ -813,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/css/style-identifier.test.tsrx

@@ -1,15 +1,15 @@
 import { track } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
-describe('#style identifier', () => {
+describe('{style} directive', () => {
 	describe('basic usage with components', () => {
-		it('passes scoped class to a child component via #style', () => {
+		it('passes scoped class to a child component via {style}', () => {
 			component Child({ className }: { className: string }) {
 				<div class={className}>{'styled child'}</div>
 			}
 
 			component Parent() {
-				<Child className={#style.highlight} />
+				<Child className={style 'highlight'} />
 
 				<style>
 					.highlight {
@@ -28,14 +28,14 @@ describe('#style identifier', () => {
 			expect(classes.some((cls: string) => cls === 'highlight')).toBe(true);
 		});
 
-		it('passes multiple #style classes to a child component', () => {
+		it('passes multiple {style} classes to a child component', () => {
 			component Child({ primary, secondary }: { primary: string; secondary: string }) {
 				<div class={primary}>{'primary'}</div>
 				<span class={secondary}>{'secondary'}</span>
 			}
 
 			component Parent() {
-				<Child primary={#style.primary} secondary={#style.secondary} />
+				<Child primary={style 'primary'} secondary={style 'secondary'} />
 
 				<style>
 					.primary {
@@ -64,7 +64,25 @@ describe('#style identifier', () => {
 			expect(spanClasses.some((cls: string) => cls === 'secondary')).toBe(true);
 		});
 
-		it('passes scoped class to a dynamic child component via #style', () => {
+		it('allows {style} props on child components with children', () => {
+			const source = `
+component Child({ className }) {
+	<div class={className}>"hello world"</div>
+}
+component App() {
+	<Child className={style 'container'}>"hello world"</Child>
+
+	<style>
+		.container {
+			color: red;
+		}
+	</style>
+}`;
+
+			expect(() => compile(source, 'test.tsrx')).not.toThrow();
+		});
+
+		it('passes scoped class to a dynamic child component via {style}', () => {
 			component Child({ cls }: { cls: string }) {
 				<span class={cls}>{'text'}</span>
 			}
@@ -72,7 +90,7 @@ describe('#style identifier', () => {
 			component Parent() {
 				let dynamic = track(() => Child);
 				<div class="wrapper">
-					<@dynamic cls={#style.text} />
+					<@dynamic cls={style 'text'} />
 				</div>
 
 				<style>
@@ -91,7 +109,7 @@ describe('#style identifier', () => {
 			expect(classes.some((cls: string) => cls === 'text')).toBe(true);
 		});
 
-		it('child can combine its own classes with parent #style class', () => {
+		it('child can combine its own classes with parent {style} class', () => {
 			component Card({ className }: { className?: string }) {
 				<div class={['card-base', className ?? '']}>{'card content'}</div>
 
@@ -103,7 +121,7 @@ describe('#style identifier', () => {
 			}
 
 			component App() {
-				<Card className={#style.themed} />
+				<Card className={style 'themed'} />
 
 				<style>
 					.themed {
@@ -128,7 +146,7 @@ describe('#style identifier', () => {
 
 			component App() {
 				<div class="parent">
-					<Child cls={#style.dual} />
+					<Child cls={style 'dual'} />
 				</div>
 
 				<style>
@@ -152,10 +170,10 @@ describe('#style identifier', () => {
 	});
 
 	describe('compile errors', () => {
-		it('errors when #style is used directly on a DOM element', () => {
+		it('errors when {style} is used directly on a DOM element', () => {
 			const source = `
 component App() {
-	<div class={#style.box}>{'content'}</div>
+	<div class={style 'box'}>{'content'}</div>
 
 	<style>
 		.box {
@@ -166,10 +184,10 @@ component App() {
 			expect(() => compile(source, 'test.tsrx')).toThrow(/cannot be used directly on DOM elements/);
 		});
 
-		it('errors when #style bracket notation is used directly on a DOM element', () => {
+		it('errors when {style} is used directly on a DOM element class', () => {
 			const source = `
 component App() {
-	<div class={#style['container']}>{'content'}</div>
+	<div class={style 'container'}>{'content'}</div>
 
 	<style>
 		.container {
@@ -180,13 +198,13 @@ component App() {
 			expect(() => compile(source, 'test.tsrx')).toThrow(/cannot be used directly on DOM elements/);
 		});
 
-		it('errors when #style references a class in a compound selector passed to component', () => {
+		it('errors when {style} references a class in a compound selector passed to component', () => {
 			const source = `
 component Child({ cls }) {
 	<span class={cls}>{'text'}</span>
 }
 component App() {
-	<Child cls={#style.special} />
+	<Child cls={style 'special'} />
 
 	<style>
 		span.special {
@@ -206,7 +224,7 @@ component App() {
 				component App() {
 					<div class="wrapper">
 						<Child
-							cls={#style.nested}
+							cls={style 'nested'}
 						/>
 					</div>
 
@@ -234,7 +252,7 @@ component App() {
 						<Child
 							// @ts-expect-error - cannot use child combinator class as standalone
 							// @ripple-expect-error - cannot use child combinator class as standalone
-							cls={#style.child}
+							cls={style 'child'}
 						/>
 					</div>
 
@@ -261,7 +279,7 @@ component App() {
 						<Child
 							// @ts-expect-error - cannot use compound class as standalone
 							// @ripple-expect-error - cannot use compound class as standalone
-							cls={#style.child}
+							cls={style 'child'}
 						/>
 					</div>
 
@@ -277,7 +295,7 @@ component App() {
 			expect(() => compile(source, 'test.tsrx')).toThrow(/does not exist as a stand-alone class/);
 		});
 
-		it('errors if descendant #style class is used on a dynamic component', () => {
+		it('errors if descendant {style} class is used on a dynamic component', () => {
 			const source = `
 
 				component Child({ cls }) {
@@ -287,7 +305,7 @@ component App() {
 				component App() {
 					let dynamic = track(() => Child);
 					<div class="wrapper">
-						<@dynamic cls={#style.nested} />
+						<@dynamic cls={style 'nested'} />
 					</div>
 
 					<style>
@@ -302,13 +320,13 @@ component App() {
 			expect(() => compile(source, 'test.tsrx')).toThrow(/does not exist as a stand-alone class/);
 		});
 
-		it('errors when #style references a class that does not exist in the style block', () => {
+		it('errors when {style} references a class that does not exist in the style block', () => {
 			const source = `
 component Child({ cls }) {
 	<div class={cls}>{'text'}</div>
 }
 component App() {
-	<Child cls={#style.missing} />
+	<Child cls={style 'missing'} />
 
 	<style>
 		.other {
@@ -319,14 +337,14 @@ component App() {
 			expect(() => compile(source, 'test.tsrx')).toThrow(/does not exist as a stand-alone class/);
 		});
 
-		it('errors when #style is used with a dynamic expression', () => {
+		it('errors when {style} is used with a dynamic expression', () => {
 			const source = `
 component Child({ cls }) {
 	<div class={cls}>{'text'}</div>
 }
-component App() {
-	const key = 'highlight';
-	<Child cls={#style[key]} />
+	component App() {
+		const key = 'highlight';
+		<Child cls={style 'highlight' + key} />
 
 	<style>
 		.highlight {
@@ -334,27 +352,32 @@ component App() {
 		}
 	</style>
 }`;
-			expect(() => compile(source, 'test.tsrx')).toThrow(
-				/must use a dot property or static string/,
-			);
+			expect(() => compile(source, 'test.tsrx')).toThrow(/must be used in the form/);
 		});
 
-		it('errors when #style is used outside of a component', () => {
-			const source = `function notAComponent() {
-	const cls = #style.foo;
+		it('errors when {style} is used as a child expression', () => {
+			const source = `component App() {
+	<div>{style 'foo'}</div>
+	<style>
+		.foo {
+			color: red;
+		}
+	</style>
 }`;
-			expect(() => compile(source, 'test.tsrx')).toThrow(/can only be used within a component/);
+			expect(() => compile(source, 'test.tsrx')).toThrow(
+				/can only be used as an element attribute value/,
+			);
 		});
 	});
 
 	describe('compiler output', () => {
-		it('generates #style object with standalone classes for client mode', () => {
+		it('inlines scoped class strings for client mode', () => {
 			const source = `
 component Child({ cls }) {
 	<div class={cls}>{'text'}</div>
 }
 export component App() {
-	<Child cls={#style.highlight} />
+	<Child cls={style 'highlight'} />
 
 	<style>
 		.highlight {
@@ -368,13 +391,13 @@ export component App() {
 			expect(js.code).toMatch(/tsrx-[a-z0-9]+/);
 		});
 
-		it('generates #style object with standalone classes for server mode', () => {
+		it('inlines scoped class strings for server mode', () => {
 			const source = `
 component Child({ cls }) {
 	<div class={cls}>{'text'}</div>
 }
 export component App() {
-	<Child cls={#style.highlight} />
+	<Child cls={style 'highlight'} />
 
 	<style>
 		.highlight {

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/hydration/compiled/client/track-async-serialization.js

@@ -32,10 +32,8 @@ var root_25 = _$_.template(`<button class="increment">increment</button><!>`, 1,
 
 import { track, trackAsync } from 'ripple';
 
-var _$__u0023_server = {
-	formatValue(...args) {
-		return _$_.rpc('1215faad', args);
-	}
+const formatValue = function (...args) {
+	return _$_.rpc('1215faad', args);
 };
 
 export function AsyncWithServerCall(__anchor, _, __block) {
@@ -54,7 +52,7 @@ export function AsyncWithServerCall(__anchor, _, __block) {
 	_$_.try(
 		node,
 		(__anchor) => {
-			let lazy_1 = _$_.track_async(() => _$_.with_scope(__block, () => _$__u0023_server.formatValue(_$_.get(lazy))), __block, 'f0c2b41e');
+			let lazy_1 = _$_.track_async(() => _$_.with_scope(__block, () => formatValue(_$_.get(lazy))), __block, 'f0c2b41e');
 			var p_1 = root_1();
 
 			{

package/tests/hydration/compiled/server/track-async-serialization.js

@@ -13,6 +13,10 @@ export const _$_server_$_ = (() => {
 	return _$_server_$_;
 })();
 
+const formatValue = function (...args) {
+	return _$_server_$_.formatValue(...args);
+};
+
 export function AsyncWithServerCall() {
 	_$_.push_component();
 
@@ -34,7 +38,7 @@ export function AsyncWithServerCall() {
 		() => {
 			_$_.output_push('<!--[-->');
 
-			let lazy_1 = _$_.track_async(() => _$_server_$_.formatValue(_$_.get(lazy)), 'f0c2b41e');
+			let lazy_1 = _$_.track_async(() => formatValue(_$_.get(lazy)), 'f0c2b41e');
 
 			_$_.regular_block(() => {
 				_$_.output_push('<p');

package/tests/hydration/components/track-async-serialization.tsrx

@@ -1,11 +1,13 @@
 import { track, trackAsync } from 'ripple';
 
-#server {
+module server {
 	export async function formatValue(n: number): Promise<string> {
 		return `server-${n}`;
 	}
 }
 
+import { formatValue } from server;
+
 export component AsyncWithServerCall() {
 	let &[count] = track(0);
 
@@ -18,7 +20,7 @@ export component AsyncWithServerCall() {
 		{'increment'}
 	</button>
 	try {
-		let &[data] = trackAsync(() => #server.formatValue(count));
+		let &[data] = trackAsync(() => formatValue(count));
 		<p class="result">{data}</p>
 	} pending {
 		<p class="loading">{'loading...'}</p>

package/tests/hydration/html.test.js

@@ -111,7 +111,7 @@ describe('hydration > html tags', () => {
 		expect(html).toContain('toc');
 	});
 
-	it('reproduces hydration mismatch when client has default props (DocsPage #server pattern)', async () => {
+	it('reproduces hydration mismatch when client has default props (DocsPage module server pattern)', async () => {
 		await hydrateComponent(
 			ServerComponents.HtmlWithServerData,
 			ClientComponents.HtmlWithClientDefaults,

package/tests/hydration/track-async-serialization.test.js

@@ -77,7 +77,7 @@ describe('hydration > trackAsync serialization', () => {
 		expect(container.querySelector('.result')?.textContent).toBe('count-1');
 	});
 
-	it('reruns trackAsync via #server RPC call when a dependency changes', async () => {
+	it('reruns trackAsync via module server RPC call when a dependency changes', async () => {
 		const originalFetch = globalThis.fetch;
 		const fetchMock = vi.fn(async (_url, init) => {
 			const args = devalue.parse(init.body);

package/tests/server/__snapshots__/compiler.test.tsrx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`compiler server block tests > compiles server block with with only supported types 1`] = `
+exports[`compiler server module tests > compiles module server with only supported types 1`] = `
 "import * as _$_ from 'ripple/internal/server';
 
 export const _$_server_$_ = (() => {

package/tests/server/compiler.test.tsrx

@@ -73,6 +73,20 @@ export component Layout(props) {
 		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).not.toThrow();
 	});
 
+	it('compiles indented direct double-quoted text children in SSR mode', () => {
+		const source = `
+export default component A() {
+	<div>
+		"Hello"
+	</div>
+}`;
+
+		const result = compile(source, 'test.tsrx', { mode: 'server' }).js.code;
+
+		expect(result).toContain(`_$_.output_push('Hello')`);
+		expect(result).not.toContain(`"Hello";`);
+	});
+
 	it('throws error for calling children as a function in SSR mode', () => {
 		const source = `
 export component Layout({ children }) {
@@ -118,10 +132,10 @@ export component App() {
 	});
 });
 
-describe('compiler server block tests', () => {
-	it('compiles server block with with only supported types', () => {
+describe('compiler server module tests', () => {
+	it('compiles module server with only supported types', () => {
 		const source = `
-#server {
+module server {
 	function something() {
 		return 'unexported function';
 	}
@@ -157,9 +171,43 @@ describe('compiler server block tests', () => {
 		expect(result.js.code).toMatchSnapshot();
 	});
 
-	it('throws error for unsupported exported object pattern in server block', () => {
+	it('compiles imports from module server as server-call wrappers', () => {
+		const source = `
+module server {
+	export async function loadUser(id) {
+		return { id };
+	}
+}
+
+import { loadUser as getUser } from server;
+
+export component App() {
+	const user = getUser('1');
+	<div>{user.id}</div>
+}`;
+
+		const result = compile(source, 'test.tsrx', { mode: 'server' });
+		expect(result.js.code).toContain('const getUser = function (...args)');
+		expect(result.js.code).toContain('return _$_server_$_.loadUser(...args)');
+		expect(result.js.code).toContain('export const _$_server_$_');
+	});
+
+	it('throws when server exports are used through direct member access', () => {
+		const source = `
+module server {
+	export async function loadUser() {}
+}
+
+server.loadUser();`;
+
+		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError(
+			/Import server exports/,
+		);
+	});
+
+	it('throws error for unsupported exported object pattern in server module', () => {
 		const source = `
-#server {
+module server {
 		const obj = { fn1: () => {}, fn2: () => {} };
 
 		export const { fn1, fn2 } = obj;
@@ -168,9 +216,9 @@ describe('compiler server block tests', () => {
 		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError();
 	});
 
-	it('throws error for unsupported exported array pattern in server block', () => {
+	it('throws error for unsupported exported array pattern in server module', () => {
 		const source = `
-#server {
+module server {
 		const arr = [() => {}, () => {}];
 
 		export const [fnarr1, fnarr2] = arr;
@@ -179,9 +227,9 @@ describe('compiler server block tests', () => {
 		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError();
 	});
 
-	it('throws error for unsupported exported member expression via object in server block', () => {
+	it('throws error for unsupported exported member expression via object in server module', () => {
 		const source = `
-#server {
+module server {
 		const obj = { fn1: () => {}, fn2: () => {} };
 
 		export const objProp = obj.fn1;
@@ -190,9 +238,9 @@ describe('compiler server block tests', () => {
 		expect(() => compile(source, 'test.tsrx', { mode: 'server' })).toThrowError();
 	});
 
-	it('throws error for unsupported exported member expression via array in server block', () => {
+	it('throws error for unsupported exported member expression via array in server module', () => {
 		const source = `
-#server {
+module server {
 		const arr = [() => {}, () => {}];
 
 		export const arrIndex0 = arr[0];

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

package/tests/server/style-identifier.test.tsrx

@@ -1,15 +1,15 @@
 import { track } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
-describe('#style identifier (server)', () => {
+describe('{style} directive (server)', () => {
 	describe('basic usage with components', () => {
-		it('passes scoped class to a child component via #style', async () => {
+		it('passes scoped class to a child component via {style}', async () => {
 			component Child({ className }: { className: string }) {
 				<div class={className}>{'styled child'}</div>
 			}
 
 			component Parent() {
-				<Child className={#style.highlight} />
+				<Child className={style 'highlight'} />
 
 				<style>
 					.highlight {
@@ -29,14 +29,14 @@ describe('#style identifier (server)', () => {
 			expect(classes.some((cls: string) => cls === 'highlight')).toBe(true);
 		});
 
-		it('passes multiple #style classes to a child component', async () => {
+		it('passes multiple {style} classes to a child component', async () => {
 			component Child({ primary, secondary }: { primary: string; secondary: string }) {
 				<div class={primary}>{'primary'}</div>
 				<span class={secondary}>{'secondary'}</span>
 			}
 
 			component Parent() {
-				<Child primary={#style.primary} secondary={#style.secondary} />
+				<Child primary={style 'primary'} secondary={style 'secondary'} />
 
 				<style>
 					.primary {
@@ -68,13 +68,13 @@ describe('#style identifier (server)', () => {
 	});
 
 	describe('parent styling applied to child', () => {
-		it('allows parent to style child elements via #style prop', async () => {
+		it('allows parent to style child elements via {style} prop', async () => {
 			component Button({ extraClass }: { extraClass?: string }) {
 				<button class={extraClass ?? ''}>{'Click me'}</button>
 			}
 
 			component App() {
-				<Button extraClass={#style.fancy} />
+				<Button extraClass={style 'fancy'} />
 
 				<style>
 					.fancy {
@@ -93,7 +93,7 @@ describe('#style identifier (server)', () => {
 			expect(classes.some((cls: string) => cls === 'fancy')).toBe(true);
 		});
 
-		it('child can combine its own classes with parent #style class', async () => {
+		it('child can combine its own classes with parent {style} class', async () => {
 			component Card({ className }: { className?: string }) {
 				<div class={['card-base', className ?? '']}>{'card content'}</div>
 
@@ -105,7 +105,7 @@ describe('#style identifier (server)', () => {
 			}
 
 			component App() {
-				<Card className={#style.themed} />
+				<Card className={style 'themed'} />
 
 				<style>
 					.themed {
@@ -133,7 +133,7 @@ describe('#style identifier (server)', () => {
 
 				component App() {
 					<div class="parent">
-						<Child cls={#style.dual} />
+						<Child cls={style 'dual'} />
 					</div>
 
 					<style>
@@ -158,7 +158,7 @@ describe('#style identifier (server)', () => {
 		);
 	});
 
-	it('passes scoped class to a dynamic child component via #style', async () => {
+	it('passes scoped class to a dynamic child component via {style}', async () => {
 		component Child({ cls }: { cls: string }) {
 			<span class={cls}>{'text'}</span>
 		}
@@ -166,7 +166,7 @@ describe('#style identifier (server)', () => {
 		component Parent() {
 			let dynamic = track(() => Child);
 			<div class="wrapper">
-				<@dynamic cls={#style.text} />
+				<@dynamic cls={style 'text'} />
 			</div>
 
 			<style>
@@ -261,13 +261,13 @@ describe('#style identifier (server)', () => {
 	});
 
 	describe('server compiler output', () => {
-		it('generates #style object with standalone classes', () => {
+		it('inlines scoped class strings', () => {
 			const source = `
 component Child({ cls }: { cls: string }) {
 	<div class={cls}>{'text'}</div>
 }
 export component App() {
-	<Child cls={#style.highlight} />
+	<Child cls={style 'highlight'} />
 
 	<style>
 		.highlight {
@@ -288,7 +288,7 @@ export component App() {
 			}
 
 			component App() {
-				<Child cls={#style.styled} />
+				<Child cls={style 'styled'} />
 
 				<style>
 					.styled {

package/tests/server/__snapshots__/compiler.test.ripple.snap

@@ -1,95 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`compiler server block tests > compiles server block with with only supported types 1`] = `
-"import * as _$_ from 'ripple/internal/server';
-
-export const _$_server_$_ = (() => {
-	var _$_server_$_ = {};
-
-	function something() {
-		return 'unexported function';
-	}
-
-	_$_server_$_.fetchUser = async function fetchUser(id) {
-		const response = await fetch(\`/api/user/\${id}\`);
-		const data = await response.json();
-
-		return data;
-	};
-
-	const fetchUserAlias = fetchUser;
-	const AliasForFetchUserAlias = fetchUserAlias;
-
-	{
-		_$_server_$_.AnotherAlias = AliasForFetchUserAlias;
-	}
-
-	{
-		_$_server_$_.func = function test() {
-			return 'test';
-		};
-	}
-
-	{
-		_$_server_$_.func2 = function () {
-			return 'test';
-		};
-	}
-
-	{
-		_$_server_$_.func3 = () => {
-			return 'test';
-		};
-	}
-
-	{
-		_$_server_$_.fetchUserAlias = fetchUserAlias;
-		_$_server_$_.AliasForFetchUserAlias = AliasForFetchUserAlias;
-	}
-
-	return _$_server_$_;
-})();"
-`;
-
-exports[`compiler typescript tests > compiles TSInstantiationExpression 1`] = `
-"import * as _$_ from 'ripple/internal/server';
-
-function makeBox(value) {
-	return { value };
-}
-
-const makeStringBox = (makeBox);
-const stringBox = makeStringBox('abc');
-const ErrorMap = (Map);
-const errorMap = new ErrorMap();"
-`;
-
-exports[`compiler typescript tests > removes class TypeScript syntax from JS output 1`] = `
-"import * as _$_ from 'ripple/internal/server';
-
-class PrintEvent {
-	text;
-
-	constructor(text) {
-		this.text = text;
-	}
-}"
-`;
-
-exports[`compiler typescript tests > removes class extends type arguments from JS output 1`] = `
-"import * as _$_ from 'ripple/internal/server';
-
-class StringMap extends Map {
-	constructor() {
-		super();
-	}
-}"
-`;
-
-exports[`compiler typescript tests > removes type assertions from function parameters and leaves default values 1`] = `
-"import * as _$_ from 'ripple/internal/server';
-
-function getString(e = 'test') {
-	return e;
-}"
-`;

package/tests/server/__snapshots__/compiler.test.rsrx.snap

@@ -1,95 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`compiler server block tests > compiles server block with with only supported types 1`] = `
-"import * as _$_ from 'ripple/internal/server';
-
-export const _$_server_$_ = (() => {
-	var _$_server_$_ = {};
-
-	function something() {
-		return 'unexported function';
-	}
-
-	_$_server_$_.fetchUser = async function fetchUser(id) {
-		const response = await fetch(\`/api/user/\${id}\`);
-		const data = await response.json();
-
-		return data;
-	};
-
-	const fetchUserAlias = fetchUser;
-	const AliasForFetchUserAlias = fetchUserAlias;
-
-	{
-		_$_server_$_.AnotherAlias = AliasForFetchUserAlias;
-	}
-
-	{
-		_$_server_$_.func = function test() {
-			return 'test';
-		};
-	}
-
-	{
-		_$_server_$_.func2 = function () {
-			return 'test';
-		};
-	}
-
-	{
-		_$_server_$_.func3 = () => {
-			return 'test';
-		};
-	}
-
-	{
-		_$_server_$_.fetchUserAlias = fetchUserAlias;
-		_$_server_$_.AliasForFetchUserAlias = AliasForFetchUserAlias;
-	}
-
-	return _$_server_$_;
-})();"
-`;
-
-exports[`compiler typescript tests > compiles TSInstantiationExpression 1`] = `
-"import * as _$_ from 'ripple/internal/server';
-
-function makeBox(value) {
-	return { value };
-}
-
-const makeStringBox = (makeBox);
-const stringBox = makeStringBox('abc');
-const ErrorMap = (Map);
-const errorMap = new ErrorMap();"
-`;
-
-exports[`compiler typescript tests > removes class TypeScript syntax from JS output 1`] = `
-"import * as _$_ from 'ripple/internal/server';
-
-class PrintEvent {
-	text;
-
-	constructor(text) {
-		this.text = text;
-	}
-}"
-`;
-
-exports[`compiler typescript tests > removes class extends type arguments from JS output 1`] = `
-"import * as _$_ from 'ripple/internal/server';
-
-class StringMap extends Map {
-	constructor() {
-		super();
-	}
-}"
-`;
-
-exports[`compiler typescript tests > removes type assertions from function parameters and leaves default values 1`] = `
-"import * as _$_ from 'ripple/internal/server';
-
-function getString(e = 'test') {
-	return e;
-}"
-`;