feat(preset-web): upgrade to flat eslint config

Note: ESLint v9 is deprecating the legacy
.eslintrc.json configuration file, so it has been
converted to the new flat TypeScript configuration
format

packages/preset-web/package.json

@@ -15,6 +15,16 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "type": "module",
+  "exports": {
+    ".": {
+      "default": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    },
+    "./eslint.config": {
+      "default": "./lib/eslint.config.js",
+      "types": "./lib/eslint.config.d.ts"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/alvis/presetter.git"
@@ -35,12 +45,14 @@
     "autoprefixer": "^10.0.0",
     "eslint-plugin-tailwindcss": "^3.0.0",
     "eslint-plugin-testing-library": "^6.0.0",
+    "globals": "^15.0.0",
     "postcss": "^8.0.0",
     "presetter": "workspace:*",
     "tailwindcss": "^3.0.0"
   },
   "devDependencies": {
-    "presetter": "workspace:*"
+    "presetter": "workspace:*",
+    "presetter-preset-esm": "workspace:*"
   },
   "dependencies": {
     "presetter-types": "workspace:*"

packages/preset-web/source/eslint.config.ts

@@ -0,0 +1,20 @@
+import globals from 'globals';
+
+import presetESMConfig from 'presetter-preset-esm/eslint.config';
+
+import tailwind from 'eslint-plugin-tailwindcss';
+import testing from 'eslint-plugin-testing-library';
+
+import type { Linter } from 'eslint';
+
+export default [
+  ...presetESMConfig,
+  ...tailwind.configs['flat/recommended'],
+  testing.configs['flat/dom'],
+  {
+    name: 'presetter-preset-web',
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+] as Linter.Config[];

packages/preset-web/source/index.ts

@@ -5,18 +5,22 @@ import type { PresetAsset } from 'presetter-types';
 
 const DIR = fileURLToPath(dirname(import.meta.url));
 
-// paths to the template directory
+// paths to the template directories
 const CONFIGS = resolve(DIR, '..', 'configs');
+const TEMPLATES = resolve(DIR, '..', 'templates');
 
 /**
  * get the list of templates provided by this preset
  * @returns list of preset templates
  */
 export default async function (): Promise<PresetAsset> {
   return {
+    extends: ['presetter-preset-esm'],
     supplementaryConfig: {
-      eslint: resolve(CONFIGS, 'eslint.yaml'),
       tsconfig: resolve(CONFIGS, 'tsconfig.yaml'),
     },
+    template: {
+      'eslint.config.ts': resolve(TEMPLATES, 'eslint.config.ts'),
+    },
   };
 }

packages/preset-web/templates/eslint.config.ts

@@ -0,0 +1,8 @@
+import presetConfig from 'presetter-preset-web/eslint.config';
+
+export default [
+  ...presetConfig,
+  {
+    ignores: ['{test}/**', 'types/**', 'generated/**', '{output}/**'],
+  },
+];

packages/preset-web/types/eslint-plugin-tailwindcss/index.d.ts

@@ -0,0 +1,21 @@
+import type { ESLint, Linter } from 'eslint';
+
+export default declare as ESLint.Plugin & {
+  configs: {
+    'flat/recommended': [
+      {
+        plugins: Linter.PluginsRecord;
+        languageOptions: Linter.LanguageOptions;
+      },
+      {
+        rules: Linter.RulesRecord;
+      },
+    ];
+    'recommended': {
+      plugins: string[];
+      languageOptions: Linter.LanguageOptions;
+      rules: Linter.RulesRecord;
+    };
+  };
+  rules: Linter.RulesRecord;
+};

packages/preset-web/types/eslint-plugin-testing-library/index.d.ts

@@ -0,0 +1,23 @@
+import type { ESLint, Linter } from 'eslint';
+
+export default declare as ESLint.Plugin & {
+  configs: {
+    'flat/dom': {
+      plugins: Linter.PluginsRecord;
+      rules: Linter.RulesRecord;
+    };
+    'flat/react': {
+      plugins: Linter.PluginsRecord;
+      rules: Linter.RulesRecord;
+    };
+    'dom': {
+      plugins: string[];
+      rules: Linter.RulesRecord;
+    };
+    'react': {
+      plugins: string[];
+      rules: Linter.RulesRecord;
+    };
+  };
+  rules: Linter.RulesRecord;
+};