ripple 0.2.102 → 0.2.103

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.102",
+  "version": "0.2.103",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -64,8 +64,8 @@
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.5",
+    "@sveltejs/acorn-typescript": "^1.0.6",
     "acorn": "^8.15.0",
-    "acorn-typescript": "^1.4.13",
     "clsx": "^2.1.1",
     "esrap": "^2.1.0",
     "is-reference": "^3.0.3",

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

@@ -5,12 +5,12 @@
  * } from '#compiler' */
 
 import * as acorn from 'acorn';
-import { tsPlugin } from 'acorn-typescript';
+import { tsPlugin } from '@sveltejs/acorn-typescript';
 import { parse_style } from './style.js';
 import { walk } from 'zimmerframe';
 import { regex_newline_characters } from '../../../utils/patterns.js';
 
-const parser = acorn.Parser.extend(tsPlugin({ allowSatisfies: true }), RipplePlugin());
+const parser = acorn.Parser.extend(tsPlugin({ jsx: true }), RipplePlugin());
 
 /**
  * Convert JSX node types to regular JavaScript node types
@@ -67,7 +67,51 @@ function RipplePlugin(config) {
 			getTokenFromCode(code) {
 				if (code === 60) {
 					// < character
-					if (this.#path.findLast((n) => n.type === 'Component')) {
+					const inComponent = this.#path.findLast((n) => n.type === 'Component');
+
+					// Check if this could be TypeScript generics instead of JSX
+					// TypeScript generics appear after: identifiers, closing parens, 'new' keyword
+					// For example: Array<T>, func<T>(), new Map<K,V>(), method<T>()
+					// This check applies everywhere, not just inside components
+
+					// Look back to see what precedes the <
+					let lookback = this.pos - 1;
+
+					// Skip whitespace backwards
+					while (lookback >= 0) {
+						const ch = this.input.charCodeAt(lookback);
+						if (ch !== 32 && ch !== 9) break; // not space or tab
+						lookback--;
+					}
+
+					// Check what character/token precedes the <
+					if (lookback >= 0) {
+						const prevChar = this.input.charCodeAt(lookback);
+
+						// If preceded by identifier character (letter, digit, _, $) or closing paren,
+						// this is likely TypeScript generics, not JSX
+						const isIdentifierChar =
+							(prevChar >= 65 && prevChar <= 90) || // A-Z
+							(prevChar >= 97 && prevChar <= 122) || // a-z
+							(prevChar >= 48 && prevChar <= 57) || // 0-9
+							prevChar === 95 || // _
+							prevChar === 36 || // $
+							prevChar === 41; // )
+
+						if (isIdentifierChar) {
+							return super.getTokenFromCode(code);
+						}
+					}
+
+					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) {
+							// Inside function - treat as TypeScript generic, not JSX
+							++this.pos;
+							return this.finishToken(tt.relational, '<');
+						}
+
 						// Check if everything before this position on the current line is whitespace
 						let lineStart = this.pos - 1;
 						while (
@@ -214,6 +258,88 @@ function RipplePlugin(config) {
 				return node;
 			}
 
+			/**
+			 * Override parseSubscripts to handle `.@[expression]` syntax for reactive computed member access
+			 * @param {any} base - The base expression
+			 * @param {number} startPos - Start position
+			 * @param {any} startLoc - Start location
+			 * @param {boolean} noCalls - Whether calls are disallowed
+			 * @param {any} maybeAsyncArrow - Optional async arrow flag
+			 * @param {any} optionalChained - Optional chaining flag
+			 * @param {any} forInit - For-init flag
+			 * @returns {any} Parsed subscript expression
+			 */
+			parseSubscripts(
+				base,
+				startPos,
+				startLoc,
+				noCalls,
+				maybeAsyncArrow,
+				optionalChained,
+				forInit,
+			) {
+				// Check for `.@[` pattern for reactive computed member access
+				const isDotOrOptional = this.type === tt.dot || this.type === tt.questionDot;
+
+				if (isDotOrOptional) {
+					// Check the next two characters without consuming tokens
+					// this.pos currently points AFTER the dot token
+					const nextChar = this.input.charCodeAt(this.pos);
+					const charAfter = this.input.charCodeAt(this.pos + 1);
+
+					// Check for @[ pattern (@ = 64, [ = 91)
+					if (nextChar === 64 && charAfter === 91) {
+						const node = this.startNodeAt(startPos, startLoc);
+						node.object = base;
+						node.computed = true;
+						node.optional = this.type === tt.questionDot;
+						node.tracked = true;
+
+						// Consume the dot/questionDot token
+						this.next();
+
+						// Manually skip the @ character
+						this.pos += 1;
+
+						// Now call finishToken to properly consume the [ bracket
+						this.finishToken(tt.bracketL);
+
+						// Now we're positioned correctly to parse the expression
+						this.next(); // Move to first token inside brackets
+
+						// Parse the expression inside brackets
+						node.property = this.parseExpression();
+
+						// Expect closing bracket
+						this.expect(tt.bracketR);
+
+						// Finish this MemberExpression node
+						base = this.finishNode(node, 'MemberExpression');
+
+						// Recursively handle any further subscripts (chaining)
+						return this.parseSubscripts(
+							base,
+							startPos,
+							startLoc,
+							noCalls,
+							maybeAsyncArrow,
+							optionalChained,
+							forInit,
+						);
+					}
+				}
+
+				// Fall back to default parseSubscripts implementation
+				return super.parseSubscripts(
+					base,
+					startPos,
+					startLoc,
+					noCalls,
+					maybeAsyncArrow,
+					optionalChained,
+					forInit,
+				);
+			}
 			/**
 			 * Parse expression atom - handles TrackedArray and TrackedObject literals
 			 * @param {any} [refDestructuringErrors]
@@ -1230,7 +1356,7 @@ function get_comment_handlers(source, comments, index = 0) {
 
 			comments = comments
 				.filter((comment) => comment.start >= index)
-				.map(({ type, value, start, end }) => ({ type, value, start, end }));
+				.map(({ type, value, start, end, loc }) => ({ type, value, start, end, loc }));
 
 			walk(ast, null, {
 				_(node, { next, path }) {
@@ -1301,11 +1427,56 @@ function get_comment_handlers(source, comments, index = 0) {
 export function parse(source) {
 	/** @type {CommentWithLocation[]} */
 	const comments = [];
