feat: add missing-directive-value rule

.changeset/slimy-pillows-change.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-astro": minor
+---
+
+feat add `missing-directive-value` rule

README.md

@@ -377,6 +377,7 @@ These rules relate to possible syntax or logic errors in Astro component code:
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
+| [astro/missing-client-directive-value](https://ota-meshi.github.io/eslint-plugin-astro/rules/missing-client-directive-value/) | the client directive is missing the correct component's framework value | ⭐ |
 | [astro/no-conflict-set-directives](https://ota-meshi.github.io/eslint-plugin-astro/rules/no-conflict-set-directives/) | disallow conflicting set directives and child contents | ⭐ |
 | [astro/no-deprecated-astro-canonicalurl](https://ota-meshi.github.io/eslint-plugin-astro/rules/no-deprecated-astro-canonicalurl/) | disallow using deprecated `Astro.canonicalURL` | ⭐ |
 | [astro/no-deprecated-astro-fetchcontent](https://ota-meshi.github.io/eslint-plugin-astro/rules/no-deprecated-astro-fetchcontent/) | disallow using deprecated `Astro.fetchContent()` | ⭐🔧 |

docs/rules.md

@@ -13,6 +13,7 @@ These rules relate to possible syntax or logic errors in Astro component code:
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
+| [astro/missing-client-directive-value](./rules/missing-client-directive-value.md) | the client directive is missing the correct component's framework value | ⭐ |
 | [astro/no-conflict-set-directives](./rules/no-conflict-set-directives.md) | disallow conflicting set directives and child contents | ⭐ |
 | [astro/no-deprecated-astro-canonicalurl](./rules/no-deprecated-astro-canonicalurl.md) | disallow using deprecated `Astro.canonicalURL` | ⭐ |
 | [astro/no-deprecated-astro-fetchcontent](./rules/no-deprecated-astro-fetchcontent.md) | disallow using deprecated `Astro.fetchContent()` | ⭐🔧 |

docs/rules/missing-client-directive-value.md

@@ -0,0 +1,60 @@
+---
+title: "astro/missing-client-directive-value"
+description: "the client directive is missing the correct component's framework value"
+since: "v0.31.4"
+---
+
+# astro/missing-client-directive-value
+
+> the client directive is missing the correct component's framework value
+
+- ⚙ This rule is included in `"plugin:astro/recommended"`.
+
+## 📖 Rule Details
+
+This rule reports not setting a value for the `client:only` directive.
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```astro
+---
+/* eslint astro/missing-client-directive-value: "error" */
+
+---
+
+{/* ✓ GOOD */}
+<SomeSvelteComponent client:only="svelte" />
+
+{/* ✗ BAD */}
+<SomeSvelteComponent client:only />
+```
+
+</ESLintCodeBlock>
+
+## 🔧 Options
+
+```
+<SomeReactComponent client:only="react" />
+<SomePreactComponent client:only="preact" />
+<SomeSvelteComponent client:only="svelte" />
+<SomeVueComponent client:only="vue" />
+<SomeSolidComponent client:only="solid-js" />
+<SomeLitComponent client:only="lit" />
+```
+
+
+## 📚 Further Reading
+
+- [Astro Documentation | Template Directives Reference > client:only](https://docs.astro.build/en/reference/directives-reference/#clientonly)
+
+## 🚀 Version
+
+This rule was introduced in eslint-plugin-astro v0.31.4
+
+## 🔍 Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-astro/blob/main/src/rules/missing-client-directive-value.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-astro/blob/main/tests/src/rules/missing-client-directive-value.ts)
+- [Test fixture sources](https://github.com/ota-meshi/eslint-plugin-astro/tree/main/tests/fixtures/rules/missing-client-directive-value)

src/configs/recommended.ts

@@ -9,6 +9,7 @@ export = {
   extends: [baseExtend],
   rules: {
     // eslint-plugin-astro rules
+    "astro/missing-client-directive-value": "error",
     "astro/no-conflict-set-directives": "error",
     "astro/no-deprecated-astro-canonicalurl": "error",
     "astro/no-deprecated-astro-fetchcontent": "error",

src/rules/missing-client-directive-value.ts

@@ -0,0 +1,45 @@
+import type { AST } from "astro-eslint-parser"
+import { createRule } from "../utils"
+import { getStaticAttributeValue } from "../utils/ast-utils"
+import { getSourceCode } from "../utils/compat"
+
+export default createRule("missing-client-directive-value", {
+  meta: {
+    docs: {
+      description:
+        "the client directive is missing the correct component's framework value",
+      category: "Possible Errors",
+      recommended: true,
+    },
+    schema: [],
+    messages: {
+      missingValue: "`client:only` directive is missing a value",
+    },
+    type: "problem",
+  },
+  create(context) {
+    const sourceCode = getSourceCode(context)
+    if (!sourceCode.parserServices.isAstro) {
+      return {}
+    }
+
+    /** VerifyDirectiveValue */
+    function verifyDirectiveValue(
+      attr: AST.JSXAttribute | AST.AstroTemplateLiteralAttribute,
+    ) {
+      if (getStaticAttributeValue(attr) !== null) {
+        return
+      }
+
+      context.report({
+        node: attr.name,
+        messageId: "missingValue",
+      })
+    }
+
+    return {
+      JSXAttribute: verifyDirectiveValue,
+      AstroTemplateLiteralAttribute: verifyDirectiveValue,
+    }
+  },
+})

src/utils/rules.ts

@@ -2,6 +2,7 @@
 // This file has been automatically generated,
 // in order to update its content execute "npm run update"
 import type { RuleModule } from "../types"
+import missingClientDirectiveValue from "../rules/missing-client-directive-value"
 import noConflictSetDirectives from "../rules/no-conflict-set-directives"
 import noDeprecatedAstroCanonicalurl from "../rules/no-deprecated-astro-canonicalurl"
 import noDeprecatedAstroFetchcontent from "../rules/no-deprecated-astro-fetchcontent"
@@ -19,6 +20,7 @@ import validCompile from "../rules/valid-compile"
 import { buildA11yRules } from "../a11y"
 
 export const rules = [
+  missingClientDirectiveValue,
   noConflictSetDirectives,
   noDeprecatedAstroCanonicalurl,
   noDeprecatedAstroFetchcontent,

tests/fixtures/rules/missing-client-directive-value/SomeSvelteComponent.svelte

@@ -0,0 +1,7 @@
+<script>
+
+</script>
+
+<main>
+    <h1>Hello Svelte!</h1>
+</main>

tests/fixtures/rules/missing-client-directive-value/invalid/missing-client-directive-value-errors.json

@@ -0,0 +1,7 @@
+[
+  {
+    "message": "`client:only` directive is missing a value",
+    "line": 5,
+    "column": 22
+  }
+]

tests/fixtures/rules/missing-client-directive-value/invalid/missing-client-directive-value-input.astro

@@ -0,0 +1,5 @@
+---
+import SomeSvelteComponent from "../SomeSvelteComponent.svelte"
+---
+
+<SomeSvelteComponent client:only />

tests/fixtures/rules/missing-client-directive-value/valid/client-only-value.astro

@@ -0,0 +1,8 @@
+---
+import SomeSvelteComponent from "../SomeSvelteComponent.svelte"
+let string = "svelte"
+---
+
+<!-- prettier-ignore-start -->
+<SomeSvelteComponent client:only={string} />
+<!-- prettier-ignore-end -->

tests/src/rules/missing-client-directive-value.ts

@@ -0,0 +1,16 @@
+import { RuleTester } from "../../utils/eslint-compat"
+import rule from "../../../src/rules/missing-client-directive-value"
+import { loadTestCases } from "../../utils/utils"
+
+const tester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+  },
+})
+
+tester.run(
+  "missing-client-directive-value",
+  rule as any,
+  loadTestCases("missing-client-directive-value"),
+)