APP-7509: update common ESLint configs to v9

.gitignore

@@ -1,6 +1,4 @@
 node_modules
 dist
-*.d.cts
-*.d.ts
 *.tgz
 *.tsbuildinfo

eslint.config.js

@@ -0,0 +1,16 @@
+import { baseConfig, createConfig } from '@viamrobotics/eslint-config';
+
+export default createConfig(
+  baseConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    ignores: ['**/dist/**'],
+  }
+);

package.json

@@ -17,28 +17,20 @@
   },
   "packageManager": "[email protected]+sha256.06e65a4965baff6d6097f9c8f75c35f6d420974dbc03d775009056a69edfd271",
   "devDependencies": {
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.13.1",
     "@types/semver": "^7.5.8",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.23.0",
+    "@typescript-eslint/parser": "^8.23.0",
     "@viamrobotics/eslint-config": "workspace:*",
     "@viamrobotics/prettier-config": "workspace:*",
     "@viamrobotics/typescript-config": "workspace:*",
-    "concurrently": "^9.1.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jest-dom": "^5.5.0",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-svelte": "^2.46.1",
-    "eslint-plugin-tailwindcss": "^3.17.5",
-    "eslint-plugin-testing-library": "^7.0.0",
-    "eslint-plugin-unicorn": "^56.0.1",
-    "eslint-plugin-vitest": "^0.5.4",
-    "prettier": "^3.4.1",
-    "semver": "^7.6.3",
-    "svelte": "^5.4.0",
-    "tailwindcss": "3.4.15",
-    "typescript": "^5.7.2",
-    "vitest": "^2.1.8"
+    "concurrently": "^9.1.2",
+    "eslint": "^9.20.0",
+    "prettier": "^3.5.0",
+    "semver": "^7.7.1",
+    "svelte": "^5.19.9",
+    "tailwindcss": "3.4.16",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.5"
   }
 }

packages/eslint-config-svelte/README.md

@@ -1,43 +1,46 @@
 # Viam's ESLint Config for Svelte
 
-This module contains [Viam][]'s shared [ESLint][] configurations for ESLint v8 in [Svelte][] projects.
+This module contains [Viam][]'s shared [ESLint][] configurations for ESLint v9 in [Svelte][] projects.
 
 [viam]: https://www.viam.com/
 [eslint]: https://eslint.org/
 [svelte]: https://svelte.dev/
 
 ## Base config
 
