# AST for Svelte

All AST nodes generated by the parser follow the [ESLint AST specifications].  
The AST node in the script part is an AST generated by `espree` or the specified parser.

See [ESTree] for the AST node of the script generated by `espree`.

[eslint ast specifications]: https://eslint.org/docs/developer-guide/working-with-custom-parsers#the-ast-specification
[estree]: https://github.com/estree/estree
[identifier]: https://github.com/estree/estree/blob/master/es5.md#identifier
[memberexpression]: https://github.com/estree/estree/blob/master/es5.md#memberexpression
[literal]: https://github.com/estree/estree/blob/master/es5.md#literal
[expression]: https://github.com/estree/estree/blob/master/es5.md#expressions
[statement]: https://github.com/estree/estree/blob/master/es5.md#statements
[variabledeclarator]: https://github.com/estree/estree/blob/master/es5.md#variabledeclarator
[pattern]: https://github.com/estree/estree/blob/master/es5.md#patterns

See details: [../src/ast/\*](../src/ast/)

## Common

### Node

All nodes defined here inherit the `Node` specification. See [ESLint AST specifications] for detail.

```ts
interface Node {
  type: string;
  loc: SourceLocation;
  range: [number, number];
}
```

## Root

### SvelteProgram

This is the root node of the AST.

```ts
interface SvelteProgram extends Node {
  type: "Program";
  body: (SvelteScriptElement | SvelteStyleElement | Child)[];
  sourceType: "script" | "module";
  comments: Comment[];
  tokens: Token[];
}
```

## Common Nodes

### SvelteName

This is the name node.  
Similar to [Identifier], but the string given to name can be special.

```ts
interface SvelteName extends Node {
  type: "SvelteName";
  name: string;
}
```

## Root Elements

### SvelteScriptElement

This is the `<script>` node.

```ts
interface SvelteScriptElement extends Node {
  type: "SvelteScriptElement";
  name: SvelteName;
  startTag: SvelteStartTag;
  body: Statement[];
  endTag: SvelteEndTag | null;
}
```

[Statement] is a node defined in ESTree.

### SvelteStyleElement

This is the `<style>` node.

```ts
interface SvelteStyleElement extends Node {
  type: "SvelteStyleElement";
  name: SvelteName;
  startTag: SvelteStartTag;
  children: [SvelteText];
  endTag: SvelteEndTag | null;
}
```

## Elements

The child node is defined as follows. Each node will be described later.

```ts
type Child =
  | SvelteElement
  | SvelteText
  | SvelteMustacheTag
  | SvelteDebugTag
  | SvelteConstTag
  | SvelteRenderTag
  | SvelteIfBlock
  | SvelteEachBlock
  | SvelteAwaitBlock
  | SvelteKeyBlock
  | SvelteSnippetBlock
  | SvelteHTMLComment;
```

### SvelteElement

This is the element node.

HTML elements have `kind: "html"`.

```ts
interface SvelteHTMLElement extends Node {
  type: "SvelteElement";
  kind: "html";
  name: SvelteName;
  startTag: SvelteStartTag;
  children: Child[];
  endTag: SvelteEndTag | null;
}
```

Component elements have `kind: "component"`.

```ts
interface SvelteComponentElement extends Node {
  type: "SvelteElement";
  kind: "component";
  name: Identifier | SvelteMemberExpressionName;
  startTag: SvelteStartTag;
  children: Child[];
  endTag: SvelteEndTag | null;
}
```

[Identifier] is a node defined in ESTree.

Special elements of Svelte have `kind: "special"`.

```ts
interface SvelteSpecialElement extends Node {
  type: "SvelteElement";
  kind: "special";
  name: SvelteName;
  startTag: SvelteStartTag;
  children: Child[];
  endTag: SvelteEndTag | null;
}
```

### SvelteStartTag

This is the start tag node.

```ts
interface SvelteStartTag extends Node {
  type: "SvelteStartTag";
  attributes: (
    | SvelteAttribute
    | SvelteShorthandAttribute
    | SvelteSpreadAttribute
    | SvelteDirective
    | SvelteStyleDirective
    | SvelteSpecialDirective
    | SvelteGenericsDirective
  )[];
  selfClosing: boolean;
}
```

### SvelteEndTag

This is the end tag node.

```ts
interface SvelteEndTag extends Node {
  type: "SvelteEndTag";
}
```

### SvelteMemberExpressionName

This is the member expression node for svelte template.  
Similar to [MemberExpression], but it has a SvelteName.
Currently only used with SvelteComponentElement.

```ts
interface SvelteMemberExpressionName extends Node {
  type: "SvelteMemberExpressionName";
  object: SvelteMemberExpressionName | Identifier;
  property: SvelteName;
}
```

