ripple 0.3.79 → 0.3.81

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # ripple
 
+## 0.3.81
+
+### Patch Changes
+
+- Updated dependencies
+  [[`67de047`](https://github.com/Ripple-TS/ripple/commit/67de047d103f39673b25910e1a97760278820999),
+  [`3b6fb73`](https://github.com/Ripple-TS/ripple/commit/3b6fb73170d4ad6a383befdda951ce0da4fcbb46),
+  [`1c645c8`](https://github.com/Ripple-TS/ripple/commit/1c645c8f854df23bb1271b3402d1885616b525cd),
+  [`b1256fd`](https://github.com/Ripple-TS/ripple/commit/b1256fdb5bf279ee7dd20bf1a71dcfccc47e279c)]:
+  - @tsrx/core@0.1.29
+  - @tsrx/ripple@0.1.29
+
+## 0.3.80
+
+### Patch Changes
+
+- Updated dependencies
+  [[`f001849`](https://github.com/Ripple-TS/ripple/commit/f00184940979a77cbf6873a811caaaa436feab46),
+  [`4af2591`](https://github.com/Ripple-TS/ripple/commit/4af259139d118a27d177531aa6a21435a3f3a015),
+  [`4af2591`](https://github.com/Ripple-TS/ripple/commit/4af259139d118a27d177531aa6a21435a3f3a015),
+  [`87afc5d`](https://github.com/Ripple-TS/ripple/commit/87afc5d3f4c73e604cd245865e27d29e40435482),
+  [`87afc5d`](https://github.com/Ripple-TS/ripple/commit/87afc5d3f4c73e604cd245865e27d29e40435482),
+  [`f1a4c10`](https://github.com/Ripple-TS/ripple/commit/f1a4c10d2ad8ed604375f36f7ae3b653fe95ed1a),
+  [`87afc5d`](https://github.com/Ripple-TS/ripple/commit/87afc5d3f4c73e604cd245865e27d29e40435482)]:
+  - @tsrx/core@0.1.28
+  - @tsrx/ripple@0.1.28
+
 ## 0.3.79
 
 ### 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.79",
+  "version": "0.3.81",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -67,15 +67,14 @@
     "#client": "./src/runtime/internal/client/types.d.ts",
     "#client/constants": "./src/internal/client/constants.js",
     "#server": "./src/runtime/internal/server/types.d.ts",
-    "#public": "./types/index.d.ts",
-    "#helpers": "./src/helpers.d.ts"
+    "#public": "./types/index.d.ts"
   },
   "dependencies": {
     "clsx": "^2.1.1",
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "0.1.27",
-    "@tsrx/ripple": "0.1.27"
+    "@tsrx/core": "0.1.29",
+    "@tsrx/ripple": "0.1.29"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/jsx-runtime.d.ts

@@ -1,5 +1,5 @@
 import type { AddEventObject, FragmentProps, RefKey, RefValue, TSRXElement } from '#public';
-import type { Nullable } from '#helpers';
+import type { Nullable } from '@tsrx/core/types/helpers';
 export type { RefValue } from '#public';
 
 /**

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

@@ -1,6 +1,6 @@
 /**
  * @import { Component, Dependency, Block, TryBlockWithCatch } from '#server';
- * @import { NestedArray } from '#helpers';
+ * @import { NestedArray } from '@tsrx/core/types/helpers';
  * @import { Props } from '#public';
  * @import { RenderResult, BaseRenderOptions, RenderStreamResult, Stream, StreamSink } from 'ripple/server';
  */

package/tests/client/code-block-children.test.tsrx

@@ -0,0 +1,180 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync, track } from 'ripple';
+
+describe('code blocks in template children position', () => {
+	it('renders a code block child with setup statements and output', () => {
+		function App() @{
+			<>
+				<span class="a">{'a'}</span>
+				@{
+					const x = 1;
+					<span class="x">{x}</span>
+				}
+			</>
+		}
+
+		render(App);
+
+		expect(container.querySelector('.a').textContent).toBe('a');
+		expect(container.querySelector('.x').textContent).toBe('1');
+	});
+
+	it('renders deeply nested code block children in source position', () => {
+		function App() @{
+			<>
+				<span class="a">{'a'}</span>
+				@{
+					const x = 1;
+					@{
+						const y = 2;
+						@{
+							<span class="sum">
+								{x + y}
+							</span>
+						}
+					}
+				}
+				<span class="b">{'b'}</span>
+			</>
+		}
+
+		render(App);
+
+		expect(container.textContent).toBe('a3b');
+		expect(container.querySelector('.sum').textContent).toBe('3');
+	});
+
+	it('renders nothing for empty nested code blocks', () => {
+		function App() @{
+			<>
+				<span>{'a'}</span>
+				<span>{'b'}</span>
+				@{
+					@{
+						@{}
+					}
+				}
+			</>
+		}
+
+		render(App);
+
+		expect(container.textContent).toBe('ab');
+	});
+
+	it('keeps code block render output reactive', () => {
+		function App() @{
+			const count = track(0);
+			<>
+				<button onClick={() => count.value++}>{'+'}</button>
+				@{
+					const doubled = () => count.value * 2;
+					<span class="doubled">{doubled()}</span>
+				}
+			</>
+		}
+
+		render(App);
+
+		expect(container.querySelector('.doubled').textContent).toBe('0');
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(container.querySelector('.doubled').textContent).toBe('2');
+	});
+
+	it('renders a code block child inside an @if branch', () => {
+		function App() @{
+			const show = track(true);
+			<>
+				<button onClick={() => (show.value = !show.value)}>{'toggle'}</button>
+				@if (show.value) {
+					@{
+						const label = 'shown';
+						<span class="label">{label}</span>
+					}
+				}
+			</>
+		}
+
+		render(App);
+
+		expect(container.querySelector('.label').textContent).toBe('shown');
+
+		container.querySelector('button').click();
+		flushSync();
+
+		expect(container.querySelector('.label')).toBeNull();
+	});
+
+	it('gives each code block its own lexical scope', () => {
+		function App() @{
+			const y = 10;
+			<>
+				<span class="a">{'a'}</span>
+				@{
+					const x = 1;
+					@{
+						const x = 2;
+						@{
+							<span class="sum">
+								{x + y}
+							</span>
+						}
+					}
+				}
+			</>
+		}
+
+		render(App);
+
+		// The innermost block sees the shadowing `x = 2` and the component's `y`.
+		expect(container.querySelector('.sum').textContent).toBe('12');
+	});
+
+	it('scopes code-only block statements', () => {
+		function App() @{
+			const items: number[] = [];
+			<>
+				@{
+					const scoped = 1;
+					items.push(scoped);
+				}
+				@{
+					const scoped = 2;
+					items.push(scoped);
+				}
+				<span class="len">{items.join(',')}</span>
+			</>
+		}
+
+		render(App);
+
+		expect(container.querySelector('.len').textContent).toBe('1,2');
+	});
+
+	it('renders nested code block chains without extra component levels', () => {
+		function App() @{
+			<>
+				<span class="a">{'a'}</span>
+				@{
+					const x = 1;
+					@{
+						const y = 2;
+						@{
+							<span class="sum">
+								{x + y}
+							</span>
+						}
+					}
+				}
+			</>
+		}
+
+		render(App);
+
+		expect(container.textContent).toBe('a3');
+		expect(container.querySelector('.sum').textContent).toBe('3');
+	});
+});

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

@@ -44,15 +44,15 @@ describe('compiler > basics', () => {
 		const style3 = 'div {color: green }';
 
 		let input = source.replace('__STYLE__', style1);
-		let ast = parse(input);
+		let ast = parse(input, 'App.tsrx');
 		expect(get_returned_tsrx(ast.body[0]).children.at(-1).children[0].source).toEqual(style1);
 
 		input = source.replace('__STYLE__', style2);
-		ast = parse(input);
+		ast = parse(input, 'App.tsrx');
 		expect(get_returned_tsrx(ast.body[0]).children.at(-1).children[0].source).toEqual(style2);
 
 		input = source.replace('__STYLE__', style3);
-		ast = parse(input);
+		ast = parse(input, 'App.tsrx');
 		expect(get_returned_tsrx(ast.body[0]).children.at(-1).children[0].source).toEqual(style3);
 	});
 
@@ -67,7 +67,7 @@ describe('compiler > basics', () => {
 	</>
 		}`;
 
-		const ast = parse(source);
+		const ast = parse(source, 'App.tsrx');
 		const elements = get_returned_tsrx(ast.body[0]).children.filter(
 			(node: AST.Node) => node.type === 'Element',
 		) as AST.Element[];
@@ -89,7 +89,7 @@ describe('compiler > basics', () => {
 	<div>{text markup}</div>
 		}`;
 
-		expect(() => parse(invalid_source)).toThrow();
+		expect(() => parse(invalid_source, 'App.tsrx')).toThrow();
 	});
 
 	it('optimizes string-shaped expressions as text nodes', () => {
@@ -192,7 +192,7 @@ export function App() @{
 				</>
 		}`;
 
-		const ast = parse(source);
+		const ast = parse(source, 'App.tsrx');
 		const declaration = (ast.body[0] as AST.VariableDeclaration).declarations[0];
 		const fragment = get_returned_tsrx(declaration) as any;
 
@@ -211,7 +211,7 @@ export function App() @{
 				</>
 		}`;
 
-		const ast = parse(source);
+		const ast = parse(source, 'App.tsrx');
 		const declaration = (ast.body[0] as AST.VariableDeclaration).declarations[0];
 		const fragment = get_returned_tsrx(declaration) as any;
 
@@ -1050,7 +1050,7 @@ function App() @{
 }
 `;
 
-		const ast = parse(source);
+		const ast = parse(source, 'App.tsrx');
 		const ast_json = JSON.stringify(ast);
 
 		expect(ast_json).toContain('"name":"effect"');
@@ -1223,7 +1223,7 @@ export function App() @{
 			const source = `function TodoList({ items }: { items: { text: string }[] }) @{
   <ul>var a = "123"</ul>
 			}`;
-			const ast = parse(source);
+			const ast = parse(source, 'App.tsrx');
 			const returned = get_returned_tsrx(ast.body[0]);
 			const ul =
 				returned.type === 'Element'
@@ -1262,6 +1262,6 @@ export function App() @{
 	<4;</ul>
 		}`;
 
-		expect(() => parse(source)).toThrow();
+		expect(() => parse(source, 'App.tsrx')).toThrow();
 	});
 });

package/tests/client/css/style-identifier.test.tsrx

@@ -270,5 +270,80 @@ export function App() @{
 			expect(code).toContain('highlight');
 			expect(code).toMatch(/tsrx-[a-z0-9]+ highlight/);
 		});
+
+		const unreachable_selectors_source = `
+export function App() @{
+	const styles = <style>
+		div {
+			color: red;
+		}
+		.parent .card {
+			font-weight: bold;
+		}
+		.card {
+			color: green;
+			&:hover {
+				color: blue;
+			}
+		}
+		:global(.badge) {
+			padding: 0;
+		}
+		:global(body) {
+			margin: 0;
+		}
+	</style>;
+
+	<div class={styles.card}>{'text'}</div>
+}`;
+
+		it('prunes style expression selectors the class map cannot reach in client mode', () => {
+			const { css, cssHash } = compile(unreachable_selectors_source, 'test.tsrx');
+
+			expect(css).toContain('/* (unused) div {');
+			expect(css).toContain('/* (unused) .parent .card {');
+			expect(css).toContain(`.card.${cssHash}`);
+			expect(css).toContain('&:hover {');
+			expect(css).toContain('.badge {');
+			expect(css).not.toContain(`.badge.${cssHash}`);
+			expect(css).toContain('/* (unused) :global(body) {');
+		});
+
+		it('prunes style expression selectors the class map cannot reach in server mode', () => {
+			const { css, cssHash } = compile(unreachable_selectors_source, 'test.tsrx', {
+				mode: 'server',
+			});
+
+			expect(css).toContain('/* (unused) div {');
+			expect(css).toContain('/* (unused) .parent .card {');
+			expect(css).toContain(`.card.${cssHash}`);
+			expect(css).toContain('&:hover {');
+			expect(css).toContain('.badge {');
+			expect(css).not.toContain(`.badge.${cssHash}`);
+			expect(css).toContain('/* (unused) :global(body) {');
+		});
+
+		it('keeps all selectors of a free-standing style block', () => {
+			const source = `
+export function App() @{
+	<>
+		<div class="card">{'text'}</div>
+
+		<style>
+			div {
+				color: red;
+			}
+			.card {
+				color: green;
+			}
+		</style>
+	</>
+}`;
+			const { css, cssHash } = compile(source, 'test.tsrx');
+
+			expect(css).not.toContain('(unused)');
+			expect(css).toContain(`div.${cssHash}`);
+			expect(css).toContain(`.card.${cssHash}`);
+		});
 	});
 });

package/tests/server/code-block-children.test.tsrx

@@ -0,0 +1,126 @@
+describe('code blocks in template children position', () => {
+	it('renders a code block child with setup statements and output', async () => {
+		function App() @{
+			<>
+				<span class="a">{'a'}</span>
+				@{
+					const x = 1;
+					<span class="x">{x}</span>
+				}
+			</>
+		}
+
+		const { body } = await render(App);
+
+		expect(body).toBeHtml('<span class="a">a</span><span class="x">1</span>');
+	});
+
+	it('renders deeply nested code block children in source position', async () => {
+		function App() @{
+			<>
+				<span class="a">{'a'}</span>
+				@{
+					const x = 1;
+					@{
+						const y = 2;
+						@{
+							<span class="sum">
+								{x + y}
+							</span>
+						}
+					}
+				}
+				<span class="b">{'b'}</span>
+			</>
+		}
+
+		const { body } = await render(App);
+
+		expect(body).toBeHtml(
+			'<span class="a">a</span><span class="sum">3</span><span class="b">b</span>',
+		);
+	});
+
+	it('renders nothing for empty nested code blocks', async () => {
+		function App() @{
+			<>
+				<span>{'a'}</span>
+				<span>{'b'}</span>
+				@{
+					@{
+						@{}
+					}
+				}
+			</>
+		}
+
+		const { body } = await render(App);
+
+		expect(body).toBeHtml('<span>a</span><span>b</span>');
+	});
+
+	it('renders a code block child inside an @if branch', async () => {
+		function App() @{
+			const show = true;
+			<>
+				@if (show) {
+					@{
+						const label = 'shown';
+						<span class="label">{label}</span>
+					}
+				}
+			</>
+		}
+
+		const { body } = await render(App);
+
+		expect(body).toBeHtml('<span class="label">shown</span>');
+	});
+
+	it('gives each code block its own lexical scope', async () => {
+		function App() @{
+			const y = 10;
+			<>
+				<span class="a">{'a'}</span>
+				@{
+					const x = 1;
+					@{
+						const x = 2;
+						@{
+							<span class="sum">
+								{x + y}
+							</span>
+						}
+					}
+				}
+			</>
+		}
+
+		const { body } = await render(App);
+
+		expect(body).toBeHtml('<span class="a">a</span><span class="sum">12</span>');
+	});
+
+	it('renders nested code block chains without extra component levels', async () => {
+		function App() @{
+			<>
+				<span class="a">{'a'}</span>
+				@{
+					const x = 1;
+					@{
+						const y = 2;
+						@{
+							<span class="sum">
+								{x + y}
+							</span>
+						}
+					}
+				}
+			</>
+		}
+
+		const { body } = await render(App);
+
+		expect(body).toBeHtml('<span class="a">a</span><span class="sum">3</span>');
+	});
+});

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

@@ -336,5 +336,65 @@ export function App() @{
 			expect(body).toMatch(/tsrx-[a-z0-9]+/);
 			expect(body).toContain('styled');
 		});
+
+		it('prunes style expression selectors the class map cannot reach', () => {
+			const source = `
+export function App() @{
+	const styles = <style>
+		div {
+			color: red;
+		}
+		.parent .card {
+			font-weight: bold;
+		}
+		.card {
+			color: green;
+			&:hover {
+				color: blue;
+			}
+		}
+		:global(.badge) {
+			padding: 0;
+		}
+		:global(body) {
+			margin: 0;
+		}
+	</style>;
+
+	<div class={styles.card}>{'text'}</div>
+}`;
+			const { css, cssHash } = compile(source, 'test.tsrx', { mode: 'server' });
+
+			expect(css).toContain('/* (unused) div {');
+			expect(css).toContain('/* (unused) .parent .card {');
+			expect(css).toContain(`.card.${cssHash}`);
+			expect(css).toContain('&:hover {');
+			expect(css).toContain('.badge {');
+			expect(css).not.toContain(`.badge.${cssHash}`);
+			expect(css).toContain('/* (unused) :global(body) {');
+		});
+
+		it('keeps all selectors of a free-standing style block', () => {
+			const source = `
+export function App() @{
+	<>
+		<div class="card">{'text'}</div>
+
+		<style>
+			div {
+				color: red;
+			}
+			.card {
+				color: green;
+			}
+		</style>
+	</>
+}`;
+			const { css, cssHash } = compile(source, 'test.tsrx', { mode: 'server' });
+
+			expect(css).not.toContain('(unused)');
+			expect(css).toContain(`div.${cssHash}`);
+			expect(css).toContain(`.card.${cssHash}`);
+		});
 	});
 });

package/tests/utils/ref-types.test.js

@@ -20,7 +20,7 @@ function get_diagnostics(source) {
 		paths: {
 			'@tsrx/core/runtime/ref': ['packages/tsrx/types/runtime/ref.d.ts'],
 			'@tsrx/core/types': ['packages/tsrx/types/index.d.ts'],
-			'#helpers': ['packages/ripple/src/helpers.d.ts'],
+			'@tsrx/core/types/helpers': ['packages/tsrx/types/helpers.d.ts'],
 			'#public': ['packages/ripple/types/index.d.ts'],
 			ripple: ['packages/ripple/types/index.d.ts'],
 			'ripple/jsx-runtime': ['packages/ripple/src/jsx-runtime.d.ts'],

package/src/helpers.d.ts

@@ -1,11 +0,0 @@
-export type RequireAllOrNone<T, K extends keyof T> =
-	| (T & Required<Pick<T, K>>)
-	| (T & { [P in K]?: never });
-
-export type RequiredPresent<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
-
-export type Nullable<T> = T | null;
-
-export type Nullish<T> = T | null | undefined;
-
-export type NestedArray<T> = (T | NestedArray<T>)[];