Fix config and update examples

.changeset/stupid-monkeys-breathe.md

@@ -0,0 +1,5 @@
+---
+'eslint-config-widen': patch
+---
+
+Fix config and update examples.

README.md

@@ -30,22 +30,20 @@ list. If you don't need a specific configuration, simply remove it from the
 list.
 
 ```js
-import { base, typescript, react, playwright, jest } from 'eslint-config-widen'
+import { base, react, jest, playwright, typescript } from 'eslint-config-widen'
 
 export default [
-  // Base Widen configurations
-  base,
-  typescript,
-  react,
-
-  // Overrides for specific directories
-  {
-    files: ['e2e/**'],
-    ...playwright,
-  },
-  {
-    files: ['frontend/**'],
+  ...base,
+  ...typescript,
+  ...react,
+  ...[
+    // you can specify what to ignore by using the `ignores` key before any other rule
+    // this will filter out things we dont want this to run on
+    { ignores: ['*.test.*'] },
     ...jest,
-  },
+    // you can also override rules by specifying the rule and the new value
+    { files: ['*.spec.js'], rules: { 'jest/expect-expect': 'off' } },
+  ],
+  ...[{ files: ['e2e/**'] }, ...playwright],
 ]
 ```

eslint.config.mjs

@@ -18,7 +18,7 @@ const compat = new FlatCompat({
 
 export default [
   {
-    ignores: ['**/lib/'],
+    ignores: ['**/lib/', '**/packages/eslint-playground/'],
   },
   ...compat.extends(
     'eslint:recommended',

jest.config.js

@@ -0,0 +1,4 @@
+/** @type {import('@jest/types').Config.ProjectConfig} */
+module.exports = {
+  testPathIgnorePatterns: ['<rootDir>/packages/eslint-playground/'],
+}

packages/eslint-config-widen/README.md

@@ -27,22 +27,20 @@ list. If you don't need a specific configuration, simply remove it from the
 list.
 
 ```js
-import { base, typescript, react, playwright, jest } from 'eslint-config-widen'
+import { base, react, jest, playwright, typescript } from 'eslint-config-widen'
 
 export default [
-  // Base Widen configurations
-  base,
-  typescript,
-  react,
-
-  // Overrides for specific directories
-  {
-    files: ['e2e/**'],
-    ...playwright,
-  },
-  {
-    files: ['frontend/**'],
+  ...base,
+  ...typescript,
+  ...react,
+  ...[
+    // you can specify what to ignore by using the `ignores` key before any other rule
+    // this will filter out things we dont want this to run on
+    { ignores: ['*.test.*'] },
     ...jest,
-  },
+    // you can also override rules by specifying the rule and the new value
+    { files: ['*.spec.js'], rules: { 'jest/expect-expect': 'off' } },
+  ],
+  ...[{ files: ['e2e/**'] }, ...playwright],
 ]
 ```

packages/eslint-config-widen/package.json

@@ -10,6 +10,7 @@
   "files": [
     "lib"
   ],
+  "type": "module",
   "homepage": "https://github.com/Widen/eslint-config/tree/master/packages/eslint-config-widen#readme",
   "license": "ISC",
   "name": "eslint-config-widen",

packages/eslint-config-widen/src/base.ts

@@ -1,24 +1,21 @@
 import js from '@eslint/js'
+import prettier from 'eslint-plugin-prettier'
 import sort from 'eslint-plugin-sort'
 import widen from 'eslint-plugin-widen'
-import globals from 'globals'
 import babelParser from '@babel/eslint-parser'
+import sharedGlobals from './sharedGlobals.js'
 
 export default [
   {
     languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.es6,
-        ...globals.jest,
-        ...globals.node,
-      },
+      globals: sharedGlobals,
       parser: babelParser,
       parserOptions: {
         requireConfigFile: false,
       },
     },
     plugins: {
+      prettier,
       sort,
       widen,
     },
@@ -89,9 +86,11 @@
   },
   js.configs.recommended,
   {
-    files: ['**/*.js', '**/*.mjs'],
+    plugins: {
+      prettier,
+    },
     rules: {
-      'prettier/prettier': 'error', // Assuming you have `eslint-plugin-prettier` setup
+      ...prettier.configs.recommended.rules,
     },
   },
 ]

packages/eslint-config-widen/src/index.ts

@@ -1,25 +1,7 @@
-// index.js or index.mjs inside eslint-config-widen package
-import { Linter } from 'eslint'
-import baseConfig from './index.js'
-import jestConfig from './jest.js'
-import playwrightConfig from './playwright.js'
-import reactConfig from './react.js'
-import typescriptConfig from './typescript.js'
+import base from './base.js'
+import jest from './jest.js'
+import playwright from './playwright.js'
+import react from './react.js'
+import typescript from './typescript.js'
 
-export interface EslintConfig {
-  base: Linter.FlatConfig[]
-  typescript: Linter.FlatConfig[]
-  react: Linter.FlatConfig[]
-  playwright: Linter.FlatConfig[]
-  jest: Linter.FlatConfig[]
-}
-
-const configs = {
-  base: baseConfig,
-  jest: jestConfig,
-  playwright: playwrightConfig,
-  react: reactConfig,
-  typescript: typescriptConfig,
-} as unknown as EslintConfig
-
-export default configs
+export { base, jest, playwright, react, typescript }

packages/eslint-config-widen/src/playwright.ts

@@ -1,5 +1,7 @@
 import playwright from 'eslint-plugin-playwright'
 
+delete playwright.configs['playwright-test'].env
+
 export default [
   {
     plugins: {
@@ -32,5 +34,10 @@ export default [
       'playwright/require-top-level-describe': 'warn',
     },
   },
-  playwright.configs['playwright-test'],
+  {
+    ...playwright.configs['playwright-test'],
+    plugins: {
+      playwright,
+    },
+  },
 ]

packages/eslint-config-widen/src/react.ts

@@ -1,26 +1,66 @@
-import eslintJsxA11y from 'eslint-plugin-jsx-a11y'
-import eslintReact from 'eslint-plugin-react'
-import eslintReactHooks from 'eslint-plugin-react-hooks'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import sharedGlobals from './sharedGlobals.js'
+
+const languageOptions = {
+  globals: sharedGlobals,
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+}
 
 export default [
-  eslintReact.configs.recommended,
-  eslintReactHooks.configs.recommended,
-  eslintJsxA11y.configs.recommended,
+  {
+    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    languageOptions,
+    plugins: {
+      react,
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+    },
+  },
+  {
+    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    languageOptions,
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+    },
+  },
+  {
+    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    languageOptions,
+    plugins: {
+      'jsx-a11y': jsxA11y,
+    },
+    rules: {
+      ...jsxA11y.configs.recommended.rules,
+    },
+  },
   {
     files: ['*.tsx', '*.{spec,test}.{js,jsx}'],
+    languageOptions,
     rules: {
       'react/prop-types': 'off',
     },
   },
   {
     files: ['*.{spec,test}.{tsx,js,jsx}'],
+    languageOptions,
     rules: {
       'react/button-has-type': 'off',
       'react/display-name': 'off',
     },
   },
   {
     files: ['*.tsx', '*.{spec,test}.{js,jsx}'],
+    languageOptions,
     rules: {
       'jsx-a11y/click-events-have-key-events': 'warn',
       'jsx-a11y/label-has-associated-control': [

packages/eslint-config-widen/src/sharedGlobals.ts

@@ -0,0 +1,14 @@
+import globals from 'globals'
+
+// delete an invalid global that causes error because of the trailing space
+const browser = globals.browser
+delete browser['AudioWorkletGlobalScope ']
+
+const sharedGlobals = {
+  ...browser,
+  ...globals.es6,
+  ...globals.node,
+  ...globals.jest,
+}
+
+export default sharedGlobals

packages/eslint-config-widen/src/types.d.ts

@@ -8,3 +8,4 @@ declare module 'eslint-plugin-sort'
 declare module 'eslint-plugin-widen'
 declare module '@babel/eslint-parser'
 declare module 'eslint-plugin-playwright'
+declare module 'eslint-plugin-prettier'

packages/eslint-config-widen/src/typescript.ts

@@ -1,7 +1,7 @@
 import tseslint from 'typescript-eslint'
 
 export default [
-  tseslint.configs.recommended,
+  ...tseslint.configs.recommended,
   {
     files: ['*.ts', '*.tsx'],
     languageOptions: {

packages/eslint-config-widen/tsconfig.json

@@ -2,6 +2,12 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "lib",
-    "rootDir": "src"
+    "rootDir": "src",
+    "module": "esnext",
+    "esModuleInterop": true,
+    "target": "es2016"
+  },
+  "paths": {
+    "@/*": ["./src/*"]
   }
 }

packages/eslint-playground/README.md

@@ -0,0 +1,11 @@
+# eslint-playground
+
+A sample project that uses the eslint-config-widen to ensure things are working.
+Included is a file to correspond with each eslint plugin type which will throw
+lint errors.
+
+### To test updates:
+
+1. Run `yarn ts` in the base package any time you change the code in the
+   eslint-config-widen to regen the output.
+2. In the eslint-playground package run `yarn lint`

packages/eslint-playground/e2e/sample.spec.js

@@ -0,0 +1,11 @@
+import { expect, test } from 'fixtures'
+
+/**
+ * Basic test with errors to test playwright eslint config
+ */
+test.describe('Sample', () => {
+  test('should pass', async ({ page }) => {
+    console.log('wow')
+    await page.goto('https://playwright.dev/')
+  })
+})

packages/eslint-playground/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { base, react, jest, playwright, typescript } from 'eslint-config-widen'
+
+export default [
+  ...base,
+  ...typescript,
+  ...react,
+  ...[
+    // you can specify what to ignore by using the `ignores` key before any other rule
+    // this will filter out things we dont want this to run on
+    { ignores: ['*.test.*'] },
+    ...jest,
+    // you can also override rules by specifying the rule and the new value
+    { files: ['*.spec.js'], rules: { 'jest/expect-expect': 'off' } },
+  ],
+  ...[{ files: ['e2e/**'] }, ...playwright],
+]

packages/eslint-playground/hey.test.jsx

@@ -0,0 +1,6 @@
+/**
+ * Empty test to test jest eslint config errors
+ */
+it('should render', async () => {
+  console.log('hey')
+})

packages/eslint-playground/jsTest.js

@@ -0,0 +1,10 @@
+/**
+ * contains some failing rules to test base eslint config
+ */
+export function test(input = 'test', hey) {
+  try {
+    console.log('test')
+  } catch (e) {
+    throw e
+  }
+}

packages/eslint-playground/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "eslint-playground",
+  "packageManager": "[email protected]",
+  "scripts": {
+    "lint": "eslint ."
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.8",
+    "@babel/eslint-parser": "^7.24.8",
+    "eslint": "^9.6.0",
+    "eslint-config-widen": "workspace:^",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-playwright": "^1.6.2",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-sort": "^3.0.2",
+    "eslint-plugin-widen": "workspace:^"
+  },
+  "dependencies": {
+    "react": "^18.3.1"
+  }
+}

packages/eslint-playground/reactTest.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+
+export function test(unused, unused) {
+  console.log('wow')
+  return <button>Test</button>
+}