refactor(eslint): modernize plugin deps and rule typing

.changeset/bright-impalas-fetch.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-qwik': patch
+---
+
+chore: refactor(eslint): modernize plugin deps and rule typing

.github/workflows/ci.yml

@@ -316,8 +316,12 @@ jobs:
           registry-url: https://registry.npmjs.org/
 
       - run: pnpm install
+      # Pin wasm-pack: npm 0.14.0+ downloads from drager/wasm-pack releases, which are
+      # currently missing on GitHub → "Error fetching release: 404". 0.13.1 uses rustwasm
+      # URLs that redirect to wasm-bindgen/wasm-pack assets. Local dev often uses
+      # `cargo install wasm-pack` (CONTRIBUTING) and avoids this path.
       - if: matrix.settings.wasm
-        run: pnpm install -w wasm-pack
+        run: pnpm install -w wasm-pack@0.13.1
 
       - name: Lint check
         if: matrix.settings.wasm

packages/eslint-plugin-qwik/index.ts

@@ -103,22 +103,17 @@ const qwikEslint9Plugin = {
   rules,
 } as const;
 
-const recommendedConfig = [
-  {
-    plugins: {
-      qwik: qwikEslint9Plugin,
+const createFlatConfig = (rules: TSESLint.FlatConfig.Rules) =>
+  [
+    {
+      plugins: {
+        qwik: qwikEslint9Plugin,
+      },
+      rules,
     },
-    rules: recommendedRulesLevels,
-  },
-] satisfies TSESLint.FlatConfig.ConfigArray;
+  ] satisfies TSESLint.FlatConfig.ConfigArray;
 
-const strictConfig = [
-  {
-    plugins: {
-      qwik: qwikEslint9Plugin,
-    },
-    rules: strictRulesLevels,
-  },
-] satisfies TSESLint.FlatConfig.ConfigArray;
+const recommendedConfig = createFlatConfig(recommendedRulesLevels);
+const strictConfig = createFlatConfig(strictRulesLevels);
 
 export { configs, qwikEslint9Plugin, rules };

packages/eslint-plugin-qwik/package.json

@@ -5,14 +5,14 @@
   "author": "Qwik Team",
   "bugs": "https://github.com/QwikDev/qwik/issues",
   "dependencies": {
-    "@typescript-eslint/utils": "^8.56.1",
+    "@typescript-eslint/utils": "^8.59.2",
     "jsx-ast-utils": "^3.3.5"
   },
   "devDependencies": {
     "@qwik.dev/core": "workspace:*",
     "@qwik.dev/router": "workspace:*",
     "@types/estree": "1.0.8",
-    "@typescript-eslint/rule-tester": "8.56.1",
+    "@typescript-eslint/rule-tester": "8.59.2",
     "redent": "4.0.0"
   },
   "engines": {

packages/eslint-plugin-qwik/src/jsxAtag.ts

@@ -1,4 +1,5 @@
 import { ESLintUtils, TSESTree } from '@typescript-eslint/utils';
+import { hasJsxAttribute } from './utils';
 
 const createRule = ESLintUtils.RuleCreator(() => 'https://qwik.dev/docs/advanced/dollar/');
 
@@ -9,7 +10,6 @@ export const jsxAtag = createRule({
     type: 'problem',
     docs: {
       description: 'For a perfect SEO score, always provide href attribute for <a> elements.',
-      recommended: 'warn',
     },
     fixable: 'code',
     schema: [],
@@ -29,15 +29,10 @@ export const jsxAtag = createRule({
           );
 
           if (!hasSpread) {
-            const hasHref = node.openingElement.attributes.some(
-              (attr) =>
-                attr.type === 'JSXAttribute' &&
-                attr.name.type === 'JSXIdentifier' &&
-                attr.name.name === 'href'
-            );
+            const hasHref = hasJsxAttribute(node.openingElement.attributes, 'href');
             if (!hasHref) {
               context.report({
-                node: node as any,
+                node,
                 messageId: 'noHref',
               });
             }

packages/eslint-plugin-qwik/src/jsxImg.ts

@@ -1,5 +1,6 @@
 import { ESLintUtils, TSESTree } from '@typescript-eslint/utils';
 import { QwikEslintExamples } from '../examples';
+import { findJsxAttribute, hasJsxAttribute } from './utils';
 
 const createRule = ESLintUtils.RuleCreator(
   (name) => `https://qwik.dev/docs/advanced/eslint/#${name}`
@@ -40,12 +41,7 @@ See https://qwik.dev/docs/integrations/image-optimization/#responsive-images`,
           );
 
           if (!hasSpread) {
-            const src = node.openingElement.attributes.find(
-              (attr) =>
-                attr.type === 'JSXAttribute' &&
-                attr.name.type === 'JSXIdentifier' &&
-                attr.name.name === 'src'
-            ) as TSESTree.JSXAttribute | undefined;
+            const src = findJsxAttribute(node.openingElement.attributes, 'src');
             if (src && src.value) {
               const literal: TSESTree.Literal | undefined =
                 src.value.type === 'Literal'
@@ -72,21 +68,11 @@ See https://qwik.dev/docs/integrations/image-optimization/#responsive-images`,
               }
             }
 
-            const hasWidth = node.openingElement.attributes.some(
-              (attr) =>
-                attr.type === 'JSXAttribute' &&
-                attr.name.type === 'JSXIdentifier' &&
-                attr.name.name === 'width'
-            );
-            const hasHeight = node.openingElement.attributes.some(
-              (attr) =>
-                attr.type === 'JSXAttribute' &&
-                attr.name.type === 'JSXIdentifier' &&
-                attr.name.name === 'height'
-            );
+            const hasWidth = hasJsxAttribute(node.openingElement.attributes, 'width');
+            const hasHeight = hasJsxAttribute(node.openingElement.attributes, 'height');
             if (!hasWidth || !hasHeight) {
               context.report({
-                node: node as any,
+                node,
                 messageId: 'noWidthHeight',
               });
             }

packages/eslint-plugin-qwik/src/jsxKey.ts

@@ -1,12 +1,16 @@
 import jsxAstUtils from 'jsx-ast-utils';
+import type { TSESTree } from '@typescript-eslint/utils';
 import { QwikEslintExamples } from '../examples';
+import { hasJsxImportSourceComment } from './utils';
 
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
 
-function isFunctionLikeExpression(node) {
-  return node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression';
+function isFunctionLikeExpression(
+  node: TSESTree.Node | false | null | undefined
+): node is TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression {
+  return node?.type === 'FunctionExpression' || node?.type === 'ArrowFunctionExpression';
 }
 
 const defaultOptions = {
@@ -60,19 +64,14 @@ export const jsxKey = {
   },
 
   create(context) {
-    const sourceCode = context.sourceCode ?? context.getSourceCode();
-    const modifyJsxSource = sourceCode
-      .getAllComments()
-      .some((c) => c.value.includes('@jsxImportSource'));
-    if (modifyJsxSource) {
+    if (hasJsxImportSourceComment(context)) {
       return {};
     }
     const options = Object.assign({}, defaultOptions, context.options[0]);
     const checkFragmentShorthand = options.checkFragmentShorthand;
-    const checkKeyMustBeforeSpread = options.checkKeyMustBeforeSpread;
     const warnOnDuplicates = options.warnOnDuplicates;
 
-    function checkIteratorElement(node) {
+    function checkIteratorElement(node: TSESTree.Node) {
       if (
         node.type === 'JSXElement' &&
         !jsxAstUtils.hasProp(node.openingElement.attributes, 'key')
@@ -89,15 +88,18 @@ export const jsxKey = {
       }
     }
 
-    function getReturnStatements(node, returnStatements: any[] = []) {
+    function getReturnStatements(
+      node: TSESTree.Node,
+      returnStatements: TSESTree.ReturnStatement[] = []
+    ) {
       if (node.type === 'IfStatement') {
         if (node.consequent) {
           getReturnStatements(node.consequent, returnStatements);
         }
         if (node.alternate) {
           getReturnStatements(node.alternate, returnStatements);
         }
-      } else if (Array.isArray(node.body)) {
+      } else if (node.type === 'BlockStatement') {
         node.body.forEach((item) => {
           if (item.type === 'IfStatement') {
             getReturnStatements(item, returnStatements);
@@ -112,27 +114,15 @@ export const jsxKey = {
       return returnStatements;
     }
 
-    function isKeyAfterSpread(attributes) {
-      let hasFoundSpread = false;
-      return attributes.some((attribute) => {
-        if (attribute.type === 'JSXSpreadAttribute') {
-          hasFoundSpread = true;
-          return false;
-        }
-        if (attribute.type !== 'JSXAttribute') {
-          return false;
-        }
-        return hasFoundSpread && jsxAstUtils.propName(attribute) === 'key';
-      });
-    }
-
     /**
      * Checks if the given node is a function expression or arrow function, and checks if there is a
      * missing key prop in return statement's arguments
      *
      * @param {ASTNode} node
      */
-    function checkFunctionsBlockStatement(node) {
+    function checkFunctionsBlockStatement(
+      node: TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression
+    ) {
       if (isFunctionLikeExpression(node)) {
         if (node.body.type === 'BlockStatement') {
           getReturnStatements(node.body)
@@ -150,9 +140,12 @@ export const jsxKey = {
      *
      * @param {ASTNode} node
      */
-    function checkArrowFunctionWithJSX(node) {
-      const isArrFn = node && node.type === 'ArrowFunctionExpression';
-      const shouldCheckNode = (n) => n && (n.type === 'JSXElement' || n.type === 'JSXFragment');
+    function checkArrowFunctionWithJSX(
+      node: TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression
+    ) {
+      const isArrFn = node.type === 'ArrowFunctionExpression';
+      const shouldCheckNode = (n: TSESTree.Node | null | undefined) =>
+        !!n && (n.type === 'JSXElement' || n.type === 'JSXFragment');
       if (isArrFn && shouldCheckNode(node.body)) {
         checkIteratorElement(node.body);
       }
@@ -196,16 +189,19 @@ export const jsxKey = {
         }
 
         const jsx = (node.type === 'ArrayExpression' ? node.elements : node.parent.children).filter(
-          (x) => x && x.type === 'JSXElement'
+          (x): x is TSESTree.JSXElement => !!x && x.type === 'JSXElement'
         );
         if (jsx.length === 0) {
           return;
         }
 
-        const map = {};
+        const keyGroups = new Map<string, TSESTree.JSXElement[]>();
         jsx.forEach((element) => {
           const attrs = element.openingElement.attributes;
-          const keys = attrs.filter((x) => x.name && x.name.name === 'key');
+          const keys = attrs.filter(
+            (x): x is TSESTree.JSXAttribute =>
+              x.type === 'JSXAttribute' && x.name.type === 'JSXIdentifier' && x.name.name === 'key'
+          );
 
           if (keys.length === 0) {
             if (node.type === 'ArrayExpression') {
@@ -218,10 +214,9 @@ export const jsxKey = {
         });
 
         if (warnOnDuplicates) {
-          Object.values(map)
-            .filter((v: any) => v.length > 1)
-            .forEach((v: any) => {
-              v.forEach((n) => {
+          for (const group of keyGroups.values()) {
+            if (group.length > 1) {
+              group.forEach((n) => {
                 if (!seen.has(n)) {
                   seen.add(n);
                   context.report({
@@ -230,7 +225,8 @@ export const jsxKey = {
                   });
                 }
               });
-            });
+            }
+          }
         }
       },
 

packages/eslint-plugin-qwik/src/loaderLocation.ts

@@ -54,7 +54,7 @@ If you understand this, you can disable this warning with:
   },
   create(context) {
     const routesDir = context.options?.[0]?.routesDir ?? 'src/routes';
-    const path = normalizePath(context.filename ?? context.getFilename());
+    const path = normalizePath(context.filename);
     const isLayout = /\/layout(|!|-[^/]+)\.(j|t)sx?$/.test(path);
     const isIndex = /\/index(|!|@[^/]+)\.(j|t)sx?$/.test(path);
     const isPlugin = /\/plugin(|@[^/]+)\.(j|t)sx?$/.test(path);