ripple 0.2.175 → 0.2.176

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.175",
+  "version": "0.2.176",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -77,11 +77,12 @@
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",
+    "@types/estree-jsx": "^1.0.5",
     "@types/node": "^24.3.0",
     "typescript": "^5.9.2",
     "@volar/language-core": "~2.4.23"
   },
   "peerDependencies": {
-    "ripple": "0.2.175"
+    "ripple": "0.2.176"
   }
 }

package/shims/rollup-estree-types.d.ts

@@ -0,0 +1,2 @@
+// Re-export Rollup module types WITHOUT globals
+export * from "rollup/dist/rollup.js";

package/src/compiler/index.d.ts

@@ -1,4 +1,8 @@
 import type { Program } from 'estree';
+import type {
+	CodeInformation as VolarCodeInformation,
+	Mapping as VolarMapping,
+} from '@volar/language-core';
 
 // ============================================================================
 // Compiler API Exports
@@ -18,12 +22,26 @@ export interface CompileResult {
 	css: string;
 }
 
+export interface CustomMappingData {
+	generatedLengths: number[];
+}
+
+export interface MappingData extends VolarCodeInformation {
+	customData: CustomMappingData;
+}
+
+export interface CodeMapping extends VolarMapping<MappingData> {
+	data: MappingData;
+}
+
 /**
  * Result of Volar mappings compilation
  */
 export interface VolarMappingsResult {
-	/** Array of code mappings for Volar integration */
-	[key: string]: any;
+	code: string;
+	mappings: CodeMapping[];
+	cssMappings: CodeMapping[];
+	cssSources: string[];
 }
 
 /**
@@ -34,12 +52,18 @@ export interface CompileOptions {
 	mode?: 'client' | 'server';
 }
 
+export interface ParseOptions {
+	/** Enable loose mode */
+	loose?: boolean;
+}
+
 /**
  * Parse Ripple source code to ESTree AST
  * @param source - The Ripple source code to parse
+ * @param options - Parse options
  * @returns The parsed ESTree Program AST
  */
-export function parse(source: string): Program;
+export function parse(source: string, options?: ParseOptions): Program;
 
 /**
  * Compile Ripple source code to JS/CSS output
@@ -48,19 +72,17 @@ export function parse(source: string): Program;
  * @param options - Compilation options (mode: 'client' or 'server')
  * @returns The compilation result with AST, JS, and CSS
  */
-export function compile(
-	source: string,
-	filename: string,
-	options?: CompileOptions,
-): CompileResult;
+export function compile(source: string, filename: string, options?: CompileOptions): CompileResult;
 
 /**
  * Compile Ripple source to Volar mappings for editor integration
  * @param source - The Ripple source code
  * @param filename - The filename for source map generation
+ * @param options - Parse options
  * @returns Volar mappings object for editor integration
  */
 export function compile_to_volar_mappings(
 	source: string,
 	filename: string,
+	options?: ParseOptions,
 ): VolarMappingsResult;

package/src/compiler/index.js

@@ -1,4 +1,5 @@
 /** @import { Program } from 'estree' */
+/** @import { ParseOptions } from 'ripple/compiler' */
 
 import { parse as parse_module } from './phases/1-parse/index.js';
 import { analyze } from './phases/2-analyze/index.js';
