ripple 0.2.175 → 0.2.177

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.177",
   "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.177"
   }
 }

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