fix(svelte/indent): ensure proper snippet indent (#864)

Fix `svelte/indent` rule for `SvelteSnippetBlock`, by ensuring that the children and closing tags are properly indented. Closes #863. --------- Co-authored-by: Yosuke Ota <[email protected]>
sveltejs · Sep 27, 2024 · 580e48a · 580e48a
1 parent c840776
commit 580e48a
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 11 deletions.
diff --git a/.changeset/nervous-rings-applaud.md b/.changeset/nervous-rings-applaud.md
@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": patch
+---
+
+fix(svelte/indent): ensure proper snippet indent
diff --git a/packages/eslint-plugin-svelte/src/rules/indent-helpers/svelte.ts b/packages/eslint-plugin-svelte/src/rules/indent-helpers/svelte.ts
@@ -457,15 +457,12 @@ export function defineVisitor(context: IndentContext): NodeListener {
 				offsets.setOffsetToken(token, 1, openToken);
 			}
 
-			const [openCloseTagToken, endAwaitToken, closeCloseTagToken] = sourceCode.getLastTokens(
-				node,
-				{
-					count: 3,
-					includeComments: false
-				}
-			);
+			const [openCloseTagToken, endKeyToken, closeCloseTagToken] = sourceCode.getLastTokens(node, {
+				count: 3,
+				includeComments: false
+			});
 			offsets.setOffsetToken(openCloseTagToken, 0, openToken);
-			offsets.setOffsetToken(endAwaitToken, 1, openCloseTagToken);
+			offsets.setOffsetToken(endKeyToken, 1, openCloseTagToken);
 			offsets.setOffsetToken(closeCloseTagToken, 0, openCloseTagToken);
 		},
 		SvelteSnippetBlock(node: AST.SvelteSnippetBlock) {
@@ -474,8 +471,8 @@ export function defineVisitor(context: IndentContext): NodeListener {
 				includeComments: false
 			});
 			offsets.setOffsetToken(snippetToken, 1, openToken);
-			const id = getFirstAndLastTokens(sourceCode, node.id);
-			offsets.setOffsetToken(id.firstToken, 1, snippetToken);
+			const snippetName = sourceCode.getTokenAfter(snippetToken)!;
+			offsets.setOffsetToken(snippetName, 1, snippetToken);
 
 			const leftParenToken = sourceCode.getTokenBefore(
 				node.params[0] || sourceCode.getLastToken(node),
@@ -492,8 +489,27 @@ export function defineVisitor(context: IndentContext): NodeListener {
 					includeComments: false
 				}
 			)!;
-			offsets.setOffsetToken(leftParenToken, 1, id.firstToken);
+			offsets.setOffsetToken(leftParenToken, 1, snippetName);
 			offsets.setOffsetElementList(node.params, leftParenToken, rightParenToken, 1);
+
+			const closeOpenTagToken = sourceCode.getTokenAfter(rightParenToken)!;
+			offsets.setOffsetToken(closeOpenTagToken, 0, openToken);
+
+			for (const child of node.children) {
+				const token = sourceCode.getFirstToken(child, {
+					includeComments: false,
+					filter: isNotWhitespace
+				});
+				offsets.setOffsetToken(token, 1, openToken);
+			}
+
+			const [openCloseTagToken, endSnippetToken, closeCloseTagToken] = sourceCode.getLastTokens(
+				node,
+				{ count: 3, includeComments: false }
+			);
+			offsets.setOffsetToken(openCloseTagToken, 0, openToken);
+			offsets.setOffsetToken(endSnippetToken, 1, openCloseTagToken);
+			offsets.setOffsetToken(closeCloseTagToken, 0, openCloseTagToken);
 		},
 		// ----------------------------------------------------------------------
 		// COMMENTS

diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/indent/invalid/snippets01-errors.yaml b/packages/eslint-plugin-svelte/tests/fixtures/rules/indent/invalid/snippets01-errors.yaml
@@ -38,3 +38,63 @@
   line: 15
   column: 1
   suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 18
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 19
+  column: 1
+  suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 20
+  column: 1
+  suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 22
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 2 spaces.
+  line: 23
+  column: 1
+  suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 24
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 25
+  column: 1
+  suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 26
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 27
+  column: 1
+  suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 28
+  column: 1
+  suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 31
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 32
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 34
+  column: 1
+  suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 36
+  column: 1
+  suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 38
+  column: 1
+  suggestions: null
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/indent/invalid/snippets01-input.svelte b/packages/eslint-plugin-svelte/tests/fixtures/rules/indent/invalid/snippets01-input.svelte
@@ -14,3 +14,26 @@ a
 }
 )
 }
+<div>
+{#snippet example()}
+<div></div>
+{/snippet}
+
+{
+  #snippet example_2()
+}
+<div></div>
+{
+/snippet
+}
+</div>
+{
+#snippet example_3
+(
+
+)
+}
+<div></div>
+{
+/snippet
+}
diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/indent/invalid/snippets01-output.svelte b/packages/eslint-plugin-svelte/tests/fixtures/rules/indent/invalid/snippets01-output.svelte
@@ -14,3 +14,26 @@
     }
   )
 }
+<div>
+  {#snippet example()}
+    <div></div>
+  {/snippet}
+
+  {
+    #snippet example_2()
+  }
+    <div></div>
+  {
+    /snippet
+  }
+</div>
+{
+  #snippet example_3
+    (
+
+    )
+}
+  <div></div>
+{
+  /snippet
+}