Breaking: update AST

src/ast.ts

@@ -72,6 +72,8 @@ export type SvelteNode =
     | SvelteSpreadAttribute
     | SvelteDirective
     | SvelteSpecialDirective
+    | SvelteDirectiveKey
+    | SvelteSpecialDirectiveKey
     | SvelteHTMLComment
     | SvelteReactiveStatement
 
@@ -409,10 +411,16 @@ export type SvelteDirective =
     | SvelteLetDirective
     | SvelteRefDirective
     | SvelteTransitionDirective
-interface BaseSvelteDirective extends BaseNode {
-    type: "SvelteDirective"
+export interface SvelteDirectiveKey extends BaseNode {
+    type: "SvelteDirectiveKey"
     name: ESTree.Identifier
     modifiers: string[]
+    parent: SvelteDirective
+}
+
+interface BaseSvelteDirective extends BaseNode {
+    type: "SvelteDirective"
+    key: SvelteDirectiveKey
     parent: SvelteStartTag
 }
 
@@ -450,9 +458,14 @@ export interface SvelteTransitionDirective extends BaseSvelteDirective {
     outro: boolean
     expression: null | ESTree.Expression
 }
+export interface SvelteSpecialDirectiveKey extends BaseNode {
+    type: "SvelteSpecialDirectiveKey"
+    parent: SvelteSpecialDirective
+}
 export interface SvelteSpecialDirective extends BaseNode {
     type: "SvelteSpecialDirective"
     kind: "this"
+    key: SvelteSpecialDirectiveKey
     expression: ESTree.Expression
     parent: SvelteStartTag /* & { parent: SvelteSpecialElement } */
 }

src/parser/converts/attr.ts

@@ -193,8 +193,7 @@ function convertBindingDirective(
     const directive: SvelteBindingDirective = {
         type: "SvelteDirective",
         kind: "Binding",
-        name: null as any,
-        modifiers: node.modifiers,
+        key: null as any,
         expression: null,
         parent,
         ...ctx.getConvertLocation(node),
@@ -233,8 +232,7 @@ function convertEventHandlerDirective(
     const directive: SvelteEventHandlerDirective = {
         type: "SvelteDirective",
         kind: "EventHandler",
-        name: null as any,
-        modifiers: node.modifiers,
+        key: null as any,
         expression: null,
         parent,
         ...ctx.getConvertLocation(node),
@@ -266,8 +264,7 @@ function convertClassDirective(
     const directive: SvelteClassDirective = {
         type: "SvelteDirective",
         kind: "Class",
-        name: null as any,
-        modifiers: node.modifiers,
+        key: null as any,
         expression: null,
         parent,
         ...ctx.getConvertLocation(node),
@@ -292,8 +289,7 @@ function convertTransitionDirective(
         kind: "Transition",
         intro: node.intro,
         outro: node.outro,
-        name: null as any,
-        modifiers: node.modifiers,
+        key: null as any,
         expression: null,
         parent,
         ...ctx.getConvertLocation(node),
@@ -303,7 +299,7 @@ function convertTransitionDirective(
         directive,
         ctx,
         buildProcessExpressionForExpression(directive, ctx, null),
-        (name) => ctx.scriptLet.addExpression(name, directive),
+        (name) => ctx.scriptLet.addExpression(name, directive.key),
     )
     return directive
 }
@@ -317,8 +313,7 @@ function convertAnimationDirective(
     const directive: SvelteAnimationDirective = {
         type: "SvelteDirective",
         kind: "Animation",
-        name: null as any,
-        modifiers: node.modifiers,
+        key: null as any,
         expression: null,
         parent,
         ...ctx.getConvertLocation(node),
@@ -328,7 +323,7 @@ function convertAnimationDirective(
         directive,
         ctx,
         buildProcessExpressionForExpression(directive, ctx, null),
-        (name) => ctx.scriptLet.addExpression(name, directive),
+        (name) => ctx.scriptLet.addExpression(name, directive.key),
     )
     return directive
 }
@@ -342,8 +337,7 @@ function convertActionDirective(
     const directive: SvelteActionDirective = {
         type: "SvelteDirective",
         kind: "Action",
-        name: null as any,
-        modifiers: node.modifiers,
+        key: null as any,
         expression: null,
         parent,
         ...ctx.getConvertLocation(node),
@@ -353,7 +347,7 @@ function convertActionDirective(
         directive,
         ctx,
         buildProcessExpressionForExpression(directive, ctx, null),
-        (name) => ctx.scriptLet.addExpression(name, directive),
+        (name) => ctx.scriptLet.addExpression(name, directive.key),
     )
     return directive
 }
@@ -367,8 +361,7 @@ function convertLetDirective(
     const directive: SvelteLetDirective = {
         type: "SvelteDirective",
         kind: "Let",
-        name: null as any,
-        modifiers: node.modifiers,
+        key: null as any,
         expression: null,
         parent,
         ...ctx.getConvertLocation(node),
@@ -422,24 +415,33 @@ function processDirective<
         end: nameIndex + node.name.length,
     }
 
+    let keyEndIndex = nameRange.end
+
     // modifiers
     if (ctx.code[nameRange.end] === "|") {
         let nextStart = nameRange.end + 1
         let nextEnd = indexOf(
             ctx.code,
-            (c) => c === "=" || c === ">" || c === "|" || !c.trim(),
+            (c) =>
+                c === "=" || c === ">" || c === "/" || c === "|" || !c.trim(),
             nextStart,
         )
         ctx.addToken("HTMLIdentifier", { start: nextStart, end: nextEnd })
         while (ctx.code[nextEnd] === "|") {
             nextStart = nextEnd + 1
             nextEnd = indexOf(
                 ctx.code,
-                (c) => c === "=" || c === ">" || c === "|" || !c.trim(),
+                (c) =>
+                    c === "=" ||
+                    c === ">" ||
+                    c === "/" ||
+                    c === "|" ||
+                    !c.trim(),
                 nextStart,
             )
             ctx.addToken("HTMLIdentifier", { start: nextStart, end: nextEnd })
         }
+        keyEndIndex = nextEnd
     }
 
     let isShorthand = false
@@ -455,18 +457,25 @@ function processDirective<
         })
     }
 
+    const key = (directive.key = {
+        type: "SvelteDirectiveKey",
+        name: null as any,
+        modifiers: node.modifiers,
+        parent: directive,
+        ...ctx.getConvertLocation({ start: node.start, end: keyEndIndex }),
+    })
+
     // put name
-    directive.name = {
+    key.name = {
         type: "Identifier",
         name: node.name,
-        // @ts-expect-error -- ignore
-        parent: directive,
+        parent: key,
         ...ctx.getConvertLocation(nameRange),
     }
     if (!isShorthand) {
         if (processName) {
-            processName(directive.name).push((es) => {
-                directive.name = es
+            processName(key.name).push((es) => {
+                key.name = es
             })
         } else {
             ctx.addToken("HTMLIdentifier", nameRange)

src/parser/converts/element.ts

@@ -318,10 +318,16 @@ function convertSpecialElement(
         const thisAttr: SvelteSpecialDirective = {
             type: "SvelteSpecialDirective",
             kind: "this",
+            key: null as any,
             expression: null as any,
             parent: element.startTag,
             ...ctx.getConvertLocation({ start: startIndex, end: endIndex }),
         }
+        thisAttr.key = {
+            type: "SvelteSpecialDirectiveKey",
+            parent: thisAttr,
+            ...ctx.getConvertLocation({ start: startIndex, end: eqIndex }),
+        }
         ctx.addToken("HTMLIdentifier", {
             start: startIndex,
             end: eqIndex,

src/visitor-keys.ts

@@ -38,8 +38,10 @@ const svelteKeys: SvelteKeysType = {
     SvelteAttribute: ["key", "value"],
     SvelteShorthandAttribute: ["key", "value"],
     SvelteSpreadAttribute: ["argument"],
-    SvelteDirective: ["expression"],
-    SvelteSpecialDirective: ["expression"],
+    SvelteDirective: ["key", "expression"],
+    SvelteSpecialDirective: ["key", "expression"],
+    SvelteDirectiveKey: ["name"],
+    SvelteSpecialDirectiveKey: [],
     SvelteText: [],
     SvelteHTMLComment: [],
     SvelteReactiveStatement: ["label", "body"],

tests/fixtures/parser/ast/blog/write-less-code01-output.json

@@ -323,25 +323,42 @@
           {
             "type": "SvelteDirective",
             "kind": "Binding",
-            "name": {
-              "type": "Identifier",
-              "name": "value",
+            "key": {
+              "type": "SvelteDirectiveKey",
+              "name": {
+                "type": "Identifier",
+                "name": "value",
+                "range": [
+                  70,
+                  75
+                ],
+                "loc": {
+                  "start": {
+                    "line": 6,
+                    "column": 26
+                  },
+                  "end": {
+                    "line": 6,
+                    "column": 31
+                  }
+                }
+              },
+              "modifiers": [],
               "range": [
-                70,
+                65,
                 75
               ],
               "loc": {
                 "start": {
                   "line": 6,
-                  "column": 26
+                  "column": 21
                 },
                 "end": {
                   "line": 6,
                   "column": 31
                 }
               }
             },
-            "modifiers": [],
             "expression": {
               "type": "Identifier",
               "name": "a",
@@ -510,25 +527,42 @@
           {
             "type": "SvelteDirective",
             "kind": "Binding",
-            "name": {
-              "type": "Identifier",
-              "name": "value",
+            "key": {
+              "type": "SvelteDirectiveKey",
+              "name": {
+                "type": "Identifier",
+                "name": "value",
+                "range": [
+                  107,
+                  112
+                ],
+                "loc": {
+                  "start": {
+                    "line": 7,
+                    "column": 26
+                  },
+                  "end": {
+                    "line": 7,
+                    "column": 31
+                  }
+                }
+              },
+              "modifiers": [],
               "range": [
-                107,
+                102,
                 112
               ],
               "loc": {
                 "start": {
                   "line": 7,
-                  "column": 26
+                  "column": 21
                 },
                 "end": {
                   "line": 7,
                   "column": 31
                 }
               }
             },
-            "modifiers": [],
             "expression": {
               "type": "Identifier",
               "name": "b",