feat: improve svelte/indent rule to support more ts syntax

.changeset/kind-boats-clean.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+feat: improve `svelte/indent` rule to support more ts syntax

package.json

@@ -110,8 +110,8 @@
     "@types/postcss-safe-parser": "^5.0.1",
     "@types/prismjs": "^1.26.0",
     "@types/stylus": "^0.48.38",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.1-0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "@typescript-eslint/parser-v4": "npm:@typescript-eslint/parser@4",
     "@typescript/vfs": "^1.4.0",
     "assert": "^2.0.0",
@@ -164,7 +164,7 @@
     "svelte-adapter-ghpages": "0.0.2",
     "svelte-i18n": "^3.4.0",
     "type-coverage": "^2.22.0",
-    "typescript": "^4.5.2",
+    "typescript": "^4.9.3",
     "vite": "^3.1.0-0",
     "vite-plugin-svelte-md": "^0.1.5",
     "yaml": "^2.1.1",

src/rules/indent-helpers/es.ts

@@ -187,14 +187,25 @@ export function defineVisitor(context: IndentContext): NodeListener {
     },
     CallExpression(node: TSESTree.CallExpression) {
       const firstToken = sourceCode.getFirstToken(node)
-      const leftParenToken = sourceCode.getTokenAfter(node.callee, {
-        filter: isOpeningParenToken,
-        includeComments: false,
-      })!
+      const leftParenToken = sourceCode.getTokenAfter(
+        node.typeParameters || node.callee,
+        {
+          filter: isOpeningParenToken,
+          includeComments: false,
+        },
+      )!
       const rightParenToken = sourceCode.getLastToken(node)
 
+      if (node.typeParameters) {
+        offsets.setOffsetToken(
+          sourceCode.getFirstToken(node.typeParameters),
+          1,
+          firstToken,
+        )
+      }
+
       for (const optionalToken of sourceCode.getTokensBetween(
-        sourceCode.getLastToken(node.callee),
+        sourceCode.getLastToken(node.typeParameters || node.callee),
         leftParenToken,
         { filter: isOptionalToken, includeComments: false },
       )) {
@@ -817,12 +828,17 @@ export function defineVisitor(context: IndentContext): NodeListener {
       const calleeTokens = getFirstAndLastTokens(sourceCode, node.callee)
       offsets.setOffsetToken(calleeTokens.firstToken, 1, newToken)
 
-      if (
-        node.arguments.length ||
-        calleeTokens.lastToken.range[1] < node.range[1]
-      ) {
+      if (node.typeParameters) {
+        offsets.setOffsetToken(
+          sourceCode.getFirstToken(node.typeParameters),
+          1,
+          calleeTokens.firstToken,
+        )
+      }
+      const leftParenBefore = node.typeParameters || calleeTokens.lastToken
+      if (node.arguments.length || leftParenBefore.range[1] < node.range[1]) {
         const rightParenToken = sourceCode.getLastToken(node)
-        const leftParenToken = sourceCode.getTokenAfter(calleeTokens.lastToken)!
+        const leftParenToken = sourceCode.getTokenAfter(leftParenBefore)!
 
         offsets.setOffsetToken(leftParenToken, 1, calleeTokens.firstToken)
         offsets.setOffsetElementList(

src/rules/indent-helpers/ts.ts

@@ -41,33 +41,53 @@ export function defineVisitor(context: IndentContext): NodeListener {
         offsets.setOffsetToken(before, 1, baseToken)
       }
     },
-    TSAsExpression(node: TSESTree.TSAsExpression) {
+    TSAsExpression(
+      node: TSESTree.TSAsExpression | TSESTree.TSSatisfiesExpression,
+    ) {
       // foo as T
+      // or
+      // foo satisfies T
       const expressionTokens = getFirstAndLastTokens(
         sourceCode,
         node.expression,
       )
-      const asToken = sourceCode.getTokenAfter(expressionTokens.lastToken)!
+      const asOrSatisfiesToken = sourceCode.getTokenAfter(
+        expressionTokens.lastToken,
+      )!
       offsets.setOffsetToken(
         [
-          asToken,
+          asOrSatisfiesToken,
           getFirstAndLastTokens(sourceCode, node.typeAnnotation).firstToken,
         ],
         1,
         expressionTokens.firstToken,
       )
     },
-    TSTypeReference(node: TSESTree.TSTypeReference) {
+    TSSatisfiesExpression(node: TSESTree.TSSatisfiesExpression) {
+      // foo satisfies T
+      visitor.TSAsExpression(node)
+    },
+    TSTypeReference(
+      node: TSESTree.TSTypeReference | TSESTree.TSInstantiationExpression,
+    ) {
       // T<U>
+      // or
+      // const ErrorMap = Map<string, Error>
+      //                  ^^^^^^^^^^^^^^^^^^
       if (node.typeParameters) {
-        const typeNameTokens = getFirstAndLastTokens(sourceCode, node.typeName)
+        const firstToken = sourceCode.getFirstToken(node)
         offsets.setOffsetToken(
           sourceCode.getFirstToken(node.typeParameters),
           1,
-          typeNameTokens.firstToken,
+          firstToken,
         )
       }
     },
+    TSInstantiationExpression(node: TSESTree.TSInstantiationExpression) {
+      // const ErrorMap = Map<string, Error>
+      //                  ^^^^^^^^^^^^^^^^^^
+      visitor.TSTypeReference(node)
+    },
     TSTypeParameterInstantiation(
       node:
         | TSESTree.TSTypeParameterInstantiation
@@ -701,6 +721,7 @@ export function defineVisitor(context: IndentContext): NodeListener {
       node:
         | TSESTree.TSAbstractMethodDefinition
         | TSESTree.TSAbstractPropertyDefinition
+        | TSESTree.TSAbstractAccessorProperty
         | TSESTree.TSEnumMember,
     ) {
       const { keyNode, valueNode } =
@@ -754,6 +775,9 @@ export function defineVisitor(context: IndentContext): NodeListener {
     TSEnumMember(node: TSESTree.TSEnumMember) {
       visitor.TSAbstractMethodDefinition(node)
     },
+    TSAbstractAccessorProperty(node: TSESTree.TSAbstractAccessorProperty) {
+      visitor.TSAbstractMethodDefinition(node)
+    },
     TSOptionalType(
       node: TSESTree.TSOptionalType | TSESTree.TSNonNullExpression,
     ) {
@@ -960,6 +984,48 @@ export function defineVisitor(context: IndentContext): NodeListener {
         )
       }
     },
+    AccessorProperty(node: TSESTree.AccessorProperty) {
+      const keyNode = node.key
+      const valueNode = node.value
+      const firstToken = sourceCode.getFirstToken(node)
+      const keyTokens = getFirstAndLastTokens(sourceCode, keyNode)
+      const prefixTokens = sourceCode.getTokensBetween(
+        firstToken,
+        keyTokens.firstToken,
+      )
+      if (node.computed) {
+        prefixTokens.pop() // pop [
+      }
+      offsets.setOffsetToken(prefixTokens, 0, firstToken)
+      let lastKeyToken
+      if (node.computed) {
+        const leftBracketToken = sourceCode.getTokenBefore(
+          keyTokens.firstToken,
+        )!
+        const rightBracketToken = (lastKeyToken = sourceCode.getTokenAfter(
+          keyTokens.lastToken,
+        )!)
+        offsets.setOffsetToken(leftBracketToken, 0, firstToken)
+        offsets.setOffsetElementList(
+          [keyNode],
+          leftBracketToken,
+          rightBracketToken,
+          1,
+        )
+      } else {
+        offsets.setOffsetToken(keyTokens.firstToken, 0, firstToken)
+        lastKeyToken = keyTokens.lastToken
+      }
+
+      if (valueNode != null) {
+        const initToken = sourceCode.getFirstToken(valueNode)
+        offsets.setOffsetToken(
+          [...sourceCode.getTokensBetween(lastKeyToken, initToken), initToken],
+          1,
+          lastKeyToken,
+        )
+      }
+    },
     StaticBlock(node: TSESTree.StaticBlock) {
       const firstToken = sourceCode.getFirstToken(node)
       let next = sourceCode.getTokenAfter(firstToken)
@@ -1084,7 +1150,7 @@ export function defineVisitor(context: IndentContext): NodeListener {
   const commonsVisitor: any = {
     // Process semicolons.
     ["TSTypeAliasDeclaration, TSCallSignatureDeclaration, TSConstructSignatureDeclaration, TSImportEqualsDeclaration," +
-      "TSAbstractMethodDefinition, TSAbstractPropertyDefinition, TSEnumMember," +
+      "TSAbstractMethodDefinition, TSAbstractPropertyDefinition, AccessorProperty,  TSAbstractAccessorProperty, TSEnumMember," +
       "TSPropertySignature, TSIndexSignature, TSMethodSignature," +
       "TSAbstractClassProperty, ClassProperty"](node: TSESTree.Node) {
       const firstToken = sourceCode.getFirstToken(node)

tests/fixtures/rules/indent/invalid/ts-v5/ts-abstract-accessor-property-errors.yaml

@@ -0,0 +1,28 @@
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 3
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 4
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 5
+  column: 1
+  suggestions: null
+- message: Expected indentation of 6 spaces but found 0 spaces.
+  line: 6
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 7
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 10
+  column: 1
+  suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 11
+  column: 1
+  suggestions: null

tests/fixtures/rules/indent/invalid/ts-v5/ts-abstract-accessor-property-input.svelte

@@ -0,0 +1,12 @@
+<!-- prettier-ignore -->
+<script lang="ts">
+abstract class Foo {
+abstract accessor
+foo:
+number
+// parser v5 does not parse value.
+//    =
+//    1
+;
+}
+</script>

tests/fixtures/rules/indent/invalid/ts-v5/ts-abstract-accessor-property-output.svelte

@@ -0,0 +1,12 @@
+<!-- prettier-ignore -->
+<script lang="ts">
+  abstract class Foo {
+    abstract accessor
+    foo:
+      number
+    // parser v5 does not parse value.
+//    =
+//    1
+    ;
+  }
+</script>

tests/fixtures/rules/indent/invalid/ts-v5/ts-accessor-property01-errors.yaml

@@ -0,0 +1,20 @@
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 3
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 4
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 5
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 6
+  column: 1
+  suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 7
+  column: 1
+  suggestions: null

tests/fixtures/rules/indent/invalid/ts-v5/ts-accessor-property01-input.svelte

@@ -0,0 +1,8 @@
+<!-- prettier-ignore -->
+<script lang="ts">
+class Foo {
+accessor
+foo
+;
+}
+</script>

tests/fixtures/rules/indent/invalid/ts-v5/ts-accessor-property01-output.svelte

@@ -0,0 +1,8 @@
+<!-- prettier-ignore -->
+<script lang="ts">
+  class Foo {
+    accessor
+    foo
+    ;
+  }
+</script>

tests/fixtures/rules/indent/invalid/ts-v5/ts-accessor-property02-errors.yaml

@@ -0,0 +1,28 @@
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 3
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 4
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 5
+  column: 1
+  suggestions: null
+- message: Expected indentation of 6 spaces but found 0 spaces.
+  line: 6
+  column: 1
+  suggestions: null
+- message: Expected indentation of 6 spaces but found 0 spaces.
+  line: 7
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 8
+  column: 1
+  suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 9
+  column: 1
+  suggestions: null

tests/fixtures/rules/indent/invalid/ts-v5/ts-accessor-property02-input.svelte

@@ -0,0 +1,10 @@
+<!-- prettier-ignore -->
+<script lang="ts">
+class Foo {
+accessor
+foo
+=
+2
+;
+}
+</script>

tests/fixtures/rules/indent/invalid/ts-v5/ts-accessor-property02-output.svelte

@@ -0,0 +1,10 @@
+<!-- prettier-ignore -->
+<script lang="ts">
+  class Foo {
+    accessor
+    foo
+      =
+      2
+    ;
+  }
+</script>

tests/fixtures/rules/indent/invalid/ts-v5/ts-accessor-property03-errors.yaml

@@ -0,0 +1,24 @@
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 3
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 4
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 5
+  column: 1
+  suggestions: null
+- message: Expected indentation of 6 spaces but found 0 spaces.
+  line: 6
+  column: 1
+  suggestions: null
+- message: Expected indentation of 4 spaces but found 0 spaces.
+  line: 7
+  column: 1
+  suggestions: null
+- message: Expected indentation of 2 spaces but found 0 spaces.
+  line: 8
+  column: 1
+  suggestions: null

tests/fixtures/rules/indent/invalid/ts-v5/ts-accessor-property03-input.svelte

@@ -0,0 +1,9 @@
+<!-- prettier-ignore -->
+<script lang="ts">
+class Foo {
+declare accessor
+foo:
+number
+;
+}
+</script>