ripple 0.2.199 → 0.2.201

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

@@ -8,9 +8,11 @@
 	VisitorClientContext,
 	TransformClientState,
 	ScopeInterface,
-	Visitors
+	Visitors,
+	Binding,
 }	from '#compiler';
 @import { RippleCompileError } from 'ripple/compiler';
+@import { RequiredPresent } from '#helpers';
  */
 
 /**
@@ -51,6 +53,7 @@ import {
 	build_getter,
 	determine_namespace_for_children,
 	index_to_key,
+	is_element_dynamic,
 } from '../../../utils.js';
 import {
 	CSS_HASH_IDENTIFIER,
@@ -68,6 +71,7 @@ import {
 } from '../../../../utils/events.js';
 import { createHash } from 'node:crypto';
 import { should_preserve_comment, format_comment } from '../../../comment-utils.js';
+import { set_location } from '../../../../utils/builders.js';
 
 /**
  *
@@ -175,8 +179,8 @@ function visit_head_element(node, context) {
  * @param {TransformClientState} state
  */
 function apply_updates(init, update, state) {
-	if (update?.length === 1 && !update[0].needsPrevTracking) {
-		init?.push(
+	if (update.length === 1 && !update[0].needsPrevTracking) {
+		init.push(
 			b.stmt(
 				b.call(
 					'_$_.render',
@@ -195,18 +199,32 @@ function apply_updates(init, update, state) {
 			),
 		);
 	} else {
+		/** @type {AST.Property[]} */
 		const initial = [];
+		/** @type {AST.Statement[]} */
 		const render_statements = [];
 		let index = 0;
 
+		/**
+			@type {
+				Map<
+					AST.Identifier | AST.Expression,
+					RequiredPresent<
+						NonNullable<TransformClientState['update']>[number],
+						'initial' | 'identity' | 'expression'
+					>[]
+				>
+			}
+		 */
 		const grouped_updates = new Map();
 
 		for (const u of update) {
 			if (u.initial) {
-				const id =
-					u.identity?.type === 'Identifier'
-						? state.scope.get(u.identity.name)?.initial
-						: u.identity;
+				const id = /** @type {AST.Identifier | AST.Expression} */ (
+					u.identity.type === 'Identifier'
+						? /** @type {Binding} */ (state.scope.get(u.identity.name)).node
+						: u.identity
+				);
 				let updates = grouped_updates.get(id);
 
 				if (updates === undefined) {
@@ -715,7 +733,11 @@ const visitors = {
 			context.state.metadata.tracking = true;
 		}
 
-		if (node.tracked || (node.property.type === 'Identifier' && node.property.tracked)) {
+		if (
+			node.tracked ||
+			((node.property.type === 'Identifier' || node.property.type === 'Literal') &&
+				node.property.tracked)
+		) {
 			if (context.state.to_ts) {
 				// In TypeScript mode, transform @user.@name or @user.@['name'] or @user?.@name
 				// to user['#v'].name['#v'] or user['#v']['name']['#v'] or user['#v']?.name['#v']
@@ -723,10 +745,22 @@ const visitors = {
 				const visited_property = /** @type {AST.Expression} */ (context.visit(node.property));
 
 				// Build the member access: object.property or object[property]
-				const member = b.member(visited_object, visited_property, node.computed, node.optional);
+				const member = b.member(
+					visited_object,
+					visited_property,
+					node.computed,
+					node.optional,
+					/** @type {AST.NodeWithLocation} */ (node),
+				);
 
 				// Wrap with ['#v'] access
-				return b.member(member, b.literal('#v'), true);
+				return b.member(
+					member,
+					b.literal('#v'),
+					true,
+					undefined,
+					/** @type {AST.NodeWithLocation} */ (node),
+				);
 			} else {
 				if (!context.state.to_ts) {
 					return b.call(
@@ -1081,7 +1115,10 @@ const visitors = {
 		/** @type {(AST.Property | AST.SpreadElement)[] | null} */
 		const spread_attributes = is_spreading ? [] : null;
 		const child_namespace = is_dom_element
-			? determine_namespace_for_children(node.id.name, state.namespace)
+			? determine_namespace_for_children(
+					/** @type {AST.Identifier} */ (node.id).name,
+					state.namespace,
+				)
 			: state.namespace;
 
 		/**
@@ -1110,37 +1147,21 @@ const visitors = {
 		};
 
 		if (is_dom_element) {
+			/** @type {AST.Attribute | null} */
 			let class_attribute = null;
+			/** @type {AST.Attribute | null} */
 			let style_attribute = null;
-			const component = /** @type {AST.Component} */ (state.component);
 			/** @type {TransformClientState['update']} */
 			const local_updates = [];
-			const is_void = is_void_element(node.id.name);
-
-			let scoping_hash = null;
-			if (node.metadata?.scoped && component.css) {
-				scoping_hash = component.css.hash;
-			} else {
-				let inside_dynamic_children = false;
-				for (let i = context.path.length - 1; i >= 0; i--) {
-					const anc = context.path[i];
-					if (anc && anc.type === 'Component' && anc.metadata && anc.metadata.inherited_css) {
-						inside_dynamic_children = true;
-						break;
-					}
-				}
-				if (inside_dynamic_children) {
-					for (let i = context.path.length - 1; i >= 0; i--) {
-						const anc = context.path[i];
-						if (anc && anc.type === 'Component' && anc.css) {
-							scoping_hash = anc.css.hash;
-							break;
-						}
-					}
-				}
-			}
+			const is_void = is_void_element(/** @type {AST.Identifier} */ (node.id).name);
+			/** @type {AST.CSS.StyleSheet['hash'] | null} */
+			const scoping_hash =
+				state.applyParentCssScope ??
+				(node.metadata.scoped && state.component?.css
+					? /** @type {AST.CSS.StyleSheet} */ (state.component?.css).hash
+					: null);
 
-			state.template?.push(`<${node.id.name}`);
+			state.template?.push(`<${/** @type {AST.Identifier} */ (node.id).name}`);
 
 			for (const attr of node.attributes) {
 				if (attr.type === 'Attribute') {
@@ -1353,7 +1374,9 @@ const visitors = {
 					);
 
 					const hash_arg = scoping_hash ? b.literal(scoping_hash) : undefined;
-					const is_html = context.state.namespace === 'html' && node.id.name !== 'svg';
+					const is_html =
+						context.state.namespace === 'html' &&
+						/** @type {AST.Identifier} */ (node.id).name !== 'svg';
 
 					if (metadata.tracking) {
 						local_updates.push({
@@ -1430,7 +1453,7 @@ const visitors = {
 						root: false,
 					}),
 				);
-				state.template?.push(`</${node.id.name}>`);
+				state.template?.push(`</${/** @type {AST.Identifier} */ (node.id).name}>`);
 
 				// We need to check if any child nodes are dynamic to determine
 				// if we need to pop the hydration stack to the parent node
@@ -1472,6 +1495,12 @@ const visitors = {
 
 			state.template?.push('<!>');
 
+			if (state.applyParentCssScope) {
+				// We're inside a component, don't continue applying css hash to class
+				state.applyParentCssScope = undefined;
+			}
+
+			const is_dynamic_element = is_element_dynamic(node);
 			const is_spreading = node.attributes.some((attr) => attr.type === 'SpreadAttribute');
 			/** @type {(AST.Property | AST.SpreadElement)[]} */
 			const props = [];
@@ -1487,7 +1516,7 @@ const visitors = {
 								? b.literal(true)
 								: /** @type {AST.Expression} */ (visit(attr.value, { ...state, metadata }));
 
-						if (attr.name.name === 'class' && node.metadata?.scoped && state.component?.css) {
+						if (attr.name.name === 'class' && node.metadata.scoped && state.component?.css) {
 							if (property.type === 'Literal') {
 								property = b.literal(`${state.component.css.hash} ${property.value}`);
 							} else {
@@ -1543,7 +1572,7 @@ const visitors = {
 				}
 			}
 
-			if (node.metadata?.scoped && state.component?.css) {
+			if (node.metadata.scoped && state.component?.css) {
 				const hasClassAttr = node.attributes.some(
 					(attr) =>
 						attr.type === 'Attribute' &&
@@ -1579,17 +1608,19 @@ const visitors = {
 			}
 
 			if (children_filtered.length > 0) {
-				const component_scope = context.state.scopes.get(node);
+				const component_scope = state.scopes.get(node);
 				const children_component = b.component(b.id('children'), [], children_filtered);
 
-				children_component.metadata = {
-					...(children_component.metadata || {}),
-					inherited_css: true,
-				};
-
 				const children = /** @type {AST.Expression} */ (
 					visit(children_component, {
-						...context.state,
+						...state,
+						...(state.applyParentCssScope ||
+						(is_dynamic_element && node.metadata.scoped && state.component?.css)
+							? {
+									applyParentCssScope: /** @type {AST.CSS.StyleSheet} */ (state.component?.css)
+										.hash,
+								}
+							: {}),
 						scope: /** @type {ScopeInterface} */ (component_scope),
 						namespace: child_namespace,
 					})
@@ -1721,13 +1752,6 @@ const visitors = {
 				}),
 			];
 
-			/** @type {AST.NodeWithLocation} */
-			const loc_node = {
-				start: /** @type {AST.NodeWithLocation } */ (node).start,
-				end: /** @type {AST.NodeWithLocation } */ (node).end,
-				loc: /** @type {AST.SourceLocation} */ (node.loc),
-			};
-
 			const func = b.function(
 				node.id,
 				node.params.map(
@@ -1736,14 +1760,22 @@ const visitors = {
 				),
 				b.block([...style_statements, ...body_statements]),
 				false,
-				loc_node,
+				/** @type {AST.NodeWithLocation} */ (node),
 			);
 			// Mark that this function was originally a component
 			func.metadata = /** @type {AST.FunctionExpression['metadata']} */ ({
-				...func.metadata,
-				was_component: true,
+				...node.metadata,
+				is_component: true,
 			});
 
+			if (func.id) {
+				// metadata should be there as func.id === node.id
+				func.id.metadata = /** @type {AST.Identifier['metadata']} */ ({
+					...func.id.metadata,
+					is_component: true,
+				});
+			}
+
 			return func;
 		}
 
@@ -1760,11 +1792,18 @@ const visitors = {
 			}
 		}
 
+		const component_scope = context.state.scopes.get(node) || context.state.scope;
 		const body_statements = [
 			b.stmt(b.call('_$_.push_component')),
 			...transform_body(node.body, {
 				...context,
-				state: { ...context.state, component: node, metadata },
+				state: {
+					...context.state,
+					flush_node: null,
+					component: node,
+					metadata,
+					scope: component_scope,
+				},
 			}),
 			b.stmt(b.call('_$_.pop_component')),
 		];
@@ -1786,12 +1825,7 @@ const visitors = {
 					: body_statements),
 			]),
 		);
-		// Mark that this function was originally a component
-		func.metadata = /** @type {AST.FunctionExpression['metadata']} */ ({
-			...func.metadata,
-			was_component: true,
-		});
-		func.loc = node.loc; // Copy source location for Volar mappings
+
 		return func;
 	},
 
@@ -1945,7 +1979,12 @@ const visitors = {
 						b.block(
 							transform_body(/** @type {AST.BlockStatement} */ (node.body).body, {
 								...context,
-								state: { ...context.state, scope: body_scope, namespace: context.state.namespace },
+								state: {
+									...context.state,
+									scope: body_scope,
+									namespace: context.state.namespace,
+									flush_node: null,
+								},
 							}),
 						),
 					),
@@ -1986,7 +2025,7 @@ const visitors = {
 
 				const block = transform_body(consequent, {
 					...context,
-					state: { ...context.state, scope: consequent_scope },
+					state: { ...context.state, scope: consequent_scope, flush_node: null },
 				});
 				const has_break = consequent.some((stmt) => stmt.type === 'BreakStatement');
 				const is_last = counter === node.cases.length - 1;
@@ -2057,7 +2096,7 @@ const visitors = {
 		const consequent = b.block(
 			transform_body(consequent_body, {
 				...context,
-				state: { ...context.state, scope: consequent_scope },
+				state: { ...context.state, flush_node: null, scope: consequent_scope },
 			}),
 		);
 		const consequent_id = context.state.scope.generate('consequent');
@@ -2074,7 +2113,7 @@ const visitors = {
 			const alternate_block = b.block(
 				transform_body(alternate_body, {
 					...context,
-					state: { ...context.state, scope: alternate_scope },
+					state: { ...context.state, flush_node: null, scope: alternate_scope },
 				}),
 			);
 			alternate_id = context.state.scope.generate('alternate');
@@ -2499,7 +2538,7 @@ function transform_ts_child(node, context) {
 			const is_dom_element = is_element_dom_element(node);
 			const component_scope = /** @type {ScopeInterface} */ (context.state.scopes.get(node));
 			const thunk =
-				node.id.name === 'style'
+				/** @type {AST.Identifier} */ (node.id).name === 'style'
 					? null
 					: b.thunk(
 							b.block(
@@ -2508,7 +2547,10 @@ function transform_ts_child(node, context) {
 									state: {
 										...state,
 										scope: component_scope,
-										inside_head: node.id.name === 'head' ? true : state.inside_head,
+										inside_head:
+											/** @type {AST.Identifier} */ (node.id).name === 'head'
+												? true
+												: state.inside_head,
 									},
 								}),
 							),
@@ -2541,6 +2583,20 @@ function transform_ts_child(node, context) {
 			}
 		}
 
+		if (node.id.type === 'MemberExpression') {
+			const member = /** @type {AST.MemberExpression} */ (visit(node.id, { ...state }));
+
+			node.id = member;
+			/** @type {ESTreeJSX.RippleJSXOpeningElement} */ (node.openingElement).name = member;
+			if (node.closingElement) {
+				/** @type {ESTreeJSX.RippleJSXClosingElement} */ (node.closingElement).name = set_location(
+					{ ...member },
+					/** @type {AST.NodeWithLocation} */ (node.closingElement.name),
+					true,
+				);
+			}
+		}
+
 		/** @type {ESTreeJSX.JSXElement} */
 		const jsxElement = b.jsx_element(node, attributes, children);
 
@@ -2796,7 +2852,7 @@ function transform_children(children, context) {
 	const get_id = (node) => {
 		return b.id(
 			node.type == 'Element' && is_element_dom_element(node)
-				? state.scope.generate(node.id.name)
+				? state.scope.generate(/** @type {AST.Identifier} */ (node.id).name)
 				: node.type == 'Text'
 					? state.scope.generate('text')
 					: state.scope.generate('node'),
@@ -2837,15 +2893,15 @@ function transform_children(children, context) {
 			let metadata;
 			/** @type {AST.Expression | undefined} */
 			let expression = undefined;
-			let isCreateTextOnly = false;
+			let is_create_text_only = false;
 			if (node.type === 'Text' || node.type === 'Html') {
 				metadata = { tracking: false, await: false };
 				expression = /** @type {AST.Expression} */ (visit(node.expression, { ...state, metadata }));
-				isCreateTextOnly =
+				is_create_text_only =
 					node.type === 'Text' && normalized.length === 1 && expression.type === 'Literal';
 			}
 
-			if (initial === null && root && !isCreateTextOnly) {
+			if (initial === null && root && !is_create_text_only) {
 				create_initial(node);
 			}
 
@@ -2882,7 +2938,7 @@ function transform_children(children, context) {
 					cached = id;
 					return id;
 				} else {
-					debugger;
+					return get_id(node);
 				}
 			};
 
@@ -2941,9 +2997,7 @@ function transform_children(children, context) {
 							state.template?.push(escape_html(expr.value));
 						} else {
 							const id = flush_node(true);
-							state.init?.push(
-								b.var(/** @type {AST.Identifier} */ (id), b.call('_$_.create_text', expr)),
-							);
+							state.init?.push(b.var(/** @type {AST.Identifier} */ (id), b.call('_$_.text', expr)));
 							state.final?.push(b.stmt(b.call('_$_.append', b.id('__anchor'), id)));
 						}
 					} else {
@@ -3095,7 +3149,7 @@ function transform_body(body, { visit, state }) {
 		}
 
 		// NOTE: transform_children in `to_ts` mode does NOT add to body_state.update
-		// So, we skip adding doing any actions with body_state.update
+		// So, we skip adding any actions with body_state.update
 	}
 
 	return [
@@ -3160,30 +3214,23 @@ function create_tsx_with_typescript_support(comments) {
 	 * @param {TransformClientContext} context
 	 */
 	const handle_function = (node, context) => {
-		let is_method = false;
-		const parent = node.metadata.path.at(-1);
-		if (
-			node.type === 'FunctionExpression' &&
-			parent &&
-			((parent.type === 'Property' && parent.method === true) || parent.type === 'MethodDefinition')
-		) {
-			is_method = true;
-		}
 		const loc = /** @type {AST.SourceLocation} */ (node.loc);
+		const start_pos = /** @type {AST.Position} */ ({
+			line: loc.start.line,
+			column: loc.start.column,
+		});
 
 		if (node.async) {
 			context.location(loc.start.line, loc.start.column);
 			context.write('async ');
-			if (!is_method) {
-				context.location(loc.start.line, loc.start.column + 6);
-				context.write('function');
-			}
-		} else {
-			if (!is_method) {
-				context.write('function', node);
-			}
+			context.location(loc.start.line, loc.start.column + 'async '.length);
+			start_pos.column += 'async '.length;
 		}
 
+		context.location(start_pos.line, start_pos.column);
+		context.write('function');
+		context.location(start_pos.line, start_pos.column + 'function'.length);
+
 		if (node.generator) {
 			context.write('*');
 		}
@@ -3244,6 +3291,46 @@ function create_tsx_with_typescript_support(comments) {
 			base_tsx.ExpressionStatement?.(node, context);
 			context.location(loc.end.line, loc.end.column);
 		},
+		UpdateExpression(node, context) {
+			if (!node.loc) {
+				base_tsx.UpdateExpression?.(node, context);
+				return;
+			}
+			const loc = /** @type {AST.SourceLocation} */ (node.loc);
+			context.location(loc.start.line, loc.start.column);
+			base_tsx.UpdateExpression?.(node, context);
+			context.location(loc.end.line, loc.end.column);
+		},
+		UnaryExpression(node, context) {
+			if (!node.loc) {
+				base_tsx.UnaryExpression?.(node, context);
+				return;
+			}
+			const loc = /** @type {AST.SourceLocation} */ (node.loc);
+			context.location(loc.start.line, loc.start.column);
+			base_tsx.UnaryExpression?.(node, context);
+			context.location(loc.end.line, loc.end.column);
+		},
+		YieldExpression(node, context) {
+			if (!node.loc) {
+				base_tsx.YieldExpression?.(node, context);
+				return;
+			}
+			const loc = /** @type {AST.SourceLocation} */ (node.loc);
+			context.location(loc.start.line, loc.start.column);
+			base_tsx.YieldExpression?.(node, context);
+			context.location(loc.end.line, loc.end.column);
+		},
+		CallExpression(node, context) {
+			if (!node.loc) {
+				base_tsx.CallExpression?.(node, context);
+				return;
+			}
+			const loc = /** @type {AST.SourceLocation} */ (node.loc);
+			context.location(loc.start.line, loc.start.column);
+			base_tsx.CallExpression?.(node, context);
+			context.location(loc.end.line, loc.end.column);
+		},
 		Literal(node, context) {
 			if (!node.loc || node.raw === undefined) {
 				base_tsx.Literal?.(node, context);
@@ -3346,61 +3433,99 @@ function create_tsx_with_typescript_support(comments) {
 			context.location(loc.end.line, loc.end.column);
 		},
 		Property(node, context) {
-			// Check if the value is a function that was originally a component
-			const isComponent =
-				node.value?.type === 'FunctionExpression' && node.value.metadata?.was_component;
-
-			if (isComponent) {
-				// Manually print as non-method property to preserve 'function' keyword
-				// This ensures esrap creates proper source map entries for the component->function transformation
-				if (node.computed) {
-					context.write('[');
-					context.visit(node.key);
-					context.write(']');
-				} else {
-					context.visit(node.key);
-				}
-				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) {
-					let colon_str = ': ';
-					if (node.method === true && node.value.type === 'FunctionExpression') {
-						colon_str = '';
-					}
-					// Force longhand: write key: value explicitly to preserve source positions
-					if (node.computed) context.write('[');
-					context.visit(node.key);
-					context.write(node.computed ? ']' + colon_str : colon_str);
-					context.visit(node.value);
-				} else {
-					base_tsx.Property?.(node, context);
+			let start_pos = node.loc?.start;
+			if (node.loc) {
+				start_pos = /** @type {AST.Position} */ ({
+					line: node.loc.start.line,
+					column: node.loc.start.column,
+				});
+			}
+
+			const is_method = node.method || node.kind === 'get' || node.kind === 'set';
+
+			// Handle getters/setters
+			if (node.kind === 'get') {
+				context.write('get ');
+				if (start_pos) {
+					start_pos.column += 'get '.length;
+				}
+			} else if (node.kind === 'set') {
+				if (start_pos) {
+					start_pos.column += 'set '.length;
+				}
+				context.write('set ');
+			}
+
+			// Write async keyword (before *)
+			if (is_method && /** @type {AST.FunctionExpression} */ (node.value).async) {
+				// If not a method, async should be a part of the value e.g. { prop: async function }
+				if (start_pos) {
+					context.location(start_pos.line, start_pos.column);
+				}
+				context.write('async ');
+				if (start_pos) {
+					context.location(start_pos.line, start_pos.column + 'async '.length);
+					start_pos.column += 'async '.length;
+				}
+			}
+
+			// Write * for generator methods
+			if (/** @type {AST.FunctionExpression} */ (node.value).generator) {
+				context.write('*');
+			}
+
+			// Write the key
+			if (node.computed) {
+				if (node.key.loc) {
+					context.location(node.key.loc.start.line, node.key.loc.start.column - 1);
+				}
+				context.write('[');
+				context.visit(node.key);
+				context.write(']');
+				if (node.key.loc) {
+					context.location(node.key.loc.end.line, node.key.loc.end.column + 1);
 				}
 			} else {
-				// Use default handler for non-component properties
-				base_tsx.Property?.(node, context);
+				if (node.shorthand) {
+					// only visit value since key and value are the same
+					// or the value will contain the key like in AssignmentPattern: { foo = 1 }
+					context.visit(node.value);
+					return;
+				}
+
+				context.visit(node.key);
 			}
+
+			// Method shorthand: { foo() {} } or getters/setters - print params and body directly
+			if (is_method) {
+				const fn = /** @type {AST.FunctionExpression} */ (node.value);
+
+				fn.metadata.is_method = true;
+
+				// Type parameters: { foo<T>() {} }
+				if (fn.typeParameters) {
+					context.visit(fn.typeParameters);
+				}
+
+				context.write('(');
+				for (let i = 0; i < fn.params.length; i++) {
+					if (i > 0) context.write(', ');
+					context.visit(fn.params[i]);
+				}
+				context.write(')');
+
+				if (fn.returnType) {
+					context.visit(fn.returnType);
+				}
+
+				context.write(' ');
+				context.visit(fn.body);
+				return;
+			}
+
+			// Regular property: { key: value }
+			context.write(': ');
+			context.visit(node.value);
 		},
 		JSXOpeningElement(node, context) {
 			// Set location for '<'
@@ -3444,49 +3569,71 @@ function create_tsx_with_typescript_support(comments) {
 			context.location(loc.end.line, loc.end.column);
 		},
 		MethodDefinition(node, context) {
-			// Check if there are type parameters to handle
-			const hasTypeParams = node.typeParameters || node.value?.typeParameters;
-
-			if (!hasTypeParams) {
-				// No type parameters, use default handler
-				return base_tsx.MethodDefinition?.(node, context);
+			node.value.metadata.is_method = true;
+			/** @type {AST.Position | undefined} */
+			let start_pos;
+			if (node.loc) {
+				start_pos = /** @type {AST.Position} */ ({
+					line: node.loc.start.line,
+					column: node.loc.start.column,
+				});
 			}
 
-			// Has type parameters - we need to manually handle to ensure they're visited
 			// Write modifiers (static, async, etc.)
 			if (node.static) {
 				context.write('static ');
+				if (start_pos) {
+					start_pos.column += 'static '.length;
+				}
 			}
 
-			// Handle getters/setters
 			if (node.kind === 'get') {
 				context.write('get ');
+				if (start_pos) {
+					start_pos.column += 'get '.length;
+				}
 			} else if (node.kind === 'set') {
+				if (start_pos) {
+					start_pos.column += 'set '.length;
+				}
 				context.write('set ');
 			} else if (node.kind === 'constructor') {
-				context.write('constructor ');
+				// skip as it's covered by the key
 			}
 
-			// Write * for generator methods
-			if (node.value?.generator) {
-				context.write('*');
+			// Write async keyword (before *)
+			if (/** @type {AST.FunctionExpression} */ (node.value).async) {
+				if (start_pos) {
+					context.location(start_pos.line, start_pos.column);
+				}
+				context.write('async ');
+				if (start_pos) {
+					context.location(start_pos.line, start_pos.column + 'async '.length);
+					start_pos.column += 'async '.length;
+				}
 			}
 
-			// Write async keyword
-			if (node.value?.async) {
-				context.write('async ');
+			// Write * for generator methods
+			if (node.value.generator) {
+				context.write('*');
 			}
 
 			// Write the method key
 			if (node.computed) {
+				if (node.key.loc) {
+					context.location(node.key.loc.start.line, node.key.loc.start.column - 1);
+				}
 				context.write('[');
 				context.visit(node.key);
 				context.write(']');
+				if (node.key.loc) {
+					context.location(node.key.loc.end.line, node.key.loc.end.column + 1);
+				}
 			} else {
 				context.visit(node.key);
 			}
 
-			// Visit typeParameters if present (THIS IS THE FIX)
+			// Visit typeParameters
 			// TypeParameters can be on either the MethodDefinition or its value (FunctionExpression)
 			if (node.typeParameters) {
 				context.visit(node.typeParameters);