feat: Add ability to comment out attributes

.changeset/salty-plants-pump.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+Add ability to comment out attributes [RFC](https://github.com/sveltejs/rfcs/pull/43)

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

@@ -215,8 +215,15 @@ export default function element(parser) {
 
 	const read = is_top_level_script_or_style ? read_static_attribute : read_attribute;
 
+	/** @type {ReturnType<typeof read>} */
 	let attribute;
 	while ((attribute = read(parser))) {
+		// {/* comment */}
+		if (attribute.type === 'CommentAttribute') {
+			parser.allow_whitespace();
+			continue;
+		}
+
 		// animate and transition can only be specified once per element so no need
 		// to check here, use can be used multiple times, same for the on directive
 		// finally let already has error handling in case of duplicate variable names
@@ -490,7 +497,7 @@ function read_static_attribute(parser) {
 
 /**
  * @param {Parser} parser
- * @returns {AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.AttachTag | null}
+ * @returns {AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.AttachTag | AST.CommentAttribute | null}
  */
 function read_attribute(parser) {
 	const start = parser.index;
@@ -537,6 +544,19 @@ function read_attribute(parser) {
 			};
 
 			return spread;
+		} else if (parser.eat('/*')) {
+			const data = parser.read_until(/\*\/\}/);
+			parser.eat('*/}', true);
+
+			/** @type {AST.CommentAttribute} */
+			const comment = {
+				type: 'CommentAttribute',
+				data: data,
+				start,
+				end: parser.index
+			};
+
+			return comment;
 		} else {
 			const value_start = parser.index;
 			let name = parser.read_identifier();

packages/svelte/src/compiler/types/template.d.ts

@@ -143,6 +143,13 @@ export namespace AST {
 		data: string;
 	}
 
+	/** An Attribute comment `{/* ... *​/}` */
+	export interface CommentAttribute extends BaseNode {
+		type: 'CommentAttribute';
+		/** the contents of the comment */
+		data: string;
+	}
+
 	/** A `{@const ...}` tag */
 	export interface ConstTag extends BaseNode {
 		type: 'ConstTag';
@@ -613,6 +620,7 @@ export namespace AST {
 		| Directive
 		| AST.AttachTag
 		| AST.Comment
+		| AST.CommentAttribute
 		| Block;
 
 	export type SvelteNode = Node | TemplateNode | AST.Fragment | _CSS.Node | Script;

packages/svelte/tests/parser-modern/samples/html-attribute-comment/input.svelte

@@ -0,0 +1,3 @@
+<div {/* comment */} {/*
+	Second comment Multi-line
+*/}></div>

packages/svelte/tests/parser-modern/samples/html-attribute-comment/output.json

@@ -0,0 +1,24 @@
+{
+	"css": null,
+	"js": [],
+	"start": 0,
+	"end": 62,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "RegularElement",
+				"start": 0,
+				"end": 62,
+				"name": "div",
+				"attributes": [],
+				"fragment": {
+					"type": "Fragment",
+					"nodes": []
+				}
+			}
+		]
+	},
+	"options": null
+}

packages/svelte/types/index.d.ts

@@ -1273,6 +1273,13 @@ declare module 'svelte/compiler' {
 			data: string;
 		}
 
+		/** An Attribute comment `{/* ... *​/}` */
+		export interface CommentAttribute extends BaseNode {
+			type: 'CommentAttribute';
+			/** the contents of the comment */
+			data: string;
+		}
+
 		/** A `{@const ...}` tag */
 		export interface ConstTag extends BaseNode {
 			type: 'ConstTag';
@@ -1601,6 +1608,7 @@ declare module 'svelte/compiler' {
 			| Directive
 			| AST.AttachTag
 			| AST.Comment
+			| AST.CommentAttribute
 			| Block;
 
 		export type SvelteNode = Node | TemplateNode | AST.Fragment | _CSS.Node | Script;