### Start Svelte Development Server

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/explorer-v2/README.md

Starts the Svelte development server after installing project dependencies. The `-- --open` flag can be used to automatically open the application in a new browser tab.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Build Svelte Project for Production

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/explorer-v2/README.md

Builds a production-ready version of the Svelte application. It's recommended to install an adapter for your target environment before building. The built app can be previewed using `npm run preview`.

```bash
npm run build
```

--------------------------------

### Install svelte-eslint-parser

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/README.md

Installs the svelte-eslint-parser along with ESLint as a development dependency using npm.

```bash
npm install --save-dev eslint svelte-eslint-parser
```

--------------------------------

### Create a New Svelte Project

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/explorer-v2/README.md

Initializes a new Svelte project in the current directory or a specified directory using npm. The `@next` tag is currently used for the latest version.

```bash
npm init svelte@next

# create a new project in my-app
npm init svelte@next my-app
```

--------------------------------

### Configure Svelte Features Parsing (e.g., Runes)

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/README.md

This example demonstrates how to configure Svelte-specific features, such as the 'runes' feature for Svelte 5, via `parserOptions.svelteFeatures`. The default for runes is true, and the parser can also attempt to read this from your svelte.config.js.

```javascript
export default [
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        svelteFeatures: {
          // This is for Svelte 5. The default is true.
          // If false, ESLint won't recognize rune symbols.
          // If not specified, the parser tries to read compilerOptions.runes from `svelte.config.js`.
          // If `parserOptions.svelteConfig` is not given and static analysis fails, it defaults to true.
          runes: true,
        },
      },
    },
  },
];
```

--------------------------------

### Configure ESLint for Svelte Files

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/README.md

Configures ESLint to use svelte-eslint-parser for parsing Svelte files. This setup includes recommended ESLint configurations and specifies the parser for various Svelte file extensions.

```javascript
import js from "@eslint/js";
import svelteParser from "svelte-eslint-parser";

export default [
  js.configs.recommended,
  {
    files: [
      "**/*.svelte",
      "*.svelte",
      // Need to specify the file extension for Svelte 5 with rune symbols
      "**/*.svelte.js",
      "*.svelte.js",
      "**/*.svelte.ts",
      "*.svelte.ts",
    ],
    languageOptions: {
      parser: svelteParser,
    },
  },
];
```

--------------------------------

### Configure Multiple Parsers for Different File Types

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/README.md

This configuration allows you to specify different parsers for different file types within your ESLint setup. It demonstrates how to import and assign parsers like '@typescript-eslint/parser' and 'espree' for JavaScript, TypeScript, and Svelte files.

```javascript
import tsParser from "@typescript-eslint/parser";
import espree from "espree";

export default [
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        parser: {
          ts: tsParser,
          js: espree,
          typescript: tsParser,
        },
      },
    },
  },
];
```

--------------------------------

### Define SvelteStyleElement Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for a <style> element in Svelte. It includes the style's name, start tag, children (as SvelteText), and end tag.

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

--------------------------------

### Svelte Component with Reactive Statements

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/internal-mechanism.md

Presents a Svelte component that utilizes reactive declarations ($:) to update variables based on changes in exported properties. It includes examples of simple reactive logging, assigning reactive values, and destructuring within reactive statements.

```svelte
<script lang="ts">
  export let foo: { bar: number } | null = null;

  $: console.log(foo && foo.bar);

  $: r = foo && foo.bar;

  $: ({ bar: n } = foo || { bar: 42 });
</script>

{foo && foo.bar}
```

--------------------------------

### Define SvelteStartTag Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for the start tag of Svelte elements. It includes an array of attributes and a boolean indicating if the tag is self-closing.

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

--------------------------------

### Define SvelteScriptElement Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for a <script> element in Svelte. It includes the script's name, start tag, body (as ESTree Statements), and end tag.

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

--------------------------------

### Define SvelteHTMLElement Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for standard HTML elements within Svelte templates. It specifies 'kind: "html"' and includes the element's name, start tag, children, and end tag.

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

--------------------------------

### Define SvelteSpecialElement Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for special Svelte elements. It specifies 'kind: "special"' and includes the element's name, start tag, children, and end tag.

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

--------------------------------

### SvelteFunctionBindingsExpression Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for Svelte's function binding expressions, used in constructs like `bind:name={get, set}`. It avoids confusion with ESTree's SequenceExpression by representing the getter and setter functions.

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

--------------------------------

### ESLint CLI Usage

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/README.md

Demonstrates how to use the ESLint command-line interface (CLI) to lint JavaScript and Svelte files within the 'src' directory.

```bash
eslint "src/**/*.{js,svelte}"
```

--------------------------------

### Configure ESLint Parser Options

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/README.md

Shows how to configure advanced parser options for svelte-eslint-parser, including sourceType, ecmaVersion, and ecmaFeatures, mirroring espree's capabilities.

```javascript
import svelteParser from "svelte-eslint-parser";

export default [
  // ...
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        sourceType: "module",
        ecmaVersion: 2024,
        ecmaFeatures: {
          globalReturn: false,
          impliedStrict: false,
          jsx: false,
        },
      },
    },
  },
];
```

--------------------------------

### VisitorKeys for Custom AST Traversal

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/internal-mechanism.md

For custom ASTs, ESLint requires a `visitorKeys` property to correctly traverse the nodes. The svelte-eslint-parser provides this to enable ESLint to navigate the generated Svelte AST.

```javascript
const result = {
  ast: {
    type: 'Program',
    // ... other AST properties
  },
  visitorKeys: {
    Program: ['body', 'tokens', 'comments'],
    // ... other node types and their keys
  }
};

```

--------------------------------

### Specify svelte.config.js in ESLint Configuration

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/README.md

This snippet shows how to explicitly provide your svelte.config.js file path within the ESLint configuration using `parserOptions.svelteConfig`. If not provided, the parser attempts to read the config statically.

```javascript
import svelteConfig from "./svelte.config.js";

export default [
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        svelteConfig,
      },
    },
  },
];
```

--------------------------------

### Configure TypeScript in Svelte Script Tags

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/README.md

Provides a detailed configuration for using TypeScript within the script tags of Svelte files with svelte-eslint-parser, including setting the parser to '@typescript-eslint/parser' and configuring project-specific options.

```javascript
import tsParser from "@typescript-eslint/parser";

export default [
  // Other config for non-Svelte files
  {
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: "path/to/your/tsconfig.json",
        extraFileExtensions: [".svelte"],
      },
    },
  },
  // Svelte config
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      // Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
      parserOptions: {
        parser: tsParser,
      },
    },
  },
];
```

--------------------------------

### Parse Svelte File for ESLint

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/internal-mechanism.md

The svelte-eslint-parser's main function is to parse *.svelte files into an AST that ESLint can understand. It uses the parseForESLint() method as required for custom ESLint parsers.

```javascript
import svelteESLintParser from 'svelte-eslint-parser';

const result = svelteESLintParser.parseForESLint(svelteCode, options);
// result contains ast, services, and scopeManager
```

--------------------------------

### Configure VS Code ESLint Validation for Svelte

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/README.md

This JSON configuration snippet shows how to enable ESLint validation for `.svelte` files within Visual Studio Code. It adds 'svelte' to the `eslint.validate` array in the VS Code settings.

```json
{
  "eslint.validate": ["javascript", "javascriptreact", "svelte"]
}
```

--------------------------------

### Virtual Script for Scope Analysis with {#each} and {@const}

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/internal-mechanism.md

The parser creates virtual scripts to correctly handle scoping for Svelte constructs like `{#each}` and `{@const}`. This ensures that variables declared within these blocks have the expected block scope, crucial for rules like `no-unused-vars`.

```typescript
const array = [1, 2, 3];
function $_render1() {
  Array.from(array).forEach((e) => {
    const ee = e * 2;
    ee;
  });
}
```

--------------------------------

### Handling Special Svelte Variables for Linting

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/internal-mechanism.md

The parser identifies and adds virtual references for Svelte-specific variables like `export let` and `$ref` to ensure they are correctly recognized by ESLint's scope analysis, similar to techniques used in typescript-eslint.

```javascript
// Example: A variable marked as specially used in Svelte
// The parser adds virtual references for proper scope analysis.
```

--------------------------------

### Configure Custom Parser for Svelte Script Tags

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/README.md

Illustrates how to specify a custom parser, such as '@typescript-eslint/parser', for the script tags within Svelte components using the parserOptions.parser option.

```javascript
import tsParser from "@typescript-eslint/parser";

export default [
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        parser: tsParser,
      },
    },
  },
];
```

--------------------------------

### Define SvelteProgram Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the root node for a Svelte AST, representing the entire program. It includes the body, sourceType, comments, and tokens, conforming to ESLint AST specifications.

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

--------------------------------

### SvelteAwaitBlock Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for Svelte's `{#await}` block. It captures the awaited expression, the block's kind (await, await-then, await-catch), and references to its pending, then, and catch blocks.

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

--------------------------------

### SvelteEachBlock Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for Svelte's `{#each}` block. It includes the expression being iterated over, the context pattern, optional index and key, child elements, and an optional `else` block.

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

--------------------------------

### Svelte AST Structure and Special Nodes

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/internal-mechanism.md

The parser generates an ESTree-compliant AST for script content, with special handling for Svelte's reactive statements (`$:`) using a custom `SvelteReactiveStatement` node to avoid conflicts with ESLint's `LabeledStatement`.

```javascript
// Example of a SvelteReactiveStatement node in the AST
{
  type: 'SvelteReactiveStatement',
  directive: null,
  expression: {
    type: 'Identifier',
    name: 'foo'
  }
}
```

--------------------------------

### SvelteDirective Node Definitions

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the base SvelteDirective type and its various specific kinds like Action, Animation, Binding, Class, EventHandler, Let, Ref, and Transition. Each directive includes a kind, key, and an optional expression.

```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;
}
```

--------------------------------

### SvelteKeyBlock Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for Svelte's `{#key}` block. It tracks the expression whose changes trigger a re-render of the block's children.

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

--------------------------------

### Virtual Script Code for Svelte Reactive Statements

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/internal-mechanism.md

Illustrates the virtual script code generated by svelte-eslint-parser to resolve TypeScript type inference issues in Svelte reactive statements. This virtual code wraps the reactive logic within functions to create proper scopes, ensuring accurate AST and ScopeManager.

```ts
export let foo: { bar: number } | null = null;

$: function $_reactiveStatementScopeFunction1() {
  console.log(foo && foo.bar);
}

$: let r = $_reactiveVariableScopeFunction2();
function $_reactiveVariableScopeFunction2() {
  let $_tmpVar3;
  return ($_tmpVar3 = foo && foo.bar);
}

$: let { bar: n } = $_reactiveVariableScopeFunction4();
function $_reactiveVariableScopeFunction4() {
  let $_tmpVar5;
  return ($_tmpVar5 = foo || { bar: 42 });
}
function $_render6() {
  foo && foo.bar;
}
```

--------------------------------

### SvelteAwaitPendingBlock Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for the pending state within a Svelte `{#await}` block. It holds the child nodes to be rendered while the promise is pending.

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

--------------------------------

### Define Node Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the base Node interface for all AST nodes, including type, location, and range properties, adhering to ESLint AST specifications.

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

--------------------------------

### SvelteAwaitCatchBlock Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for the 'catch' block of a Svelte `{#await}` statement. It handles cases like `{:catch}` or `{#await expression catch error }` and contains the child nodes for the rejected state.

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

--------------------------------

### SvelteSnippetBlock Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for Svelte's `{#snippet}` block, used for defining reusable template pieces. It includes the snippet's ID, parameters, and child content.

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

--------------------------------

### SvelteAwaitThenBlock Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for the 'then' block of a Svelte `{#await}` statement. It handles cases like `{:then}` or `{#await expression then value}` and contains the child nodes for the resolved state.

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

--------------------------------

### Define SvelteShorthandAttribute Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for shorthand attributes in Svelte, like `{key}`. It maps an Identifier key to an Identifier value.

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

--------------------------------

### Virtual Script Generation for Type Analysis

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/internal-mechanism.md

To ensure accurate type information, especially for event handlers in Svelte templates, the parser generates virtual TypeScript code. This code includes type definitions for event handlers, allowing tools like @typescript-eslint/parser to provide correct type inference.

```typescript
function inputHandler() {
  // process
}
function $_render1() {
  inputHandler as (
    e: "input" extends keyof HTMLElementEventMap
      ? HTMLElementEventMap["input"]
      : CustomEvent<any>,
  ) => void;
}
```

--------------------------------

