ripple 0.2.102 → 0.2.104

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.104",
   "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/2-analyze/index.js

@@ -106,7 +106,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */ (parent)) &&
+			is_reference(node, /** @type {Node} */(parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -117,7 +117,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */ (parent)) &&
+			is_reference(node, /** @type {Node} */(parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -250,7 +250,10 @@ const visitors = {
 		}
 		const elements = [];
 
-		context.next({ ...context.state, elements, function_depth: context.state.function_depth + 1 });
+		// Track metadata for this component
+		const metadata = { await: false };
+
+		context.next({ ...context.state, elements, function_depth: context.state.function_depth + 1, metadata });
 
 		const css = node.css;
 
@@ -259,6 +262,12 @@ const visitors = {
 				prune_css(css, node);
 			}
 		}
+
+		// Store component metadata in analysis
+		context.state.analysis.component_metadata.push({
+			id: node.id.name,
+			async: metadata.await,
+		});
 	},
 
 	ForStatement(node, context) {
@@ -357,6 +366,11 @@ const visitors = {
 		}
 
 		if (node.pending) {
+			// Try/pending blocks indicate async operations
+			if (context.state.metadata?.await === false) {
+				context.state.metadata.await = true;
+			}
+
 			node.metadata = {
 				has_template: false,
 			};
@@ -594,6 +608,7 @@ export function analyze(ast, filename) {
 		ast,
 		scope,
 		scopes,
+		component_metadata: [],
 	};
 
 	walk(

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)));
 		}