Fix false positives for html text in indent rule. (#41)

Author: ota-meshi

package.json

@@ -49,7 +49,7 @@
     "debug": "^4.3.1",
     "eslint-utils": "^3.0.0",
     "sourcemap-codec": "^1.4.8",
-    "svelte-eslint-parser": "^0.4.0"
+    "svelte-eslint-parser": "^0.4.3"
   },
   "peerDependencies": {
     "eslint": "^7.0.0",

src/rules/indent-helpers/commons.ts

@@ -75,3 +75,36 @@ export function isBeginningOfLine(
 
   return !prevToken || prevToken.loc.end.line < node.loc!.start.line
 }
+
+/**
+ * Check whether the given node is the beginning of element.
+ */
+export function isBeginningOfElement(node: AST.SvelteText): boolean {
+  if (
+    node.parent.type === "SvelteElement" ||
+    node.parent.type === "SvelteAwaitCatchBlock" ||
+    node.parent.type === "SvelteAwaitPendingBlock" ||
+    node.parent.type === "SvelteAwaitThenBlock" ||
+    node.parent.type === "SvelteEachBlock" ||
+    node.parent.type === "SvelteElseBlock" ||
+    node.parent.type === "SvelteIfBlock" ||
+    node.parent.type === "SvelteKeyBlock" ||
+    node.parent.type === "SvelteStyleElement"
+  ) {
+    return node.parent.children[0] === node
+  }
+  if (node.parent.type === "Program") {
+    return node.parent.body[0] === node
+  }
+  assertNever(node.parent)
+  return false
+}
+
+/**
+ * Throws an error when invoked.
+ */
+function assertNever(value: never): never {
+  throw new Error(
+    `This part of the code should never be reached but ${value} made it through.`,
+  )
+}

src/rules/indent-helpers/svelte.ts

@@ -2,6 +2,7 @@ import type { AST } from "svelte-eslint-parser"
 import type { ASTNode } from "../../types"
 import { isNotWhitespace } from "./ast"
 import type { IndentContext } from "./commons"
+import { isBeginningOfElement } from "./commons"
 import { isBeginningOfLine } from "./commons"
 import { getFirstAndLastTokens } from "./commons"
 type NodeWithoutES = Exclude<
@@ -12,7 +13,7 @@ type NodeWithoutES = Exclude<
 type NodeListener = {
   [key in NodeWithoutES["type"]]: (node: NodeWithoutES & { type: key }) => void
 }
-const PREFORMATTED_ELEMENT_NAMES = ["pre", "textarea"]
+const PREFORMATTED_ELEMENT_NAMES = ["pre", "textarea", "template"]
 
 /**
  * Creates AST event handlers for svelte nodes.
@@ -169,7 +170,11 @@ export function defineVisitor(context: IndentContext): NodeListener {
       }
       offsets.setOffsetToken(
         tokens,
-        isBeginningOfLine(sourceCode, first) ? 0 : 1,
+        isBeginningOfLine(sourceCode, first)
+          ? 0
+          : isBeginningOfElement(node)
+          ? 1
+          : 0,
         first,
       )
     },

tests/fixtures/rules/indent/invalid/html-text01-errors.json

@@ -0,0 +1,12 @@
+[
+  {
+    "message": "Expected indentation of 2 spaces but found 0 spaces.",
+    "line": 7,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 2 spaces but found 0 spaces.",
+    "line": 8,
+    "column": 1
+  }
+]

tests/fixtures/rules/indent/invalid/html-text01-input.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let name = "s"
+</script>
+
+<!-- prettier-ignore -->
+<div>
+{name}a
+b
+</div>

tests/fixtures/rules/indent/invalid/html-text01-output.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let name = "s"
+</script>
+
+<!-- prettier-ignore -->
+<div>
+  {name}a
+  b
+</div>

tests/fixtures/rules/indent/invalid/html-text02-errors.json

@@ -0,0 +1,17 @@
+[
+  {
+    "message": "Expected indentation of 2 spaces but found 0 spaces.",
+    "line": 3,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 2 spaces but found 0 spaces.",
+    "line": 4,
+    "column": 1
+  },
+  {
+    "message": "Expected indentation of 2 spaces but found 0 spaces.",
+    "line": 5,
+    "column": 1
+  }
+]

tests/fixtures/rules/indent/invalid/html-text02-input.svelte

@@ -0,0 +1,6 @@
+<!-- prettier-ignore -->
+<div>
+a
+<div />b
+c
+</div>

tests/fixtures/rules/indent/invalid/html-text02-output.svelte

@@ -0,0 +1,6 @@
+<!-- prettier-ignore -->
+<div>
+  a
+  <div />b
+  c
+</div>

tests/fixtures/rules/indent/valid/pug01-input.svelte

@@ -0,0 +1,10 @@
+<script>
+  export const hello = "world"
+</script>
+
+<template lang="pug">
+div Posts +each('posts as post')
+  a(href="{post.url}") {post.title}
+</template>
+
+<style src="./style.scss"></style>