fix: client-side scripts not being able to linting in flat configs (#334

)

* fix: client-side scripts not being able to linting in flat configs

* Create moody-pumpkins-carry.md

.changeset/moody-pumpkins-carry.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-astro": patch
+---
+
+fix: client-side scripts not being able to linting in flat configs

src/configs/flat/base.ts

@@ -4,7 +4,10 @@
 import globals from "globals"
 import type { ESLint } from "eslint"
 import * as parser from "astro-eslint-parser"
-import { tsESLintParser } from "../has-typescript-eslint-parser"
+import {
+  tsESLintParser,
+  hasTypescriptEslintParser,
+} from "../has-typescript-eslint-parser"
 import { environments } from "../../environments/index"
 export default [
   {
@@ -34,6 +37,9 @@ export default [
       // eslint-plugin-astro rules
       // Enable base rules
     },
+    processor: hasTypescriptEslintParser
+      ? "astro/client-side-ts"
+      : "astro/astro",
   },
   {
     // Define the configuration for `<script>` tag.

tests/src/integration/client-javascript.ts

@@ -0,0 +1,71 @@
+import { ESLint } from "eslint"
+import astroPlugin from "../../../src/index"
+import assert from "assert"
+import Module from "module"
+import semver from "semver"
+
+describe("Integration test for client-side script", () => {
+  // @ts-expect-error -- ignore
+  const originalLoad = Module._load
+  before(() => {
+    // @ts-expect-error -- ignore
+    Module._load = function (name, ...args) {
+      if (name === "eslint-plugin-astro") {
+        return astroPlugin
+      }
+      return originalLoad(name, ...args)
+    }
+  })
+  after(() => {
+    // @ts-expect-error -- ignore
+    Module._load = originalLoad
+  })
+  it("should work with astro processor", async () => {
+    const eslint = semver.lt(ESLint.version, "9.0.0-0")
+      ? new ESLint({
+          plugins: {
+            astro: astroPlugin as any,
+          },
+          useEslintrc: false,
+          overrideConfig: {
+            extends: ["plugin:astro/base"],
+            rules: {
+              "no-restricted-syntax": ["error", "Identifier[name='id']"],
+            } as Record<string, any>,
+          },
+        })
+      : new ESLint({
+          overrideConfigFile: true as any,
+          // @ts-expect-error -- typing bug
+          overrideConfig: [
+            ...astroPlugin.configs["flat/base"],
+            {
+              rules: {
+                "no-restricted-syntax": ["error", "Identifier[name='id']"],
+              } as Record<string, any>,
+            },
+          ],
+        })
+
+    const result = await eslint.lintText(
+      `
+      <script>
+      let id
+      </script>
+      `,
+      { filePath: "path/to/test.astro" },
+    )
+
+    assert.deepStrictEqual(
+      result
+        .flatMap((r) => r.messages)
+        .map((m) => ({ ruleId: m.ruleId, message: m.message })),
+      [
+        {
+          message: "Using 'Identifier[name='id']' is not allowed.",
+          ruleId: "no-restricted-syntax",
+        },
+      ],
+    )
+  })
+})

tests/src/integration/client-typescript.ts

@@ -60,10 +60,8 @@ describe("Integration test for client-side ts", () => {
               rules: {
                 "no-restricted-syntax": ["error", "TSTypeAnnotation"],
               } as Record<string, any>,
-            },
-            {
-              files: ["*.astro", "**/*.astro"],
-              processor: "astro/client-side-ts",
+              // Auto detect the processor
+              // processor: "astro/client-side-ts",
             },
           ],
         })

tools/update-rulesets.ts

@@ -103,7 +103,7 @@ void formatAndSave(
 import globals from "globals"
 import type { ESLint } from "eslint"
 import * as parser from "astro-eslint-parser"
-import { tsESLintParser } from "../has-typescript-eslint-parser"
+import { tsESLintParser, hasTypescriptEslintParser } from "../has-typescript-eslint-parser"
 import { environments } from "../../environments/index"
 export default [
   {
@@ -139,6 +139,7 @@ export default [
         })
         .join(",\n        ")}
     },
+		processor: hasTypescriptEslintParser ? 'astro/client-side-ts' : 'astro/astro'
   },
   {
     // Define the configuration for \`<script>\` tag.