feat: support for comments in tags

.changeset/olive-jobs-sip.md

@@ -0,0 +1,5 @@
+---
+"svelte-language-server": patch
+---
+
+feat: support for comments in tags

packages/language-server/package.json

@@ -59,7 +59,7 @@
         "globrex": "^0.1.2",
         "lodash": "^4.17.21",
         "prettier": "~3.3.3",
-        "prettier-plugin-svelte": "^3.4.0",
+        "prettier-plugin-svelte": "^3.5.0",
         "svelte": "^4.2.19",
         "svelte2tsx": "workspace:~",
         "typescript": "^5.9.2",

packages/language-server/src/lib/documents/parseHtml.ts

@@ -137,6 +137,27 @@ export function parseHtml(text: string): HTMLDocument {
                 parseAttributeValue();
                 break;
 
+            case TokenType.Unknown: {
+                const tokenOffset = scanner.getTokenOffset();
+                if (
+                    isInsideTagScannerState() &&
+                    text.charCodeAt(tokenOffset) === '/'.charCodeAt(0)
+                ) {
+                    const nextCharCode = text.charCodeAt(tokenOffset + 1);
+                    if (nextCharCode === '/'.charCodeAt(0)) {
+                        const newlineOffset = text.indexOf('\n', tokenOffset + 2);
+                        const commentEndOffset = newlineOffset === -1 ? text.length : newlineOffset;
+                        restartScannerAt(commentEndOffset, ScannerState.WithinTag);
+                    } else if (nextCharCode === '*'.charCodeAt(0)) {
+                        const blockCommentEnd = text.indexOf('*/', tokenOffset + 2);
+                        const commentEndOffset =
+                            blockCommentEnd === -1 ? text.length : blockCommentEnd + 2;
+                        restartScannerAt(commentEndOffset, ScannerState.WithinTag);
+                    }
+                }
+                break;
+            }
+
             case TokenType.Content: {
                 const expressionEnd = skipExpressionInCurrentRange();
                 if (expressionEnd > scanner.getTokenEnd()) {
@@ -223,6 +244,16 @@ export function parseHtml(text: string): HTMLDocument {
         }
         finishAttribute(start, expressionTagEnd);
     }
+
+    function isInsideTagScannerState() {
+        const scannerState = scanner.getScannerState();
+        return (
+            scannerState === ScannerState.WithinTag ||
+            scannerState === ScannerState.AfterAttributeName ||
+            scannerState === ScannerState.BeforeAttributeValue ||
+            scannerState === ScannerState.AfterOpeningStartTag
+        );
+    }
 }
 
 export interface AttributeContext {

packages/language-server/test/lib/documents/parseHtml.test.ts

@@ -198,6 +198,20 @@ describe('parseHtml', () => {
         const ariaLabelValue = fooNode.attributes?.['ariaLabel'];
         assert.strictEqual(ariaLabelValue, `"a{b > c ? "": ""} c"`);
     });
+
+    it('parse comments in attributes', () => {
+        testRootElements(
+            parseHtml(
+                `<Foo
+                // comment/>
+                checked={a}
+                /* another comment/> <div>ignore me</div> */
+                hello="bar"
+                />
+                <style></style>`
+            )
+        );
+    });
 });
 
 describe('getAttributeContextAtPosition', () => {

packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml

@@ -391,11 +391,23 @@ repository:
 
   attributes:
     patterns:
+    - include: '#attributes-comments'
     - include: '#attributes-directives'
     - include: '#attributes-keyvalue'
     - include: '#attributes-attach'
     - include: '#attributes-interpolated'
 
+  # Comments within attributes
+  attributes-comments:
+    patterns:
+    # Single-line comment
+    - match: //.*$
+      name: comment.line.double-slash.svelte
+    # Block comment
+    - begin: /\*
+      end: \*/
+      name: comment.block.svelte
+
   # Attachments
   attributes-attach:
     begin: (?<!:|=)\s*({@attach\s)

packages/svelte2tsx/test/svelte2tsx/samples/comments-in-attributes.v5/expectedv2.ts

@@ -0,0 +1,9 @@
+///<reference types="svelte" />
+;function $$render() {
+async () => {  { svelteHTML.createElement("div", {    "foo":`bar`,"baz":`qux`,}); }
+
+  { const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: {    "foo":`bar`,"baz":`qux`,}}); Component}};
+return { props: /** @type {Record<string, never>} */ ({}), exports: {}, bindings: "", slots: {}, events: {} }}
+const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_partial(__sveltets_2_with_any_event($$render())));
+/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType<typeof Input__SvelteComponent_>;
+/*Ωignore_endΩ*/export default Input__SvelteComponent_;

packages/svelte2tsx/test/svelte2tsx/samples/comments-in-attributes.v5/input.svelte

@@ -0,0 +1,13 @@
+<div
+    // comment
+    foo="bar"
+    /* another comment */
+    baz="qux"
+></div>
+
+<Component
+    // comment
+    foo="bar"
+    /* another comment */
+    baz="qux"
+></Component>