From e84397dd71300fc5e4200e9e6c807a3e5f901e23 Mon Sep 17 00:00:00 2001
From: Stephen Darnell <stephen.darnell@outlook.com>
Date: Thu, 29 Feb 2024 09:21:51 +0000
Subject: [PATCH] feat: Add prefer option to prefer-class-directive (#690)

---
 .changeset/popular-hotels-invent.md           |  5 +++++
 docs/rules/prefer-class-directive.md          | 20 +++++++++++++++++--
 src/rules/prefer-class-directive.ts           | 16 ++++++++++++++-
 .../invalid/_config.json                      |  3 +++
 .../invalid/empty/test01-errors.yaml          | 20 +++++++++++++++++++
 .../invalid/empty/test01-input.svelte         | 13 ++++++++++++
 .../invalid/empty/test01-output.svelte        | 13 ++++++++++++
 .../prefer-class-directive/valid/_config.json |  3 +++
 .../valid/empty/_config.json                  |  3 +++
 .../valid/empty/ignore-test05-input.svelte    | 10 ++++++++++
 10 files changed, 103 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/popular-hotels-invent.md
 create mode 100644 tests/fixtures/rules/prefer-class-directive/invalid/_config.json
 create mode 100644 tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-errors.yaml
 create mode 100644 tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-input.svelte
 create mode 100644 tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-output.svelte
 create mode 100644 tests/fixtures/rules/prefer-class-directive/valid/_config.json
 create mode 100644 tests/fixtures/rules/prefer-class-directive/valid/empty/_config.json
 create mode 100644 tests/fixtures/rules/prefer-class-directive/valid/empty/ignore-test05-input.svelte

diff --git a/.changeset/popular-hotels-invent.md b/.changeset/popular-hotels-invent.md
new file mode 100644
index 000000000..f68821fe7
--- /dev/null
+++ b/.changeset/popular-hotels-invent.md
@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+Added prefer option to prefer-class-directive rule ('always' or 'empty'). The default is now 'empty' which is a slight relaxation of the rule.
diff --git a/docs/rules/prefer-class-directive.md b/docs/rules/prefer-class-directive.md
index f026296fa..1841be9e3 100644
--- a/docs/rules/prefer-class-directive.md
+++ b/docs/rules/prefer-class-directive.md
@@ -22,13 +22,16 @@ This rule aims to replace a class with ternary operator with the class directive
 
 ```svelte
 <script>
-  /* eslint svelte/prefer-class-directive: "error" */
+  /* eslint svelte/prefer-class-directive: ["error", {"prefer": "empty"}] */
+  const selected = true;
 </script>
 
 <!-- ✓ GOOD -->
+<button class:selected>foo</button>
 <button class:selected={current === 'foo'}>foo</button>
 
 <!-- ✗ BAD -->
+<button class={selected ? 'selected' : ''}>foo</button>
 <button class={current === 'foo' ? 'selected' : ''}>foo</button>
 ```
 
@@ -40,7 +43,20 @@ You cannot enforce this style by using [prettier-plugin-svelte]. That is, this r
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "svelte/html-quotes": [
+    "error",
+    {
+      "prefer": "empty" // or "always"
+    }
+  ]
+}
+```
+
+- `prefer` ... Whether to apply this rule always or just when there's an empty string. Default is `"empty"`.
+  - `"empty"` ... Requires class directives only if one of the strings is empty.
+  - `"always"` ... Requires class directives always rather than interpolation.
 
 ## :couple: Related Rules
 
diff --git a/src/rules/prefer-class-directive.ts b/src/rules/prefer-class-directive.ts
index acd877265..7e4897e61 100644
--- a/src/rules/prefer-class-directive.ts
+++ b/src/rules/prefer-class-directive.ts
@@ -14,7 +14,15 @@ export default createRule('prefer-class-directive', {
 			conflictWithPrettier: false
 		},
 		fixable: 'code',
-		schema: [],
+		schema: [
+			{
+				type: 'object',
+				properties: {
+					prefer: { enum: ['always', 'empty'] }
+				},
+				additionalProperties: false
+			}
+		],
 		messages: {
 			unexpected: 'Unexpected class using the ternary operator.'
 		},
@@ -22,6 +30,7 @@ export default createRule('prefer-class-directive', {
 	},
 	create(context) {
 		const sourceCode = getSourceCode(context);
+		const preferEmpty = context.options[0]?.prefer !== 'always';
 
 		type Expr = {
 			not?: true;
@@ -298,6 +307,11 @@ export default createRule('prefer-class-directive', {
 				// It's too complicated.
 				return;
 			}
+			if (preferEmpty && [...map.values()].every((x) => x.trim())) {
+				// We prefer directives when there's an empty string, but they're all not empty
+				return;
+			}
+
 			const prevIsWord = !startsWithNonWord(attr, index + 1);
 			const nextIsWord = !endsWithNonWord(attr, index - 1);
 			let canTransform = true;
diff --git a/tests/fixtures/rules/prefer-class-directive/invalid/_config.json b/tests/fixtures/rules/prefer-class-directive/invalid/_config.json
new file mode 100644
index 000000000..e04cbf0cf
--- /dev/null
+++ b/tests/fixtures/rules/prefer-class-directive/invalid/_config.json
@@ -0,0 +1,3 @@
+{
+	"options": [{ "prefer": "always" }]
+}
diff --git a/tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-errors.yaml b/tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-errors.yaml
new file mode 100644
index 000000000..f8153d158
--- /dev/null
+++ b/tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-errors.yaml
@@ -0,0 +1,20 @@
+- message: Unexpected class using the ternary operator.
+  line: 6
+  column: 15
+  suggestions: null
+- message: Unexpected class using the ternary operator.
+  line: 7
+  column: 18
+  suggestions: null
+- message: Unexpected class using the ternary operator.
+  line: 8
+  column: 17
+  suggestions: null
+- message: Unexpected class using the ternary operator.
+  line: 10
+  column: 20
+  suggestions: null
+- message: Unexpected class using the ternary operator.
+  line: 11
+  column: 20
+  suggestions: null
diff --git a/tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-input.svelte b/tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-input.svelte
new file mode 100644
index 000000000..09c60d75a
--- /dev/null
+++ b/tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-input.svelte
@@ -0,0 +1,13 @@
+<script>
+	let selected = 'foo';
+	let children = 1;
+</script>
+
+<button class={selected ? 'selected' : ''}>foo</button>
+<button class="a {selected ? 'selected' : ''} b">foo</button>
+<button class="a{selected ? ' selected ' : ' '}b">foo</button>
+
+<div class="d-flex {children > 1 ? 'gap-3' : ''}">foo</div>
+<div class="d-flex {children === 1 ? '' : 'gap-3'}">foo</div>
+
+<!-- test01-input.svelte -->
diff --git a/tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-output.svelte b/tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-output.svelte
new file mode 100644
index 000000000..3d6470290
--- /dev/null
+++ b/tests/fixtures/rules/prefer-class-directive/invalid/empty/test01-output.svelte
@@ -0,0 +1,13 @@
+<script>
+	let selected = 'foo';
+	let children = 1;
+</script>
+
+<button class:selected={selected}>foo</button>
+<button class="a b" class:selected={selected}>foo</button>
+<button class="a b" class:selected={selected}>foo</button>
+
+<div class="d-flex" class:gap-3={children > 1}>foo</div>
+<div class="d-flex" class:gap-3={children !== 1}>foo</div>
+
+<!-- test01-input.svelte -->
diff --git a/tests/fixtures/rules/prefer-class-directive/valid/_config.json b/tests/fixtures/rules/prefer-class-directive/valid/_config.json
new file mode 100644
index 000000000..e04cbf0cf
--- /dev/null
+++ b/tests/fixtures/rules/prefer-class-directive/valid/_config.json
@@ -0,0 +1,3 @@
+{
+	"options": [{ "prefer": "always" }]
+}
diff --git a/tests/fixtures/rules/prefer-class-directive/valid/empty/_config.json b/tests/fixtures/rules/prefer-class-directive/valid/empty/_config.json
new file mode 100644
index 000000000..33a273416
--- /dev/null
+++ b/tests/fixtures/rules/prefer-class-directive/valid/empty/_config.json
@@ -0,0 +1,3 @@
+{
+	"options": [{ "prefer": "empty" }]
+}
diff --git a/tests/fixtures/rules/prefer-class-directive/valid/empty/ignore-test05-input.svelte b/tests/fixtures/rules/prefer-class-directive/valid/empty/ignore-test05-input.svelte
new file mode 100644
index 000000000..c149c438e
--- /dev/null
+++ b/tests/fixtures/rules/prefer-class-directive/valid/empty/ignore-test05-input.svelte
@@ -0,0 +1,10 @@
+<script>
+	let a = true;
+	let a7 = 7;
+	let danger = false;
+</script>
+
+<button class={a ? 'a' : 'b'}>foo</button>
+<button class={!a ? 'b' : 'a'}>foo</button>
+<button class={a7 === 7 ? 'a' : 'b'}>foo</button>
+<button class="btn {danger ? 'btn-danger' : 'btn-primary'}">foo</button>