-Extend the [config](./eslint-config-svelte.js) in `.eslintrc.cjs`.
+Extend the [config](./eslint-config-svelte.js) in `eslint.config.js`.
+
+> [!TIP]
+> See the typescript-eslint docs on [type-aware linting](https://typescript-eslint.io/getting-started/typed-linting) to learn about how to configure `languageOptions`. Using `projectService: true` is recommended for new projects, but older projects may continue to use `project: './tsconfig.json'` for performance or compatibility reasons.
 
 ```shell
-pnpm add --save-dev \
-  eslint@^8.56.0 \
-  @viamrobotics/eslint-config-svelte \
-  @typescript-eslint/parser \
-  @typescript-eslint/eslint-plugin \
-  eslint-config-prettier \
-  eslint-plugin-jest-dom \
-  eslint-plugin-simple-import-sort \
-  eslint-plugin-svelte \
-  eslint-plugin-tailwindcss \
-  eslint-plugin-testing-library \
-  eslint-plugin-unicorn \
-  eslint-plugin-vitest
+pnpm add --save-dev eslint @viamrobotics/eslint-config-svelte
 ```
 
 ```js
-// .eslintrc.cjs
-'use strict';
-
-module.exports = {
-  root: true,
-  extends: ['@viamrobotics/eslint-config-svelte'],
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    projectService: true,
+// eslint.config.js
+import path from 'node:path';
+
+import {
+  baseSvelteConfig,
+  createConfig,
+} from '@viamrobotics/eslint-config-svelte';
+
+export default createConfig(
+  baseSvelteConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    settings: {
+      tailwindcss: {
+        config: path.join(import.meta.dirname, 'tailwind.config.ts'),
+      },
+    },
   },
-};
 ```
 
 ## Non-Svelte projects

packages/eslint-config-svelte/eslint-config-svelte.js

@@ -1,66 +1,91 @@
-'use strict';
+import jestDOM from 'eslint-plugin-jest-dom';
+import svelte from 'eslint-plugin-svelte';
+import tailwind from 'eslint-plugin-tailwindcss';
+import testingLibrary from 'eslint-plugin-testing-library';
+import globals from 'globals';
+import ts from 'typescript-eslint';
 
-const baseConfig = require('@viamrobotics/eslint-config');
+import { baseConfig, createConfig } from '@viamrobotics/eslint-config';
 
-module.exports = {
-  ...baseConfig,
-  extends: [
-    ...baseConfig.extends,
-    'plugin:tailwindcss/recommended',
-    'plugin:svelte/recommended',
-    'plugin:svelte/prettier',
-  ],
-  settings: {
-    svelte: {
-      ignoreWarnings: [
-        '@typescript-eslint/no-unsafe-assignment',
-        '@typescript-eslint/no-unsafe-member-access',
-      ],
-    },
-    tailwindcss: {
-      callees: ['classnames', 'cx'],
-      classRegex: '^(?:class|cx)$',
-    },
-  },
-  parserOptions: {
-    ...baseConfig.parserOptions,
-    extraFileExtensions: ['.svelte'],
-  },
-  overrides: [
-    ...baseConfig.overrides,
-    {
-      files: ['*.svelte'],
-      parser: 'svelte-eslint-parser',
+/**
+ * @typedef {import('@viamrobotics/eslint-config').ConfigArray} ConfigArray
+ */
+
+/** @type {ConfigArray} */
+const baseSvelteConfig = createConfig(
+  baseConfig,
+  tailwind.configs['flat/recommended'],
+  svelte.configs['flat/recommended'],
+  svelte.configs['flat/prettier'],
+
+  // Base options and settings
+  {
+    name: 'viam/svelte/base',
+    languageOptions: {
       parserOptions: {
-        parser: '@typescript-eslint/parser',
+        parser: ts.parser,
+        extraFileExtensions: ['.svelte'],
+        svelteFeatures: {
+          experimentalGenerics: true,
+        },
       },
-      rules: {
-        // Redundant with `svelte-check` and build
-        'svelte/valid-compile': 'off',
-        // Allows us to set option props to `undefined` by default
-        'no-undef-init': 'off',
+      globals: {
+        ...globals.browser,
       },
     },
-    // Rules for tests
-    {
-      files: ['**/__tests__/**', '**/*.test.ts', '**/*.spec.ts'],
-      extends: ['plugin:jest-dom/recommended', 'plugin:testing-library/dom'],
-      rules: {
-        'testing-library/await-async-events': [
-          'error',
-          { eventModule: ['fireEvent', 'userEvent'] },
-        ],
-        'testing-library/no-await-sync-events': 'off',
-        'testing-library/no-node-access': [
-          'error',
-          { allowContainerFirstChild: true },
-        ],
-        'testing-library/prefer-explicit-assert': [
-          'error',
-          { assertion: 'toBeInTheDocument' },
+    settings: {
+      svelte: {
+        ignoreWarnings: [
+          '@typescript-eslint/no-unsafe-assignment',
+          '@typescript-eslint/no-unsafe-member-access',
         ],
-        'testing-library/prefer-user-event': 'error',
       },
+      tailwindcss: {
+        callees: ['classnames', 'cx'],
+        classRegex: '^(?:class|cx)$',
+      },
+    },
+    rules: {
+      // Too many false positives
+      'svelte/require-stores-init': 'off',
     },
-  ],
-};
+  },
+
+  {
+    name: 'viam/svelte/svelte-base',
+    files: ['**/*.svelte'],
+    rules: {
+      // Allows us to set option props to `undefined` by default
+      'no-undef-init': 'off',
+    },
+  },
+
+  {
+    name: 'viam/svelte/component-testing',
+    extends: [
+      jestDOM.configs['flat/recommended'],
+      testingLibrary.configs['flat/dom'],
+    ],
+    files: ['**/__tests__/**', '**/*.test.ts', '**/*.spec.ts'],
+    rules: {
+      ...testingLibrary.configs['flat/dom'].rules,
+      'testing-library/await-async-events': [
+        'error',
+        { eventModule: ['fireEvent', 'userEvent'] },
+      ],
+      'testing-library/no-await-sync-events': 'off',
+      'testing-library/no-node-access': [
+        'error',
+        { allowContainerFirstChild: true },
+      ],
+      'testing-library/prefer-explicit-assert': [
+        'error',
+        { assertion: 'toBeInTheDocument' },
+      ],
+      'testing-library/prefer-user-event': 'error',
+    },
+  }
+);
+
+export { baseSvelteConfig };
+export { createConfig } from '@viamrobotics/eslint-config';

packages/eslint-config-svelte/package.json

@@ -3,9 +3,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.8.0",
+  "version": "1.0.0",
   "description": "ESLint configuration for Svelte projects at Viam.",
-  "type": "commonjs",
+  "type": "module",
   "main": "./eslint-config-svelte.js",
   "types": "./dist/eslint-config-svelte.d.ts",
   "exports": {
@@ -26,21 +26,28 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@viamrobotics/eslint-config": "workspace:*"
+    "@typescript-eslint/utils": "~8.23.0",
+    "@viamrobotics/eslint-config": "workspace:^",
+    "eslint-plugin-jest-dom": "~5.5.0",
+    "eslint-plugin-svelte": "~3.0.0 || ~3.0.0-next",
+    "eslint-plugin-tailwindcss": "~3.17.5",
+    "eslint-plugin-testing-library": "~7.1.1",
+    "globals": "^15.13.0",
+    "typescript-eslint": "~8.23.0"
   },
   "peerDependencies": {
-    "@typescript-eslint/eslint-plugin": ">=6 <9",
-    "@typescript-eslint/parser": ">=6 <9",
-    "eslint": ">=8 <9",
-    "eslint-config-prettier": ">=9 <10",
-    "eslint-plugin-jest-dom": ">=5 <6",
-    "eslint-plugin-simple-import-sort": ">=12 <13",
-    "eslint-plugin-svelte": ">=2 <3",
-    "eslint-plugin-tailwindcss": ">=3 <4",
-    "eslint-plugin-testing-library": ">=6 <8",
-    "eslint-plugin-unicorn": ">=47 <57",
-    "eslint-plugin-vitest": ">=0.5 <0.6",
+    "eslint": ">=9 <10",
+    "svelte": "*",
+    "tailwindcss": ">=3 <4",
     "typescript": ">=5 <6",
     "vitest": "*"
+  },
+  "peerDependenciesMeta": {
+    "svelte": {
+      "optional": true
+    },
+    "vitest": {
+      "optional": true
+    }
   }
 }

packages/eslint-config-svelte/tsconfig.json

@@ -8,5 +8,5 @@
     "outDir": "dist"
   },
   "references": [{ "path": "../eslint-config" }],
-  "include": ["*.js"]
+  "include": ["*.js", "typings"]
 }

packages/eslint-config-svelte/typings/eslint-plugin-tailwindcss.d.ts

@@ -0,0 +1,8 @@
+declare module 'eslint-plugin-tailwindcss' {
+  import type { Linter } from 'eslint';
+
+  const rules: Linter.RulesRecord;
+  const configs: { 'flat/recommended': Linter.Config };
+
+  export default { rules, configs };
+}