chore(eslint): migrate to eslint 9 flat config

eslint.config.js

@@ -0,0 +1,31 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import importPlugin from 'eslint-plugin-import';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactCompiler from 'eslint-plugin-react-compiler';
+
+export default tseslint.config(
+  { ignores: ['dist/', 'website/'] },
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+  importPlugin.flatConfigs.recommended,
+  jsxA11y.flatConfigs.recommended,
+  react.configs.flat.recommended,
+  react.configs.flat['jsx-runtime'],
+  reactHooks.configs['recommended-latest'],
+  reactCompiler.configs.recommended,
+  {
+    settings: {
+      'import/resolver': { typescript: true },
+      react: { version: 'detect' },
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+      ],
+    },
+  },
+);

examples/03_minecraft/src/app.tsx

@@ -1,14 +1,25 @@
 /* eslint react/no-unknown-property: "off" */
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 
 import { useState } from 'react';
 import { Canvas } from '@react-three/fiber';
+import type { ThreeElements } from '@react-three/fiber';
 import { Sky, PointerLockControls } from '@react-three/drei';
 import { Physics } from '@react-three/cannon';
 import { Ground } from './ground';
 import { Player } from './player';
 import { Cube, Cubes } from './cube';
 import './styles.css';
 
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements extends ThreeElements {}
+    }
+  }
+}
+
 // The original was made by Maksim Ivanow: https://www.youtube.com/watch?v=Lc2JvBXMesY&t=124s
 // This demo needs pointer-lock, that works only if you open it in a new window
 // Controls: WASD + left click

examples/03_minecraft/src/cube.tsx

@@ -67,6 +67,7 @@ export const Cube = (props: BoxProps) => {
       [x, y, z - 1],
     ] as (readonly [number, number, number])[];
     addCube(...dir[Math.floor(e.faceIndex! / 2)]!);
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return (

examples/03_minecraft/src/ground.tsx

@@ -11,6 +11,7 @@ export const Ground = () => {
     rotation: [-Math.PI / 2, 0, 0],
   }));
   const texture = useLoader(THREE.TextureLoader, grass);
+  // eslint-disable-next-line react-compiler/react-compiler
   texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
   return (
     <mesh ref={ref as never /* FIXME proper typing */} receiveShadow>

examples/03_minecraft/src/player.tsx

@@ -57,6 +57,7 @@ export const Player = () => {
   const velocity = useRef([0, 0, 0]);
   useEffect(
     () => api.velocity.subscribe((v) => (velocity.current = v)),
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );

package.json

@@ -29,7 +29,7 @@
     "src",
     "dist"
   ],
-  "packageManager": "pnpm@8.15.0",
+  "packageManager": "pnpm@9.4.0",
   "scripts": {
     "compile": "rm -rf dist && pnpm run '/^compile:.*/'",
     "compile:esm": "tsc -p tsconfig.esm.json",
@@ -57,39 +57,40 @@
     "fast-deep-equal": "^3.1.3"
   },
   "devDependencies": {
+    "@eslint/js": "^9.19.0",
     "@react-three/cannon": "^6.6.0",
-    "@react-three/drei": "^9.106.0",
-    "@react-three/fiber": "^8.16.7",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.13.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/three": "^0.165.0",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "happy-dom": "^14.12.0",
-    "prettier": "^3.3.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "three": "^0.165.0",
+    "@react-three/drei": "^9.121.3",
+    "@react-three/fiber": "^8.17.12",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.10.10",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@types/three": "^0.172.0",
+    "eslint": "^9.19.0",
+    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-compiler": "19.0.0-beta-decd7b8-20250118",
+    "eslint-plugin-react-hooks": "5.2.0-canary-de1eaa26-20250124",
+    "happy-dom": "^16.7.2",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "three": "^0.172.0",
     "ts-expect": "^1.3.0",
-    "typescript": "^5.4.5",
-    "valtio": "^2.0.0-rc.0",
-    "valtio-yjs": "link:.",
-    "vite": "^5.2.12",
-    "vitest": "^1.6.0",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.21.0",
+    "valtio": "^2.1.2",
+    "valtio-yjs": "link:",
+    "vite": "^6.0.11",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.0.4",
     "y-webrtc": "^10.3.0",
-    "y-websocket": "^2.0.3",
-    "yjs": "^13.6.15"
+    "y-websocket": "^2.1.0",
+    "yjs": "^13.6.23"
   },
   "peerDependencies": {
     "valtio": ">=2.0.0-rc.0"