ripple 0.2.135 → 0.2.137

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.135",
+  "version": "0.2.137",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.135"
+    "ripple": "0.2.137"
   }
 }

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

@@ -29,6 +29,28 @@ function convert_from_jsx(node) {
 	return node;
 }
 
+const regex_whitespace_only = /\s/;
+
+/**
+ * Skip whitespace characters without skipping comments.
+ * This is needed because Acorn's skipSpace() also skips comments, which breaks
+ * parsing in certain contexts. Updates parser position and line tracking.
+ * @param {acorn.Parser} parser
+ */
+function skipWhitespace(parser) {
+	const originalStart = parser.start;
+	while (parser.start < parser.input.length && regex_whitespace_only.test(parser.input[parser.start])) {
+		parser.start++;
+	}
+	// Update line tracking if whitespace was skipped
+	if (parser.start !== originalStart) {
+		const lineInfo = acorn.getLineInfo(parser.input, parser.start);
+		parser.curLine = lineInfo.line;
+		parser.lineStart = parser.start - lineInfo.column;
+		parser.startLoc = lineInfo;
+	}
+}
+
 function isWhitespaceTextNode(node) {
 	if (!node || node.type !== 'Text') {
 		return false;
@@ -710,6 +732,7 @@ function RipplePlugin(config) {
 					this.exitScope();
 
 					this.next();
+					skipWhitespace(this);
 					this.finishNode(node, 'Component');
 					this.awaitPos = 0;
 
@@ -1576,6 +1599,7 @@ function RipplePlugin(config) {
 
 						this.#path.pop();
 						this.next();
+						skipWhitespace(this);
 						return;
 					}
 					const node = this.parseElement();
@@ -1588,12 +1612,8 @@ function RipplePlugin(config) {
 
 					// Ensure we're not in JSX context before recursing
 					// This is important when elements are parsed at statement level
-					const tokContexts = this.acornTypeScript?.tokContexts;
-					if (tokContexts && this.curContext) {
-						const curContext = this.curContext();
-						if (curContext === tokContexts.tc_expr) {
-							this.context.pop();
-						}
+					if (this.curContext() === this.acornTypeScript.tokContexts.tc_expr) {
+						this.context.pop();
 					}
 				}
 
@@ -1643,6 +1663,7 @@ function RipplePlugin(config) {
 					this.exitScope();
 
 					this.next();
+					skipWhitespace(this);
 					this.finishNode(node, 'Component');
 					this.awaitPos = 0;
 

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

@@ -662,7 +662,7 @@ const visitors = {
 			[b.id('__compat')],
 			needs_fragment
 				? b.call(
-						'__compat._jsxs',
+						'__compat.jsxs',
 						b.id('__compat.Fragment'),
 						b.object([
 							b.prop(
@@ -1156,11 +1156,15 @@ const visitors = {
 				}),
 			];
 
-			return b.function(
+			const func = b.function(
 				node.id,
 				node.params.map((param) => context.visit(param, { ...context.state, metadata })),
 				b.block(body_statements),
 			);
+			// Mark that this function was originally a component
+			func.metadata = { ...func.metadata, was_component: true };
+			func.loc = node.loc; // Copy source location for Volar mappings
+			return func;
 		}
 
 		let props = b.id('__props');
@@ -1189,7 +1193,7 @@ const visitors = {
 			context.state.stylesheets.push(node.css);
 		}
 
-		return b.function(
+		const func = b.function(
 			node.id,
 			node.params.length > 0
 				? [b.id('__anchor'), props, b.id('__block')]
@@ -1201,6 +1205,10 @@ const visitors = {
 					: body_statements),
 			]),
 		);
+		// Mark that this function was originally a component
+		func.metadata = { ...func.metadata, was_component: true };
+		func.loc = node.loc; // Copy source location for Volar mappings
+		return func;
 	},
 
 	AssignmentExpression(node, context) {

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

@@ -1,4 +1,4 @@
-	import { walk } from 'zimmerframe';
+import { walk } from 'zimmerframe';
 
 export const mapping_data = {
 	verification: true,
@@ -354,6 +354,13 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 
 				return;
 			} else if (node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') {
+				// Map function/component keywords
+				if (node.metadata?.was_component && node.loc) {
+					tokens.push({ source: 'component', generated: 'function' });
+				} else if (node.loc && node.type === 'FunctionDeclaration') {
+					tokens.push('function');
+				}
+
 				// Visit in source order: id, params, body
 				if (node.id) {
 					visit(node.id);
@@ -361,6 +368,9 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 				if (node.params) {
 					for (const param of node.params) {
 						visit(param);
+						if (param.typeAnnotation) {
+							visit(param.typeAnnotation);
+						}
 					}
 				}
 				if (node.body) {
@@ -1260,11 +1270,11 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 			sourceOffsets: [0],
 			generatedOffsets: [0],
 			lengths: [1],
-				data: {
-					...mapping_data,
-					codeActions: true, // auto-import
-					rename: false, // avoid rename for a “dummy” mapping
-				}
+			data: {
+				...mapping_data,
+				codeActions: true, // auto-import
+				rename: false, // avoid rename for a “dummy” mapping
+			}
 		});
 	}
 

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

@@ -169,7 +169,7 @@ describe('compiler > basics', () => {
 
 		function Wrapper() {
 			return {
-				unwrap: function() {
+				unwrap: function <T>() {
 					return null as unknown as T;
 				},
 			};
@@ -186,10 +186,10 @@ describe('compiler > basics', () => {
 				value: T;
 			}
 
-			class Box {
+			class Box<T> {
 				value: T;
 
-				method(): T {
+				method<T>(): T {
 					return this.value;
 				}
 			}

package/tests/setup-client.js

@@ -2,13 +2,13 @@ import { beforeEach, afterEach } from 'vitest';
 import { mount } from 'ripple';
 
 /**
- * @param {() => void} component 
+ * @param {() => void} component
  */
 globalThis.render = function render(component) {
 	mount(component, {
-		target: /** @type {HTMLDivElement} */ (globalThis.container)
+		target: /** @type {HTMLDivElement} */ (globalThis.container),
 	});
-}
+};
 
 beforeEach(() => {
 	globalThis.container = /** @type {HTMLDivElement} */ (document.createElement('div'));
@@ -22,7 +22,7 @@ afterEach(() => {
 	// And when we unset it, we just type-cast it to HTMLDivElement to avoid TS errors, because we
 	// know it's guaranteed to exist in the next test again.
 	document.body.removeChild(/** @type {HTMLDivElement} */ (globalThis.container));
-	globalThis.container = /** @type {HTMLDivElement} */ (/** @type {unknown} */(undefined));
+	globalThis.container = /** @type {HTMLDivElement} */ (/** @type {unknown} */ (undefined));
 
 	globalThis.error = undefined;
 });

package/types/index.d.ts

@@ -1,8 +1,18 @@
 export type Component<T = Record<string, any>> = (props: T) => void;
 
+export type CompatApi = {
+	createRoot: () => void;
+	createComponent: (node: any, children_fn: () => any) => void;
+	jsx: (type: any, props: any) => any;
+};
+
+export type CompatOptions = {
+	[key: string]: CompatApi;
+};
+
 export declare function mount(
 	component: () => void,
-	options: { target: HTMLElement; props?: Record<string, any> },
+	options: { target: HTMLElement; props?: Record<string, any>; compat?: CompatOptions },
 ): () => void;
 
 export declare function tick(): Promise<void>;