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.

See details: ../src/ast/*

Common

Node

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

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

Root

SvelteProgram

This is the root node of the AST.

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.

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

Root Elements

SvelteScriptElement

This is the <script> node.

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.

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.

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".

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

Component elements have kind: "component".

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".

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

SvelteStartTag

This is the start tag node.

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

SvelteEndTag

This is the end tag node.

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.

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

Attributes

SvelteAttribute

This is the HTML attribute node.

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

SvelteShorthandAttribute

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

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}

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

Expression is a node defined in ESTree.

Directives

SvelteDirective

This is the directive node.

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.

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

SvelteSpecialDirective

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

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.

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

SvelteSpecialDirectiveKey

This is the directive key node.

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

SvelteGenericsDirective

This is the generics directive node.

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.

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.

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

Mustaches

SvelteMustacheTag

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

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

SvelteDebugTag

This is the {@debug} tag node.

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

SvelteConstTag

This is the {@const} tag node.

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

VariableDeclarator is a node defined in ESTree.

SvelteRenderTag

This is the {@render} tag node.

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

SvelteAttachTag

This is {@attach} tag node.

export interface SvelteAttachTag extends BaseNode {
  type: "SvelteAttachTag";
  expression: ESTree.Expression;
  parent: SvelteStartTag;
}

SvelteIfBlock

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

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.

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.

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.

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}.

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}

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 }

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

SvelteKeyBlock

This is the {#key} tag node.

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

SvelteSnippetBlock

This is the {#snippet} tag node.

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

Comments

SvelteHTMLComment

This is the HTML comment node.

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.

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.

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