ripple 0.2.111 → 0.2.113

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.111",
+  "version": "0.2.113",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -38,6 +38,11 @@
       "require": "./src/compiler/index.js",
       "default": "./src/compiler/index.js"
     },
+    "./bindings": {
+      "types": "./src/bindings/index.d.ts",
+      "require": "./src/bindings/index.js",
+      "default": "./src/bindings/index.js"
+    },
     "./validator": {
       "types": "./types/index.d.ts",
       "require": "./validator/index.js",
@@ -67,6 +72,7 @@
     "@sveltejs/acorn-typescript": "^1.0.6",
     "acorn": "^8.15.0",
     "clsx": "^2.1.1",
+    "devalue": "^5.3.2",
     "esm-env": "^1.2.2",
     "esrap": "^2.1.0",
     "is-reference": "^3.0.3",

package/src/bindings/index.d.ts

@@ -0,0 +1,13 @@
+import type { Tracked } from "ripple";
+
+/**
+ * @param {Tracked<V>} tracked
+ * @returns {(node: HTMLInputElement) => void}
+ */
+export declare function value<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;
+
+/**
+ * @param {Tracked<V>} tracked
+ * @returns {(node: HTMLInputElement) => void}
+ */
+export declare function checked<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;

package/src/bindings/index.js

@@ -0,0 +1,79 @@
+/** @import {Block, Tracked} from '#client' */
+
+import { active_block, get, set, tick } from '../runtime/internal/client';
+import { on } from '../runtime/internal/client/events';
+import { is_tracked_object } from '../runtime/internal/client/utils';
+
+/**
+ * @param {string} value
+ */
+function to_number(value) {
+	return value === '' ? null : +value;
+}
+
+/**
+ * @param {HTMLInputElement} input
+ */
+function is_numberlike_input(input) {
+	var type = input.type;
+	return type === 'number' || type === 'range';
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLInputElement) => void}
+ */
+export function value(maybe_tracked) {
+	if (!is_tracked_object(maybe_tracked)) {
+		throw new TypeError('value() argument is not a tracked object');
+	}
+
+	const block = /** @type {Block} */ (active_block);
+	const tracked = /** @type {Tracked} */ (maybe_tracked);
+
+	return (input) => {
+		const clear_event = on(input, 'input', async () => {
+			/** @type {any} */
+			var value = input.value;
+			value = is_numberlike_input(input) ? to_number(value) : value;
+			set(tracked, value, block);
+
+			await tick();
+
+			if (value !== (value = get(tracked))) {
+				var start = input.selectionStart;
+				var end = input.selectionEnd;
+				input.value = value ?? '';
+
+				// Restore selection
+				if (end !== null) {
+					input.selectionStart = start;
+					input.selectionEnd = Math.min(end, input.value.length);
+				}
+			}
+		});
+
+		return clear_event;
+	};
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLInputElement) => void}
+ */
+export function checked(maybe_tracked) {
+  if (!is_tracked_object(maybe_tracked)) {
+    throw new TypeError('checked() argument is not a tracked object');
+  }
+
+  const block = /** @type {any} */ (active_block);
+  const tracked = /** @type {Tracked<any>} */ (maybe_tracked);
+
+  return (input) => {
+    const clear_event = on(input, 'change', () => {
+      set(tracked, input.checked, block);
+    });
+
+    return clear_event;
+  };
+}

package/src/compiler/phases/1-parse/index.js

