ripple 0.3.79 → 0.3.80

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # ripple
 
+## 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.80",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -74,8 +74,8 @@
     "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.28",
+    "@tsrx/ripple": "0.1.28"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

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