feat: support attachments (#2760)

sveltejs/svelte#15000

Author: dummdidumm

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.3.0",
+        "prettier-plugin-svelte": "^3.4.0",
         "svelte": "^4.2.19",
         "svelte2tsx": "workspace:~",
         "typescript": "^5.8.2",
@@ -69,6 +69,6 @@
         "vscode-languageserver": "9.0.1",
         "vscode-languageserver-protocol": "3.17.5",
         "vscode-languageserver-types": "3.17.5",
-        "vscode-uri": "~3.0.0"
+        "vscode-uri": "~3.1.0"
     }
 }

packages/language-server/src/plugins/svelte/features/SvelteTags.ts

@@ -8,7 +8,7 @@ export type SvelteLogicTag = 'each' | 'if' | 'await' | 'key' | 'snippet';
 /**
  * Special svelte syntax tags.
  */
-export type SvelteTag = SvelteLogicTag | 'html' | 'debug' | 'const' | 'render';
+export type SvelteTag = SvelteLogicTag | 'html' | 'debug' | 'const' | 'render' | 'attach';
 
 /**
  * For each tag, a documentation in markdown format.
@@ -95,11 +95,19 @@ It accepts a comma-separated list of variable names (not arbitrary expressions).
 https://svelte.dev/docs/svelte/@debug
 `,
     const: `\`{@const ...}\`\\
-Defines a local constant}\\
+Defines a local constant\\
 #### Usage:
 \`{@const a = b + c}\`\\
 \\
 https://svelte.dev/docs/svelte/@const
+`,
+    attach: `\`{@attach ...}\`\\
+Defines an attachment that is attached to an element or component\\
+#### Usage:
+\`<div {@attach (node) => {...}}></div>\`\\
+\`<Component {@attach namedAttachment} />\`\\
+\\
+https://svelte.dev/docs/svelte/@attach
 `
 };
 

packages/language-server/src/plugins/svelte/features/getCompletions.ts

@@ -122,7 +122,8 @@ function getCompletionsWithRegardToTriggerCharacter(
             { tag: 'html', label: 'html' },
             { tag: 'debug', label: 'debug' },
             { tag: 'const', label: 'const' },
-            { tag: 'render', label: 'render' }
+            { tag: 'render', label: 'render' },
+            { tag: 'attach', label: 'attach' }
         ]);
     }
 

packages/language-server/src/plugins/svelte/features/getHoverInfo.ts

@@ -111,6 +111,7 @@ const tagPossibilities: Array<{ tag: SvelteTag | ':else'; values: string[] }> =
     { tag: 'debug' as const, values: ['@debug'] },
     { tag: 'const' as const, values: ['@const'] },
     { tag: 'render' as const, values: ['@render'] },
+    { tag: 'attach' as const, values: ['@attach'] },
     // this tag has multiple possibilities
     { tag: ':else' as const, values: [':else'] }
 ];

packages/language-server/test/plugins/svelte/features/getCompletions.test.ts

@@ -63,7 +63,7 @@ describe('SveltePlugin#getCompletions', () => {
     });
 
     it('should return completions for @', () => {
-        expectCompletionsFor('{@').toEqual(['html', 'debug', 'const', 'render']);
+        expectCompletionsFor('{@').toEqual(['html', 'debug', 'const', 'render', 'attach']);
     });
 
     describe('should return no completions for :', () => {

packages/svelte-check/package.json

@@ -58,6 +58,6 @@
         "vscode-languageserver": "8.0.2",
         "vscode-languageserver-protocol": "3.17.2",
         "vscode-languageserver-types": "3.17.2",
-        "vscode-uri": "~3.0.0"
+        "vscode-uri": "~3.1.0"
     }
 }

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

@@ -360,8 +360,17 @@ repository:
     patterns:
     - include: '#attributes-directives'
     - include: '#attributes-keyvalue'
+    - include: '#attributes-attach'
     - include: '#attributes-interpolated'
 
+  # Attachments
+  attributes-attach:
+    begin: (?<!:|=)\s*({@attach\s)
+    end: (\})
+    captures: { 1: { name: entity.other.attribute-name.svelte } }
+    contentName: meta.embedded.expression.svelte source.ts
+    patterns: [ include: source.ts ]
+
   # Interpolated shorthand attributes, like `{variable}` sitting by itself.
   attributes-interpolated:
     begin: (?<!:|=)\s*({)

packages/svelte2tsx/src/htmlxtojsx_v2/index.ts

@@ -41,6 +41,7 @@ import {
 import { EventHandler } from '../svelte2tsx/nodes/event-handler';
 import { ComponentEvents } from '../svelte2tsx/nodes/ComponentEvents';
 import { analyze } from 'periscopic';
+import { handleAttachTag } from './nodes/AttachTag';
 
 export interface TemplateProcessResult {
     /**
@@ -290,6 +291,9 @@ export function convertHtmlxToJsx(
                     case 'RenderTag':
                         handleRenderTag(str, node);
                         break;
+                    case 'AttachTag':
+                        handleAttachTag(node, element);
+                        break;
                     case 'InlineComponent':
                         if (element) {
                             element.child = new InlineComponent(str, node, element);

packages/svelte2tsx/src/htmlxtojsx_v2/nodes/AttachTag.ts

@@ -0,0 +1,15 @@
+import { BaseNode } from '../../interfaces';
+import { Element } from './Element';
+import { InlineComponent } from './InlineComponent';
+
+/**
+ * {@attach xxx}   --->    [Symbol()]: xxx
+ */
+export function handleAttachTag(tag: BaseNode, element: Element | InlineComponent): void {
+    // element.addAttachment(attr);
+    if (element instanceof InlineComponent) {
+        element.addProp(['[Symbol("@attach")]'], [[tag.expression.start, tag.expression.end]]);
+    } else {
+        element.addAttribute(['[Symbol("@attach")]'], [[tag.expression.start, tag.expression.end]]);
+    }
+}

packages/svelte2tsx/test/htmlx2jsx/samples/attachments.v5/expectedv2.js

@@ -0,0 +1,5 @@
+ { svelteHTML.createElement("div", { [Symbol("@attach")]:x,}); }
+ { svelteHTML.createElement("div", { [Symbol("@attach")]:(node) => {},}); }
+
+ { const $$_pmoC0C = __sveltets_2_ensureComponent(Comp); new $$_pmoC0C({ target: __sveltets_2_any(), props: { [Symbol("@attach")]:x,}}); Comp}
+ { const $$_pmoC0C = __sveltets_2_ensureComponent(Comp); new $$_pmoC0C({ target: __sveltets_2_any(), props: { [Symbol("@attach")]:(node) => {},}}); Comp}

packages/svelte2tsx/test/htmlx2jsx/samples/attachments.v5/input.svelte

@@ -0,0 +1,5 @@
+<div {@attach x}></div>
+<div {@attach (node) => {}}></div>
+
+<Comp {@attach x}></Comp>
+<Comp {@attach (node) => {}}></Comp>