## Attributes

### SvelteAttribute

This is the HTML attribute node.

```ts
interface SvelteAttribute extends Node {
  type: "SvelteAttribute";
  key: SvelteName;
  boolean: boolean;
  value: (SvelteLiteral | SvelteMustacheTagText)[];
}
```

### SvelteShorthandAttribute

This is the shorthand attribute node. e.g. `{key}`

```ts
interface SvelteShorthandAttribute extends Node {
  type: "SvelteShorthandAttribute";
  key: Identifier;
  value: Identifier;
}
```

[Identifier] is a node defined in ESTree.

### SvelteSpreadAttribute

This is the spread attribute node. e.g. `{...argument}`

```ts
interface SvelteSpreadAttribute extends Node {
  type: "SvelteSpreadAttribute";
  argument: Expression;
}
```

[Expression] is a node defined in ESTree.

## Directives

### SvelteDirective

This is the directive node.

```ts
type SvelteDirective =
  | SvelteActionDirective
  | SvelteAnimationDirective
  | SvelteBindingDirective
  | SvelteClassDirective
  | SvelteEventHandlerDirective
  | SvelteLetDirective
  | SvelteRefDirective
  | SvelteTransitionDirective;

interface SvelteActionDirective extends Node {
  type: "SvelteDirective";
  kind: "Action";
  key: SvelteDirectiveKey;
  expression: null | Expression;
}
interface SvelteAnimationDirective extends Node {
  type: "SvelteDirective";
  kind: "Animation";
  key: SvelteDirectiveKey;
  expression: null | Expression;
}
interface SvelteBindingDirective extends Node {
  type: "SvelteDirective";
  kind: "Binding";
  key: SvelteDirectiveKey;
  shorthand: boolean;
  expression: null | Expression | SvelteFunctionBindingsExpression;
}
interface SvelteClassDirective extends Node {
  type: "SvelteDirective";
  kind: "Class";
  key: SvelteDirectiveKey;
  shorthand: boolean;
  expression: null | Expression;
}
interface SvelteEventHandlerDirective extends Node {
  type: "SvelteDirective";
  kind: "EventHandler";
  key: SvelteDirectiveKey;
  expression: null | Expression;
}
interface SvelteLetDirective extends Node {
  type: "SvelteDirective";
  kind: "Let";
  key: SvelteDirectiveKey;
  expression: null | Pattern;
}
interface SvelteRefDirective extends Node {
  type: "SvelteDirective";
  kind: "Ref";
  key: SvelteDirectiveKey;
  expression: null | Expression;
}
interface SvelteTransitionDirective extends Node {
  type: "SvelteDirective";
  kind: "Transition";
  key: SvelteDirectiveKey;
  intro: boolean;
  outro: boolean;
  expression: null | Expression;
}
```

### SvelteStyleDirective

This is the style directive node.

```ts
interface SvelteStyleDirective extends Node {
  type: "SvelteStyleDirective";
  key: SvelteDirectiveKey;
  shorthand: boolean;
  value: (SvelteLiteral | SvelteMustacheTagText)[];
}
```

### SvelteSpecialDirective

This is the special directive node. e.g. `this={expression}`

```ts
interface SvelteStyleDirective extends Node {
  type: "SvelteSpecialDirective";
  kind: "this"; // now only `this` can be used
  key: SvelteSpecialDirectiveKey;
  expression: Expression;
}
```

### SvelteDirectiveKey

This is the directive key node.

```ts
interface SvelteDirectiveKey extends Node {
  type: "SvelteDirectiveKey";
  name: Identifier | SvelteName;
  modifiers: string[];
}
```

### SvelteSpecialDirectiveKey

This is the directive key node.

```ts
interface SvelteSpecialDirectiveKey extends Node {
  type: "SvelteSpecialDirectiveKey";
}
```

### SvelteGenericsDirective

This is the generics directive node.

```ts
interface SvelteGenericsDirective extends BaseNode {
  type: "SvelteGenericsDirective";
  key: SvelteName & { name: "generics" };
  params: TSESTree.TSTypeParameter[];
  parent: SvelteStartTag & { parent: SvelteScriptElement };
}
```

## Texts and Literals

### SvelteText

This is the HTML text node.

```ts
interface SvelteText extends Node {
  type: "SvelteText";
  value: string;
}
```

### SvelteLiteral

This is the literal node for svelte template.  
Similar to [Literal], but it has no quotes.

```ts
interface SvelteLiteral extends Node {
  type: "SvelteLiteral";
  value: string;
}
```

## Mustaches

### SvelteMustacheTag

This is the `{expression}` tag and `{@html expression}` tag node.

