ripple 0.3.33 → 0.3.35

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # ripple
 
+## 0.3.35
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.3.35
+  - @tsrx/ripple@0.0.17
+
+## 0.3.34
+
+### Patch Changes
+
+- Updated dependencies
+  [[`fee8620`](https://github.com/Ripple-TS/ripple/commit/fee8620fa4e82a7c7e4adb3e434e9db552a3e157),
+  [`2fcacb4`](https://github.com/Ripple-TS/ripple/commit/2fcacb471d7780074f92b20c9b394f7650a941bb)]:
+  - @tsrx/ripple@0.0.16
+  - ripple@0.3.34
+
 ## 0.3.33
 
 ### 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.33",
+  "version": "0.3.35",
   "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.15"
+    "@tsrx/ripple": "0.0.17"
   },
   "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.13"
+    "@tsrx/core": "0.0.15"
   },
   "peerDependencies": {
-    "ripple": "0.3.33"
+    "ripple": "0.3.35"
   }
 }

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

@@ -249,6 +249,64 @@ describe('basic client > rendering & text', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('runs nested JavaScript blocks inside component-local callables', () => {
+		component App() {
+			function readFunction() {
+				const label = 'function outer';
+				let result = '';
+
+				{
+					const label = 'function inner';
+					result = label;
+				}
+
+				return `${result} / ${label}`;
+			}
+
+			const readArrow = () => {
+				const offset = 5;
+				let value = offset;
+
+				{
+					const offset = 17;
+					value += offset;
+				}
+
+				return value;
+			};
+
+			class Reader {
+				read() {
+					const label = 'method outer';
+					let result = '';
+
+					{
+						const label = 'method inner';
+						result = label;
+					}
+
+					return `${result} / ${label}`;
+				}
+			}
+
+			const reader = new Reader();
+
+			<div class="block-function">{readFunction()}</div>
+			<div class="block-arrow">{readArrow()}</div>
+			<div class="block-method">{reader.read()}</div>
+		}
+
+		render(App);
+
+		expect(container.querySelector('.block-function').textContent).toBe(
+			'function inner / function outer',
+		);
+		expect(container.querySelector('.block-arrow').textContent).toBe('22');
+		expect(container.querySelector('.block-method').textContent).toBe(
+			'method inner / method outer',
+		);
+	});
+
 	it('should handle consecutive text nodes without duplication', () => {
 		component App() {
 			const Something = conditional('a');

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

@@ -391,6 +391,91 @@ component App() {
 		expect(track_result).not.toContain('lazy0');
 	});
 
+	it('preserves optional markers in to_ts TypeScript output', () => {
+		const source = `
+export type OptionalTuple = [bar: string, baz?: string];
+export type OptionalFn = (bar: string, baz?: string) => void;
+export interface OptionalInterfaceFn {
+	(bar: string, baz?: string): void;
+}
+export function optionalFn(bar: string, baz?: string) {
+	todo(bar, baz);
+}
+`;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
+
+		expect(result).toContain('export type OptionalTuple = [bar: string, baz?: string];');
+		expect(result).toContain('export type OptionalFn = (bar: string, baz?: string) => void;');
+		expect(result).toContain('(bar: string, baz?: string): void');
+		expect(result).toContain('export function optionalFn(bar: string, baz?: string)');
+	});
+
+	it('preserves component type parameters in to_ts output', () => {
+		const source = `
+type Props<Item> = {
+	items: readonly Item[];
+}
+
+export component MyComponent<Item>(props: Props<Item>) {
+	<div />
+}
+`;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
+
+		expect(result).toContain('export function MyComponent<Item>(props: Props<Item>)');
+	});
+
+	it('preserves regular function type parameters in to_ts output', () => {
+		const source = `
+type Props<Item> = {
+	items: readonly Item[];
+}
+
+export function getItems<Item>(props: Props<Item>) {
+	return props.items;
+}
+`;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
+
+		expect(result).toContain('export function getItems<Item>(props: Props<Item>)');
+	});
+
+	it('maps optional TypeScript identifiers in to_ts output', () => {
+		const source = `
+export type OptionalTuple = [tupleRequired: string, tupleMaybe?: string];
+export type OptionalFn = (fnRequired: string, fnMaybe?: string) => void;
+export function optionalFn(declRequired: string, declMaybe?: string) {
+	todo(declRequired, declMaybe);
+}
+`;
+		const result = compile_to_volar_mappings(source, 'test.tsrx');
+
+		function expect_identifier_mapping(identifier: string, sourceNeedle: string) {
+			const source_offset = source.indexOf(sourceNeedle);
+			const generated_offset = result.code.indexOf(sourceNeedle);
+			const mapping = result.mappings.find(
+				(mapping: {
+					sourceOffsets: number[];
+					generatedOffsets: number[];
+					lengths: number[];
+					generatedLengths: number[];
+				}) => mapping.sourceOffsets[0] === source_offset &&
+					mapping.generatedOffsets[0] === generated_offset &&
+					mapping.lengths[0] === identifier.length &&
+					mapping.generatedLengths[0] === identifier.length,
+			);
+
+			expect(source_offset).toBeGreaterThan(-1);
+			expect(generated_offset).toBeGreaterThan(-1);
+			expect(mapping).toBeDefined();
+		}
+
+		expect(result.errors).toEqual([]);
+		expect_identifier_mapping('tupleMaybe', 'tupleMaybe?: string');
+		expect_identifier_mapping('fnMaybe', 'fnMaybe?: string');
+		expect_identifier_mapping('declMaybe', 'declMaybe?: string');
+	});
+
 	it('uses tracked fast path for nested lazy params typed as Tracked', () => {
 		const source = `
 import type { Tracked } from 'ripple';

package/tests/client/tsx.test.tsrx

@@ -1,6 +1,40 @@
 import { flushSync, track } from 'ripple';
 
 describe('tsx expression', () => {
+	it('renders an empty <tsx></tsx> element', () => {
+		component App() {
+			<tsx></tsx>
+		}
+		render(App);
+		expect(container.textContent).toBe('');
+	});
+
+	it('renders an empty <></> fragment shorthand', () => {
+		component App() {
+			<></>
+		}
+		render(App);
+		expect(container.textContent).toBe('');
+	});
+
+	it('renders an empty <tsx></tsx> assigned to a variable', () => {
+		component App() {
+			const el = <tsx></tsx>;
+			{el}
+		}
+		render(App);
+		expect(container.textContent).toBe('');
+	});
+
+	it('renders an empty <></> fragment assigned to a variable', () => {
+		component App() {
+			const el = <></>;
+			{el}
+		}
+		render(App);
+		expect(container.textContent).toBe('');
+	});
+
 	it('renders a basic fragment shorthand element', () => {
 		component App() {
 			const el = <tsx><div>hello world</div></tsx>;

package/tests/server/basic.test.tsrx

@@ -170,4 +170,58 @@ describe('basic client', () => {
 
 		expect(body).toBeHtml('<div>1</div><div>10</div><div>12<span>15</span></div>');
 	});
+
+	it('runs nested JavaScript blocks inside component-local callables', async () => {
+		component App() {
+			function readFunction() {
+				const label = 'function outer';
+				let result = '';
+
+				{
+					const label = 'function inner';
+					result = label;
+				}
+
+				return `${result} / ${label}`;
+			}
+
+			const readArrow = () => {
+				const offset = 5;
+				let value = offset;
+
+				{
+					const offset = 17;
+					value += offset;
+				}
+
+				return value;
+			};
+
+			class Reader {
+				read() {
+					const label = 'method outer';
+					let result = '';
+
+					{
+						const label = 'method inner';
+						result = label;
+					}
+
+					return `${result} / ${label}`;
+				}
+			}
+
+			const reader = new Reader();
+
+			<div class="block-function">{readFunction()}</div>
+			<div class="block-arrow">{readArrow()}</div>
+			<div class="block-method">{reader.read()}</div>
+		}
+
+		const { body } = await render(App);
+
+		expect(body).toBeHtml(
+			'<div class="block-function">function inner / function outer</div><div class="block-arrow">22</div><div class="block-method">method inner / method outer</div>',
+		);
+	});
 });