@@ -12,7 +13,7 @@ import { convert_source_map_to_mappings } from './phases/3-transform/segments.js
  * @returns {Program}
  */
 export function parse(source) {
-	return parse_module(source);
+	return parse_module(source, undefined);
 }
 
 /**
@@ -23,7 +24,7 @@ export function parse(source) {
  * @returns {object}
  */
 export function compile(source, filename, options = {}) {
-	const ast = parse_module(source);
+	const ast = parse_module(source, undefined);
 	const analysis = analyze(ast, filename, options);
 	const result =
 		options.mode === 'server'
@@ -34,22 +35,24 @@ export function compile(source, filename, options = {}) {
 }
 
 /** @import { PostProcessingChanges, LineOffsets } from './phases/3-transform/client/index.js' */
-/** @import { MappingsResult } from './phases/3-transform/segments.js' */
+/** @import { VolarMappingsResult } from 'ripple/compiler' */
 
 /**
  * Compile Ripple component to Volar virtual code with TypeScript mappings
  * @param {string} source
  * @param {string} filename
- * @returns {MappingsResult} Volar mappings object
+ * @param {ParseOptions} [options] - Compiler options
+ * @returns {VolarMappingsResult} Volar mappings object
  */
-export function compile_to_volar_mappings(source, filename) {
-	const ast = parse_module(source);
-	const analysis = analyze(ast, filename, { to_ts: true });
+export function compile_to_volar_mappings(source, filename, options) {
+	const ast = parse_module(source, options);
+	const analysis = analyze(ast, filename, { to_ts: true, loose: !!options?.loose });
 	const transformed = transform_client(filename, source, analysis, true);
 
 	// Create volar mappings with esrap source map for accurate positioning
 	return convert_source_map_to_mappings(
 		transformed.ast,
+		ast,
 		source,
 		transformed.js.code,
 		transformed.js.map,

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

@@ -1,10 +1,13 @@
 // @ts-nocheck
 /** @import { Program } from 'estree' */
-/** @import {
+/**
+ * @import {
  *   CommentWithLocation,
  *   RipplePluginConfig
  * } from '#compiler' */
 
+/** @import { ParseOptions } from 'ripple/compiler' */
+
 import * as acorn from 'acorn';
 import { tsPlugin } from '@sveltejs/acorn-typescript';
 import { parse_style } from './style.js';
@@ -74,7 +77,7 @@ function isWhitespaceTextNode(node) {
  * @returns {function(any): any} Parser extension function
  */
 function RipplePlugin(config) {
-	return (/** @type {any} */ Parser) => {
+	return (/** @type {typeof acorn.Parser} */ Parser) => {
 		const original = acorn.Parser.prototype;
 		const tt = Parser.tokTypes || acorn.tokTypes;
 		const tc = Parser.tokContexts || acorn.tokContexts;
@@ -85,6 +88,12 @@ function RipplePlugin(config) {
 			/** @type {any[]} */
 			#path = [];
 			#commentContextId = 0;
+			#loose = false;
+
+			constructor(options, input) {
+				super(options, input);
+				this.#loose = options?.rippleOptions.loose === true;
+			}
 
 			#createCommentMetadata() {
 				if (this.#path.length === 0) {
@@ -1419,6 +1428,9 @@ function RipplePlugin(config) {
 
 					// Position after the '>'
 					this.pos = tagEndPos + 1;
+
+					// Add opening and closing for easier location tracking
+					// TODO: we should also parse attributes inside the opening tag
 				} else {
 					open = this.jsx_parseOpeningElementAt();
 				}
@@ -1468,6 +1480,41 @@ function RipplePlugin(config) {
 				element.attributes = open.attributes;
 				element.metadata ??= {};
 				element.metadata.commentContainerId = ++this.#commentContextId;
+				// Store opening tag's end position for use in loose mode when element is unclosed
+				element.metadata.openingTagEnd = open.end;
+				element.metadata.openingTagEndLoc = open.loc.end;
+
+				function addOpeningAndClosing() {
+					//TODO: once parse attributes of style and script
+					// we should the open element loc properly
+					const name = open.name.name;
+					open.loc = {
+						start: {
+							line: element.loc.start.line,
+							column: element.loc.start.column,
+						},
+						end: {
+							line: element.loc.start.line,
+							column: element.loc.start.column + `${name}>`.length,
+						},
+					};
+
+					element.openingElement = open;
+					element.closingElement = {
+						type: 'JSXClosingElement',
+						name: open.name,
+						loc: {
+							start: {
+								line: element.loc.end.line,
+								column: element.loc.end.column - `</${name}>`.length,
+							},
+							end: {
+								line: element.loc.end.line,
+								column: element.loc.end.column,
+							},
+						},
+					};
+				}
 
 				if (element.selfClosing) {
 					this.#path.pop();
@@ -1506,6 +1553,7 @@ function RipplePlugin(config) {
 
 						element.content = content;
 						this.finishNode(element, 'Element');
+						addOpeningAndClosing(element, open);
 					} else if (open.name.name === 'style') {
 						// jsx_parseOpeningElementAt treats ID selectors (ie. #myid) or type selectors (ie. div) as identifier and read it
 						// So backtrack to the end of the <style> tag to make sure everything is included
@@ -1515,7 +1563,7 @@ function RipplePlugin(config) {
 						const content = input.slice(0, end);
 
 						const component = this.#path.findLast((n) => n.type === 'Component');
-						const parsed_css = parse_style(content);
+						const parsed_css = parse_style(content, { loose: this.#loose });
 
 						if (!inside_head) {
 							if (component.css !== null) {
@@ -1553,6 +1601,7 @@ function RipplePlugin(config) {
 
 						element.css = content;
 						this.finishNode(element, 'Element');
+						addOpeningAndClosing(element, open);
 						return element;
 					} else {
 						this.enterScope(0);
@@ -1590,15 +1639,24 @@ function RipplePlugin(config) {
 							this.next();
 						} else if (this.#path[this.#path.length - 1] === element) {
 							// Check if this element was properly closed
-							// If we reach here and this element is still in the path, it means it was never closed
-							const tagName = this.getElementName(element.id);
-
-							this.raise(
-								this.start,
-								`Unclosed tag '<${tagName}>'. Expected '</${tagName}>' before end of component.`,
-							);
+							if (!this.#loose) {
+								const tagName = this.getElementName(element.id);
+								this.raise(
+									this.start,
+									`Unclosed tag '<${tagName}>'. Expected '</${tagName}>' before end of component.`,
+								);
+							} else {
+								element.unclosed = true;
+								const position = this.curPosition();
+								position.line = element.metadata.openingTagEndLoc.line;
+								position.column = element.metadata.openingTagEndLoc.column;
+								element.loc.end = position;
+								element.end = element.metadata.openingTagEnd;
+								this.#path.pop();
+							}
 						}
 					}
+
 					// Ensure we escape JSX <tag></tag> context
 					const curContext = this.curContext();
 
@@ -1678,8 +1736,12 @@ function RipplePlugin(config) {
 				}
 				if (this.type === tt.braceL) {
 					const node = this.jsx_parseExpressionContainer();
-					node.type = node.html ? 'Html' : 'Text';
-					delete node.html;
+					// Keep JSXEmptyExpression as-is (for prettier to handle comments)
+					// but convert other expressions to Text/Html nodes
+					if (node.expression.type !== 'JSXEmptyExpression') {
+						node.type = node.html ? 'Html' : 'Text';
+						delete node.html;
+					}
 					body.push(node);
 				} else if (this.type === tt.braceR) {
 					return;
@@ -1720,10 +1782,40 @@ function RipplePlugin(config) {
 						}
 
 						if (openingTagName !== closingTagName) {
-							this.raise(
-								this.start,
-								`Expected closing tag to match opening tag. Expected '</${openingTagName}>' but found '</${closingTagName}>'`,
-							);
+							if (!this.#loose) {
+								this.raise(
+									this.start,
+									`Expected closing tag to match opening tag. Expected '</${openingTagName}>' but found '</${closingTagName}>'`,
+								);
+							} else {
+								// Loop through all unclosed elements on the stack
+								while (this.#path.length > 0) {
+									const elem = this.#path[this.#path.length - 1];
+
+									// Stop at non-Element boundaries (Component, etc.)
+									if (elem.type !== 'Element' && elem.type !== 'TsxCompat') {
+										break;
+									}
+
+									const elemName =
+										elem.type === 'TsxCompat' ? 'tsx:' + elem.kind : this.getElementName(elem.id);
+
+									// Found matching opening tag
+									if (elemName === closingTagName) {
+										break;
+									}
+
+									// Mark as unclosed and adjust location
+									elem.unclosed = true;
+									const position = this.curPosition();
+									position.line = elem.metadata.openingTagEndLoc.line;
+									position.column = elem.metadata.openingTagEndLoc.column;
+									elem.loc.end = position;
+									elem.end = elem.metadata.openingTagEnd;
+
+									this.#path.pop(); // Remove from stack
+								}
+							}
 						}
 
 						this.#path.pop();
@@ -1759,7 +1851,10 @@ function RipplePlugin(config) {
 				) {
 					this.next();
 					const node = this.jsx_parseExpressionContainer();
-					node.type = 'Text';
+					// Keep JSXEmptyExpression as-is (don't convert to Text)
+					if (node.expression.type !== 'JSXEmptyExpression') {
+						node.type = 'Text';
+					}
 					this.next();
 					this.context.pop();
 					this.context.pop();
@@ -2256,9 +2351,10 @@ function get_comment_handlers(source, comments, index = 0) {
 /**
  * Parse Ripple source code into an AST
  * @param {string} source
+ * @param {ParseOptions} [options]
  * @returns {Program}
  */
-export function parse(source) {
+export function parse(source, options) {
 	/** @type {CommentWithLocation[]} */
 	const comments = [];
 
@@ -2315,6 +2411,9 @@ export function parse(source) {
 			ecmaVersion: 13,
 			locations: true,
 			onComment: /** @type {any} */ (onComment),
+			rippleOptions: {
+				loose: options?.loose || false,
+			},
 		});
 	} catch (e) {
 		throw e;

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

@@ -88,8 +88,8 @@ class Parser {
 	}
 }
 
-export function parse_style(content) {
-	const parser = new Parser(content, false);
+export function parse_style(content, options) {
+	const parser = new Parser(content, options.loose || false);
 
 	return {
 		source: content,
@@ -232,8 +232,8 @@ function read_declaration(parser) {
 
 	const value = read_value(parser);
 
-	if (!value && !property.startsWith('--')) {
-		e.css_empty_declaration({ start, end: index });
+	if (!value && !property.startsWith('--') && !parser.loose) {
+		throw new Error('CSS Declaration cannot be empty');
 	}
 
 	const end = parser.index;

package/src/compiler/phases/2-analyze/index.js

@@ -878,6 +878,7 @@ export function analyze(ast, filename, options = {}) {
 			inside_head: false,
 			inside_server_block: options.mode === 'server',
 			to_ts: options.to_ts ?? false,
+			loose: options.loose ?? false,
 		},
 		visitors,
 	);

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

@@ -736,6 +736,17 @@ const visitors = {
 		return context.visit(node.expression);
 	},
 
+	JSXEmptyExpression(node, context) {
+		// JSX comments like {/* ... */} are represented as JSXEmptyExpression
+		// In TypeScript mode, preserve them as-is for prettier
+		// In JavaScript mode, they're removed (which is correct since they're comments)
+		if (context.state.to_ts) {
+			return context.next();
+		}
+		// In JS mode, return empty - comments are stripped
+		return b.empty;
+	},
+
 	JSXFragment(node, context) {
 		if (context.state.to_ts) {
 			return context.next();
@@ -1901,7 +1912,6 @@ function transform_ts_child(node, context) {
 		const children = [];
 		let has_children_props = false;
 
-		const ref_attributes = [];
 		const attributes = node.attributes.map((attr) => {
 			if (attr.type === 'Attribute') {
 				const metadata = { await: false };
@@ -1943,7 +1953,7 @@ function transform_ts_child(node, context) {
 			}
 		});
 
-		if (!node.selfClosing && !has_children_props && node.children.length > 0) {
+		if (!node.selfClosing && !node.unclosed && !has_children_props && node.children.length > 0) {
 			const is_dom_element = is_element_dom_element(node);
 
 			const component_scope = context.state.scopes.get(node);
@@ -1963,20 +1973,20 @@ function transform_ts_child(node, context) {
 			}
 		}
 
-		let opening_type, closing_type;
+		let opening_name_element, closing_name_element;
 
 		if (type_is_expression) {
 			// For dynamic/expression-based components (e.g., props.children),
 			// use JSX expression instead of identifier
-			opening_type = type_expression;
-			closing_type = node.selfClosing ? undefined : type_expression;
+			opening_name_element = type_expression;
+			closing_name_element = node.selfClosing || node.unclosed ? undefined : type_expression;
 		} else {
-			opening_type = b.jsx_id(type_expression);
+			opening_name_element = b.jsx_id(type_expression);
 			// For tracked identifiers (dynamic components), adjust the loc to skip the '@' prefix
 			// and add metadata for mapping
 			if (node.id.tracked && node.id.loc) {
 				// The original identifier loc includes the '@', so we need to skip it
-				opening_type.loc = {
+				opening_name_element.loc = {
 					start: {
 						line: node.id.loc.start.line,
 						column: node.id.loc.start.column + 1, // Skip '@'
@@ -1985,14 +1995,14 @@ function transform_ts_child(node, context) {
 				};
 				// Add metadata if this was capitalized
 				if (node.metadata?.ts_name && node.metadata?.original_name) {
-					opening_type.metadata = {
+					opening_name_element.metadata = {
 						original_name: node.metadata.original_name,
 						is_capitalized: true,
 					};
 				}
 			} else {
 				// Use node.id.loc if available, otherwise create a loc based on the element's position
-				opening_type.loc = node.id.loc || {
+				opening_name_element.loc = node.id.loc || {
 					start: {
 						line: node.loc.start.line,
 						column: node.loc.start.column + 2, // After "<@"
@@ -2004,14 +2014,14 @@ function transform_ts_child(node, context) {
 				};
 			}
 
-			if (!node.selfClosing) {
-				closing_type = b.jsx_id(type_expression);
+			if (!node.selfClosing && !node.unclosed) {
+				closing_name_element = b.jsx_id(type_expression);
 				// For tracked identifiers, also adjust closing tag location
 				if (node.id.tracked && node.id.loc) {
 					// Calculate position relative to closing tag
 					// Format: </@identifier>
 					const closing_tag_start = node.loc.end.column - type_expression.length - 3; // </@
-					closing_type.loc = {
+					closing_name_element.loc = {
 						start: {
 							line: node.loc.end.line,
 							column: closing_tag_start + 3, // Skip '</@'
@@ -2026,13 +2036,13 @@ function transform_ts_child(node, context) {
 					};
 					// Add metadata if this was capitalized
 					if (node.metadata?.ts_name && node.metadata?.original_name) {
-						closing_type.metadata = {
+						closing_name_element.metadata = {
 							original_name: node.metadata.original_name,
 							is_capitalized: true,
 						};
 					}
 				} else {
-					closing_type.loc = {
+					closing_name_element.loc = {
 						start: {
 							line: node.loc.end.line,
 							column: node.loc.end.column - type_expression.length - 1,
@@ -2046,13 +2056,38 @@ function transform_ts_child(node, context) {
 			}
 		}
 
-		const jsxElement = b.jsx_element(
-			opening_type,
+		let jsxElement = b.jsx_element(
+			opening_name_element,
+			node.loc,
 			attributes,
 			children,
 			node.selfClosing,
-			closing_type,
+			node.unclosed,
+			closing_name_element,
 		);
+
+		// Calculate the location for the entire JSXClosingElement (including </ and >)
+		if (jsxElement.closingElement && !node.selfClosing && !node.unclosed) {
+			// The closing element starts with '</' and ends with '>'
+			// For a tag like </div>, if node.loc.end is right after '>', then:
+			// - '<' is at node.loc.end.column - type_expression.length - 3
+			// - '>' is at node.loc.end.column - 1
+			const tag_name_length = node.id.tracked
+				? (node.metadata?.original_name?.length || type_expression.length) + 1 // +1 for '@'
+				: type_expression.length;
+
+			jsxElement.closingElement.loc = {
+				start: {
+					line: node.loc.end.line,
+					column: node.loc.end.column - tag_name_length - 2, // at '</'
+				},
+				end: {
+					line: node.loc.end.line,
+					column: node.loc.end.column, // at '>'
+				},
+			};
+		}
+
 		// Preserve metadata from Element node for mapping purposes
 		if (node.metadata && (node.metadata.ts_name || node.metadata.original_name)) {
 			jsxElement.metadata = {
@@ -2060,7 +2095,13 @@ function transform_ts_child(node, context) {
 				original_name: node.metadata.original_name,
 			};
 		}
-		state.init.push(b.stmt(jsxElement));
+		// For unclosed elements, push the JSXElement directly without wrapping in ExpressionStatement
+		// This keeps it in the AST for mappings but avoids adding a semicolon
+		if (node.unclosed) {
+			state.init.push(jsxElement);
+		} else {
+			state.init.push(b.stmt(jsxElement));
+		}
 	} else if (node.type === 'IfStatement') {
 		const consequent_scope = context.state.scopes.get(node.consequent);
 		const consequent = b.block(
@@ -2164,6 +2205,10 @@ function transform_ts_child(node, context) {
 			.filter((child) => child.type !== 'JSXText' || child.value.trim() !== '');
 
 		state.init.push(b.stmt(b.jsx_fragment(children)));
+	} else if (node.type === 'JSXExpressionContainer') {
+		// JSX comments {/* ... */} are JSXExpressionContainer with JSXEmptyExpression
+		// These should be preserved in the output as-is for prettier to handle
+		state.init.push(b.stmt(b.jsx_expression_container(visit(node.expression, state))));
 	} else {
 		throw new Error('TODO');
 	}
@@ -2496,11 +2541,62 @@ function create_tsx_with_typescript_support() {
 				}
 				context.write(': ');
 				context.visit(node.value);
+			} else if (!node.shorthand) {
+				// If property is already longhand in source, keep it longhand
+				// to prevent source map issues when parts of the syntax disappear in shorthand conversion
+				// This applies to:
+				// - { media: media } -> would become { media } (value identifier disappears)
+				// - { fn: function() {} } -> would become { fn() {} } ('function' keyword disappears)
+				const value = node.value.type === 'AssignmentPattern' ? node.value.left : node.value;
+
+				// Check if esrap would convert this to shorthand property or method
+				const wouldBeShorthand =
+					!node.computed &&
+					node.kind === 'init' &&
+					node.key.type === 'Identifier' &&
+					value.type === 'Identifier' &&
+					node.key.name === value.name;
+
+				const wouldBeMethodShorthand =
+					!node.computed &&
+					node.value.type === 'FunctionExpression' &&
+					node.kind !== 'get' &&
+					node.kind !== 'set';
+
+				if (wouldBeShorthand || wouldBeMethodShorthand) {
+					// Force longhand: write key: value explicitly to preserve source positions
+					if (node.computed) context.write('[');
+					context.visit(node.key);
+					context.write(node.computed ? ']: ' : ': ');
+					context.visit(node.value);
+				} else {
+					base_tsx.Property(node, context);
+				}
 			} else {
 				// Use default handler for non-component properties
 				base_tsx.Property(node, context);
 			}
 		},
+		// Custom handler for JSXClosingElement to ensure closing tag brackets have source mappings
+		JSXClosingElement(node, context) {
+			// Set location for '<' then write '</'
+			if (node.loc) {
+				context.location(node.loc.start.line, node.loc.start.column);
+				context.write('</');
+			} else {
+				context.write('</');
+			}
+
+			context.visit(node.name);
+
+			// Set location for '>' then write it
+			if (node.loc) {
+				context.location(node.loc.end.line, node.loc.end.column - 1);
+				context.write('>');
+			} else {
+				context.write('>');
+			}
+		},
 		// Custom handler for ArrayPattern to ensure typeAnnotation is visited
 		// esrap's TypeScript handler doesn't visit typeAnnotation for ArrayPattern (only for ObjectPattern)
 		ArrayPattern(node, context) {
@@ -2583,6 +2679,36 @@ function create_tsx_with_typescript_support() {
 			// Write source
 			context.visit(node.source);
 		},
+		// Custom handler for JSXOpeningElement to ensure '<' and '>' have source mappings
+		// Esrap's default handler only maps the tag name, not the brackets
+		// This creates mappings for the brackets so auto-close can find the cursor position
+		JSXOpeningElement(node, context) {
+			// Set location for '<'
+			if (node.loc) {
+				context.location(node.loc.start.line, node.loc.start.column);
+			}
+			context.write('<');
+
+			context.visit(node.name);
+
+			// Write attributes
+			for (const attr of node.attributes || []) {
+				context.write(' ');
+				context.visit(attr);
+			}
+
+			if (node.selfClosing) {
+				context.write(' />');
+			} else {
+				// Set the source location for the '>'
+				// node.loc.end points AFTER the '>', so subtract 1 to get the position OF the '>'
+				if (node.loc) {
+					// TODO: why do we need to subtract 1 from column here?
+					context.location(node.loc.end.line, node.loc.end.column - 1);
+				}
+				context.write('>');
+			}
+		},
 		// Custom handler for TSParenthesizedType: (Type)
 		TSParenthesizedType(node, context) {
 			context.write('(');

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

@@ -7,9 +7,14 @@
  * @typedef {import('estree').Position} Position
  * @typedef {{start: Position, end: Position}} Location
  * @typedef {import('@volar/language-core').CodeMapping} VolarCodeMapping
- * @typedef {VolarCodeMapping['data'] & {customData: CustomMappingData}} MappingData
- * @typedef {VolarCodeMapping & {data: MappingData}} CodeMapping
- * @typedef {{code: string, mappings: CodeMapping[]}} MappingsResult
+ * @typedef {import('ripple/compiler').MappingData} MappingData
+ * @typedef {import('ripple/compiler').CodeMapping} CodeMapping
+ * @typedef {import('ripple/compiler').VolarMappingsResult} VolarMappingsResult
+ * @typedef {{
+ *	start: number,
+ *	end: number,
+ *	content: string
+ * }} CssSourceRegion
  */
 
 import { walk } from 'zimmerframe';
@@ -25,6 +30,72 @@ export const mapping_data = {
 	format: false,
 };
 
+/**
+ * Converts line/column positions to byte offsets
+ * @param {string} text
+ * @returns {number[]}
+ */
+function build_line_offsets(text) {
+	const offsets = [0]; // Line 1 starts at offset 0
+	for (let i = 0; i < text.length; i++) {
+		if (text[i] === '\n') {
+			offsets.push(i + 1);
+		}
+	}
+	return offsets;
+}
+
+/**
+ * Convert line/column to byte offset
+ * @param {number} line
+ * @param {number} column
+ * @param {number[]} line_offsets
+ * @returns {number}
+ */
+function loc_to_offset(line, column, line_offsets) {
+	if (line < 1 || line > line_offsets.length) {
+		throw new Error(
+			`Location line or line offsets length is out of bounds, line: ${line}, line offsets length: ${line_offsets.length}`,
+		);
+	}
+	return line_offsets[line - 1] + column;
+}
+
+/**
+ * Extract CSS source regions from style elements in the AST
+ * @param {any} ast - The parsed AST
+ * @param {string} source - Original source code
+ * @param {number[]} source_line_offsets
+ * @returns {CssSourceRegion[]}
+ */
+function extractCssSourceRegions(ast, source, source_line_offsets) {
+	/** @type {CssSourceRegion[]} */
+	const regions = [];
+
+	walk(ast, null, {
+		Element(node) {
+			// Check if this is a style element with CSS content
+			if (node.id?.name === 'style' && node.css) {
+				const openLoc = node.openingElement.loc;
+				const cssStart =
+					loc_to_offset(openLoc.end.line, openLoc.end.column, source_line_offsets) + 1;
+
+				const closeLoc = node.closingElement.loc;
+				const cssEnd =
+					loc_to_offset(closeLoc.start.line, closeLoc.start.column, source_line_offsets) - 1;
+
+				regions.push({
+					start: cssStart,
+					end: cssEnd,
+					content: node.css,
+				});
+			}
+		},
+	});
+
+	return regions;
+}
+
 /**
  * @import { PostProcessingChanges } from './client/index.js';
  */
@@ -32,15 +103,17 @@ export const mapping_data = {
 /**
  * Create Volar mappings by walking the transformed AST
  * @param {any} ast - The transformed AST
+ * @param {any} ast_from_source - The original AST from source
  * @param {string} source - Original source code
  * @param {string} generated_code - Generated code (returned in output, not used for searching)
  * @param {object} esrap_source_map - Esrap source map for accurate position lookup
  * @param {PostProcessingChanges } post_processing_changes - Optional post-processing changes
  * @param {number[]} line_offsets - Pre-computed line offsets array for generated code
- * @returns {MappingsResult}
+ * @returns {VolarMappingsResult}
  */
 export function convert_source_map_to_mappings(
 	ast,
+	ast_from_source,
 	source,
 	generated_code,
 	esrap_source_map,
@@ -51,38 +124,8 @@ export function convert_source_map_to_mappings(
 	const mappings = [];
 	let isImportDeclarationPresent = false;
 
-	/**
-	 * Converts line/column positions to byte offsets
-	 * @param {string} text
-	 * @returns {number[]}
-	 */
-	const build_line_offsets = (text) => {
-		const offsets = [0]; // Line 1 starts at offset 0
-		for (let i = 0; i < text.length; i++) {
-			if (text[i] === '\n') {
-				offsets.push(i + 1);
-			}
-		}
-		return offsets;
-	};
 	const source_line_offsets = build_line_offsets(source);
 
-	/**
-	 * Convert line/column to byte offset
-	 * @param {number} line
-	 * @param {number} column
-	 * @param {number[]} line_offsets
-	 * @returns {number}
-	 */
-	const loc_to_offset = (line, column, line_offsets) => {
-		if (line < 1 || line > line_offsets.length) {
-			throw new Error(
-				`Location line or line offsets length is out of bounds, line: ${line}, line offsets length: ${line_offsets.length}`,
-			);
-		}
-		return line_offsets[line - 1] + column;
-	};
-
 	/**
 	 * Convert generated line/column to byte offset using pre-computed line_offsets
 	 * @param {number} line
@@ -280,7 +323,34 @@ export function convert_source_map_to_mappings(
 
 				// 1. Visit opening element (name and attributes)
 				if (node.openingElement) {
+					// Add tokens for '<' and '>' brackets to ensure auto-close feature works
+					const openingElem = node.openingElement;
+
+					// Add '<' bracket
+					if (openingElem.loc) {
+						tokens.push({
+							source: '<',
+							generated: '<',
+							loc: {
+								start: { line: openingElem.loc.start.line, column: openingElem.loc.start.column },
+								end: { line: openingElem.loc.start.line, column: openingElem.loc.start.column + 1 },
+							},
+						});
+					}
+
 					visit(node.openingElement);
+
+					// Add '>' bracket (or '/>' for self-closing)
+					if (openingElem.loc && !openingElem.selfClosing) {
+						tokens.push({
+							source: '>',
+							generated: '>',
+							loc: {
+								start: { line: openingElem.loc.end.line, column: openingElem.loc.end.column - 1 },
+								end: { line: openingElem.loc.end.line, column: openingElem.loc.end.column },
+							},
+						});
+					}
 				}
 
 				// 2. Visit children in order
@@ -1300,8 +1370,27 @@ export function convert_source_map_to_mappings(
 		});
 	}
 
+	/** @type {{ cssMappings: CodeMapping[], cssSources: string[] }} */
+	const cssResult = { cssMappings: [], cssSources: [] };
+	for (const region of extractCssSourceRegions(ast_from_source, source, source_line_offsets)) {
+		cssResult.cssMappings.push({
+			sourceOffsets: [region.start],
+			generatedOffsets: [0],
+			lengths: [region.content.length],
+			data: {
+				...mapping_data,
+				customData: {
+					generatedLengths: [region.content.length],
+				},
+			},
+		});
+
+		cssResult.cssSources.push(region.content);
+	}
+
 	return {
 		code: generated_code,
 		mappings,
+		...cssResult,
 	};
 }

package/src/compiler/types/index.d.ts

@@ -1,3 +1,5 @@
+import type { SourceLocation } from 'estree';
+
 // Ripple augmentation for ESTree function nodes
 declare module 'estree' {
 	interface FunctionDeclaration {
@@ -12,7 +14,28 @@ declare module 'estree' {
 	interface Identifier {
 		tracked?: boolean;
 	}
+	interface Component {
+		type: 'Component';
+		id: Identifier;
+		params: Pattern[];
+		body: BlockStatement;
+	}
+}
+
+declare module 'estree-jsx' {
+	interface JSXAttribute {
+		shorthand: boolean;
+	}
+
+	interface JSXOpeningElement {
+		loc: SourceLocation;
+	}
+
+	interface JSXClosingElement {
+		loc: SourceLocation;
+	}
 }
+
 import type { Comment, Position } from 'acorn';
 import type {
 	Program,

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

@@ -25,6 +25,9 @@ var all_registered_events = new Set();
 /** @type {Set<(events: Array<string>) => void>} */
 var root_event_handles = new Set();
 
+/** @type {Element | null} */
+var root_target = null;
+
 /**
  * @param {AddEventOptions} options
  * @returns {AddEventListenerOptions}
@@ -55,7 +58,19 @@ function get_event_options(options) {
  * @param {ExtendedEventOptions} [options]
  */
 export function on(element, type, handler, options = {}) {
-	var remove_listener = create_event(type, element, handler, options);
+	var opts = { ...options };
+	if (
+		element === window ||
+		element === document ||
+		element === document.body ||
+		element === root_target ||
+		element instanceof MediaQueryList ||
+		/** @type {Element} */ (element).contains(root_target)
+	) {
+		opts.delegated = false;
+	}
+
+	var remove_listener = create_event(type, element, handler, opts);
 
 	return () => {
 		remove_listener();
@@ -374,6 +389,7 @@ export function delegate(events) {
 /** @param {Element} target */
 export function handle_root_events(target) {
 	var registered_events = new Set();
+	root_target = target;
 
 	/**
 	 * @typedef {Object} EventHandleOptions
@@ -412,5 +428,6 @@ export function handle_root_events(target) {
 			target.removeEventListener(event_name, handle_event_propagation);
 		}
 		root_event_handles.delete(event_handle);
+		root_target = null;
 	};
 }

package/src/utils/builders.js

@@ -1,4 +1,5 @@
 /** @import * as ESTree from 'estree' */
+/** @import * as ESTreeJSX from 'estree-jsx' */
 
 import { regex_is_valid_identifier } from './patterns.js';
 import { sanitize_template_string } from './sanitize_template_string.js';
@@ -45,6 +46,12 @@ export function arrow(params, body, async = false) {
 	};
 }
 
+/**
+ * @param {ESTree.Identifier} id
+ * @param {ESTree.Pattern[]} params
+ * @param {ESTree.BlockStatement} body
+ * @returns {ESTree.Component}
+ */
 export function component(id, params, body) {
 	return {
 		type: 'Component',
@@ -620,25 +627,29 @@ function if_builder(test, consequent, alternate) {
 /**
  * @param {string} as
  * @param {string} source
+ * @param {Array<ESTree.ImportAttribute>} attributes
  * @returns {ESTree.ImportDeclaration}
  */
-export function import_all(as, source) {
+export function import_all(as, source, attributes = []) {
 	return {
 		type: 'ImportDeclaration',
 		source: literal(source),
 		specifiers: [import_namespace(as)],
+		attributes,
 	};
 }
 
 /**
  * @param {Array<[string, string]>} parts
  * @param {string} source
+ * @param {Array<ESTree.ImportAttribute>} attributes
  * @returns {ESTree.ImportDeclaration}
  */
-export function imports(parts, source) {
+export function imports(parts, source, attributes = []) {
 	return {
 		type: 'ImportDeclaration',
 		source: literal(source),
+		attributes,
 		specifiers: parts.map((p) => ({
 			type: 'ImportSpecifier',
 			imported: id(p[0]),
@@ -705,9 +716,9 @@ export function key(name) {
 }
 
 /**
- * @param {ESTree.JSXIdentifier | ESTree.JSXNamespacedName} name
- * @param {ESTree.Literal | ESTree.JSXExpressionContainer | null} value
- * @returns {ESTree.JSXAttribute}
+ * @param {ESTreeJSX.JSXIdentifier | ESTreeJSX.JSXNamespacedName} name
+ * @param {ESTree.Literal | ESTreeJSX.JSXExpressionContainer | null} value
+ * @returns {ESTreeJSX.JSXAttribute}
  */
 export function jsx_attribute(name, value = null) {
 	return {
@@ -719,44 +730,54 @@ export function jsx_attribute(name, value = null) {
 }
 
 /**
- * @param {ESTree.JSXIdentifier | ESTree.JSXMemberExpression | ESTree.JSXNamespacedName} name
- * @param {Array<ESTree.JSXAttribute | ESTree.JSXSpreadAttribute>} attributes
- * @param {Array<ESTree.JSXText | ESTree.JSXExpressionContainer | ESTree.JSXSpreadChild | ESTree.JSXElement | ESTree.JSXFragment>} children
+ * @param {ESTreeJSX.JSXOpeningElement['name']} name
+ * @param {ESTree.SourceLocation} loc
+ * @param {ESTreeJSX.JSXOpeningElement['attributes']} attributes
+ * @param {ESTreeJSX.JSXElement['children']} children
  * @param {boolean} self_closing
- * @returns {{ element: ESTree.JSXElement, opening_element: ESTree.JSXOpeningElement }}
+ * @param {boolean} unclosed
+ * @param {ESTreeJSX.JSXClosingElement['name']} closing_name
+ * @returns {ESTreeJSX.JSXElement}
  */
 export function jsx_element(
 	name,
+	loc,
 	attributes = [],
 	children = [],
 	self_closing = false,
+	unclosed = false,
 	closing_name = name,
 ) {
+	/** @type {ESTreeJSX.JSXOpeningElement} */
 	const opening_element = {
 		type: 'JSXOpeningElement',
 		name,
 		attributes,
 		selfClosing: self_closing,
+		loc: loc,
 	};
 
+	/** @type {ESTreeJSX.JSXElement} */
 	const element = {
 		type: 'JSXElement',
 		openingElement: opening_element,
-		closingElement: self_closing
-			? null
-			: {
-					type: 'JSXClosingElement',
-					name: closing_name,
-				},
 		children,
+		closingElement:
+			self_closing || unclosed
+				? null
+				: {
+						type: 'JSXClosingElement',
+						name: closing_name,
+						loc,
+					},
 	};
 
 	return element;
 }
 
 /**
- * @param {Array<ESTree.JSXText | ESTree.JSXExpressionContainer | ESTree.JSXSpreadChild | ESTree.JSXElement | ESTree.JSXFragment>} children
- * @returns {ESTree.JSXFragment}
+ * @param {Array<ESTreeJSX.JSXText | ESTreeJSX.JSXExpressionContainer | ESTreeJSX.JSXSpreadChild | ESTreeJSX.JSXElement | ESTreeJSX.JSXFragment>} children
+ * @returns {ESTreeJSX.JSXFragment}
  */
 export function jsx_fragment(children = []) {
 	return {
@@ -772,8 +793,8 @@ export function jsx_fragment(children = []) {
 }
 
 /**
- * @param {ESTree.Expression | ESTree.JSXEmptyExpression} expression
- * @returns {ESTree.JSXExpressionContainer}
+ * @param {ESTree.Expression | ESTreeJSX.JSXEmptyExpression} expression
+ * @returns {ESTreeJSX.JSXExpressionContainer}
  */
 export function jsx_expression_container(expression) {
 	return {
@@ -784,7 +805,7 @@ export function jsx_expression_container(expression) {
 
 /**
  * @param {string} name
- * @returns {ESTree.JSXIdentifier}
+ * @returns {ESTreeJSX.JSXIdentifier}
  */
 export function jsx_id(name) {
 	return {
@@ -794,9 +815,9 @@ export function jsx_id(name) {
 }
 
 /**
- * @param {ESTree.JSXIdentifier | ESTree.JSXMemberExpression} object
- * @param {ESTree.JSXIdentifier} property
- * @returns {ESTree.JSXMemberExpression}
+ * @param {ESTreeJSX.JSXIdentifier | ESTreeJSX.JSXMemberExpression} object
+ * @param {ESTreeJSX.JSXIdentifier} property
+ * @returns {ESTreeJSX.JSXMemberExpression}
  */
 export function jsx_member(object, property) {
 	return {
@@ -808,7 +829,7 @@ export function jsx_member(object, property) {
 
 /**
  * @param {ESTree.Expression} argument
- * @returns {ESTree.JSXSpreadAttribute}
+ * @returns {ESTreeJSX.JSXSpreadAttribute}
  */
 export function jsx_spread_attribute(argument) {
 	return {
@@ -818,6 +839,8 @@ export function jsx_spread_attribute(argument) {
 }
 
 /**
+ * @param {ESTree.Expression} discriminant
+ * @param {ESTree.SwitchCase[]} cases
  * @returns {ESTree.SwitchStatement}
  */
 export function switch_builder(discriminant, cases) {
@@ -829,6 +852,8 @@ export function switch_builder(discriminant, cases) {
 }
 
 /**
+ * @param {ESTree.Expression | null} test
+ * @param {ESTree.Statement[]} consequent
  * @returns {ESTree.SwitchCase}
  */
 export function switch_case(test = null, consequent = []) {

package/tests/client/events.test.ripple

@@ -1,4 +1,4 @@
-import { track, flushSync, on } from 'ripple';
+import { track, flushSync, on, effect } from 'ripple';
 
 describe('on() event handler', () => {
 	it('should attach multiple handlers via onClick attribute (delegated)', () => {
@@ -559,4 +559,112 @@ describe('on() event handler', () => {
 		expect(onceDiv.textContent).toBe('1'); // Still 1
 		expect(permanentDiv.textContent).toBe('3');
 	});
+
+	it('should handle click events on window', () => {
+		component Basic() {
+			let windowClickCount = track(0);
+
+			effect(() => {
+				const removeWindowListener = on(window, 'click', () => {
+					@windowClickCount++;
+				});
+				return removeWindowListener;
+			});
+
+			<div>
+				<button class="test-btn">{'Click me'}</button>
+				<div class="window-count">{@windowClickCount}</div>
+			</div>
+		}
+
+		render(Basic);
+		flushSync();
+
+		const button = container.querySelector('.test-btn');
+		const windowCountDiv = container.querySelector('.window-count');
+
+		expect(windowCountDiv.textContent).toBe('0');
+
+		// Click on button should bubble to window
+		button.click();
+		flushSync();
+		expect(windowCountDiv.textContent).toBe('1');
+
+		// Click directly on window
+		window.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+		flushSync();
+		expect(windowCountDiv.textContent).toBe('2');
+	});
+
+	it('should handle click events on document', () => {
+		component Basic() {
+			let documentClickCount = track(0);
+
+			effect(() => {
+				const removeDocumentListener = on(document, 'click', () => {
+					@documentClickCount++;
+				});
+				return removeDocumentListener;
+			});
+
+			<div>
+				<button class="test-btn">{'Click me'}</button>
+				<div class="document-count">{@documentClickCount}</div>
+			</div>
+		}
+
+		render(Basic);
+		flushSync();
+
+		const button = container.querySelector('.test-btn');
+		const documentCountDiv = container.querySelector('.document-count');
+
+		expect(documentCountDiv.textContent).toBe('0');
+
+		// Click on button should bubble to document
+		button.click();
+		flushSync();
+		expect(documentCountDiv.textContent).toBe('1');
+
+		// Click directly on document
+		document.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+		flushSync();
+		expect(documentCountDiv.textContent).toBe('2');
+	});
+
+	it('should handle click events on body', () => {
+		component Basic() {
+			let bodyClickCount = track(0);
+
+			effect(() => {
+				const removeBodyListener = on(document.body, 'click', () => {
+					@bodyClickCount++;
+				});
+				return removeBodyListener;
+			});
+
+			<div>
+				<button class="test-btn">{'Click me'}</button>
+				<div class="body-count">{@bodyClickCount}</div>
+			</div>
+		}
+
+		render(Basic);
+		flushSync();
+
+		const button = container.querySelector('.test-btn');
+		const bodyCountDiv = container.querySelector('.body-count');
+
+		expect(bodyCountDiv.textContent).toBe('0');
+
+		// Click on button should bubble to body
+		button.click();
+		flushSync();
+		expect(bodyCountDiv.textContent).toBe('1');
+
+		// Click directly on body
+		document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+		flushSync();
+		expect(bodyCountDiv.textContent).toBe('2');
+	});
 });

package/tests/client/media-query.test.ripple

@@ -7,7 +7,9 @@ function setupMatchMedia() {
 
 	// A mock implementation of matchMedia
 	const mockMatchMedia = vi.fn().mockImplementation((query) => {
-		return {
+		// Create a mock that extends MediaQueryList so instanceof works
+		const mock = Object.create(MediaQueryList.prototype);
+		Object.assign(mock, {
 			media: query,
 			matches: false, // default value
 			addEventListener: (type: string, cb: Callback) => {
@@ -26,7 +28,8 @@ function setupMatchMedia() {
 				listeners.forEach((cb) => cb(event));
 			},
 			listenersCount: () => listeners.size,
-		};
+		});
+		return mock;
 	});
 
 	Object.defineProperty(window, 'matchMedia', {

package/tests/setup-client.js

@@ -15,6 +15,8 @@ beforeEach(() => {
 	document.body.appendChild(globalThis.container);
 
 	globalThis.error = undefined;
+	// @ts-ignore
+	globalThis.MediaQueryList = class MediaQueryList {};
 });
 
 afterEach(() => {
@@ -25,4 +27,6 @@ afterEach(() => {
 	globalThis.container = /** @type {HTMLDivElement} */ (/** @type {unknown} */ (undefined));
 
 	globalThis.error = undefined;
+	// @ts-ignore
+	globalThis.MediaQueryList = undefined;
 });

package/tsconfig.json

@@ -18,6 +18,8 @@
 		"checkJs": true,
 		"paths": {
 			"ripple": ["./types/index.d.ts"],
+      "rollup": ["./shims/rollup-estree-types.d.ts"],
+      "rollup/*": ["./shims/rollup-estree-types.d.ts"]
 		}
 	},
 	"include": [