Add mustache-spacing rule (#77)

* Add mustache-spacing rule

* update

* fix

Author: ota-meshi

README.md

@@ -282,6 +282,7 @@ These rules relate to style guidelines, and are therefore quite subjective:
 | [@ota-meshi/svelte/html-quotes](https://ota-meshi.github.io/eslint-plugin-svelte/rules/html-quotes.html) | enforce quotes style of HTML attributes | :wrench: |
 | [@ota-meshi/svelte/indent](https://ota-meshi.github.io/eslint-plugin-svelte/rules/indent.html) | enforce consistent indentation | :wrench: |
 | [@ota-meshi/svelte/max-attributes-per-line](https://ota-meshi.github.io/eslint-plugin-svelte/rules/max-attributes-per-line.html) | enforce the maximum number of attributes per line | :wrench: |
+| [@ota-meshi/svelte/mustache-spacing](https://ota-meshi.github.io/eslint-plugin-svelte/rules/mustache-spacing.html) | enforce unified spacing in mustache | :wrench: |
 | [@ota-meshi/svelte/prefer-class-directive](https://ota-meshi.github.io/eslint-plugin-svelte/rules/prefer-class-directive.html) | require class directives instead of ternary expressions | :wrench: |
 | [@ota-meshi/svelte/shorthand-attribute](https://ota-meshi.github.io/eslint-plugin-svelte/rules/shorthand-attribute.html) | enforce use of shorthand syntax in attribute | :wrench: |
 | [@ota-meshi/svelte/spaced-html-comment](https://ota-meshi.github.io/eslint-plugin-svelte/rules/spaced-html-comment.html) | enforce consistent spacing after the `<!--` and before the `-->` in a HTML comment | :wrench: |

docs/rules/README.md

@@ -50,6 +50,7 @@ These rules relate to style guidelines, and are therefore quite subjective:
 | [@ota-meshi/svelte/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: |
 | [@ota-meshi/svelte/indent](./indent.md) | enforce consistent indentation | :wrench: |
 | [@ota-meshi/svelte/max-attributes-per-line](./max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: |
+| [@ota-meshi/svelte/mustache-spacing](./mustache-spacing.md) | enforce unified spacing in mustache | :wrench: |
 | [@ota-meshi/svelte/prefer-class-directive](./prefer-class-directive.md) | require class directives instead of ternary expressions | :wrench: |
 | [@ota-meshi/svelte/shorthand-attribute](./shorthand-attribute.md) | enforce use of shorthand syntax in attribute | :wrench: |
 | [@ota-meshi/svelte/spaced-html-comment](./spaced-html-comment.md) | enforce consistent spacing after the `<!--` and before the `-->` in a HTML comment | :wrench: |

docs/rules/mustache-spacing.md

@@ -0,0 +1,94 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "@ota-meshi/svelte/mustache-spacing"
+description: "enforce unified spacing in mustache"
+---
+
+# @ota-meshi/svelte/mustache-spacing
+
+> enforce unified spacing in mustache
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule aims at enforcing unified spacing in mustaches.
+
+<eslint-code-block fix>
+
+<!-- prettier-ignore-start -->
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint @ota-meshi/svelte/mustache-spacing: "error" */
+</script>
+
+<!-- ✓ GOOD -->
+{name}
+<input bind:value={text} class="foo {bar}" />
+<input {id} {...attrs} />
+{@html page}
+{@debug o1, o2}
+
+{#if c1}...{:else if c2}...{:else}...{/if}
+
+{#each list as item}...{/each}
+
+{#await p}...{:then val}...{:catch err}...{/await}
+
+{#key id}...{/key}
+
+<!-- ✗ BAD -->
+{ name }
+<input bind:value={ text } class="foo { bar }" />
+<input { id } { ...attrs } />
+{ @html page }
+{ @debug o1, o2 }
+
+{ #if c1 }...{ :else if c2 }...{ :else }...{ /if }
+
+{ #each list as item }...{ /each }
+
+{ #await p }...{ :then val }...{ :catch err }...{ /await }
+
+{ #key id }...{ /key }
+```
+
+</eslint-code-block>
+
+<!-- prettier-ignore-end -->
+
+## :wrench: Options
+
+```json
+{
+  "@ota-meshi/svelte/mustache-spacing": [
+    "error",
+    {
+      "textExpressions": "never", // or "always"
+      "attributesAndProps": "never", // or "always"
+      "directiveExpressions": "never", // or "always"
+      "tags": {
+        "openingBrace": "never", // or "always"
+        "closingBrace": "never" // or "always" or "always-after-expression"
+      }
+    }
+  ]
+}
+```
+
+- `"never"` ... Expect one space between token and curly brackets. This is default.
+- `"always"` ... Expect no spaces between token and curly brackets. This is default.
+- `"always-after-expression"` ... Expect one space between expression and closing curly brackets, if the expression before the closing curly bracket.
+- `textExpressions` ... Enforces the style of the mustache for the text expressions. e.g. `{text}`.
+- `attributesAndProps` ... Enforces the style of the mustache for the attributes and props. e.g. `<input value={text}`.
+- `directiveExpressions` ... Enforces the style of the mustache for the directive expressions. e.g. `<input bind:value={text}`.
+- `tags` ... Enforces the style of the mustache for the mustache tags. e.g. `{#if condition}`.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/mustache-spacing.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/mustache-spacing.ts)

package.json

@@ -52,7 +52,7 @@
     "debug": "^4.3.1",
     "eslint-utils": "^3.0.0",
     "sourcemap-codec": "^1.4.8",
-    "svelte-eslint-parser": "^0.6.0"
+    "svelte-eslint-parser": "^0.7.0"
   },
   "peerDependencies": {
     "eslint": "^7.0.0 || ^8.0.0-0",

src/rules/html-quotes.ts

@@ -1,12 +1,7 @@
 import type { AST } from "svelte-eslint-parser"
-import {
-  isClosingParenToken,
-  isNotClosingBraceToken,
-  isNotOpeningBraceToken,
-  isOpeningParenToken,
-} from "eslint-utils"
 import { createRule } from "../utils"
 import type { QuoteAndRange } from "../utils/ast-utils"
+import { getMustacheTokens } from "../utils/ast-utils"
 import { getAttributeValueQuoteAndRange } from "../utils/ast-utils"
 
 const QUOTE_CHARS = {
@@ -154,7 +149,7 @@ export default createRule("html-quotes", {
 
     /** Verify for standard attribute */
     function verifyForValues(attr: AST.SvelteAttribute) {
-      const quoteAndRange = getAttributeValueQuoteAndRange(attr, context)
+      const quoteAndRange = getAttributeValueQuoteAndRange(attr, sourceCode)
       verifyQuote(preferQuote, quoteAndRange)
     }
 
@@ -165,7 +160,7 @@ export default createRule("html-quotes", {
         kind: "text"
       },
     ) {
-      const quoteAndRange = getAttributeValueQuoteAndRange(attr, context)
+      const quoteAndRange = getAttributeValueQuoteAndRange(attr, sourceCode)
       const text = sourceCode.text.slice(...valueNode.range)
       verifyQuote(
         avoidInvalidUnquotedInHTML && !canBeUnquotedInHTML(text)
@@ -178,31 +173,15 @@ export default createRule("html-quotes", {
     /** Verify for directive value */
     function verifyForDirective(
       attr: AST.SvelteDirective | AST.SvelteSpecialDirective,
-      valueNode: NonNullable<AST.SvelteDirective["expression"]>,
     ) {
-      let beforeToken = sourceCode.getTokenBefore(valueNode)
-      let afterToken = sourceCode.getTokenAfter(valueNode)
-      while (
-        beforeToken &&
-        afterToken &&
-        isOpeningParenToken(beforeToken) &&
-        isClosingParenToken(afterToken)
-      ) {
-        beforeToken = sourceCode.getTokenBefore(beforeToken)
-        afterToken = sourceCode.getTokenAfter(afterToken)
-      }
-      if (
-        !beforeToken ||
-        !afterToken ||
-        isNotOpeningBraceToken(beforeToken) ||
-        isNotClosingBraceToken(afterToken)
-      ) {
+      const mustacheTokens = getMustacheTokens(attr, sourceCode)
+      if (!mustacheTokens) {
         return
       }
-      const quoteAndRange = getAttributeValueQuoteAndRange(attr, context)
+      const quoteAndRange = getAttributeValueQuoteAndRange(attr, sourceCode)
       const text = sourceCode.text.slice(
-        beforeToken.range[0],
-        afterToken.range[1],
+        mustacheTokens.openToken.range[0],
+        mustacheTokens.closeToken.range[1],
       )
       verifyQuote(
         avoidInvalidUnquotedInHTML && !canBeUnquotedInHTML(text)
@@ -236,7 +215,7 @@ export default createRule("html-quotes", {
           // shorthand
           return
         }
-        verifyForDirective(node, node.expression)
+        verifyForDirective(node)
       },
     }
   },

src/rules/indent-helpers/svelte.ts

@@ -411,17 +411,13 @@ export function defineVisitor(context: IndentContext): NodeListener {
       offsets.setOffsetToken(closeCloseTagToken, 0, openCloseTagToken)
     },
     SvelteAwaitPendingBlock(node: AST.SvelteAwaitPendingBlock) {
-      const first = sourceCode.getFirstToken(node, {
-        includeComments: false,
-        filter: isNotWhitespace,
-      })!
-      const offset = isBeginningOfLine(sourceCode, first) ? 0 : 1
+      const openToken = sourceCode.getFirstToken(node)
       for (const child of node.children) {
         const token = sourceCode.getFirstToken(child, {
           includeComments: false,
           filter: isNotWhitespace,
         })
-        offsets.setOffsetToken(token, offset, first)
+        offsets.setOffsetToken(token, 1, openToken)
       }
     },
     SvelteAwaitThenBlock(node: AST.SvelteAwaitThenBlock) {