feat(eslint-plugin): support Eslint 9 and 8 simultaneously

.changeset/breezy-toes-help.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-qwik': major
+---
+
+let eslint-plugin-qwink support Eslint 9 and 8 simultaneously

packages/eslint-plugin-qwik/package.json

@@ -5,15 +5,15 @@
   "author": "Builder Team",
   "bugs": "https://github.com/QwikDev/qwik/issues",
   "dependencies": {
-    "jsx-ast-utils": "^3.3.5",
-    "@typescript-eslint/utils": "^8.12.2"
+    "@typescript-eslint/utils": "^8.12.2",
+    "jsx-ast-utils": "^3.3.5"
   },
   "devDependencies": {
     "@builder.io/qwik": "workspace:^",
     "@builder.io/qwik-city": "workspace:^",
-    "@types/eslint": "8.56.10",
+    "@types/eslint": "9.6.1",
     "@types/estree": "1.0.5",
-    "@typescript-eslint/rule-tester": "7.8.0",
+    "@typescript-eslint/rule-tester": "8.14.0",
     "redent": "4.0.0"
   },
   "engines": {
@@ -32,7 +32,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "peerDependencies": {
-    "eslint": "^8.57.0"
+    "eslint": "9.15.0"
   },
   "repository": {
     "type": "git",

packages/eslint-plugin-qwik/qwik.unit.ts

@@ -1,11 +1,11 @@
 import * as vitest from 'vitest';
 // @ts-ignore
-import { RuleTester } from '@typescript-eslint/rule-tester';
-
+import { RuleTester, type RuleTesterConfig } from '@typescript-eslint/rule-tester';
 import { fileURLToPath } from 'node:url';
 import { rules } from './index';
 import { readdir, readFile, stat } from 'node:fs/promises';
 import { join, dirname } from 'path';
+// import {plugin, parser} from 'typescript-eslint'
 
 // https://typescript-eslint.io/packages/rule-tester/#vitest
 RuleTester.afterAll = vitest.afterAll;
@@ -14,22 +14,24 @@ RuleTester.itOnly = vitest.it.only;
 RuleTester.describe = vitest.describe;
 
 const testConfig = {
-  parser: '@typescript-eslint/parser',
-  env: {
-    es6: true,
-  },
-  parserOptions: {
-    tsconfigRootDir: fileURLToPath(new URL('.', import.meta.url)),
-    project: ['./tests/tsconfig.json'],
-    ecmaFeatures: {
-      jsx: true,
+  languageOptions: {
+    parserOptions: {
+      projectService: {
+        allowDefaultProject: ['*.ts*'],
+      },
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true,
+      },
+
+      ecmaVersion: 2024,
+      project: ['./tests/tsconfig.json'],
+      tsconfigRootDir: fileURLToPath(new URL('.', import.meta.url)),
     },
-    ecmaVersion: 2020,
-    sourceType: 'module',
   },
-};
+} as RuleTesterConfig;
 
-const ruleTester = new RuleTester(testConfig as any);
+const ruleTester = new RuleTester(testConfig);
 interface TestCase {
   name: string;
   filename: string;

packages/eslint-plugin-qwik/tests/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "incremental": true,
-    "target": "ES2020",
-    "module": "ES2020",
-    "lib": ["es2020", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
     "resolveJsonModule": true,
     "jsx": "react-jsx",
     "jsxImportSource": "@builder.io/qwik",

packages/eslint-plugin-qwik/tests/valid-lexical-scope/invalid-capture-class.tsx

@@ -5,7 +5,7 @@ export const HelloWorld = component$(() => {
   class Stuff {}
   const stuff = new Stuff();
   useTask$(() => {
-    // eslint-disable-next-line no-console
+    /* eslint no-console: [, { allow: ["log"] }] */
     console.log(stuff);
   });
   return <div></div>;

packages/eslint-plugin-qwik/tests/valid-lexical-scope/invalid-capture-function-event.tsx

@@ -1,7 +1,7 @@
 // Expect error: { "messageId": "invalidJsxDollar" }
 import { component$, useTask$ } from '@builder.io/qwik';
 export const HelloWorld = component$(() => {
-  // eslint-disable-next-line no-console
+  /* eslint no-console: [, { allow: ["log"] }] */
   const click = () => console.log();
   return <button onClick$={click}></button>;
 });

packages/eslint-plugin-qwik/tests/valid-lexical-scope/invalid-capture-function.tsx

@@ -6,14 +6,14 @@ export const HelloWorld = component$(() => {
       return 'string';
     } else {
       return () => {
-        // eslint-disable-next-line no-console
+        /* eslint no-console: [, { allow: ["log"] }] */
         console.log();
       };
     }
   }
   const a = getValue();
   useTask$(() => {
-    // eslint-disable-next-line no-console
+    /* eslint no-console: [, { allow: ["log"] }] */
     console.log(a);
   });
   return <div></div>;

packages/eslint-plugin-qwik/tests/valid-lexical-scope/invalid-capture-symbol.tsx

@@ -4,7 +4,7 @@ import { component$, useTask$ } from '@builder.io/qwik';
 export const HelloWorld = component$(() => {
   const a = Symbol();
   useTask$(() => {
-    // eslint-disable-next-line no-console
+    /* eslint no-console: [, { allow: ["log"] }] */
     console.log(a);
   });
   return <div></div>;

packages/eslint-plugin-qwik/tests/valid-lexical-scope/invalid-mutable.tsx

@@ -6,7 +6,7 @@ export const HelloWorld = component$(() => {
   const divRef = useSignal<{ offsetLeft: number }>();
 
   const handleMouseDown = $((e: MouseEvent) => {
-    // eslint-disable-next-line no-console
+    /* eslint no-console: [, { allow: ["log"] }] */
     console.log('working');
     startX = e.pageX - divRef.value!.offsetLeft;
   });

packages/eslint-plugin-qwik/tests/valid-lexical-scope/invalid-use-method-factory.tsx

@@ -7,7 +7,7 @@ export const HelloWorld = component$(() => {
   };
   const useMethod = getMethod();
   useTask$(() => {
-    // eslint-disable-next-line no-console
+    /* eslint no-console: [, { allow: ["log"] }] */
     console.log(useMethod);
   });
   return <div></div>;

packages/eslint-plugin-qwik/tests/valid-lexical-scope/invalid-use-method-inline.tsx

@@ -3,11 +3,11 @@ import { component$, useTask$ } from '@builder.io/qwik';
 
 export const HelloWorld = component$(() => {
   function useMethod() {
-    // eslint-disable-next-line no-console
+    /* eslint no-console: [, { allow: ["log"] }] */
     console.log('stuff');
   }
   useTask$(() => {
-    // eslint-disable-next-line no-console
+    /* eslint no-console: [, { allow: ["log"] }] */
     console.log(useMethod);
   });
   return <div></div>;

packages/eslint-plugin-qwik/tests/valid-lexical-scope/valid-capture-jsxoutput.tsx

@@ -9,7 +9,7 @@ export default component$(() => {
   state.foo = <div>Foo</div>;
 
   useTask$(() => {
-    // eslint-disable-next-line no-console
+    /* eslint no-console: [, { allow: ["log"] }] */
     console.log(state.foo);
   });
   return <></>;

packages/eslint-plugin-qwik/tests/valid-lexical-scope/valid-constant.tsx

@@ -7,7 +7,7 @@ export const HelloWorld = component$(() => {
   return (
     <div
       onClick$={() => {
-        // eslint-disable-next-line no-console
+        /* eslint no-console: [, { allow: ["log"] }] */
         console.log(a);
       }}
     ></div>

packages/eslint-plugin-qwik/tests/valid-lexical-scope/valid-no-serialize.tsx

@@ -10,7 +10,7 @@ export function getFn(): NoSerialize<() => void> {
 export const HelloWorld = component$(() => {
   const state: Value = { value: 12, fn: getFn() };
   useTask$(() => {
-    // eslint-disable-next-line no-console
+    /* eslint no-console: [, { allow: ["log"] }] */
     console.log(state.value);
   });
   return <div></div>;

packages/eslint-plugin-qwik/tests/valid-lexical-scope/valid-use-method-factory.tsx

@@ -19,7 +19,7 @@ export const HelloWorld = component$(() => {
     },
   };
   useTask$(() => {
-    // eslint-disable-next-line no-console
+    /* eslint no-console: [, { allow: ["log"] }] */
     console.log(useMethod, obj);
   });
   return <div></div>;

packages/eslint-plugin-qwik/tests/valid-lexical-scope/valid-use-task-getter.tsx

@@ -5,7 +5,7 @@ export const HelloWorld = component$(() => {
   }
   const a = getValue();
   useTask$(() => {
-    // eslint-disable-next-line no-console
+    /*   eslint no-console: [, { allow: ["log"] }] */
     console.log(a);
   });
   return <div></div>;

packages/eslint-plugin-qwik/tests/valid-lexical-scope/valid-use-task.tsx

@@ -6,7 +6,7 @@ export const HelloWorld = component$(() => {
   };
   const useMethod = getMethod();
   useTask$(() => {
-    // eslint-disable-next-line no-console
+    /* eslint no-console: [, { allow: ["log"] }] */
     console.log(useMethod);
   });
   return <div></div>;