```ts
interface SvelteMustacheTag extends Node {
  type: "SvelteMustacheTag";
  kind: "text" | "raw";
  expression: Expression;
}
```

### SvelteDebugTag

This is the `{@debug}` tag node.

```ts
interface SvelteDebugTag extends Node {
  type: "SvelteDebugTag";
  identifiers: Identifier[];
}
```

### SvelteConstTag

This is the `{@const}` tag node.

```ts
interface SvelteConstTag extends Node {
  type: "SvelteConstTag";
  declaration: VariableDeclarator;
}
```

[VariableDeclarator] is a node defined in ESTree.

### SvelteRenderTag

This is the `{@render}` tag node.

```ts
interface SvelteRenderTag extends Node {
  type: "SvelteRenderTag";
  callee: Identifier;
  arguments: (Expression | SpreadElement)[];
}
```

### SvelteIfBlock

This is the `{#if}` tag node. `{:else if}` is also included in this node.

```ts
interface SvelteIfBlock extends Node {
  type: "SvelteIfBlock";
  elseif: boolean; // If true, in `{:else if}`
  expression: ESTree.Expression;
  children: Child[];
  else: SvelteElseBlock | null;
}
```

### SvelteElseBlock

This is the `{:else}` tag node. `{:else if}` is also included in this node.

```ts
interface SvelteElseBlock extends Node {
  type: "SvelteElseBlock";
  elseif: boolean; // If true, it is `{:else if}`
  children: (Child | SvelteIfBlock)[];
}
```

If `elseif=true`, only one SvelteIfBlock with `elseif=true` will be included in `children`.

### SvelteEachBlock

This is the `{#each}` tag node.

```ts
interface SvelteEachBlock extends Node {
  type: "SvelteEachBlock";
  expression: Expression;
  context: Pattern;
  index: Identifier | null;
  key: Expression | null;
  children: Child[];
  else: SvelteElseBlock | null;
}
```

[Pattern] is a node defined in ESTree.

### SvelteAwaitBlock

This is the `{#await}` tag node.

```ts
interface SvelteAwaitBlock extends Node {
  type: "SvelteAwaitBlock";
  expression: Expression;
  kind: "await" | "await-then" | "await-catch";
  pending: SvelteAwaitPendingBlock | null;
  then: SvelteAwaitThenBlock | null;
  catch: SvelteAwaitCatchBlock | null;
}
```

### SvelteAwaitPendingBlock

This is the await pending block node of `{#await}`.

```ts
interface SvelteAwaitPendingBlock extends Node {
  type: "SvelteAwaitPendingBlock";
  children: Child[];
}
```

### SvelteAwaitThenBlock

This is the await then block node of `{#await}`. e.g. `{:then}`, `{#await expression then value}`

```ts
interface SvelteAwaitThenBlock extends Node {
  type: "SvelteAwaitThenBlock";
  awaitThen: boolean;
  value: Pattern | null;
  children: Child[];
}
```

### SvelteAwaitCatchBlock

This is the await catch block node of `{#await}`. e.g. `{:catch}`, `{#await expression catch error }`

```ts
interface SvelteAwaitCatchBlock extends Node {
  type: "SvelteAwaitCatchBlock";
  awaitCatch: boolean;
  error: Pattern | null;
  children: Child[];
}
```

### SvelteKeyBlock

This is the `{#key}` tag node.

```ts
interface SvelteKeyBlock extends Node {
  type: "SvelteKeyBlock";
  expression: Expression;
  children: Child[];
}
```

### SvelteSnippetBlock

This is the `{#snippet}` tag node.

```ts
interface SvelteSnippetBlock extends Node {
  type: "SvelteSnippetBlock";
  id: Identifier;
  params: Pattern[];
  children: Child[];
}
```

## Comments

### SvelteHTMLComment

This is the HTML comment node.

```ts
interface SvelteHTMLComment extends Node {
  type: "SvelteHTMLComment";
  value: string;
}
```

## Script Nodes

### SvelteReactiveStatement

This node is a reactive statement labeled with `$`.  
`SvelteReactiveStatement` is a special node to avoid confusing ESLint check rules with `LabeledStatement`.

```ts
interface SvelteReactiveStatement extends Node {
  type: "SvelteReactiveStatement";
  label: Identifier & { name: "$" };
  body: Statement;
}
```

### SvelteFunctionBindingsExpression

This node is a function bindings expression in `bind:name={get, set}`.\
`SvelteFunctionBindingsExpression` is a special node to avoid confusing ESLint check rules with `SequenceExpression`.

```ts
interface SvelteFunctionBindingsExpression extends Node {
  type: "SvelteFunctionBindingsExpression";
  expressions: [
    /** Getter */
    Expression,
    /** Setter */
    Expression,
  ];
}
```