Change AST (#59)

Author: ota-meshi

src/ast.ts

@@ -199,6 +199,7 @@ export interface SvelteName extends BaseNode {
         | SvelteStyleElement
         | SvelteAttribute
         | SvelteMemberExpressionName
+        | SvelteDirectiveKey
 }
 
 /** Nodes that may be used in component names. The component names separated by dots. */
@@ -414,7 +415,7 @@ export type SvelteDirective =
     | SvelteTransitionDirective
 export interface SvelteDirectiveKey extends BaseNode {
     type: "SvelteDirectiveKey"
-    name: ESTree.Identifier
+    name: ESTree.Identifier | SvelteName
     modifiers: string[]
     parent: SvelteDirective
 }

src/context/let-directive-collection.ts

@@ -1,11 +1,11 @@
-import type { SvelteLetDirective, SvelteNode } from "../ast"
+import type { SvelteLetDirective, SvelteName, SvelteNode } from "../ast"
 import type * as ESTree from "estree"
 import type { ScriptLetCallback, ScriptLetCallbackOption } from "./script-let"
 
 /** A class that collects pattern nodes for Let directives. */
 export class LetDirectiveCollection {
     private readonly list: {
-        pattern: ESTree.Pattern
+        pattern: ESTree.Pattern | SvelteName
         directive: SvelteLetDirective
         typing: string
         callbacks: ScriptLetCallback<ESTree.Pattern>[]
@@ -15,7 +15,7 @@ export class LetDirectiveCollection {
         return this.list.length === 0
     }
 
-    public getLetParams(): ESTree.Pattern[] {
+    public getLetParams(): (ESTree.Pattern | SvelteName)[] {
         return this.list.map((d) => d.pattern)
     }
 
@@ -43,7 +43,7 @@ export class LetDirectiveCollection {
     }
 
     public addPattern(
-        pattern: ESTree.Pattern,
+        pattern: ESTree.Pattern | SvelteName,
         directive: SvelteLetDirective,
         typing: string,
         ...callbacks: ScriptLetCallback<ESTree.Pattern>[]

src/context/script-let.ts

@@ -6,6 +6,7 @@ import type {
     Locations,
     SvelteEachBlock,
     SvelteIfBlock,
+    SvelteName,
     SvelteNode,
     Token,
 } from "../ast"
@@ -50,6 +51,11 @@ function getNodeRange(
               end: number
               leadingComments?: Comment[]
               trailingComments?: Comment[]
+          }
+        | {
+              range: [number, number]
+              leadingComments?: Comment[]
+              trailingComments?: Comment[]
           },
 ): [number, number] {
     let start = null
@@ -98,7 +104,7 @@ export class ScriptLetContext {
     }
 
     public addExpression<E extends ESTree.Expression>(
-        expression: E,
+        expression: E | SvelteName,
         parent: SvelteNode,
         typing?: string | null,
         ...callbacks: ScriptLetCallback<E>[]
@@ -300,7 +306,7 @@ export class ScriptLetContext {
 
     public nestBlock(
         block: SvelteNode,
-        params: ESTree.Pattern[],
+        params: (ESTree.Pattern | SvelteName)[],
         parents: SvelteNode[],
         callback: (
             nodes: ESTree.Pattern[],
@@ -311,7 +317,7 @@ export class ScriptLetContext {
 
     public nestBlock(
         block: SvelteNode,
-        params?: ESTree.Pattern[],
+        params?: (ESTree.Pattern | SvelteName)[],
         parents?: SvelteNode[],
         callback?: (
             nodes: ESTree.Pattern[],

src/parser/converts/attr.ts

@@ -11,6 +11,7 @@ import type {
     SvelteSpreadAttribute,
     SvelteTransitionDirective,
     SvelteStartTag,
+    SvelteName,
 } from "../../ast"
 import type ESTree from "estree"
 import type { Context } from "../../context"
@@ -399,9 +400,12 @@ function processDirective<
     node: D & { expression: null | E },
     directive: S,
     ctx: Context,
-    processExpression: (expression: E) => ScriptLetCallback<NonNullable<E>>[],
+    processExpression: (
+        expression: E,
+        shorthand: boolean,
+    ) => ScriptLetCallback<NonNullable<E>>[],
     processName?: (
-        expression: ESTree.Identifier,
+        expression: SvelteName,
     ) => ScriptLetCallback<ESTree.Identifier>[],
 ) {
     const colonIndex = ctx.code.indexOf(":", directive.range[0])
@@ -444,15 +448,22 @@ function processDirective<
         keyEndIndex = nextEnd
     }
 
-    let isShorthand = false
+    let isShorthandExpression = false
 
     if (node.expression) {
-        isShorthand =
+        isShorthandExpression =
             node.expression.type === "Identifier" &&
             node.expression.name === node.name &&
-            getWithLoc(node.expression).start === nameRange.start &&
-            getWithLoc(node.expression).end === nameRange.end
-        processExpression(node.expression).push((es) => {
+            getWithLoc(node.expression).start === nameRange.start
+        if (
+            isShorthandExpression &&
+            getWithLoc(node.expression).end !== nameRange.end
+        ) {
+            // The identifier location may be incorrect in some edge cases.
+            // e.g. bind:value=""
+            getWithLoc(node.expression).end = nameRange.end
+        }
+        processExpression(node.expression, isShorthandExpression).push((es) => {
             directive.expression = es
         })
     }
@@ -467,12 +478,12 @@ function processDirective<
 
     // put name
     key.name = {
-        type: "Identifier",
+        type: "SvelteName",
         name: node.name,
         parent: key,
         ...ctx.getConvertLocation(nameRange),
     }
-    if (!isShorthand) {
+    if (!isShorthandExpression) {
         if (processName) {
             processName(key.name).push((es) => {
                 key.name = es

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

@@ -326,7 +326,7 @@
             "key": {
               "type": "SvelteDirectiveKey",
               "name": {
-                "type": "Identifier",
+                "type": "SvelteName",
                 "name": "value",
                 "range": [
                   70,
@@ -530,7 +530,7 @@
             "key": {
               "type": "SvelteDirectiveKey",
               "name": {
-                "type": "Identifier",
+                "type": "SvelteName",
                 "name": "value",
                 "range": [
                   107,

tests/fixtures/parser/ast/class-directive01-output.json

@@ -270,7 +270,7 @@
             "key": {
               "type": "SvelteDirectiveKey",
               "name": {
-                "type": "Identifier",
+                "type": "SvelteName",
                 "name": "bar",
                 "range": [
                   66,
@@ -434,7 +434,7 @@
             "key": {
               "type": "SvelteDirectiveKey",
               "name": {
-                "type": "Identifier",
+                "type": "SvelteName",
                 "name": "foo",
                 "range": [
                   94,

tests/fixtures/parser/ast/docs/component-format/01-script/03-$-marks-a-statement-as-reactive/02-output.json

@@ -616,7 +616,7 @@
             "key": {
               "type": "SvelteDirectiveKey",
               "name": {
-                "type": "Identifier",
+                "type": "SvelteName",
                 "name": "click",
                 "range": [
                   154,
@@ -840,7 +840,7 @@
             "key": {
               "type": "SvelteDirectiveKey",
               "name": {
-                "type": "Identifier",
+                "type": "SvelteName",
                 "name": "click",
                 "range": [
                   208,

tests/fixtures/parser/ast/docs/template-syntax/04-comments/02-output.json

@@ -67,7 +67,7 @@
             "key": {
               "type": "SvelteDirectiveKey",
               "name": {
-                "type": "Identifier",
+                "type": "SvelteName",
                 "name": "value",
                 "range": [
                   50,

tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/01-on-eventname/01-output.json

@@ -31,7 +31,7 @@
             "key": {
               "type": "SvelteDirectiveKey",
               "name": {
-                "type": "Identifier",
+                "type": "SvelteName",
                 "name": "eventname",
                 "range": [
                   8,
@@ -179,7 +179,7 @@
             "key": {
               "type": "SvelteDirectiveKey",
               "name": {
-                "type": "Identifier",
+                "type": "SvelteName",
                 "name": "eventname",
                 "range": [
                   39,

tests/fixtures/parser/ast/docs/template-syntax/11-element-directives/01-on-eventname/02-output.json

@@ -345,7 +345,7 @@
             "key": {
               "type": "SvelteDirectiveKey",
               "name": {
-                "type": "Identifier",
+                "type": "SvelteName",
                 "name": "click",
                 "range": [
                   96,