Update ESLint to v9

.github/workflows/main.yml

@@ -24,6 +24,12 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Setup ESLint cache
+        uses: actions/cache@v4
+        with:
+          path: ./.eslintcache
+          key: ${{ runner.os }}-eslint-${{ hashFiles('**/pnpm-lock.yaml', '**/eslint.config.mjs') }}
+
       - name: Lint
         run: pnpm run lint
 

.gitignore

@@ -4,3 +4,4 @@ dist
 *.iml
 .idea/
 .log
+.eslintcache

eslint.config.mjs

@@ -0,0 +1,67 @@
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import react from 'eslint-plugin-react';
+import vue from 'eslint-plugin-vue';
+import tsParser from '@typescript-eslint/parser';
+
+export default [
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...vue.configs['flat/recommended'],
+  react.configs.flat.recommended,
+  {
+    files: ['**/*.{js,mjs}'],
+    rules: {
+      semi: ['error', 'always'],
+      'no-console': 'error'
+    }
+  },
+  {
+    files: ['**/*.ts'],
+    languageOptions: {
+      parser: tsParser
+    },
+    rules: {
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      'no-console': 'error'
+    }
+  },
+  {
+    files: ['**/*.tsx'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true
+        }
+      }
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    },
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'no-console': 'error'
+    },
+  },
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parserOptions: {
+        extraFileExtensions: ['.vue'],
+        parser: tsParser
+      }
+    },
+    rules: {
+      'vue/multi-word-component-names': 'off',
+      'no-console': 'error'
+    }
+  }
+];

package.json

@@ -10,36 +10,38 @@
     "scripts": {
         "dev": "pnpm run --parallel dev",
         "build": "pnpm run --recursive build",
-        "lint": "eslint 'packages/*/{src,demo}/*.{ts,tsx,vue,js}'",
+        "lint": "eslint 'packages/*/{src,demo}/*.{ts,tsx,vue,js}' --cache",
         "lint:fix": "pnpm run lint --fix",
         "test:ci": "pnpm run lint:fix && pnpm run build",
         "release:major": "lerna version major",
         "release:minor": "lerna version minor",
         "release:patch": "lerna version patch"
     },
     "devDependencies": {
+        "@eslint/js": "9.13.0",
         "@preact/preset-vite": "2.9.1",
-        "@types/node": "22.5.5",
-        "@types/react": "18.3.8",
-        "@types/react-dom": "18.3.0",
-        "@typescript-eslint/eslint-plugin": "8.6.0",
-        "@typescript-eslint/parser": "8.6.0",
-        "@vitejs/plugin-react": "4.3.1",
+        "@types/node": "22.8.1",
+        "@types/react": "18.3.12",
+        "@types/react-dom": "18.3.1",
+        "@typescript-eslint/eslint-plugin": "8.11.0",
+        "@typescript-eslint/parser": "8.11.0",
+        "@vitejs/plugin-react": "4.3.3",
         "@vitejs/plugin-vue": "5.1.4",
-        "@vue/compiler-sfc": "3.5.8",
-        "@vue/eslint-config-typescript": "13.0.0",
-        "eslint": "8.57.1",
-        "eslint-plugin-react": "7.36.1",
-        "eslint-plugin-vue": "9.28.0",
+        "@vue/compiler-sfc": "3.5.12",
+        "@vue/eslint-config-typescript": "14.1.3",
+        "eslint": "9.13.0",
+        "eslint-plugin-react": "7.37.2",
+        "eslint-plugin-vue": "9.30.0",
         "lerna": "8.1.8",
-        "preact": "10.24.0",
+        "preact": "10.24.3",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "typescript": "5.6.2",
-        "vite": "5.4.7",
+        "typescript": "5.6.3",
+        "typescript-eslint": "8.11.0",
+        "vite": "5.4.10",
         "vite-plugin-banner": "0.8.0",
-        "vite-plugin-dts": "4.2.1",
-        "vue": "3.5.8",
-        "vue-tsc": "2.1.6"
+        "vite-plugin-dts": "4.3.0",
+        "vue": "3.5.12",
+        "vue-tsc": "2.1.8"
     }
 }

