Update eslint: new configuration, stricter rules and javascript code

Author: ddnexus

.eslintrc.json

@@ -8,7 +8,7 @@ export default defineConfig(
         e2e: {
             // supportFolder: "support",
             baseUrl: "http://0.0.0.0:8080",
-            setupNodeEvents(on, config) {
+            setupNodeEvents(on) {
                 htmlvalidate.install(on, {
                     rules: {
                         // a few frameworks use improper elements to render various roles

bun.lockb

@@ -16,7 +16,7 @@
 import "cypress-html-validate/dist/commands";
 import * as cypressSnapshots from "@cypress/snapshot";
 // @ts-expect-error: register does not exist
-cypressSnapshots.register();
+cypressSnapshots.register(); // eslint-disable-line  @typescript-eslint/no-unsafe-call
 afterEach(() => cy.htmlvalidate());
 // Silence issue https://github.com/quasarframework/quasar/issues/2233#issuecomment-1006506083
 // Cypress issue (open) https://github.com/cypress-io/cypress/issues/20341

e2e/.eslintrc.json

@@ -1,7 +1,6 @@
 // add a minimal declaration file
 declare module "@cypress/snapshot" {
     global {
-        // eslint-disable-next-line @typescript-eslint/no-namespace
         namespace Cypress {
             interface Chainable {
                 // Missing declaration from snapshots
@@ -10,4 +9,3 @@ declare module "@cypress/snapshot" {
         }
     }
 }
-

e2e/cypress.config.ts

@@ -5,13 +5,13 @@
   "type": "module",
   "devDependencies": {
     "@cypress/snapshot": "^2.1.7",
-    "@types/node": "20.14.0",
-    "cypress": "13.10.0",
+    "@types/node": "20.14.2",
+    "cypress": "13.11.0",
     "cypress-html-validate": "6.1.0",
     "eslint-plugin-cypress": "3.3.0",
     "eslint-plugin-promise": "6.2.0",
     "html-validate": "8.20.0",
-    "start-server-and-test": "2.0.3"
+    "start-server-and-test": "2.0.4"
   },
   "scripts": {
     "lint-fix": "eslint --fix cypress --ext .ts"

e2e/cypress/support/e2e.ts

@@ -1,5 +1,5 @@
 {
-    "include": ["./cypress/**/*.ts"],
+    "include": ["cypress/**/*.ts", "cypress.config.ts"],
     "compilerOptions": {
         "strict": true,
         "target": "ESNext",

e2e/cypress/support/snapshots.d.ts

@@ -0,0 +1,46 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import alignAssignments from 'eslint-plugin-align-assignments';
+import pluginCypress from 'eslint-plugin-cypress/flat'
+
+export default tseslint.config(
+  {
+    // We lint only typescript sources and tests. Everything else is generated.
+    files: ['src/pagy.ts', 'e2e/cypress/*.ts', 'e2e/cypress.config.ts'],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      ...tseslint.configs.strict,  // opinionated but ok for now
+      ],
+    plugins: {
+      alignAssignments: alignAssignments,
+      '@typescript-eslint': tseslint.plugin,
+    },
+    languageOptions: {
+      parser: tseslint.parser,
+        parserOptions: {
+        project: true,
+      },
+    },
+    rules: {
+      'alignAssignments/align-assignments': 'warn',
+      'semi': ["warn", "always", {"omitLastInOneLineBlock": true}],
+      '@typescript-eslint/array-type': 'error',
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/no-unsafe-argument': 'error',
+      '@typescript-eslint/no-unsafe-assignment': 'error',
+      '@typescript-eslint/no-unsafe-call': 'error',
+      '@typescript-eslint/no-unsafe-member-access': 'error',
+      '@typescript-eslint/no-unsafe-return': 'error',
+    }
+  },
+  {
+    files: ['e2e/cypress/*.ts', 'e2e/cypress.config.ts'],
+    ...pluginCypress.configs.recommended,
+    rules: {
+      'cypress/no-unnecessary-waiting': 'warn',
+      'cypress/unsafe-to-chain-command': 'error',
+    }
+  }
+);

e2e/package.json

@@ -13,8 +13,7 @@ const Pagy = (() => {
       let html = tokens.before;
       const series = sequels[width.toString()];
       const labels = labelSequels?.[width.toString()] ?? series.map((l) => l.toString());
-      for (const i in series) {
-        const item = series[i];
+      series.forEach((item, i) => {
         const label = labels[i];
         let filled;
         if (typeof item === "number") {
@@ -25,7 +24,7 @@ const Pagy = (() => {
           filled = fillIn(tokens.current, item, label);
         }
         html += typeof trimParam === "string" && item == 1 ? trim(filled, trimParam) : filled;
-      }
+      });
       html += tokens.after;
       el.innerHTML = "";
       el.insertAdjacentHTML("afterbegin", html);
@@ -64,7 +63,7 @@ const Pagy = (() => {
       link.href = url;
       link.click();
     };
-    ["change", "focus"].forEach((e) => input.addEventListener(e, input.select));
+    ["change", "focus"].forEach((e) => input.addEventListener(e, () => input.select()));
     input.addEventListener("focusout", action);
     input.addEventListener("keypress", (e) => {
       if (e.key === "Enter") {