fix: allow leading and trailing comments in mustache tag (#11866)

Fixes #7456

---------

Co-authored-by: Rich Harris <[email protected]>

Author: 2 people

.changeset/fresh-wombats-learn.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: allow leading and trailing comments in mustache expression

packages/svelte/scripts/process-messages/index.js

@@ -129,6 +129,11 @@ function transform(name, dest) {
 		}
 	});
 
+	if (comments.length > 0) {
+		// @ts-expect-error
+		(ast.trailingComments ||= []).push(...comments);
+	}
+
 	const category = messages[name];
 
 	// find the `export function CODE` node

packages/svelte/src/compiler/phases/1-parse/acorn.js

@@ -30,6 +30,7 @@ export function parse(source, typescript) {
  * @param {string} source
  * @param {boolean} typescript
  * @param {number} index
+ * @returns {acorn.Expression & { leadingComments?: CommentWithLocation[]; trailingComments?: CommentWithLocation[]; }}
  */
 export function parse_expression_at(source, typescript, index) {
 	const parser = typescript ? ParserWithTS : acorn.Parser;
@@ -92,7 +93,7 @@ function get_comment_handlers(source) {
 			if (comments.length === 0) return;
 
 			walk(ast, null, {
-				_(node, { next }) {
+				_(node, { next, path }) {
 					let comment;
 
 					while (comments[0] && comments[0].start < node.start) {
@@ -103,14 +104,20 @@ function get_comment_handlers(source) {
 					next();
 
 					if (comments[0]) {
-						const slice = source.slice(node.end, comments[0].start);
+						const parent = path.at(-1);
+						if (parent === undefined || node.end !== parent.end) {
+							const slice = source.slice(node.end, comments[0].start);
 
-						if (/^[,) \t]*$/.test(slice)) {
-							node.trailingComments = [/** @type {CommentWithLocation} */ (comments.shift())];
+							if (/^[,) \t]*$/.test(slice)) {
+								node.trailingComments = [/** @type {CommentWithLocation} */ (comments.shift())];
+							}
 						}
 					}
 				}
 			});
+			if (comments.length > 0) {
+				(ast.trailingComments ||= []).push(...comments.splice(0));
+			}
 		}
 	};
 }

packages/svelte/src/compiler/phases/1-parse/read/expression.js

@@ -17,6 +17,10 @@ export default function read_expression(parser) {
 		}
 
 		let index = /** @type {number} */ (node.end);
+		if (node.trailingComments !== undefined && node.trailingComments.length > 0) {
+			index = node.trailingComments.at(-1).end;
+		}
+
 		while (num_parens > 0) {
 			const char = parser.template[index];
 

packages/svelte/src/compiler/phases/1-parse/state/tag.js

@@ -15,9 +15,14 @@ export default function tag(parser) {
 	parser.allow_whitespace();
 
 	if (parser.eat('#')) return open(parser);
-	if (parser.eat('/')) return close(parser);
 	if (parser.eat(':')) return next(parser);
 	if (parser.eat('@')) return special(parser);
+	if (parser.match('/')) {
+		if (!parser.match('/*') && !parser.match('//')) {
+			parser.eat('/');
+			return close(parser);
+		}
+	}
 
 	const expression = read_expression(parser);
 

packages/svelte/tests/parser-legacy/samples/javascript-comments/input.svelte

@@ -1,6 +1,7 @@
 <script>
 	// a leading comment
-	const a = true; // a trailing comment
+	const a = 1; // a trailing comment
+	const b = 2;
 
 	/** a comment */
 	function asd() {
@@ -14,4 +15,10 @@
 		/* another comment */
 		fn();
 	}}
-></button>
+>
+{/* leading block comment */ a}
+</button>
+{ // leading line comment
+	a + b // trailing line comment
+	/* trailing block comment */
+}