ripple 0.2.183 → 0.2.185

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.183",
+  "version": "0.2.185",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -86,6 +86,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.183"
+    "ripple": "0.2.185"
   }
 }

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

@@ -423,6 +423,11 @@ const visitors = {
 		context.visit(node.discriminant, context.state);
 
 		for (const switch_case of node.cases) {
+			// Fallthrough
+			if (switch_case.consequent.length === 0) {
+				continue;
+			}
+
 			// Validate that each cases ends in a break statement, except for the last case
 			const last = switch_case.consequent?.[switch_case.consequent.length - 1];
 
@@ -728,9 +733,9 @@ const visitors = {
 			}
 			if (state.inside_head) {
 				if (node.id.name === 'title') {
-					const chiildren = normalize_children(node.children, context);
+					const children = normalize_children(node.children, context);
 
-					if (chiildren.length !== 1 || chiildren[0].type !== 'Text') {
+					if (children.length !== 1 || children[0].type !== 'Text') {
 						error(
 							'<title> must have only contain text nodes',
 							state.analysis.module.filename,

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

@@ -61,17 +61,6 @@ import {
 } from '../../../../utils/events.js';
 import { createHash } from 'node:crypto';
 
-/**
- * @param {TransformClientContext} context
- */
-function add_ripple_internal_import(context) {
-	if (!context.state.to_ts) {
-		if (!context.state.imports.has(`import * as _$_ from 'ripple/internal/client'`)) {
-			context.state.imports.add(`import * as _$_ from 'ripple/internal/client'`);
-		}
-	}
-}
-
 /**
  *
  * @param {AST.FunctionDeclaration | AST.FunctionExpression | AST.ArrowFunctionExpression} node
@@ -112,7 +101,6 @@ function visit_function(node, context) {
 		const new_body = [];
 
 		if (!is_inside_component(context, true) && is_component_level_function(context)) {
-			add_ripple_internal_import(context);
 			new_body.push(b.var('__block', b.call('_$_.scope')));
 		}
 		if (body.type === 'BlockStatement') {
@@ -397,11 +385,9 @@ const visitors = {
 						context.state.metadata.tracking = true;
 					}
 					if (node.tracked) {
-						add_ripple_internal_import(context);
 						return b.call('_$_.get', build_getter(node, context));
 					}
 				}
-				add_ripple_internal_import(context);
 				return build_getter(node, context);
 			}
 		}
@@ -663,8 +649,6 @@ const visitors = {
 
 		if (node.tracked || (node.property.type === 'Identifier' && node.property.tracked)) {
 			// In TypeScript mode, skip the transformation and let transform_ts_child handle it
-			add_ripple_internal_import(context);
-
 			if (!context.state.to_ts) {
 				return b.call(
 					'_$_.get_property',
@@ -1595,9 +1579,6 @@ const visitors = {
 
 	Component(node, context) {
 		let prop_statements;
-
-		add_ripple_internal_import(context);
-
 		const metadata = { await: false };
 
 		if (context.state.to_ts) {
@@ -1683,7 +1664,6 @@ const visitors = {
 			left.type === 'MemberExpression' &&
 			(left.tracked || (left.property.type === 'Identifier' && left.property.tracked))
 		) {
-			add_ripple_internal_import(context);
 			const operator = node.operator;
 			const right = node.right;
 
@@ -1710,7 +1690,6 @@ const visitors = {
 		}
 
 		if (left.type === 'Identifier' && left.tracked) {
-			add_ripple_internal_import(context);
 			const operator = node.operator;
 			const right = node.right;
 
@@ -1744,7 +1723,6 @@ const visitors = {
 			argument.type === 'MemberExpression' &&
 			(argument.tracked || (argument.property.type === 'Identifier' && argument.property.tracked))
 		) {
-			add_ripple_internal_import(context);
 			if (context.state.metadata?.tracking === false) {
 				context.state.metadata.tracking = true;
 			}
@@ -1854,27 +1832,34 @@ const visitors = {
 		let i = 1;
 
 		for (const switch_case of node.cases) {
-			const consequent_scope =
-				context.state.scopes.get(switch_case.consequent) || context.state.scope;
-			const consequent_id = context.state.scope.generate(
-				'switch_case_' + (switch_case.test == null ? 'default' : i),
-			);
-			const consequent = b.block(
-				transform_body(switch_case.consequent, {
-					...context,
-					state: { ...context.state, scope: consequent_scope },
-				}),
-			);
+			const case_body = [];
 
-			statements.push(b.var(b.id(consequent_id), b.arrow([b.id('__anchor')], consequent)));
+			if (switch_case.consequent.length !== 0) {
+				const consequent_scope =
+					context.state.scopes.get(switch_case.consequent) || context.state.scope;
+				const consequent_id = context.state.scope.generate(
+					'switch_case_' + (switch_case.test == null ? 'default' : i),
+				);
+				const consequent = b.block(
+					transform_body(switch_case.consequent, {
+						...context,
+						state: { ...context.state, scope: consequent_scope },
+					}),
+				);
+
+				statements.push(b.var(b.id(consequent_id), b.arrow([b.id('__anchor')], consequent)));
+
+				case_body.push(b.return(b.id(consequent_id)));
+
+				i++;
+			}
 
 			cases.push(
 				b.switch_case(
 					switch_case.test ? /** @type {AST.Expression} */ (context.visit(switch_case.test)) : null,
-					[b.return(b.id(consequent_id))],
+					case_body,
 				),
 			);
-			i++;
 		}
 
 		statements.push(
@@ -2911,10 +2896,10 @@ function transform_body(body, { visit, state }) {
 
 /**
  * Create a TSX language handler with enhanced TypeScript support
- * @returns {Object} TSX language handler with TypeScript return type support
+ * @returns {Visitors<AST.Node, TransformClientState>} TSX language handler with TypeScript return type support
  */
 function create_tsx_with_typescript_support() {
-	const base_tsx = /** @type {ESRap.Visitors<AST.Node>} */ (tsx());
+	const base_tsx = /** @type {Visitors<AST.Node, TransformClientState>} */ (tsx());
 
 	// Add custom TypeScript node handlers that aren't in tsx
 
@@ -2922,7 +2907,7 @@ function create_tsx_with_typescript_support() {
 	 * Shared handler for function-like nodes to support component->function mapping
 	 * Creates source maps for 'function' keyword by passing node to context.write()
 	 * @param {AST.Function} node
-	 * @param {ESRap.Context} context
+	 * @param {TransformClientContext} context
 	 */
 	const handle_function = (node, context) => {
 		if (node.async) {
@@ -2963,16 +2948,8 @@ function create_tsx_with_typescript_support() {
 		}
 	};
 
-	return {
+	return /** @type {Visitors<AST.Node, TransformClientState>} */ ({
 		...base_tsx,
-		/**
-		 * Custom handler for Property nodes to prevent method shorthand for components
-		 * When a component is transformed to a FunctionExpression, we want to preserve
-		 * the explicit syntax (key: function name() {}) instead of method shorthand (key() {})
-		 * This ensures proper source mapping for the 'function'/'component' keyword
-		 * @param {AST.Property} node
-		 * @param {ESRap.Context} context
-		 */
 		Property(node, context) {
 			// Check if the value is a function that was originally a component
 			const isComponent =
@@ -3019,18 +2996,13 @@ function create_tsx_with_typescript_support() {
 					context.write(node.computed ? ']: ' : ': ');
 					context.visit(node.value);
 				} else {
-					base_tsx.Property?.(node, context);
+					base_tsx.Property?.(node, /** @type {ESRap.} */ (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
-		 * @param {ESTreeJSX.JSXClosingElement} node
-		 * @param {ESRap.Context} context
-		 */
 		JSXClosingElement(node, context) {
 			// Set location for '<' then write '</'
 			if (node.loc) {
@@ -3050,12 +3022,99 @@ function create_tsx_with_typescript_support() {
 				context.write('>');
 			}
 		},
-		/**
-		 * Custom handler for ArrayPattern to ensure typeAnnotation is visited
-		 * esrap's TypeScript handler doesn't visit typeAnnotation for ArrayPattern (only for ObjectPattern)
-		 * @param {AST.ArrayPattern} node
-		 * @param {ESRap.Context} context
-		 */
+		MethodDefinition(node, context) {
+			// Check if there are type parameters to handle
+			// @ts-ignore - typeParameters may exist on node
+			const hasTypeParams = node.typeParameters || node.value?.typeParameters;
+
+			if (!hasTypeParams) {
+				// No type parameters, use default handler
+				return base_tsx.MethodDefinition?.(node, context);
+			}
+
+			// Has type parameters - we need to manually handle to ensure they're visited
+			// Write modifiers (static, async, etc.)
+			if (node.static) {
+				context.write('static ');
+			}
+
+			// Handle getters/setters
+			if (node.kind === 'get') {
+				context.write('get ');
+			} else if (node.kind === 'set') {
+				context.write('set ');
+			}
+
+			// Write * for generator methods
+			if (node.value?.generator) {
+				context.write('*');
+			}
+
+			// Write async keyword
+			if (node.value?.async) {
+				context.write('async ');
+			}
+
+			// Write the method key
+			if (node.computed) {
+				context.write('[');
+				context.visit(node.key);
+				context.write(']');
+			} else {
+				context.visit(node.key);
+			}
+
+			// Visit typeParameters if present (THIS IS THE FIX)
+			// TypeParameters can be on either the MethodDefinition or its value (FunctionExpression)
+			if (node.typeParameters) {
+				context.visit(node.typeParameters);
+			} else if (node.value?.typeParameters) {
+				context.visit(node.value.typeParameters);
+			}
+
+			// Write parameters - set location for opening '('
+			if (node.value?.loc) {
+				context.location(node.value.loc.start.line, node.value.loc.start.column);
+			}
+			context.write('(');
+			if (node.value?.params) {
+				for (let i = 0; i < node.value.params.length; i++) {
+					if (i > 0) context.write(', ');
+					context.visit(node.value.params[i]);
+				}
+			}
+			context.write(')');
+
+			// Write return type if present
+			if (node.value?.returnType) {
+				context.visit(node.value.returnType);
+			}
+
+			// Write method body
+			if (node.value?.body) {
+				context.write(' ');
+				context.visit(node.value.body);
+			}
+		},
+		TSTypeParameter(node, context) {
+			// Set location for the type parameter name
+			if (node.loc) {
+				context.location(node.loc.start.line, node.loc.start.column);
+			}
+			if (typeof node.name === 'string') {
+				context.write(node.name);
+			} else if (node.name && node.name.name) {
+				context.write(node.name.name);
+			}
+			if (node.constraint) {
+				context.write(' extends ');
+				context.visit(node.constraint);
+			}
+			if (node.default) {
+				context.write(' = ');
+				context.visit(node.default);
+			}
+		},
 		ArrayPattern(node, context) {
 			context.write('[');
 			for (let i = 0; i < node.elements.length; i++) {
@@ -3070,31 +3129,12 @@ function create_tsx_with_typescript_support() {
 				context.visit(node.typeAnnotation);
 			}
 		},
-		/**
-		 * Custom handler for FunctionDeclaration to support component->function mapping
-		 * Needed for volar mappings and intellisense on function or component keyword
-		 * @param {AST.FunctionDeclaration} node
-		 * @param {ESRap.Context} context
-		 */
 		FunctionDeclaration(node, context) {
 			handle_function(node, context);
 		},
-		/**
-		 * Custom handler for FunctionExpression to support component->function mapping
-		 * This is used for components transformed by the Component visitor
-		 * @param {AST.FunctionExpression} node
-		 * @param {ESRap.Context} context
-		 */
 		FunctionExpression(node, context) {
 			handle_function(node, context);
 		},
-		/**
-		 * Custom handler for ImportDeclaration to ensure 'import' keyword has source mapping
-		 * This creates a source map entry at the start of the import statement
-		 * Esrap's default handler writes 'import' without passing the node, so no source map entry
-		 * @param {AST.ImportDeclaration} node
-		 * @param {ESRap.Context} context
-		 */
 		ImportDeclaration(node, context) {
 			// Write 'import' keyword with node location for source mapping
 			context.write('import', node);
@@ -3148,13 +3188,6 @@ 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
-		 * @param {ESTreeJSX.JSXOpeningElement} node
-		 * @param {ESRap.Context} context
-		 */
 		JSXOpeningElement(node, context) {
 			// Set location for '<'
 			if (node.loc) {
@@ -3182,21 +3215,11 @@ function create_tsx_with_typescript_support() {
 				context.write('>');
 			}
 		},
-		/**
-		 * Custom handler for TSParenthesizedType: (Type)
-		 * @param {AST.TSParenthesizedType} node
-		 * @param {ESRap.Context} context
-		 */
 		TSParenthesizedType(node, context) {
 			context.write('(');
 			context.visit(/** @type {AST.TSTypeAnnotation} */ (node.typeAnnotation));
 			context.write(')');
 		},
-		/**
-		 * Custom handler for TSMappedType: { [K in keyof T]: T[K] }
-		 * @param {AST.TSMappedType} node
-		 * @param {ESRap.Context} context
-		 */
 		TSMappedType(node, context) {
 			context.write('{ ');
 			if (node.readonly) {
@@ -3228,34 +3251,6 @@ function create_tsx_with_typescript_support() {
 			}
 			context.write(' }');
 		},
-		/**
-		 * Custom handler for TSTypeParameter: K in T (for mapped types)
-		 * acorn-ts has a bug where `in` is printed as `extends`, so we override it here
-		 * @param {AST.TSTypeParameter} node
-		 * @param {ESRap.Context} context
-		 */
-		TSTypeParameter(node, context) {
-			// For mapped types, the name is just a string, not an Identifier node
-			// Pass the node as second parameter to context.write() to create source map entry
-			if (typeof node.name === 'string') {
-				context.write(node.name, node);
-			} else if (node.name && node.name.name) {
-				context.write(node.name.name, node.name);
-			}
-			if (node.constraint) {
-				context.write(' in ');
-				context.visit(node.constraint);
-			}
-			if (node.default) {
-				context.write(' = ');
-				context.visit(node.default);
-			}
-		},
-		/**
-		 * Override the ArrowFunctionExpression handler to support TypeScript return types
-		 * @param {AST.ArrowFunctionExpression} node
-		 * @param {ESRap.Context} context
-		 */
 		ArrowFunctionExpression(node, context) {
 			if (node.async) context.write('async ');
 
@@ -3287,11 +3282,57 @@ function create_tsx_with_typescript_support() {
 				context.visit(node.body);
 			}
 		},
-		/**
-		 * Custom handler for TryStatement to support Ripple's pending block
-		 * @param {AST.TryStatement} node
-		 * @param {ESRap.Context} context
-		 */
+		ClassDeclaration(node, context) {
+			context.write('class ');
+			if (node.id) {
+				context.visit(node.id);
+			}
+			if (node.typeParameters) {
+				context.visit(node.typeParameters);
+			}
+			if (node.superClass) {
+				context.write(' extends ');
+				context.visit(node.superClass);
+				if (node.superTypeArguments) {
+					context.visit(node.superTypeArguments);
+				}
+			}
+			if (node.implements && node.implements.length > 0) {
+				context.write(' implements ');
+				for (let i = 0; i < node.implements.length; i++) {
+					if (i > 0) context.write(', ');
+					context.visit(node.implements[i]);
+				}
+			}
+			context.write(' ');
+			context.visit(node.body);
+		},
+		ClassExpression(node, context) {
+			context.write('class');
+			if (node.id) {
+				context.write(' ');
+				context.visit(node.id);
+			}
+			if (node.typeParameters) {
+				context.visit(node.typeParameters);
+			}
+			if (node.superClass) {
+				context.write(' extends ');
+				context.visit(node.superClass);
+				if (node.superTypeArguments) {
+					context.visit(node.superTypeArguments);
+				}
+			}
+			if (node.implements && node.implements.length > 0) {
+				context.write(' implements ');
+				for (let i = 0; i < node.implements.length; i++) {
+					if (i > 0) context.write(', ');
+					context.visit(node.implements[i]);
+				}
+			}
+			context.write(' ');
+			context.visit(node.body);
+		},
 		TryStatement(node, context) {
 			context.write('try ');
 			context.visit(node.block);
@@ -3325,7 +3366,7 @@ function create_tsx_with_typescript_support() {
 				context.visit(node.finalizer);
 			}
 		},
-	};
+	});
 }
 
 /**
@@ -3389,6 +3430,13 @@ export function transform_client(filename, source, analysis, to_ts, minify_css)
 		metadata: {},
 	};
 
+	// Add ripple internal import once for the entire module
+	// Whatever is unused will be tree-shaken later, including a rare case
+	// where nothing from ripple/internal/client is used
+	if (!to_ts) {
+		state.imports.add(`import * as _$_ from 'ripple/internal/client'`);
+	}
+
 	const program = /** @type {AST.Program} */ (walk(analysis.ast, { ...state }, visitors));
 
 	for (const hoisted of state.hoisted) {
@@ -3407,7 +3455,9 @@ export function transform_client(filename, source, analysis, to_ts, minify_css)
 		);
 	}
 
-	const language_handler = to_ts ? create_tsx_with_typescript_support() : tsx();
+	const language_handler = to_ts
+		? create_tsx_with_typescript_support()
+		: /** @type {Visitors<AST.Node, TransformClientState>} */ (tsx());
 
 	const js =
 		/** @type {ReturnType<typeof print> & { post_processing_changes?: PostProcessingChanges, line_offsets?: number[] }} */ (