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-qwik support Eslint 9 and 8 simultaneously

e2e/qwik-cli-e2e/utils/index.ts

@@ -67,7 +67,7 @@ function replacePackagesWithLocalOnes(tmpDir: string) {
   for (const { name, absolutePath } of tarballConfig) {
     patchPackageJsonForPlugin(tmpDir, name, absolutePath);
   }
-  execSync('npm i', {
+  execSync('pnpm i', {
     cwd: tmpDir,
     // only output errors
     stdio: ['ignore', 'ignore', 'inherit'],

package.json

@@ -242,10 +242,10 @@
     "start": "concurrently \"npm:build.watch\"  \"npm:tsc.watch\" -n build,tsc -c green,cyan",
     "test": "pnpm build.full && pnpm test.unit && pnpm test.e2e",
     "test.e2e": "pnpm test.e2e.chromium && pnpm test.e2e.webkit",
-    "test.e2e.cli": "pnpm --filter qwik-cli-e2e e2e",
     "test.e2e.chromium": "playwright test starters --browser=chromium --config starters/playwright.config.ts",
     "test.e2e.chromium.debug": "PWDEBUG=1 playwright test starters --browser=chromium --config starters/playwright.config.ts",
     "test.e2e.city": "playwright test starters/e2e/qwikcity --browser=chromium --config starters/playwright.config.ts",
+    "test.e2e.cli": "pnpm --filter qwik-cli-e2e e2e",
     "test.e2e.firefox": "playwright test starters --browser=firefox --config starters/playwright.config.ts",
     "test.e2e.webkit": "playwright test starters --browser=webkit --config starters/playwright.config.ts",
     "test.rust": "make test",

packages/eslint-plugin-qwik/index.ts

@@ -9,8 +9,9 @@ import { preferClasslist } from './src/preferClasslist';
 import { unusedServer } from './src/unusedServer';
 import { useMethodUsage } from './src/useMethodUsage';
 import { validLexicalScope } from './src/validLexicalScope';
+import pkg from './package.json';
 
-export const rules = {
+const rules = {
   'use-method-usage': useMethodUsage,
   'valid-lexical-scope': validLexicalScope,
   'loader-location': loaderLocation,
@@ -24,37 +25,70 @@ export const rules = {
   'no-use-visible-task': noUseVisibleTask,
 };
 
-export const configs = {
+const recommendedRules = {
+  'qwik/use-method-usage': 'error',
+  'qwik/valid-lexical-scope': 'error',
+  'qwik/no-react-props': 'error',
+  'qwik/prefer-classlist': 'warn',
+  'qwik/jsx-no-script-url': 'warn',
+  'qwik/loader-location': 'warn',
+  'qwik/jsx-key': 'warn',
+  'qwik/unused-server': 'error',
+  'qwik/jsx-img': 'warn',
+  'qwik/jsx-a': 'warn',
+  'qwik/no-use-visible-task': 'warn',
+};
+const strictRules = {
+  'qwik/valid-lexical-scope': 'error',
+  'qwik/use-method-usage': 'error',
+  'qwik/loader-location': 'error',
+  'qwik/no-react-props': 'error',
+  'qwik/prefer-classlist': 'error',
+  'qwik/jsx-no-script-url': 'error',
+  'qwik/jsx-key': 'error',
+  'qwik/unused-server': 'error',
+  'qwik/jsx-img': 'error',
+  'qwik/jsx-a': 'error',
+  'qwik/no-use-visible-task': 'warn',
+};
+
+const configs = {
   recommended: {
     plugins: ['qwik'],
-    rules: {
-      'qwik/use-method-usage': 'error',
-      'qwik/valid-lexical-scope': 'error',
-      'qwik/no-react-props': 'error',
-      'qwik/prefer-classlist': 'warn',
-      'qwik/jsx-no-script-url': 'warn',
-      'qwik/loader-location': 'warn',
-      'qwik/jsx-key': 'warn',
-      'qwik/unused-server': 'error',
-      'qwik/jsx-img': 'warn',
-      'qwik/jsx-a': 'warn',
-      'qwik/no-use-visible-task': 'warn',
-    },
+    rules: recommendedRules,
   },
   strict: {
     plugins: ['qwik'],
-    rules: {
-      'qwik/valid-lexical-scope': 'error',
-      'qwik/use-method-usage': 'error',
-      'qwik/loader-location': 'error',
-      'qwik/no-react-props': 'error',
-      'qwik/prefer-classlist': 'error',
-      'qwik/jsx-no-script-url': 'error',
-      'qwik/jsx-key': 'error',
-      'qwik/unused-server': 'error',
-      'qwik/jsx-img': 'error',
-      'qwik/jsx-a': 'error',
-      'qwik/no-use-visible-task': 'warn',
-    },
+    rules: strictRules,
+  },
+};
+
+const qwikEslintPlugin = {
+  configs: {},
+  meta: {
+    name: pkg.name,
+    version: pkg.version,
   },
+  rules,
 };
+
+Object.assign(qwikEslintPlugin.configs, {
+  recommended: [
+    {
+      plugins: {
+        qwik: qwikEslintPlugin,
+      },
+      rules: recommendedRules,
+    },
+  ],
+  strict: [
+    {
+      plugins: {
+        qwik: qwikEslintPlugin,
+      },
+      rules: strictRules,
+    },
+  ],
+});
+
+export { configs, qwikEslintPlugin as default, rules };

packages/eslint-plugin-qwik/package.json

@@ -5,15 +5,14 @@
   "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/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 +31,8 @@
   "license": "MIT",
   "main": "dist/index.js",
   "peerDependencies": {
-    "eslint": "^8.57.0"
+    "eslint": "9.15.0",
+    "@types/eslint": "9.6.1"
   },
   "repository": {
     "type": "git",

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

@@ -1,7 +1,5 @@
 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';
@@ -14,22 +12,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/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>;

packages/qwik-labs/package.json

@@ -38,8 +38,8 @@
   ],
   "main": "./lib/index.qwik.mjs",
   "peerDependencies": {
-    "zod": "3.22.4",
-    "vite": "^5"
+    "vite": "^5",
+    "zod": "3.22.4"
   },
   "private": true,
   "qwik": "./lib/index.qwik.mjs",

packages/qwik/package.json

@@ -30,9 +30,9 @@
   "devDependencies": {
     "@builder.io/qwik": "workspace:^",
     "@builder.io/qwik-dom": "workspace:^",
+    "ignore": "5.3.1",
     "image-size": "1.1.1",
     "kleur": "4.1.5",
-    "ignore": "5.3.1",
     "ts-morph": "23.0.0"
   },
   "engines": {