-	const { onComment, add_comments } = get_comment_handlers(source, comments);
+
+	// Preprocess step 1: Add trailing commas to single-parameter generics followed by (
+	// This is a workaround for @sveltejs/acorn-typescript limitations with JSX enabled
+	let preprocessedSource = source;
+	let sourceChanged = false;
+
+	preprocessedSource = source.replace(/(<\s*[A-Z][a-zA-Z0-9_$]*\s*)>\s*\(/g, (_, generic) => {
+		sourceChanged = true;
+		// Add trailing comma to disambiguate from JSX
+		return `${generic},>(`;
+	});
+
+	// Preprocess step 2: Convert generic method shorthand in object literals to function property syntax
+	// Transform `method<T,>(...): ReturnType { body }` to `method: function<T,>(...): ReturnType { body }`
+	// Note: This only applies to object literal methods, not class methods
+	// The trailing comma was already added by step 1
+	preprocessedSource = preprocessedSource.replace(
+		/(\w+)(<[A-Z][a-zA-Z0-9_$,\s]*>)\s*\(([^)]*)\)(\s*:\s*[^{]+)?(\s*\{)/g,
+		(match, methodName, generics, params, returnType, brace, offset) => {
+			// Look backward to determine context
+			let checkPos = offset - 1;
+			while (checkPos >= 0 && /\s/.test(preprocessedSource[checkPos])) checkPos--;
+			const prevChar = preprocessedSource[checkPos];
+
+			// Check if we're inside a class
+			const before = preprocessedSource.substring(Math.max(0, offset - 500), offset);
+			const classMatch = before.match(/\bclass\s+\w+[^{]*\{[^}]*$/);
+
+			// Only transform if we're in an object literal context AND not inside a class
+			if ((prevChar === '{' || prevChar === ',') && !classMatch) {
+				sourceChanged = true;
+				// This is object literal method shorthand - convert to function property
+				// Add trailing comma if not already present
+				const fixedGenerics = generics.includes(',') ? generics : generics.replace('>', ',>');
+				return `${methodName}: function${fixedGenerics}(${params})${returnType || ''}${brace}`;
+			}
+			return match;
+		},
+	);
+
+	// Only mark as preprocessed if we actually changed something
+	if (!sourceChanged) {
+		preprocessedSource = source;
+	}
+
+	const { onComment, add_comments } = get_comment_handlers(preprocessedSource, comments);
 	let ast;
 
 	try {
-		ast = parser.parse(source, {
+		ast = parser.parse(preprocessedSource, {
 			sourceType: 'module',
 			ecmaVersion: 13,
 			locations: true,

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

@@ -1,4 +1,4 @@
-/** @import {Expression, FunctionExpression} from 'estree' */
+/** @import {Expression, FunctionExpression, Pattern} from 'estree' */
 
 import { walk } from 'zimmerframe';
 import path from 'node:path';
@@ -293,7 +293,6 @@ const visitors = {
 
 	NewExpression(node, context) {
 		const callee = node.callee;
-		const parent = context.path.at(-1);
 
 		if (context.state.metadata?.tracking === false) {
 			context.state.metadata.tracking = true;
@@ -305,18 +304,22 @@ const visitors = {
 			is_inside_call_expression(context) ||
 			is_value_static(node)
 		) {
+			if (!context.state.to_ts) {
+				delete node.typeArguments;
+			}
 			return context.next();
 		}
 
-		return b.call(
-			'_$_.with_scope',
-			b.id('__block'),
-			b.thunk({
-				...node,
-				callee: context.visit(callee),
-				arguments: node.arguments.map((arg) => context.visit(arg)),
-			}),
-		);
+		const new_node = {
+			...node,
+			callee: context.visit(callee),
+			arguments: node.arguments.map((arg) => context.visit(arg)),
+		};
+		if (!context.state.to_ts) {
+			delete new_node.typeArguments;
+		}
+
+		return b.call('_$_.with_scope', b.id('__block'), b.thunk(new_node));
 	},
 
 	TrackedArrayExpression(node, context) {
@@ -366,7 +369,7 @@ const visitors = {
 			context.state.metadata.tracking = true;
 		}
 
-		if (node.property.type === 'Identifier' && node.property.tracked) {
+		if (node.tracked || (node.property.type === 'Identifier' && node.property.tracked)) {
 			add_ripple_internal_import(context);
 
 			return b.call(
@@ -918,8 +921,7 @@ const visitors = {
 
 		if (
 			left.type === 'MemberExpression' &&
-			left.property.type === 'Identifier' &&
-			left.property.tracked
+			(left.tracked || (left.property.type === 'Identifier' && left.property.tracked))
 		) {
 			add_ripple_internal_import(context);
 			const operator = node.operator;
@@ -976,8 +978,7 @@ const visitors = {
 
 		if (
 			argument.type === 'MemberExpression' &&
-			argument.property.type === 'Identifier' &&
-			argument.property.tracked
+			(argument.tracked || (argument.property.type === 'Identifier' && argument.property.tracked))
 		) {
 			add_ripple_internal_import(context);
 			context.state.metadata.tracking = true;
@@ -1052,7 +1053,9 @@ const visitors = {
 						),
 					),
 					b.literal(flags),
-					key != null ? b.arrow(index ? [pattern, index] : [pattern], context.visit(key)) : undefined,
+					key != null
+						? b.arrow(index ? [pattern, index] : [pattern], context.visit(key))
+						: undefined,
 				),
 			),
 		);
@@ -1401,6 +1404,9 @@ function transform_ts_child(node, context) {
 			...context,
 			state: { ...context.state, scope: body_scope },
 		});
+		if (node.key) {
+			block_body.unshift(b.stmt(visit(node.key)));
+		}
 		if (node.index) {
 			block_body.unshift(b.let(visit(node.index), b.literal(0)));
 		}

package/tests/client/__snapshots__/computed-properties.test.ripple.snap

@@ -0,0 +1,49 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`computed tracked properties > should update a property using assignment 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <button>
+    Increment
+  </button>
+  
+</div>
+`;
+
+exports[`computed tracked properties > should update a property using assignment 2`] = `
+<div>
+  <div>
+    1
+  </div>
+  <button>
+    Increment
+  </button>
+  
+</div>
+`;
+
+exports[`computed tracked properties > should update a property using update expressions 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <button>
+    Increment
+  </button>
+  
+</div>
+`;
+
+exports[`computed tracked properties > should update a property using update expressions 2`] = `
+<div>
+  <div>
+    1
+  </div>
+  <button>
+    Increment
+  </button>
+  
+</div>
+`;

package/tests/client/composite.test.ripple

@@ -342,25 +342,33 @@ describe('composite components', () => {
 			// Ambiguous generics vs JSX / less-than parsing scenarios
 
 			// // 7. Generic following optional chaining
-			// const maybe = {};
-			// const g = maybe?.factory<number>()?.make<boolean>();
+			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';
+			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';
+			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">
@@ -401,16 +409,16 @@ describe('composite components', () => {
 			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>();
+			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 {
@@ -427,40 +435,40 @@ describe('composite components', () => {
 			// 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;
+			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>
-			// >();
+			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>();
+			let flag = true;
+			const s = flag ? new Box<number>() : new Box<string>();
 
 			// 20. Generic inside template expression
 			const t = `length=${new TrackedArray<number>().length}`;
@@ -473,7 +481,7 @@ describe('composite components', () => {
 			// function make<T>() {
 			// 	return (value: T) => value;
 			// }
-			// const v = make<number>()('done');
+			// const v = make<number>()(10);
 
 			// // 23. Generic followed by tagged template (ensure not confused with JSX)
 			// function tagFn<T>(strings: TemplateStringsArray, ...values: T[]) {
@@ -493,7 +501,7 @@ describe('composite components', () => {
 			// Additional component focusing on edge crankers
 
 			// // 28. Generic after parenthesized new expression
-			// const aa = (new Box<number>()).open<string>();
+			const aa = (new Box<number>()).open<string>();
 
 			// // 29. Generic chain right after closing paren of IIFE
 			// class Builder<Kind> {
@@ -518,28 +526,23 @@ describe('composite components', () => {
 
 
 			// // 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
-			// >();
+			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>>();
-
-			// // 34. Inline assertion then generic call
-
-			// const asserted = (getUnknown() as Factory).create<number>();
+			const mm = new Map<TrackedArray<number>, TrackedArray<string>>();
 		}
 
-
 		render(App);
 	});
 

package/tests/client/computed-properties.test.ripple

@@ -0,0 +1,64 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, track, TrackedArray, TrackedMap, effect } from 'ripple';
+
+describe('computed tracked properties', () => {
+	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 a property using assignment', () => {
+    component App() {
+      let obj = {
+        [0]: track(0),
+      };
+
+      <div>{obj.@[0]}</div>
+
+      <button onClick={() => { obj.@[0] += 1 }}>{"Increment"}</button>
+    }
+
+    render(App);
+    expect(container).toMatchSnapshot();
+
+    const button = container.querySelector('button');
+    button.click();
+    flushSync();
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should update a property using update expressions', () => {
+    component App() {
+      let obj = {
+        [0]: track(0),
+      };
+
+      <div>{obj.@[0]}</div>
+
+      <button onClick={() => { obj.@[0]++ }}>{"Increment"}</button>
+    }
+
+    render(App);
+    expect(container).toMatchSnapshot();
+
+    const button = container.querySelector('button');
+    button.click();
+    flushSync();
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/tests/client/typescript-generics.test.ripple

@@ -65,38 +65,149 @@ describe('generic patterns', () => {
 		render(App);
 	});
 
-	/**
-	 * Complex generics tests
-	 * These currently break the parser
-	 * We can't just use skip and then the tests are still parsed and compiled
-	 */
-	/*
-		describe('complex generics', () => {
-			it('tests after a call expression result', () => {
-				component App() {
-					function getBuilder() {
-						return <T>() => ({
-							build<U>(): { build<V>(): V; data: T; key: U } {
-								return {
-									build<V>(): V {
-										return 42 as V;
-									},
-									data: undefined as T,
-									key: undefined as U
-								};
+	it ('tests simple generic function with return type', () => {
+		component App() {
+			function getBuilder() {
+				return {
+					build: function<T>() { return 'test' }
+				}
+			}
+		}
+
+		render(App);
+	})
+
+	it ('tests simple generic function with return type and no arrow function', () => {
+		component App() {
+			function getBuilder() {
+				return {
+					build<T>() { return 'test' }
+				}
+			}
+
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
+
+			const f = getBuilder().build<string>();
+		}
+
+		render(App);
+	})
+
+	it ('tests simple generic arrow function with return type', () => {
+		component App() {
+			function getBuilder() {
+				return <T>() => ({
+					build<U>() { return 'test' }
+				})
+			}
+
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
+
+			type ResultType = string;
+			const f = getBuilder()<ResultType>().build<string>();
+			<div>{f}</div>
+		}
+
+		render(App);
+	})
+
+	it ('tests simple generic arrow function with explicit return type', () => {
+		component App() {
+			function getBuilder() {
+				return <T>() => ({
+					build<U>(): U { return 'test' }
+				})
+			}
+
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
+
+			type ResultType = string;
+			const f = getBuilder()<ResultType>().build<string>();
+			<div>{f}</div>
+		}
+
+		render(App);
+	})
+
+	it ('tests complex generic arrow function with return type', () => {
+		component App() {
+			function getBuilder() {
+				return <T>() => ({
+					build<U>(): { build: <V>() => V; data: T; key: U } {
+						return 'test';
+					}
+				})
+			}
+
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
+
+			type ResultType = string;
+			const f = getBuilder()<ResultType>().build<string>();
+			<div>{f}</div>
+		}
+
+		render(App);
+	})
+
+	it ('tests more complex generic arrow function with return type', () => {
+		component App() {
+			function getBuilder() {
+				return <T>() => ({
+					build<U>(): { build: <V>() => V; data: T; key: U } {
+						return {
+							build<V>(): V {
+								return 'test' as V;
 							}
-						});
+						};
 					}
+				});
+			}
 
-					<div class="still-works">
-						<span>{'Test'}</span>
-					</div>
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
 
-					type ResultType = string;
+			type ResultType = string;
+			const f = getBuilder()<ResultType>().build<string>();
+			<div>{f}</div>
+		}
 
-					const f = getBuilder()<ResultType>().build<number>();
-				}
-			});
-		});
- 	*/
+		render(App);
+	})
+
+	it ('tests most complex generic arrow function with return type', () => {
+		component App() {
+			function getBuilder() {
+				return <T>() => ({
+					build<U>(): { build: <V>() => V; data: T; key: U } {
+						return {
+							build<V>(): V {
+								return 42 as V;
+							},
+							data: undefined as T,
+							key: undefined as U
+						};
+					}
+				});
+			}
+
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
+
+			type ResultType = string;
+			const f = getBuilder()<ResultType>().build<string>();
+			<div>{f}</div>
+		}
+
+		render(App);
+	})
 });