packages/preact/src/SelectionArea.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-use-before-define */
 import VanillaSelectionArea from '@viselect/vanilla';
 import {SelectionEvents, PartialSelectionOptions} from '@viselect/vanilla';
 import {createContext, createRef, FunctionalComponent, JSX} from 'preact';

packages/react/src/SelectionArea.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-use-before-define */
 import VanillaSelectionArea from '@viselect/vanilla';
 import {SelectionEvents, PartialSelectionOptions} from '@viselect/vanilla';
 import React, {useEffect, createContext, useContext, useRef, useState} from 'react';

packages/vanilla/demo/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import SelectionArea from '../src';
 import './index.css';
 
@@ -40,7 +41,7 @@ const selection = new SelectionArea({
     }
 });
 
-/* eslint-disable no-console */
+
 selection
     .on('beforestart', (evt) => console.log('beforestart', evt))
     .on('start', (evt) => console.log('start', evt))

packages/vanilla/src/EventEmitter.ts

@@ -32,7 +32,6 @@ export class EventTarget<Events extends EventMap> {
     }
 
     // Let's also support on, off and emit like node
-    /* eslint-disable no-invalid-this */
     public on = this.addEventListener;
     public off = this.removeEventListener;
     public emit = this.dispatchEvent;

packages/vanilla/src/index.ts

@@ -749,7 +749,6 @@ export default class SelectionArea extends EventTarget<SelectionEvents> {
         super.unbindAllListeners();
     }
 
-    /* eslint-disable no-invalid-this */
     disable = this._toggleStartEvents.bind(this, false);
     enable = this._toggleStartEvents;
 

packages/vue/demo/App.vue

@@ -1,29 +1,50 @@
 <template>
-    <h1>Vue</h1>
-
-    <SelectionArea class="container green"
-                   :options="{selectables: '.selectable'}"
-                   @move="onMove"
-                   @start="onStart">
-        <div v-for="id of range(42)" :key="id" :data-key="id"
-             class="selectable" :class="{selected: selected.has(id)}"/>
-    </SelectionArea>
-
-    <SelectionArea class="container blue"
-                   :options="{selectables: '.selectable'}"
-                   @move="onMove"
-                   @start="onStart">
-        <div v-for="id of range(42, 42)" :key="id" :data-key="id"
-             class="selectable" :class="{selected: selected.has(id)}"/>
-    </SelectionArea>
-
-    <SelectionArea class="container red"
-                   :options="{selectables: '.selectable'}"
-                   @move="onMove"
-                   @start="onStart">
-        <div v-for="id of range(400, 84)" :key="id" :data-key="id"
-             class="selectable" :class="{selected: selected.has(id)}"/>
-    </SelectionArea>
+  <h1>Vue</h1>
+
+  <SelectionArea
+    class="container green"
+    :options="{selectables: '.selectable'}"
+    @move="onMove"
+    @start="onStart"
+  >
+    <div
+      v-for="id of range(42)"
+      :key="id"
+      :data-key="id"
+      class="selectable"
+      :class="{selected: selected.has(id)}"
+    />
+  </SelectionArea>
+
+  <SelectionArea
+    class="container blue"
+    :options="{selectables: '.selectable'}"
+    @move="onMove"
+    @start="onStart"
+  >
+    <div
+      v-for="id of range(42, 42)"
+      :key="id"
+      :data-key="id"
+      class="selectable"
+      :class="{selected: selected.has(id)}"
+    />
+  </SelectionArea>
+
+  <SelectionArea
+    class="container red"
+    :options="{selectables: '.selectable'}"
+    @move="onMove"
+    @start="onStart"
+  >
+    <div
+      v-for="id of range(400, 84)"
+      :key="id"
+      :data-key="id"
+      class="selectable"
+      :class="{selected: selected.has(id)}"
+    />
+  </SelectionArea>
 </template>
 
 <script lang="ts" setup>

packages/vue/src/SelectionArea.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="container">
-    <slot/>
+    <slot />
   </div>
 </template>