@@ -106,7 +106,11 @@ function RipplePlugin(config) {
 					if (inComponent) {
 						// Inside nested functions (scopeStack.length >= 5), treat < as relational/generic operator
 						// At component top-level (scopeStack.length <= 4), apply JSX detection logic
-						if (this.scopeStack.length >= 5) {
+						// BUT: if the < is followed by /, it's a closing JSX tag, not a less-than operator
+						const nextChar = this.pos + 1 < this.input.length ? this.input.charCodeAt(this.pos + 1) : -1;
+						const isClosingTag = nextChar === 47; // '/'
+
+						if (this.scopeStack.length >= 5 && !isClosingTag) {
 							// Inside function - treat as TypeScript generic, not JSX
 							++this.pos;
 							return this.finishToken(tt.relational, '<');

package/src/compiler/phases/3-transform/client/index.js

@@ -59,6 +59,10 @@ function visit_function(node, context) {
 
 	for (const param of node.params) {
 		delete param.typeAnnotation;
+		// Handle AssignmentPattern (parameters with default values)
+		if (param.type === 'AssignmentPattern' && param.left) {
+			delete param.left.typeAnnotation;
+		}
 	}
 
 	if (metadata?.hoisted === true) {

package/src/compiler/phases/3-transform/segments.js

@@ -55,7 +55,7 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 						continue; // Not a whole word match, keep searching
 					}
 				}
-				
+
 				sourceIndex = i + text.length;
 				return i;
 			}
@@ -87,7 +87,7 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 						continue; // Not a whole word match, keep searching
 					}
 				}
-				
+
 				generatedIndex = i + text.length;
 				return i;
 			}
@@ -98,7 +98,7 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	// Collect text tokens from AST nodes
 	/** @type {string[]} */
 	const tokens = [];
-	
+
 	// We have to visit everything in generated order to maintain correct indices
 	walk(ast, null, {
 		_(node, { visit }) {
@@ -194,24 +194,24 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 				return;
 			} else if (node.type === 'JSXElement') {
 				// Manually visit in source order: opening element, children, closing element
-				
+
 				// 1. Visit opening element (name and attributes)
 				if (node.openingElement) {
 					visit(node.openingElement);
 				}
-				
+
 				// 2. Visit children in order
 				if (node.children) {
 					for (const child of node.children) {
 						visit(child);
 					}
 				}
-				
+
 				// 3. Push closing tag name (not visited by AST walker)
 				if (!node.openingElement?.selfClosing && node.closingElement?.name?.type === 'JSXIdentifier') {
 					tokens.push(node.closingElement.name.name);
 				}
-				
+
 				return;
 			} else if (node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') {
 				// Visit in source order: id, params, body
@@ -991,7 +991,7 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	for (const text of tokens) {
 		const sourcePos = findInSource(text);
 		const genPos = findInGenerated(text);
-		
+
 		if (sourcePos !== null && genPos !== null) {
 			mappings.push({
 				sourceOffsets: [sourcePos],
@@ -1009,4 +1009,4 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 		code: generated_code,
 		mappings,
 	};
-}
+}

package/src/compiler/phases/3-transform/server/index.js

@@ -130,6 +130,13 @@ const visitors = {
 		return context.next();
 	},
 
+	NewExpression(node, context) {
+		if (!context.state.to_ts) {
+			delete node.typeArguments;
+		}
+		return context.next();
+	},
+
 	PropertyDefinition(node, context) {
 		if (!context.state.to_ts) {
 			delete node.typeAnnotation;
@@ -143,6 +150,10 @@ const visitors = {
 			delete node.typeParameters;
 			for (const param of node.params) {
 				delete param.typeAnnotation;
+				// Handle AssignmentPattern (parameters with default values)
+				if (param.type === 'AssignmentPattern' && param.left) {
+					delete param.left.typeAnnotation;
+				}
 			}
 		}
 		return context.next();
@@ -154,6 +165,10 @@ const visitors = {
 			delete node.typeParameters;
 			for (const param of node.params) {
 				delete param.typeAnnotation;
+				// Handle AssignmentPattern (parameters with default values)
+				if (param.type === 'AssignmentPattern' && param.left) {
+					delete param.left.typeAnnotation;
+				}
 			}
 		}
 		return context.next();
@@ -165,6 +180,10 @@ const visitors = {
 			delete node.typeParameters;
 			for (const param of node.params) {
 				delete param.typeAnnotation;
+				// Handle AssignmentPattern (parameters with default values)
+				if (param.type === 'AssignmentPattern' && param.left) {
+					delete param.left.typeAnnotation;
+				}
 			}
 		}
 		return context.next();

package/src/runtime/internal/client/rpc.js

@@ -1,14 +1,29 @@
+import * as devalue from 'devalue';
 
 /**
- * @param {string} hash 
- * @param {any[]} args 
+ * @param {string} hash
+ * @param {any[]} args
  */
-export function rpc(hash, args) {
-  return fetch('/_$_ripple_rpc_$_/' + hash, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(args)
-  }).then(res => res.json());
-}
+export async function rpc(hash, args) {
+	const body = devalue.stringify(args);
+	let data;
+
+	try {
+		const response = await fetch('/_$_ripple_rpc_$_/' + hash, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body,
+		});
+		data = await response.text();
+	} catch (err) {
+		throw new Error('An error occurred while trying to call the server function.');
+	}
+
+	if (data === '') {
+		throw new Error('The server function end-point did not return a response. Are you running a Ripple server?');
+	}
+
+	return devalue.parse(data).value;
+}

package/src/runtime/internal/client/types.d.ts

@@ -17,12 +17,12 @@ export type Dependency = {
 	n: null | Dependency;
 };
 
-export type Tracked = {
+export type Tracked<V = any> = {
 	a: { get?: Function, set?: Function };
 	b: Block;
 	c: number;
 	f: number;
-	v: any;
+	v: V;
 };
 
 export type Derived = {

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

@@ -2,7 +2,7 @@
 import { DERIVED, UNINITIALIZED } from '../client/constants.js';
 import { is_tracked_object } from '../client/utils.js';
 import { escape } from '../../../utils/escaping.js';
-import { is_boolean_attribute } from '../../../compiler/utils';
+import { is_boolean_attribute } from '../../../compiler/utils.js';
 import { clsx } from 'clsx';
 
 export { escape };

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

@@ -0,0 +1,13 @@
+import * as devalue from 'devalue';
+
+/**
+ * @template {any[]} T
+ * @template V
+ * @param {(...args: T) => Promise<V>} fn 
+ * @param {string} rpc_arguments_string
+ */
+export async function executeServerFunction(fn, rpc_arguments_string) {
+  const rpc_arguments = devalue.parse(rpc_arguments_string);
+  const result = await fn.apply(null, rpc_arguments);
+	return devalue.stringify({ value: result });
+}

package/src/server/index.js

@@ -1,2 +1,3 @@
 export { render } from '../runtime/internal/server/index.js';
 export { get_css_for_hashes } from '../runtime/internal/server/css-registry.js';
+export { executeServerFunction } from '../runtime/internal/server/rpc.js';

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

@@ -23,3 +23,11 @@ exports[`compiler success tests > compiles tracked values in effect with update
 			state.postDecrement = _$_.update(count, __block, -1);
 		}));"
 `;
+
+exports[`compiler success tests > removes type assertions from function parameters and leaves default values 1`] = `
+"import * as _$_ from 'ripple/internal/client';
+
+function getString(e = 'test') {
+	return e;
+}"
+`;

package/tests/client/compiler.test.ripple

@@ -510,4 +510,32 @@ const errorMap = new ErrorMap();`;
 
 		expect(result.js.code).toMatchSnapshot();
 	});
+
+	it('removes type assertions from function parameters and leaves default values', () => {
+		const source = `
+function getString(e: string = 'test') {
+	return e;
+}`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+
+		expect(result.js.code).toMatchSnapshot();
+	});
+
+	it('compiles without needing semicolons between statements and JSX', () => {
+		const source = `export component App() {
+	<div>const code4 = 4
+
+	const code3 = 3
+		<div>
+			<div>
+				const code = 1
+			</div>
+			const code2 = 2
+		</div>
+	</div>
+}`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+	});
 });

package/tests/client/composite.test.ripple

@@ -341,7 +341,7 @@ describe('composite components', () => {
 		component App() {
 			// Ambiguous generics vs JSX / less-than parsing scenarios
 
-			// // 7. Generic following optional chaining
+			// 7. Generic following optional chaining
 			const maybe = {
 				factory<T>() {
 					return {
@@ -353,11 +353,11 @@ describe('composite components', () => {
 			};
 			const g = maybe?.factory<number>()?.make<boolean>();
 
-			// // 8. Comparison operator (ensure '<' here NOT misparsed as generics)
+			// 8. Comparison operator (ensure '<' here NOT misparsed as generics)
 			let x = 10, y = 20;
 			const h = x < y ? 'lt' : 'ge';
 
-			// // 9. Chained comparisons with intervening generics
+			// 9. Chained comparisons with intervening generics
 			class Box<T> {
 				value: T;
 				constructor(value?: T) {
@@ -375,11 +375,11 @@ describe('composite components', () => {
 				<span>{'Test'}</span>
 			</div>
 
-			// // 11. Generic function call vs Element: Identifier followed by generic args
-			// function identity<T>(value: T): T {
-			// 	return value;
-			// }
-			// const j = identity<number>(42);
+			// 11. Generic function call vs Element: Identifier followed by generic args
+			function identity<T>(value: T): T {
+				return value;
+			}
+			const j = identity<number>(42);
 
 			// 12. Member + generic call immediately followed by another call
 			class Factory {
@@ -390,25 +390,25 @@ describe('composite components', () => {
 			const factory = new Factory();
 			const k = factory.create<number>()(123);
 
-			// // 13. Multiple generic segments in chain
-			// function foo<T>() {
-			// 	return {
-			// 		bar<U>() {
-			// 			return {
-			// 				baz<V>() {
-			// 					return true;
-			// 				}
-			// 			};
-			// 		}
-			// 	};
-			// }
-			// const l = foo<number>().bar<string>().baz<boolean>();
+			// 13. Multiple generic segments in chain
+			function foo<T>() {
+				return {
+					bar<U>() {
+						return {
+							baz<V>() {
+								return true;
+							}
+						};
+					}
+				};
+			}
+			const l = foo<number>().bar<string>().baz<boolean>();
 
 			// 14. Generic with constraint + default
 			type Extractor<T extends { id: number } = { id: number }> = (v: T) => number;
 			const m: Extractor = (v) => v.id;
 
-			// // 15. Generic in angle after "new" + trailing call
+			// 15. Generic in angle after "new" + trailing call
 			class Wrapper<T> {
 				value: T;
 				constructor() {
@@ -420,21 +420,21 @@ describe('composite components', () => {
 			}
 			const n = new Wrapper<number>().unwrap<string>();
 
-			// // 16. Angle brackets inside type assertion vs generic call
-			// function getUnknown(): unknown {
-			// 	return { a: 1 };
-			// }
-			// getUnknown.factory = function<T>() {
-			// 	return {
-			// 		make<U>() {
-			// 			return 2;
-			// 		}
-			// 	};
-			// };
-			// const raw = getUnknown();
-			// const o = (raw as Map<string, number>).get('a');
-
-			// // 17. Generic with comma + trailing less-than comparison on next token
+			// 16. Angle brackets inside type assertion vs generic call
+			function getUnknown(): unknown {
+				return new Map<string, number>([['a', 1]]);
+			}
+			getUnknown.factory = function<T>() {
+				return {
+					make<U>() {
+						return 2;
+					}
+				};
+			};
+			const raw = getUnknown();
+			const o = (raw as Map<string, number>).get('a');
+
+			// 17. Generic with comma + trailing less-than comparison on next token
 			class Pair<T1, T2> {
 				first: T1;
 				second: T2;
@@ -446,7 +446,7 @@ describe('composite components', () => {
 			const p = new Pair<number, string>();
 			const q = 1 < 2 ? p : null;
 
-			// // 18. Nested generics with line breaks resembling JSX indentation
+			// 18. Nested generics with line breaks resembling JSX indentation
 			interface Node<T> {
 				value: T;
 			}
@@ -466,7 +466,7 @@ describe('composite components', () => {
 				Edge<number>
 			>();
 
-			// // 19. Ternary containing generics in both branches
+			// 19. Ternary containing generics in both branches
 			let flag = true;
 			const s = flag ? new Box<number>() : new Box<string>();
 
@@ -477,55 +477,54 @@ describe('composite components', () => {
 			const registry = new TrackedMap<string, number>();
 			const u = registry.get<number>('id')?.toString();
 
-			// // 22. Generic call used as callee for another call
-			// function make<T>() {
-			// 	return (value: T) => value;
-			// }
-			// const v = make<number>()(10);
-
-			// // 23. Generic followed by tagged template (ensure not confused with JSX)
-			// function tagFn<T>(strings: TemplateStringsArray, ...values: T[]) {
-			// 	return values[0];
-			// }
-			// const tagResult = tagFn<number>`value`;
+			// 22. Generic call used as callee for another call
+			function make<T>() {
+				return (value: T) => value;
+			}
+			const v = make<number>()(10);
 
-			// // 24. Sequence mixing: (a < b) + generic call in same statement
-			// function compute<T>(x: T, y: T): T {
-			// 	return y;
-			// }
+			// 23. Generic followed by tagged template (ensure not confused with JSX)
+			function tagFn<T>(strings: TemplateStringsArray, ...values: T[]) {
+				return values[0];
+			}
+			const tagResult = tagFn<number>`value`;
 
-			// const w = (x < y) && compute<number>(x, y);
+			// 24. Sequence mixing: (a < b) + generic call in same statement
+			function compute<T>(x: T, y: T): T {
+				return y;
+			}
 
+			const w = (x < y) && compute<number>(x, y);
 
 
 			// Additional component focusing on edge crankers
 
-			// // 28. Generic after parenthesized new expression
+			// 28. Generic after parenthesized new expression
 			const aa = (new Box<number>()).open<string>();
 
-			// // 29. Generic chain right after closing paren of IIFE
-			// class Builder<Kind> {
-			// 	finalize<Result>() {
-			// 		return {
-			// 			result: null as unknown as Result
-			// 		};
-			// 	}
-			// }
-			// const builder = new Builder<Number>();
-			// const result = (function(){ return builder; })()<Number>().finalize<boolean>();
-
-			// // 30. Angle bracket start of conditional expression line
-			// function adjust<T>(value: T): T {
-			// 	return value;
-			// }
-			// const val =
-			// 	new Wrapper<number>()
-			// 		.value < 100
-			// 		? adjust<number>(10)
-			// 		: adjust<number>(20);
-
-
-			// // 32. Generic with comments inside angle list
+			// 29. Generic chain right after closing paren of IIFE
+			class Builder<Kind> {
+				finalize<Result>() {
+					return {
+						result: null as unknown as Result
+					};
+				}
+			}
+			const builder = new Builder<Number>();
+			const result = ((function(){ return builder; })() as Builder<Number>).finalize<boolean>();
+
+			// 30. Angle bracket start of conditional expression line
+			function adjust<T>(value: T): T {
+				return value;
+			}
+			const val =
+				new Wrapper<number>()
+					.value < 100
+					? adjust<number>(10)
+					: adjust<number>(20);
+
+
+			// 32. Generic with comments inside angle list
 			class Mapper<Key, Value> {
 				map: Map<Key, Value>;
 				constructor() {
@@ -539,7 +538,7 @@ describe('composite components', () => {
 				number
 			>();
 
-			// // 33. Map of generic instance as key
+			// 33. Map of generic instance as key
 			const mm = new Map<TrackedArray<number>, TrackedArray<string>>();
 		}
 
@@ -667,9 +666,9 @@ describe('composite components', () => {
 			effect(() => {
 				logs.push(@count);
 			})
-			
+
 			<button onClick={() => @count = @count + 1}>{'+'}</button>
-		} 
+		}
 
 		component App() {
 			const count = track(0);

package/tests/client/input-value.test.ripple

@@ -0,0 +1,63 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, track, effect } from 'ripple';
+import { value, checked } from 'ripple/bindings';
+
+describe('use value()', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container,
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
+
+	it('should update value on input', () => {
+		component App() {
+			const text = track('');
+
+			effect(() => {
+				console.log('text changed', @text);
+			});
+
+			<input type="text" {ref value(text)} />
+		}
+		render(App);
+		flushSync();
+
+		const input = container.querySelector('input');
+		input.value = 'Hello';
+		input.dispatchEvent(new Event('input'));
+		flushSync();
+		expect(input.value).toBe('Hello');
+	});
+
+	it('should update checked on input', () => {
+		component App() {
+			const value = track(false);
+
+			effect(() => {
+				console.log('checked changed', @value);
+			});
+
+			<input type="checkbox" {ref checked(value)} />
+		}
+		render(App);
+		flushSync();
+
+		const input = container.querySelector('input');
+		input.checked = true;
+		input.dispatchEvent(new Event('input'));
+		flushSync();
+		expect(input.checked).toBe(true);
+	});
+});

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

@@ -35,3 +35,11 @@ export async function App(__output) {
 	});
 }"
 `;
+
+exports[`compiler success tests > removes type assertions from function parameters and leaves default values 1`] = `
+"import * as _$_ from 'ripple/internal/client';
+
+function getString(e = 'test') {
+	return e;
+}"
+`;

package/tests/server/compiler.test.ripple

@@ -36,4 +36,15 @@ export component App() {
 		expect(result.js.code).toContain('await ChildComponent');
 		expect(result.js.code).toMatchSnapshot();
 	});
+
+	it('removes type assertions from function parameters and leaves default values', () => {
+		const source = `
+function getString(e: string = 'test') {
+	return e;
+}`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+
+		expect(result.js.code).toMatchSnapshot();
+	});
 });

package/tests/server/composite.test.ripple

@@ -0,0 +1,213 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'ripple/server';
+import { TrackedArray, TrackedMap } from 'ripple';
+
+describe('generics', () => {
+	it('handles advanced generic ambiguity and edge cases', () => {
+		component App() {
+			// Ambiguous generics vs JSX / less-than parsing scenarios
+
+			// 7. Generic following optional chaining
+			const maybe = {
+				factory<T>() {
+					return {
+						make<U>() {
+							return 1;
+						}
+					};
+				}
+			};
+			const g = maybe?.factory<number>()?.make<boolean>();
+
+			// 8. Comparison operator (ensure '<' here NOT misparsed as generics)
+			let x = 10, y = 20;
+			const h = x < y ? 'lt' : 'ge';
+
+			// 9. Chained comparisons with intervening generics
+			class Box<T> {
+				value: T;
+				constructor(value?: T) {
+					this.value = value;
+				}
+				open<U>() {
+					return new Box<U>();
+				}
+			}
+			const limit = 100;
+			const i = new Box<number>().value < limit ? 'ok' : 'no';
+
+			// 10. JSX / Element should still work
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
+
+			// 11. Generic function call vs Element: Identifier followed by generic args
+			function identity<T>(value: T): T {
+				return value;
+			}
+			const j = identity<number>(42);
+
+			// 12. Member + generic call immediately followed by another call
+			class Factory {
+				create<T>() {
+					return (value: T) => value;
+				}
+			}
+			const factory = new Factory();
+			const k = factory.create<number>()(123);
+
+			// 13. Multiple generic segments in chain
+			function foo<T>() {
+				return {
+					bar<U>() {
+						return {
+							baz<V>() {
+								return true;
+							}
+						};
+					}
+				};
+			}
+			const l = foo<number>().bar<string>().baz<boolean>();
+
+			// 14. Generic with constraint + default
+			type Extractor<T extends { id: number } = { id: number }> = (v: T) => number;
+			const m: Extractor = (v) => v.id;
+
+			// 15. Generic in angle after "new" + trailing call
+			class Wrapper<T> {
+				value: T;
+				constructor() {
+					this.value = null as unknown as T;
+				}
+				unwrap<U>() {
+					return null as unknown as U;
+				}
+			}
+			const n = new Wrapper<number>().unwrap<string>();
+
+			// 16. Angle brackets inside type assertion vs generic call
+			function getUnknown(): unknown {
+				return new Map<string, number>([['a', 1]]);
+			}
+			getUnknown.factory = function<T>() {
+				return {
+					make<U>() {
+						return 2;
+					}
+				};
+			};
+			const raw = getUnknown();
+			const o = (raw as Map<string, number>).get('a');
+
+			// 17. Generic with comma + trailing less-than comparison on next token
+			class Pair<T1, T2> {
+				first: T1;
+				second: T2;
+				constructor() {
+					this.first = null as unknown as T1;
+					this.second = null as unknown as T2;
+				}
+			}
+			const p = new Pair<number, string>();
+			const q = 1 < 2 ? p : null;
+
+			// 18. Nested generics with line breaks resembling JSX indentation
+			interface Node<T> {
+				value: T;
+			}
+			interface Edge<W> {
+				weight: W;
+			}
+			class Graph<N, E> {
+				nodes: N[];
+				edges: E[];
+				constructor() {
+					this.nodes = [];
+					this.edges = [];
+				}
+			}
+			const r = new Graph<
+				Node<string>,
+				Edge<number>
+			>();
+
+			// 19. Ternary containing generics in both branches
+			let flag = true;
+			const s = flag ? new Box<number>() : new Box<string>();
+
+			// 20. Generic inside template expression
+			const t = `length=${new TrackedArray<number>().length}`;
+
+			// 21. Optional chaining + generic + property access
+			const registry = new TrackedMap<string, number>();
+			const u = registry.get<number>('id')?.toString();
+
+			// 22. Generic call used as callee for another call
+			function make<T>() {
+				return (value: T) => value;
+			}
+			const v = make<number>()(10);
+
+			// 23. Generic followed by tagged template (ensure not confused with JSX)
+			function tagFn<T>(strings: TemplateStringsArray, ...values: T[]) {
+				return values[0];
+			}
+			const tagResult = tagFn<number>`value`;
+
+			// 24. Sequence mixing: (a < b) + generic call in same statement
+			function compute<T>(x: T, y: T): T {
+				return y;
+			}
+
+			const w = (x < y) && compute<number>(x, y);
+
+
+			// Additional component focusing on edge crankers
+
+			// 28. Generic after parenthesized new expression
+			const aa = (new Box<number>()).open<string>();
+
+			// 29. Generic chain right after closing paren of IIFE
+			class Builder<Kind> {
+				finalize<Result>() {
+					return {
+						result: null as unknown as Result
+					};
+				}
+			}
+			const builder = new Builder<Number>();
+			const result = ((function(){ return builder; })() as Builder<Number>).finalize<boolean>();
+
+			// 30. Angle bracket start of conditional expression line
+			function adjust<T>(value: T): T {
+				return value;
+			}
+			const val =
+				new Wrapper<number>()
+					.value < 100
+					? adjust<number>(10)
+					: adjust<number>(20);
+
+
+			// 32. Generic with comments inside angle list
+			class Mapper<Key, Value> {
+				map: Map<Key, Value>;
+				constructor() {
+					this.map = new Map<Key, Value>();
+				}
+			}
+			const gg = new Mapper<
+				// key type
+				string,
+				/* value type */
+				number
+			>();
+
+			// 33. Map of generic instance as key
+			const mm = new Map<TrackedArray<number>, TrackedArray<string>>();
+		}
+
+		render(App);
+	});
+});