feat: ✨ browser compatibility checking

2023-09-09 18:30:16 -03:00
parent 3aed0f1708
commit 263e1edb63
5 changed files with 115 additions and 6 deletions
--- a/configs/js/package.json
+++ b/configs/js/package.json
@@ -44,6 +44,7 @@
    "@typescript-eslint/eslint-plugin": "^6.4.1",
    "@typescript-eslint/parser": "^6.4.1",
    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-compat": "^4.2.0",
    "eslint-plugin-i": "2.28.0-2",
    "eslint-plugin-jsdoc": "^46.5.0",
    "eslint-plugin-n": "^16.0.2",
--- a/configs/js/src/@types/eslint-plugin-compat.d.ts
+++ b/configs/js/src/@types/eslint-plugin-compat.d.ts
@@ -0,0 +1,24 @@
+/**
+ * @file
+ * Type declaration for the `eslint-plugin-compat` package in a attempt to make it
+ * compatible with the new flat config.
+ * @license MIT
+ * @author Guz013 <contact.guz013@gmail.com> (https://guz.one)
+ */
+
+import type { ESLint } from 'eslint';
+
+/**
+ * @summary Check the browser compatibility of your code.
+ *
+ * ---
+ * **Note:** Types in this project where overridden to be compatible with
+ * ESLint new flat config types. ESlint already has backwards compatibility
+ * for plugins not created in the new flat config.
+ * @see {@link https://www.npmjs.com/package/eslint-plugin-compat npm package}
+ */
+declare module 'eslint-plugin-compat' {
+	declare const plugin: ESLint.Plugin;
+	export default plugin;
+}
+
--- a/configs/js/src/configs/environments/browser.js
+++ b/configs/js/src/configs/environments/browser.js
@@ -8,11 +8,22 @@
 * @author Guz013 <contact.guz013@gmail.com> (https://guz.one)
 */

+import compatPlugin from 'eslint-plugin-compat';
+import globals from 'globals';
+
 import { createVariations } from '../../lib/rule-variations.js';
-import { jsFiles, tsFiles } from '../../constants.js';
+import { FILES } from '../../constants.js';

 const recommended = createVariations({
-	files: [...tsFiles, ...jsFiles],
+	files: FILES,
+	languageOptions: {
+		globals: {
+			...globals.browser,
+		},
+	},
+	plugins: {
+		compat: compatPlugin,
+	},
 	rules: {
 		...{}, // Plugin: eslint-plugin-unicorn
 		'unicorn/prefer-add-event-listener': 'error',
@@ -23,6 +34,9 @@ const recommended = createVariations({
 		'unicorn/prefer-keyboard-event-key': 'error',
 		'unicorn/prefer-modern-dom-apis': 'error',
 		'unicorn/prefer-query-selector': 'error',
+
+		...{}, // Plugin: eslint-plugin-compat
+		'compat/compat': 'error',
 	},
 });

@@ -33,5 +47,5 @@ const strict = createVariations({
 	},
 });

-const node = { recommended, strict };
-export default node;
+const browser = { recommended, strict };
+export default browser;
--- a/configs/js/src/configs/index.d.ts
+++ b/configs/js/src/configs/index.d.ts
@@ -86,9 +86,13 @@ const configs: Readonly<{
 	 */
 	environments: {
 		/**
-		 * @description
+		 * @summary
 		 * Browser environment configuration, use this if you are working
 		 * on a pure client-side or mixed codebase environment.
+		 * @description
+		 * Warns about possible incompatible Web APIs on your codebase, you can
+		 * configure the target browsers using {@link https://github.com/browserslist/browserslist browserslist}
+		 * on `package.json`.
 		 */
 		browser: {
 			/**
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,6 +54,9 @@ importers:
      eslint-import-resolver-typescript:
        specifier: ^3.6.0
        version: 3.6.0(@typescript-eslint/parser@6.4.1)(eslint-plugin-import@2.28.1)(eslint@8.47.0)
+      eslint-plugin-compat:
+        specifier: ^4.2.0
+        version: 4.2.0(eslint@8.47.0)
      eslint-plugin-i:
        specifier: 2.28.0-2
        version: 2.28.0-2(@typescript-eslint/parser@6.4.1)(eslint-import-resolver-typescript@3.6.0)(eslint@8.47.0)
@@ -794,6 +797,10 @@ packages:
      read-yaml-file: 1.1.0
    dev: true

+  /@mdn/browser-compat-data@5.3.15:
+    resolution: {integrity: sha512-h/luqw9oAmMF1C/GuUY/PAgZlF4wx71q2bdH+ct8vmjcvseCY32au8XmYy7xZ8l5VJiY/3ltFpr5YiO55v0mzg==}
+    dev: false
+
  /@neoconfetti/svelte@1.0.0:
    resolution: {integrity: sha512-SmksyaJAdSlMa9cTidVSIqYo1qti+WTsviNDwgjNVm+KQ3DRP2Df9umDIzC4vCcpEYY+chQe0i2IKnLw03AT8Q==}
    dev: true
@@ -1440,6 +1447,12 @@ packages:
      util: 0.12.5
    dev: false

+  /ast-metadata-inferer@0.8.0:
+    resolution: {integrity: sha512-jOMKcHht9LxYIEQu+RVd22vtgrPaVCtDRQ/16IGmurdzxvYbDd5ynxjnyrzLnieG96eTcAyaoj/wN/4/1FyyeA==}
+    dependencies:
+      '@mdn/browser-compat-data': 5.3.15
+    dev: false
+
  /ast-types@0.16.1:
    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
    engines: {node: '>=4'}
@@ -1496,6 +1509,17 @@ packages:
      wcwidth: 1.0.1
    dev: true

+  /browserslist@4.21.10:
+    resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001532
+      electron-to-chromium: 1.4.513
+      node-releases: 2.0.13
+      update-browserslist-db: 1.0.11(browserslist@4.21.10)
+    dev: false
+
  /buffer-crc32@0.2.13:
    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
    dev: true
@@ -1542,6 +1566,10 @@ packages:
    engines: {node: '>=6'}
    dev: true

+  /caniuse-lite@1.0.30001532:
+    resolution: {integrity: sha512-FbDFnNat3nMnrROzqrsg314zhqN5LGQ1kyyMk2opcrwGbVGpHRhgCWtAgD5YJUqNAiQ+dklreil/c3Qf1dfCTw==}
+    dev: false
+
  /cardinal@2.1.1:
    resolution: {integrity: sha512-JSr5eOgoEymtYHBjNWyjrMqet9Am2miJhlfKNdqLp6zoeAh0KN5dRAcxlecj5mAJrmQomgiOBj35xHLrFjqBpw==}
    hasBin: true
@@ -1827,6 +1855,10 @@ packages:
    engines: {node: '>=12'}
    dev: true

+  /electron-to-chromium@1.4.513:
+    resolution: {integrity: sha512-cOB0xcInjm+E5qIssHeXJ29BaUyWpMyFKT5RB3bsLENDheCja0wMkHJyiPl0NBE/VzDI7JDuNEQWhe6RitEUcw==}
+    dev: false
+
  /emoji-regex@8.0.0:
    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
    dev: true
@@ -1958,7 +1990,6 @@ packages:
  /escalade@3.1.1:
    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
    engines: {node: '>=6'}
-    dev: true

  /escape-string-regexp@1.0.5:
    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
@@ -2031,6 +2062,22 @@ packages:
      - supports-color
    dev: false

+  /eslint-plugin-compat@4.2.0(eslint@8.47.0):
+    resolution: {integrity: sha512-RDKSYD0maWy5r7zb5cWQS+uSPc26mgOzdORJ8hxILmWM7S/Ncwky7BcAtXVY5iRbKjBdHsWU8Yg7hfoZjtkv7w==}
+    engines: {node: '>=14.x'}
+    peerDependencies:
+      eslint: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@mdn/browser-compat-data': 5.3.15
+      ast-metadata-inferer: 0.8.0
+      browserslist: 4.21.10
+      caniuse-lite: 1.0.30001532
+      eslint: 8.47.0
+      find-up: 5.0.0
+      lodash.memoize: 4.1.2
+      semver: 7.5.4
+    dev: false
+
  /eslint-plugin-es-x@7.2.0(eslint@8.47.0):
    resolution: {integrity: sha512-9dvv5CcvNjSJPqnS5uZkqb3xmbeqRLnvXKK7iI5+oK/yTusyc46zbBZKENGsOfojm/mKfszyZb+wNqNPAPeGXA==}
    engines: {node: ^14.18.0 || >=16.0.0}
@@ -3044,6 +3091,10 @@ packages:
    dependencies:
      p-locate: 5.0.0

+  /lodash.memoize@4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+    dev: false
+
  /lodash.merge@4.6.2:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}

@@ -3213,6 +3264,10 @@ packages:
      whatwg-url: 5.0.0
    dev: true

+  /node-releases@2.0.13:
+    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
+    dev: false
+
  /normalize-package-data@2.5.0:
    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
    dependencies:
@@ -4261,6 +4316,17 @@ packages:
    engines: {node: '>= 4.0.0'}
    dev: true

+  /update-browserslist-db@1.0.11(browserslist@4.21.10):
+    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.21.10
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: false
+
  /uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
    dependencies: