sveltejs · baseballyama · Nov 20, 2023 · Nov 18, 2023 · Nov 18, 2023 · Nov 18, 2023
diff --git a/.changeset/grumpy-pans-guess.md b/.changeset/grumpy-pans-guess.md
@@ -0,0 +1,5 @@
+---
+"svelte-eslint-parser": minor
+---
+
+feat: add support for `{#snippet}` and `{@render}`
diff --git a/docs/AST.md b/docs/AST.md
@@ -104,10 +104,12 @@ type Child =
   | SvelteMustacheTag
   | SvelteDebugTag
   | SvelteConstTag
+  | SvelteRenderTag
   | SvelteIfBlock
   | SvelteEachBlock
   | SvelteAwaitBlock
   | SvelteKeyBlock
+  | SvelteSnippetBlock
   | SvelteHTMLComment;
 ```
 
@@ -421,6 +423,18 @@ interface SvelteConstTag extends Node {
 }
 ```
 
+### SvelteRenderTag
+
+This is the `{@render}` tag node.
+
+```ts
+interface SvelteRenderTag extends Node {
+  type: "SvelteRenderTag";
+  callee: Identifier;
+  argument: Expression | null;
+}
+```
+
 [VariableDeclarator] is a node defined in ESTree.
 
 ### SvelteIfBlock
@@ -533,6 +547,19 @@ interface SvelteKeyBlock extends Node {
 }
 ```
 
+### SvelteSnippetBlock
+
+This is the `{#snippet}` tag node.
+
+```ts
+interface SvelteSnippetBlock extends Node {
+  type: "SvelteSnippetBlock";
+  id: Identifier;
+  context: null | Pattern;
+  children: Child[];
+}
+```
+
 ## Comments
 
 ### SvelteHTMLComment

diff --git a/explorer-v2/package.json b/explorer-v2/package.json
@@ -12,26 +12,26 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@fontsource/fira-mono": "^5.0.0",
-		"@typescript-eslint/parser": "^6.0.0",
-		"eslint": "^8.0.0",
-		"eslint-scope": "^7.0.0",
+		"@fontsource/fira-mono": "^5.0.8",
+		"@typescript-eslint/parser": "^6.11.0",
+		"eslint": "^8.54.0",
+		"eslint-scope": "^7.2.2",
 		"esquery": "^1.5.0",
-		"pako": "^2.0.3",
-		"svelte": "^5.0.0-next.2",
+		"pako": "^2.1.0",
+		"svelte": "^5.0.0-next.8",
 		"svelte-eslint-parser": "link:..",
-		"tslib": "^2.5.0"
+		"tslib": "^2.6.2"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "^2.0.0",
-		"@sveltejs/kit": "^1.0.0-next.456",
-		"prettier": "^3.0.0",
-		"prettier-plugin-svelte": "^3.0.0",
-		"string-replace-loader": "^3.0.1",
-		"typescript": "^5.0.4",
+		"@sveltejs/adapter-static": "^2.0.3",
+		"@sveltejs/kit": "^1.27.6",
+		"prettier": "^3.1.0",
+		"prettier-plugin-svelte": "^3.1.0",
+		"string-replace-loader": "^3.1.0",
+		"typescript": "^5.2.2",
 		"vite": "^5.0.0",
-		"webpack": "^5.82.1",
-		"webpack-cli": "^5.0.0",
-		"wrapper-webpack-plugin": "^2.1.0"
+		"webpack": "^5.89.0",
+		"webpack-cli": "^5.1.4",
+		"wrapper-webpack-plugin": "^2.2.2"
 	}
 }
diff --git a/explorer-v2/src/app.html b/explorer-v2/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

diff --git a/explorer-v2/src/lib/MonacoEditor.svelte b/explorer-v2/src/lib/MonacoEditor.svelte
@@ -94,6 +94,7 @@
 			renderValidationDecorations: 'on',
 			renderWhitespace: 'boundary',
 			scrollBeyondLastLine: false,
+			useInlineViewWhenSpaceIsLimited: false,
 			...editorOptions
 		};
 

diff --git a/package.json b/package.json
@@ -70,11 +70,11 @@
     "@types/eslint": "^8.40.1",
     "@types/eslint-scope": "^3.7.4",
     "@types/eslint-visitor-keys": "^1.0.0",
-    "@types/estree": "^1.0.1",
+    "@types/estree": "^1.0.5",
     "@types/mocha": "^10.0.1",
     "@types/node": "^20.0.0",
     "@types/semver": "^7.5.0",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "~6.10.0",
     "@typescript-eslint/types": "~6.10.0",
     "benchmark": "^2.1.4",

diff --git a/src/ast/html.ts b/src/ast/html.ts
@@ -16,6 +16,7 @@ export type SvelteHTMLNode =
   | SvelteMustacheTag
   | SvelteDebugTag
   | SvelteConstTag
+  | SvelteRenderTag
   | SvelteIfBlock
   | SvelteElseBlock
   | SvelteEachBlock
@@ -24,6 +25,7 @@ export type SvelteHTMLNode =
   | SvelteAwaitThenBlock
   | SvelteAwaitCatchBlock
   | SvelteKeyBlock