### SvelteAttachTag Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for the {@attach} tag node in Svelte, used for attaching elements or properties. It includes the node type, the expression to attach, and its parent context.

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

--------------------------------

### SvelteSpreadAttribute Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for a spread attribute node in Svelte, represented as {...argument}. It includes the node type and the argument expression.

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

--------------------------------

### SvelteDirectiveKey Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for a directive key node, which represents the name and modifiers of a Svelte directive. It includes the node type, name, and an array of modifiers.

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

--------------------------------

### Define SvelteComponentElement Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for Svelte component elements. It specifies 'kind: "component"' and uses either an Identifier or SvelteMemberExpressionName for the component's name.

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

--------------------------------

### SvelteRenderTag Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for the {@render} tag node in Svelte, used for rendering components or templates. It includes the node type, the callee (component/template name), and its arguments.

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

--------------------------------

### SvelteElseBlock Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for Svelte's `{:else}` and `{:else if}` blocks. The `elseif` property indicates if it's an `else if` construct. It contains child nodes, potentially including SvelteIfBlock nodes.

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

--------------------------------

### SvelteReactiveStatement Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for Svelte's reactive statements, denoted by a leading `$`. This node helps distinguish them from standard LabeledStatements in ESLint.

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

--------------------------------

### SvelteStyleDirective Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for a style directive node in Svelte, used for inline styles. It includes the node type, key, shorthand property, and an array of value nodes.

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

--------------------------------

### SvelteSpecialDirectiveKey Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for a special directive key node. This node type is used for directives like `this`.

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

--------------------------------

### SvelteHTMLComment Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for HTML comments within Svelte templates. It stores the comment's text content.

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

--------------------------------

### Define SvelteAttribute Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for standard HTML attributes in Svelte. It includes the attribute key, a boolean indicating if it's a boolean attribute, and its value.

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

--------------------------------

### SvelteIfBlock Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for an if block in Svelte, including conditional logic and `else if` clauses. It contains the node type, a flag for `else if`, the condition expression, child nodes, and an optional else block.

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

--------------------------------

### Define SvelteName Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the SvelteName node, representing a name in Svelte templates. It extends the base Node and includes a 'name' property, similar to ESTree's Identifier but with potential special string values.

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

--------------------------------

### SvelteDebugTag Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for the {@debug} tag node in Svelte, used for debugging. It includes the node type and an array of identifiers to be debugged.

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

--------------------------------

### SvelteConstTag Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for the {@const} tag node in Svelte, used for declaring constants within the template. It includes the node type and the variable declaration.

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

--------------------------------

### SvelteMustacheTag Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for mustache tags in Svelte, used for embedding expressions like {expression} or {@html expression}. It includes the node type, kind (text or raw), and the expression.

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

--------------------------------

### SvelteText Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for an HTML text node in Svelte. It contains the node type and the text value.

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

--------------------------------

### SvelteGenericsDirective Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for a generics directive node in Svelte, used for defining generic types. It includes the node type, key, type parameters, and parent context.

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

--------------------------------

### Define SvelteEndTag Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for the end tag of Svelte elements.

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

--------------------------------

### Define SvelteMemberExpressionName Interface

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the AST node for member expressions used in Svelte component names, similar to ESTree's MemberExpression but with SvelteName for properties.

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

--------------------------------

### SvelteSpecialDirective Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for special directive nodes in Svelte, such as `this={expression}`. It includes the node type, kind, key, and the associated expression.

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

--------------------------------

### SvelteLiteral Node Definition

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines the structure for a literal node within Svelte templates. Similar to ESTree's Literal but without quotes, it holds a string value.

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

--------------------------------

### Define Child Type Alias

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/AST.md

Defines a union type 'Child' representing various possible child nodes within Svelte elements, including different block types and tags.

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

--------------------------------

### TypeScript Type Inference Issue in Svelte Reactive Statements

Source: https://github.com/sveltejs/svelte-eslint-parser/blob/main/docs/internal-mechanism.md

Demonstrates a common issue in Svelte where TypeScript's type inference incorrectly assigns a 'never' type to variables used within reactive ($:) statements. This occurs because TypeScript parses Svelte files directly, failing to account for the reactive nature and scope of these statements.

```ts
export let foo: { bar: number } | null = null;

$: console.log(foo && foo.bar);
                   // ^ never type
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.