ripple 0.2.199 → 0.2.201

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.199",
+  "version": "0.2.201",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -71,7 +71,8 @@
     "#server": "./src/runtime/internal/server/types.d.ts",
     "#compiler": "./src/compiler/types/index.d.ts",
     "#parser": "./src/compiler/types/parse.d.ts",
-    "#public": "./types/index.d.ts"
+    "#public": "./types/index.d.ts",
+    "#helpers": "./src/helpers.d.ts"
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.5",
@@ -92,10 +93,10 @@
     "@types/node": "^24.3.0",
     "@typescript-eslint/types": "^8.40.0",
     "typescript": "^5.9.2",
-    "@volar/language-core": "~2.4.23",
+    "@volar/language-core": "~2.4.28",
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.199"
+    "ripple": "0.2.201"
   }
 }

package/src/compiler/index.d.ts

@@ -38,11 +38,7 @@ export interface PluginActionOverrides {
 	/** TypeScript diagnostic codes to suppress for this mapping */
 	suppressedDiagnostics?: number[];
 	/** Custom hover documentation for this mapping, false to disable */
-	hover?:
-		| {
-				contents: string;
-		  }
-		| false;
+	hover?: string | false | ((content: string) => string);
 	/** Custom definition info for this mapping, false to disable */
 	definition?:
 		| {

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

@@ -220,6 +220,123 @@ function RipplePlugin(config) {
 				}
 			}
 
+			/**
+			 * Override parseProperty to support component methods in object literals.
+			 * Handles syntax like `{ component something() { <div /> } }`
+			 * Also supports computed names: `{ component ['something']() { <div /> } }`
+			 * @type {Parse.Parser['parseProperty']}
+			 */
+			parseProperty(isPattern, refDestructuringErrors) {
+				// Check if this is a component method: component name( ... ) { ... }
+				if (!isPattern && this.type === tt.name && this.value === 'component') {
+					// Look ahead to see if this is "component identifier(", "component identifier<", "component [", or "component 'string'"
+					const lookahead = this.input.slice(this.pos).match(/^\s*(?:(\w+)\s*[(<]|\[|['"])/);
+					if (lookahead) {
+						// This is a component method definition
+						const prop = /** @type {AST.Property} */ (this.startNode());
+						const isComputed = lookahead[0].trim().startsWith('[');
+						const isStringLiteral = /^['"]/.test(lookahead[0].trim());
+
+						if (isComputed) {
+							// For computed names, consume 'component'
+							// parse the key, then parse component without name
+							this.next(); // consume 'component'
+							this.next(); // consume '['
+							prop.key = this.parseExpression();
+							this.expect(tt.bracketR);
+							prop.computed = true;
+
+							// Parse component without name (skipName: true)
+							const component_node = this.parseComponent({ skipName: true });
+							/** @type {AST.RippleProperty} */ (prop).value = component_node;
+						} else if (isStringLiteral) {
+							// For string literal names, consume 'component'
+							// parse the string key, then parse component without name
+							this.next(); // consume 'component'
+							prop.key = /** @type {AST.Literal} */ (this.parseExprAtom());
+							prop.computed = false;
+
+							// Parse component without name (skipName: true)
+							const component_node = this.parseComponent({ skipName: true });
+							/** @type {AST.RippleProperty} */ (prop).value = component_node;
+						} else {
+							const component_node = this.parseComponent({ requireName: true });
+
+							prop.key = /** @type {AST.Identifier} */ (component_node.id);
+							/** @type {AST.RippleProperty} */ (prop).value = component_node;
+							prop.computed = false;
+						}
+
+						prop.shorthand = false;
+						prop.method = true;
+						prop.kind = 'init';
+
+						return this.finishNode(prop, 'Property');
+					}
+				}
+
+				return super.parseProperty(isPattern, refDestructuringErrors);
+			}
+
+			/**
+			 * Override parseClassElement to support component methods in classes.
+			 * Handles syntax like `class Foo { component something() { <div /> } }`
+			 * Also supports computed names: `class Foo { component ['something']() { <div /> } }`
+			 * @type {Parse.Parser['parseClassElement']}
+			 */
+			parseClassElement(constructorAllowsSuper) {
+				// Check if this is a component method: component name( ... ) { ... }
+				if (this.type === tt.name && this.value === 'component') {
+					// Look ahead to see if this is "component identifier(",
+					// "component identifier<", "component [", or "component 'string'"
+					const lookahead = this.input.slice(this.pos).match(/^\s*(?:(\w+)\s*[(<]|\[|['"])/);
+					if (lookahead) {
+						// This is a component method definition
+						const node = /** @type {AST.MethodDefinition} */ (this.startNode());
+						const isComputed = lookahead[0].trim().startsWith('[');
+						const isStringLiteral = /^['"]/.test(lookahead[0].trim());
+
+						if (isComputed) {
+							// For computed names, consume 'component'
+							// parse the key, then parse component without name
+							this.next(); // consume 'component'
+							this.next(); // consume '['
+							node.key = this.parseExpression();
+							this.expect(tt.bracketR);
+							node.computed = true;
+
+							// Parse component without name (skipName: true)
+							const component_node = this.parseComponent({ skipName: true });
+							/** @type {AST.RippleMethodDefinition} */ (node).value = component_node;
+						} else if (isStringLiteral) {
+							// For string literal names, consume 'component'
+							// parse the string key, then parse component without name
+							this.next(); // consume 'component'
+							node.key = /** @type {AST.Literal} */ (this.parseExprAtom());
+							node.computed = false;
+
+							// Parse component without name (skipName: true)
+							const component_node = this.parseComponent({ skipName: true });
+							/** @type {AST.RippleMethodDefinition} */ (node).value = component_node;
+						} else {
+							// Use parseComponent which handles consuming 'component', parsing name, params, and body
+							const component_node = this.parseComponent({ requireName: true });
+
+							node.key = /** @type {AST.Identifier} */ (component_node.id);
+							/** @type {AST.RippleMethodDefinition} */ (node).value = component_node;
+							node.computed = false;
+						}
+
+						node.static = false;
+						node.kind = 'method';
+
+						return this.finishNode(node, 'MethodDefinition');
+					}
+				}
+
+				return super.parseClassElement(constructorAllowsSuper);
+			}
+
 			/**
 			 * Override parsePropertyValue to support TypeScript generic methods in object literals.
 			 * By default, acorn-typescript doesn't handle `{ method<T>() {} }` syntax.
@@ -1097,15 +1214,28 @@ function RipplePlugin(config) {
 			 * Parse a component - common implementation used by statements, expressions, and export defaults
 			 * @type {Parse.Parser['parseComponent']}
 			 */
-			parseComponent({ requireName = false, isDefault = false, declareName = false } = {}) {
+			parseComponent({
+				requireName = false,
+				isDefault = false,
+				declareName = false,
+				skipName = false,
+			} = {}) {
 				const node = /** @type {AST.Component} */ (this.startNode());
 				node.type = 'Component';
 				node.css = null;
 				node.default = isDefault;
-				this.next(); // consume 'component'
+
+				// skipName is used for computed property names where 'component' and the key
+				// have already been consumed before calling parseComponent
+				if (!skipName) {
+					this.next(); // consume 'component'
+				}
 				this.enterScope(0);
 
-				if (requireName) {
+				if (skipName) {
+					// For computed names, the key is parsed separately, so id is null
+					node.id = null;
+				} else if (requireName) {
 					node.id = this.parseIdent();
 					if (declareName) {
 						this.declareName(
@@ -1349,10 +1479,17 @@ function RipplePlugin(config) {
 			 */
 			checkUnreserved(ref) {
 				if (ref.name === 'component') {
-					this.raise(
-						ref.start,
-						'"component" is a Ripple keyword and cannot be used as an identifier',
-					);
+					// Allow 'component' when it's followed by an identifier and '(' or '<' (component method in object literal or class)
+					// e.g., { component something() { ... } } or class Foo { component something<T>() { ... } }
+					// Also allow computed names: { component ['name']() { ... } }
+					// Also allow string literal names: { component 'name'() { ... } }
+					const nextChars = this.input.slice(this.pos).match(/^\s*(?:(\w+)\s*[(<]|\[|['"])/);
+					if (!nextChars) {
+						this.raise(
+							ref.start,
+							'"component" is a Ripple keyword and cannot be used as an identifier',
+						);
+					}
 				}
 				return super.checkUnreserved(ref);
 			}
@@ -2347,15 +2484,12 @@ function RipplePlugin(config) {
 					this.type === tt.braceL &&
 					this.context.some((c) => c === tstc.tc_expr)
 				) {
-					this.next();
 					const node = this.jsx_parseExpressionContainer();
 					// Keep JSXEmptyExpression as-is (don't convert to Text)
 					if (node.expression.type !== 'JSXEmptyExpression') {
 						/** @type {AST.TextNode} */ (/** @type {unknown} */ (node)).type = 'Text';
 					}
-					this.next();
-					this.context.pop();
-					this.context.pop();
+
 					return /** @type {ESTreeJSX.JSXEmptyExpression | AST.TextNode | ESTreeJSX.JSXExpressionContainer} */ (
 						/** @type {unknown} */ (node)
 					);

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

@@ -844,6 +844,14 @@ const visitors = {
 	},
 
 	Element(node, context) {
+		if (!is_inside_component(context)) {
+			error(
+				'Elements cannot be used outside of components',
+				context.state.analysis.module.filename,
+				node,
+			);
+		}
+
 		const { state, visit, path } = context;
 		const is_dom_element = is_element_dom_element(node);
 		const attribute_names = new Set();
@@ -853,7 +861,11 @@ const visitors = {
 		validate_nesting(node, context);
 
 		// Store capitalized name for dynamic components/elements
-		if (node.id.tracked) {
+		// TODO: this is not quite right as the node.id could be a member expression
+		// so, we'd need to identify dynamic based on that too
+		// However, we're going to get rid of capitalization in favor of jsx()
+		// so, this will be need to be redone.
+		if (node.id.type === 'Identifier' && node.id.tracked) {
 			const source_name = node.id.name;
 			const capitalized_name = source_name.charAt(0).toUpperCase() + source_name.slice(1);
 			node.metadata.ts_name = capitalized_name;
@@ -878,7 +890,7 @@ const visitors = {
 		}
 
 		if (is_dom_element) {
-			if (node.id.name === 'head') {
+			if (/** @type {AST.Identifier} */ (node.id).name === 'head') {
 				// head validation
 				if (node.attributes.length > 0) {
 					// TODO: could transform attributes as something, e.g. Text Node, and avoid a fatal error
@@ -896,7 +908,7 @@ const visitors = {
 				return;
 			}
 			if (state.inside_head) {
-				if (node.id.name === 'title') {
+				if (/** @type {AST.Identifier} */ (node.id).name === 'title') {
 					const children = normalize_children(node.children, context);
 
 					if (children.length !== 1 || children[0].type !== 'Text') {
@@ -910,12 +922,16 @@ const visitors = {
 				}
 
 				// check for invalid elements in head
-				if (!valid_in_head.has(node.id.name)) {
+				if (!valid_in_head.has(/** @type {AST.Identifier} */ (node.id).name)) {
 					// TODO: could transform invalid elements as something, e.g. Text Node, and avoid a fatal error
-					error(`<${node.id.name}> cannot be used in <head>`, state.analysis.module.filename, node);
+					error(
+						`<${/** @type {AST.Identifier} */ (node.id).name}> cannot be used in <head>`,
+						state.analysis.module.filename,
+						node,
+					);
 				}
 			} else {
-				if (node.id.name === 'script') {
+				if (/** @type {AST.Identifier} */ (node.id).name === 'script') {
 					const err_msg = '<script> cannot be used outside of <head>.';
 					error(
 						err_msg,
@@ -935,7 +951,7 @@ const visitors = {
 				}
 			}
 
-			const is_void = is_void_element(node.id.name);
+			const is_void = is_void_element(/** @type {AST.Identifier} */ (node.id).name);
 
 			if (state.elements) {
 				state.elements.push(node);
@@ -975,7 +991,7 @@ const visitors = {
 
 			if (is_void && node.children.length > 0) {
 				error(
-					`The <${node.id.name}> element is a void element and cannot have children`,
+					`The <${/** @type {AST.Identifier} */ (node.id).name}> element is a void element and cannot have children`,
 					state.analysis.module.filename,
 					node,
 					context.state.loose ? context.state.analysis.errors : undefined,

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

@@ -3,7 +3,7 @@
 /** @typedef {0 | 1} Direction */
 
 import { walk } from 'zimmerframe';
-import { is_element_dom_element } from '../../utils.js';
+import { is_element_dom_element, is_element_dynamic } from '../../utils.js';
 
 const regex_backslash_and_following_character = /\\(.)/g;
 /** @type {Direction} */
@@ -350,7 +350,7 @@ function can_render_dynamic_content(element, check_classes = false) {
 
 	// Either a dynamic element or component (only can tell at runtime)
 	// But dynamic elements should return false ideally
-	if (/** @type {AST.Element} */ (element).id.tracked) {
+	if (is_element_dynamic(/** @type {AST.Element} */ (element))) {
 		return true;
 	}
 
@@ -932,7 +932,9 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 			}
 
 			case 'AttributeSelector': {
-				const whitelisted = whitelist_attribute_selector.get(element.id.name.toLowerCase());
+				const whitelisted = whitelist_attribute_selector.get(
+					/** @type {AST.Identifier} */ (element.id).name.toLowerCase(),
+				);
 				if (
 					!whitelisted?.includes(selector.name.toLowerCase()) &&
 					!attribute_matches(