+  | SvelteSnippetBlock
   | SvelteAttribute
   | SvelteShorthandAttribute
   | SvelteSpreadAttribute
@@ -87,7 +89,8 @@ export interface SvelteHTMLElement extends BaseSvelteElement {
     | SvelteAwaitPendingBlock
     | SvelteAwaitThenBlock
     | SvelteAwaitCatchBlock
-    | SvelteKeyBlock;
+    | SvelteKeyBlock
+    | SvelteSnippetBlock;
 }
 /** Node of Svelte component element. */
 export interface SvelteComponentElement extends BaseSvelteElement {
@@ -106,7 +109,8 @@ export interface SvelteComponentElement extends BaseSvelteElement {
     | SvelteAwaitPendingBlock
     | SvelteAwaitThenBlock
     | SvelteAwaitCatchBlock
-    | SvelteKeyBlock;
+    | SvelteKeyBlock
+    | SvelteSnippetBlock;
 }
 /** Node of Svelte special component element. e.g. `<svelte:window>` */
 export interface SvelteSpecialElement extends BaseSvelteElement {
@@ -125,7 +129,8 @@ export interface SvelteSpecialElement extends BaseSvelteElement {
     | SvelteAwaitPendingBlock
     | SvelteAwaitThenBlock
     | SvelteAwaitCatchBlock
-    | SvelteKeyBlock;
+    | SvelteKeyBlock
+    | SvelteSnippetBlock;
 }
 /** Node of start tag. */
 export interface SvelteStartTag extends BaseNode {
@@ -174,10 +179,12 @@ type Child =
   | SvelteMustacheTag
   | SvelteDebugTag
   | SvelteConstTag
+  | SvelteRenderTag
   | SvelteIfBlockAlone
   | SvelteEachBlock
   | SvelteAwaitBlock
   | SvelteKeyBlock
+  | SvelteSnippetBlock
   | SvelteHTMLComment;
 
 /** Node of text. like HTML text. */
@@ -194,7 +201,8 @@ export interface SvelteText extends BaseNode {
     | SvelteAwaitPendingBlock
     | SvelteAwaitThenBlock
     | SvelteAwaitCatchBlock
-    | SvelteKeyBlock;
+    | SvelteKeyBlock
+    | SvelteSnippetBlock;
 }
 /** Node of literal. */
 export interface SvelteLiteral extends BaseNode {
@@ -219,6 +227,7 @@ interface BaseSvelteMustacheTag extends BaseNode {
     | SvelteAwaitThenBlock
     | SvelteAwaitCatchBlock
     | SvelteKeyBlock
+    | SvelteSnippetBlock
     | SvelteAttribute
     | SvelteStyleDirective;
 }
@@ -244,6 +253,7 @@ export interface SvelteDebugTag extends BaseNode {
     | SvelteAwaitThenBlock
     | SvelteAwaitCatchBlock
     | SvelteKeyBlock
+    | SvelteSnippetBlock
     | SvelteAttribute;
 }
 /** Node of const tag. e.g. `{@const}` */
@@ -260,8 +270,26 @@ export interface SvelteConstTag extends BaseNode {
     | SvelteAwaitThenBlock
     | SvelteAwaitCatchBlock
     | SvelteKeyBlock
+    | SvelteSnippetBlock
     | SvelteAttribute;
 }
+/** Node of render tag. e.g. `{@render}` */
+export interface SvelteRenderTag extends BaseNode {
+  type: "SvelteRenderTag";
+  callee: ESTree.Identifier;
+  argument: ESTree.Expression | null;
+  parent:
+    | SvelteProgram
+    | SvelteElement
+    | SvelteIfBlock
+    | SvelteElseBlockAlone
+    | SvelteEachBlock
+    | SvelteAwaitPendingBlock
+    | SvelteAwaitThenBlock
+    | SvelteAwaitCatchBlock
+    | SvelteKeyBlock
+    | SvelteSnippetBlock;
+}
 /** Node of if block. e.g. `{#if}` */
 export type SvelteIfBlock = SvelteIfBlockAlone | SvelteIfBlockElseIf;
 interface BaseSvelteIfBlock extends BaseNode {
@@ -279,7 +307,8 @@ interface BaseSvelteIfBlock extends BaseNode {
     | SvelteAwaitPendingBlock
     | SvelteAwaitThenBlock
     | SvelteAwaitCatchBlock
-    | SvelteKeyBlock;
+    | SvelteKeyBlock
+    | SvelteSnippetBlock;
 }
 /** Node of if block. e.g. `{#if}` */
 export interface SvelteIfBlockAlone extends BaseSvelteIfBlock {
@@ -328,7 +357,8 @@ export interface SvelteEachBlock extends BaseNode {
     | SvelteAwaitPendingBlock
     | SvelteAwaitThenBlock
     | SvelteAwaitCatchBlock
-    | SvelteKeyBlock;
+    | SvelteKeyBlock
+    | SvelteSnippetBlock;
 }
 /** Node of await block. e.g. `{#await}`, `{#await ... then ... }`, `{#await ... catch ... }` */
 export type SvelteAwaitBlock =
@@ -351,7 +381,8 @@ interface BaseSvelteAwaitBlock extends BaseNode {
     | SvelteAwaitPendingBlock
     | SvelteAwaitThenBlock
     | SvelteAwaitCatchBlock
-    | SvelteKeyBlock;
+    | SvelteKeyBlock
+    | SvelteSnippetBlock;
 }
 /** Node of await block. e.g. `{#await}` */
 export interface SvelteAwaitBlockAwaitPending extends BaseSvelteAwaitBlock {
@@ -442,7 +473,26 @@ export interface SvelteKeyBlock extends BaseNode {
     | SvelteAwaitPendingBlock
     | SvelteAwaitThenBlock
     | SvelteAwaitCatchBlock
-    | SvelteKeyBlock;
+    | SvelteKeyBlock
+    | SvelteSnippetBlock;
+}
+/** Node of snippet block. e.g. `{#snippet}` */
+export interface SvelteSnippetBlock extends BaseNode {
+  type: "SvelteSnippetBlock";
+  id: ESTree.Identifier;
+  context: null | ESTree.Pattern;
+  children: Child[];
+  parent:
+    | SvelteProgram
+    | SvelteElement
+    | SvelteIfBlock
+    | SvelteElseBlockAlone
+    | SvelteEachBlock
+    | SvelteAwaitPendingBlock
+    | SvelteAwaitThenBlock
+    | SvelteAwaitCatchBlock
+    | SvelteKeyBlock
+    | SvelteSnippetBlock;
 }
 /** Node of HTML comment. */
 export interface SvelteHTMLComment extends BaseNode {
@@ -457,7 +507,8 @@ export interface SvelteHTMLComment extends BaseNode {
     | SvelteAwaitPendingBlock
     | SvelteAwaitThenBlock
     | SvelteAwaitCatchBlock
-    | SvelteKeyBlock;
+    | SvelteKeyBlock
+    | SvelteSnippetBlock;
 }
 /** Node of HTML attribute. */
 export interface SvelteAttribute extends BaseNode {

diff --git a/src/context/index.ts b/src/context/index.ts
@@ -6,6 +6,7 @@ import type {
   SvelteHTMLElement,
   SvelteName,
   SvelteScriptElement,
+  SvelteSnippetBlock,
   SvelteStyleElement,
   Token,
 } from "../ast";
@@ -142,6 +143,8 @@ export class Context {
     | SvAST.Title
   >();
 
+  public readonly snippets: SvelteSnippetBlock[] = [];
+
   // ----- States ------
   private readonly state: { isTypeScript?: boolean } = {};
 

diff --git a/src/context/script-let.ts b/src/context/script-let.ts
@@ -10,6 +10,7 @@ import type {
   SvelteIfBlock,
   SvelteName,
   SvelteNode,
+  SvelteSnippetBlock,
   Token,
 } from "../ast";
 import type { ESLintExtendedProgram } from "../parser";
@@ -148,6 +149,15 @@ export class ScriptLetContext {
     ...callbacks: ScriptLetCallback<E>[]
   ): ScriptLetCallback<E>[] {
     const range = getNodeRange(expression);
+    return this.addExpressionFromRange(range, parent, typing, ...callbacks);
+  }
+
+  public addExpressionFromRange<E extends ESTree.Expression>(
+    range: [number, number],
+    parent: SvelteNode,
+    typing?: string | null,
+    ...callbacks: ScriptLetCallback<E>[]
+  ): ScriptLetCallback<E>[] {
     const part = this.ctx.code.slice(...range);
     const isTS = typing && this.ctx.isTypeScript();
     this.appendScript(
@@ -414,6 +424,45 @@ export class ScriptLetContext {
     this.pushScope(restore, "});");
   }
 
+  public nestSnippetBlock(
+    id: ESTree.Identifier,
+    closeParentIndex: number,
+    snippetBlock: SvelteSnippetBlock,
+    callback: (id: ESTree.Identifier, ctx: ESTree.Pattern | null) => void,
+  ): void {
+    const idRange = getNodeRange(id);
+    const part = this.ctx.code.slice(idRange[0], closeParentIndex + 1);
+    const restore = this.appendScript(
+      `function ${part}{`,
+      idRange[0] - 9,
+      (st, tokens, _comments, result) => {
+        const fnDecl = st as ESTree.FunctionDeclaration;
+        const idNode = fnDecl.id;
+        const context = fnDecl.params.length > 0 ? fnDecl.params[0] : null;
+        const scope = result.getScope(fnDecl);
+
+        // Process for nodes
+        callback(idNode, context);
+        (idNode as any).parent = snippetBlock;
+        if (context) {
+          (context as any).parent = snippetBlock;
+        }
+
+        // Process for scope
+        result.registerNodeToScope(snippetBlock, scope);
+
+        tokens.shift(); // function
+        tokens.pop(); // {
+        tokens.pop(); // }
+
+        // Disconnect the tree structure.
+        fnDecl.id = null as never;
+        fnDecl.params = [];
+      },
+    );
+    this.pushScope(restore, "}");
+  }
+
   public nestBlock(
     block: SvelteNode,
     params?: