@qlik/eslint-config 1.0.4 → 1.1.1

package/README.md

@@ -37,13 +37,17 @@ export default qlik.compose(
 
 ### v1 notable changes
 
-- Updates [`@typescript-eslint/typescript-eslint`](https://github.com/typescript-eslint/typescript-eslint) to v8, this brings a few new rules. See article for v8 <https://typescript-eslint.io/blog/announcing-typescript-eslint-v8>
-- Moves from [`eslint-plugin-import`](https://github.com/import-js/eslint-plugin-import) to [`eslint-plugin-import-x`](https://github.com/un-ts/eslint-plugin-import-x). If you reference any of the `import/` rules you'll need to replace `import/` with `import-x/`.
+- Updates [`@typescript-eslint/typescript-eslint`](https://github.com/typescript-eslint/typescript-eslint) to v8, this brings
+a few new rules. See article for v8 <https://typescript-eslint.io/blog/announcing-typescript-eslint-v8>
+- Moves from [`eslint-plugin-import`](https://github.com/import-js/eslint-plugin-import) to [`eslint-plugin-import-x`](https://github.com/un-ts/eslint-plugin-import-x).
+If you reference any of the `import/` rules you'll need to replace `import/` with `import-x/`.
 - Some stylistic rules have been disabled (for example `function` vs arrow functions)
 
 ## Usage
 
-These configs works on both TypeScript and JavaSript out of the box. (as long as the file endings are any of `.js, .jsx, .mjs, .cjs, .ts, .tsx, .cts, .mts`)
+The default exports configs works on both TypeScript and JavaSript out of the box. (as long as the file endings are any of `.js, .jsx, .mjs, .cjs, .ts, .tsx, .cts, .mts`).
+The configs are eslint flat config arrays populated with configs that has appropriate file endings attached to them. Designed
+to diminish the amount of configuration needed in an `eslint.config.js` file.
 
 To get started, create `eslint.config.js` (if your package json has `"type": "module"`), otherwise create `eslint.config.mjs`.
 If you are not building your project with TypeScript (using Webpack or Vite for example), then tell TypeScript to include
@@ -59,7 +63,7 @@ export default qlik.compose(
   ...qlik.configs.recommended, // adds linting on .js, .jsx, .mjs, .cjs, .ts, .tsx, .cts, .mts files. use for pure browser environment
   {
     ignores: ["dist", "npm", "node_modules"],
-  }
+  },
 );
 ```
 
@@ -87,7 +91,7 @@ export default qlik.compose(
   ...qlik.configs.svelte, // based on the recommended config and adds svelte linting on .svelte files
   {
     ignores: ["dist", "node_modules"],
-  }
+  },
 );
 ```
 
@@ -102,7 +106,7 @@ export default qlik.compose(
   ...qlik.configs.svelte,
   {
     ignores: ["dist", "node_modules"],
-  }
+  },
 );
 ```
 
@@ -137,7 +141,141 @@ export default qlik.compose(
 );
 ```
 
-A config can be extended if needed. For example if the default file patterns needs to be altered.
+## Using the named exports configs
+
+The different configs are also accessible through named imports. These configs can be used in specific scenarios where more
+control of the configs are needed. The `extend` property can be used to apply a config on certain file patterns.
+
+Example only use javascript rules with react
+
+```js
+import qlik, { recommendedJS, reactJS } from "@qlik/eslint-config";
+
+export default qlik.compose(
+  reactJS,
+)
+```
+
+with typescript support
+
+```js
+import qlik, { recommendedJS, reactJS } from "@qlik/eslint-config";
+
+export default qlik.compose(
+  reactJS,
+  reactTS,
+)
+```
+
+This is equal to:
+
+```js
+import qlik from "@qlik/eslint-config";
+
+export default qlik.compose(
+  ...qlik.configs.react,
+)
+```
+
+The single configs can be useful together with the `extend` property. Below shows an example of a config
+that wants to use lint rules for node environment on a part of the code base.
+
+```js
+import qlik, { esmJS } from "@qlik/eslint-config";
+
+export default qlik.compose(
+  // apply recommended config to all files
+  ...qlik.configs.recommended,
+  // set node esm config on .js files inside the tools folder
+  {
+    files: ["tools/**/*.js"],
+    extend: [esmJS],
+  },
+)
+
+```
+
+This will take the configs in the `extend` array and perform a deep merge of whatever is defined in the object containing
+the `extend` property with the configs in the `extend` array and return them as separate configs. The deep merge has three
+exceptions. `files`, `ignores` and `globals` are always overwritten by the later config.
+
+```js
+import qlik, { esmJS } from "@qlik/eslint-config";
+
+export default qlik.compose(
+  {
+    extend: [...qlik.configs.recommended], // contains two configs (recommendedJS and recommendedTS)
+    files: ["only_want_lint_here/**/*.js"],
+  },
+)
+```
+
+This will result in two configs, each with the given file pattern like this:
+
+```js
+export default [
+  {
+    ...recommendedJS config
+    files: ["only_want_lint_here/**/*.js"],
+  },
+  {
+    ...recommendedTS config
+    files: ["only_want_lint_here/**/*.js"],
+  }
+]
+```
+
+### More examples with export
+
+One GOTCHA about the flat configs. If there's no `files` property in one of the configs in the config array it is applied
+to every file. So in the case of turning off a rule that belongs to specific config e.g. jest or vitest. The following
+approach does NOT work.
+
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
+
+export default qlik.compose(
+  ...qlik.configs.recommended,
+  qlik.configs.vitest, // <-- this is applied to files inside __test(s)__ folders by default for our convenience
+  {
+    rules: {
+      // I want to change this rule, but it doesn't work because it is applied to all files
+      "vitest/max-nested-describe": [
+        "error",
+        {
+          "max": 3
+        },
+      ],
+    },
+  },
+);
+```
+
+Here the `extend` feature becomes helpful
+
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
+
+export default qlik.compose(
+  ...qlik.configs.recommended,
+  {
+    extend: [qlik.configs.vitest],
+    rules: {
+      // This will add or overwrite the rule in the default config
+      "vitest/max-nested-describe": [
+        "error",
+        {
+          "max": 3
+        },
+      ],
+    },
+  },
+);
+```
+
+Example of changing the default file patterns on the vitest config.
 
 ```js
 // @ts-check
@@ -148,7 +286,7 @@ export default qlik.compose(
   {
     // adds vitest lint rules on the specified files with an altered rule
     files: ['**/my_tests_are_here/*.spec.ts']
-    extends [qlik.configs.vitest],
+    extend: [qlik.configs.vitest],
     rules: {
       "vitest/max-nested-describe": [
         "error",
@@ -158,10 +296,33 @@ export default qlik.compose(
       ]
     }
   },
+);
+```
+
+This will result in a final config looking like this:
+
+```js
+export default [
   {
-    ignores: ["dist", "npm", "node_modules"],
+    ...recommendedJS config
   },
-);
+  {
+    ...recommendedTS config
+  },
+  {
+    files: ['**/my_tests_are_here/*.spec.ts'],
+    ...vitest config
+    rules: {
+      ... vitest config rules,
+      "vitest/max-nested-describe": [
+        "error",
+        {
+          "max": 3
+        }
+      ]
+    }
+  }
+]
 ```
 
 <!-- prettier-ignore-end -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlik/eslint-config",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "description": "Qlik's ESLint configs",
   "repository": "git@github.com:qlik-oss/dev-tools-js.git",
   "license": "ISC",
@@ -58,6 +58,7 @@
     "check-types": "tsc --noEmit",
     "format:check": "prettier --check '**' --ignore-unknown",
     "format:write": "prettier --write '**' --ignore-unknown",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "vitest run && ./test/verify-configs.sh"
   }
 }

package/src/configs/cjs.js

@@ -2,47 +2,54 @@
 import globals from "globals";
 import { mergeConfigs } from "../utils/config.js";
 import { recommendedJS, recommendedTS } from "./recommended.js";
-import rules from "./rules/index.js";
+import nodeRules from "./rules/node.js";
 
 /**
  * @satisfies {import("../types/index.js").ESLintFlatConfig['rules']}
  */
 const cjsRules = {
+  ...nodeRules,
   // modify rules for node commonjs here
 };
 
 /**
  * @type {import("../types/index.js").ESLintFlatConfig}
  */
-const cjsJS = mergeConfigs(recommendedJS, {
-  name: "node-cjs-js",
-  files: ["**/*.{js,cjs}"],
-  languageOptions: {
-    globals: globals.node,
-    sourceType: "commonjs",
+const cjsJS = mergeConfigs(
+  // base it on the recommended javascript config
+  recommendedJS,
+  // add qlik's recommended node commonjs config for javascript
+  {
+    name: "node-cjs-js",
+    files: ["**/*.{js,cjs}"],
+    languageOptions: {
+      globals: globals.node,
+      sourceType: "commonjs",
+    },
+    rules: cjsRules,
   },
-  rules: {
-    ...rules.nodeRules,
-    ...cjsRules,
-  },
-});
+);
 
 /**
  * @type {import("../types/index.js").ESLintFlatConfig}
  */
-const cjsTS = mergeConfigs(recommendedTS, {
-  name: "node-cjs-ts",
-  files: ["**/*.{ts,cts}"],
-  languageOptions: {
-    globals: globals.node,
-    sourceType: "commonjs",
-  },
-  rules: {
-    ...rules.nodeRules,
-    ...cjsRules,
-    // modify ts specific rules for node here
+const cjsTS = mergeConfigs(
+  // base it on the recommended typescript config
+  recommendedTS,
+  // add qlik's recommended node commonjs config for typescript
+  {
+    name: "node-cjs-ts",
+    files: ["**/*.{ts,cts}"],
+    languageOptions: {
+      globals: globals.node,
+      sourceType: "commonjs",
+    },
+    rules: {
+      ...cjsRules,
+      // modify ts specific rules for node here
+    },
   },
-});
+);
 
 export default [cjsJS, cjsTS];
 export { cjsJS, cjsTS };

package/src/configs/esm.js

@@ -2,45 +2,55 @@
 import globals from "globals";
 import { mergeConfigs } from "../utils/config.js";
 import { recommendedJS, recommendedTS } from "./recommended.js";
+import nodeRules from "./rules/node.js";
 
 /**
  * @satisfies {import("../types/index.js").ESLintFlatConfig["rules"]}
  */
 const nodeEsmRules = {
-  // modify rules for node esm here
+  ...nodeRules,
   "import-x/extensions": ["error", "ignorePackages"],
+  // modify rules for node esm here
 };
 
 /**
  * @type {import("../types/index.js").ESLintFlatConfig}
  */
-const esmJS = mergeConfigs(recommendedJS, {
-  name: "node-esm-js",
-  files: ["**/*.{js,mjs}"],
-  languageOptions: {
-    globals: globals.node,
-    sourceType: "module",
+const esmJS = mergeConfigs(
+  // base it on the recommended javascript config
+  recommendedJS,
+  // add qlik's recommended node esm config for javascript
+  {
+    name: "node-esm-js",
+    files: ["**/*.{js,mjs}"],
+    languageOptions: {
+      globals: globals.node,
+      sourceType: "module",
+    },
+    rules: nodeEsmRules,
   },
-  rules: {
-    ...nodeEsmRules,
-  },
-});
+);
 
 /**
  * @type {import("../types/index.js").ESLintFlatConfig}
  */
-const esmTS = mergeConfigs(recommendedTS, {
-  name: "node-esm-ts",
-  files: ["**/*.{ts,mts}"],
-  languageOptions: {
-    globals: globals.node,
-    sourceType: "module",
-  },
-  rules: {
-    ...nodeEsmRules,
-    // modify ts specific rules for node esm here
+const esmTS = mergeConfigs(
+  // base it on the recommended typescript config
+  recommendedTS,
+  // add qlik's recommended node esm config for typescript
+  {
+    name: "node-esm-ts",
+    files: ["**/*.{ts,mts}"],
+    languageOptions: {
+      globals: globals.node,
+      sourceType: "module",
+    },
+    rules: {
+      ...nodeEsmRules,
+      // modify typescript specific rules for node esm here if needed
+    },
   },
-});
+);
 
 export default [esmJS, esmTS];
 export { esmJS, esmTS };

package/src/configs/jest.js

@@ -2,23 +2,26 @@
 import jestPlugin from "eslint-plugin-jest";
 import testingLibraryPlugin from "eslint-plugin-testing-library";
 import { mergeConfigs } from "../utils/config.js";
-import rules from "./rules/index.js";
 
 /**
  * @type {import("../types/index.js").ESLintFlatConfig}
  * config for jest https://github.com/jest-community/eslint-plugin-jest
  */
-const jest = mergeConfigs(jestPlugin.configs["flat/recommended"], {
-  name: "jest-js",
-  files: ["**/__test__/**/*.{js,jsx,ts,tsx}", "**/__tests__/**/*.{js,jsx,ts,tsx}"],
-  plugins: {
-    "testing-library": testingLibraryPlugin,
+const jest = mergeConfigs(
+  // base it on the recommended jest config
+  jestPlugin.configs["flat/recommended"],
+  // add testing-library plugin recommended config for react
+  testingLibraryPlugin.configs["flat/react"],
+  // add qlik's recommended jest config
+  {
+    name: "jest",
+    files: ["**/__test__/**/*.{js,jsx,ts,tsx}", "**/__tests__/**/*.{js,jsx,ts,tsx}"],
+    rules: {
+      // ...testingLibraryRules,
+      // modify rules from eslint-plugin-jest here
+    },
   },
-  rules: {
-    ...rules.testingLibraryRules,
-    // modify rules from eslint-plugin-jest here
-  },
-});
+);
 
 export default [jest];
 export { jest };

package/src/configs/playwright.js

@@ -6,14 +6,19 @@ import { mergeConfigs } from "../utils/config.js";
  * @type {import("../types/index.js").ESLintFlatConfig}
  * config for Playwright https://github.com/playwright-community/eslint-plugin-playwright
  */
-const playwright = mergeConfigs(playwrightEslint.configs["flat/recommended"], {
-  name: "playwright",
-  files: ["tests/**", "test/**"],
-  rules: {
-    ...playwrightEslint.configs["flat/recommended"].rules,
-    // modify rules from eslint-plugin-playwright here
+const playwright = mergeConfigs(
+  // base it on the recommended config
+  playwrightEslint.configs["flat/recommended"],
+  // add qlik's recommended playwright config
+  {
+    name: "playwright",
+    files: ["tests/**", "test/**"],
+    rules: {
+      ...playwrightEslint.configs["flat/recommended"].rules,
+      // modify rules from eslint-plugin-playwright here
+    },
   },
-});
+);
 
 export default [playwright];
 export { playwright };

package/src/configs/react.js

@@ -6,7 +6,9 @@ import eslintPluginReact from "eslint-plugin-react";
 import reactHooks from "eslint-plugin-react-hooks";
 import { mergeConfigs } from "../utils/config.js";
 import { recommendedJS, recommendedTS } from "./recommended.js";
-import rules from "./rules/index.js";
+import reactA11yRules from "./rules/react-a11y.js";
+import reactHooksRules from "./rules/react-hooks.js";
+import reactRules from "./rules/react.js";
 
 /** @type {any} */
 const reactPlugin = eslintPluginReact;
@@ -14,7 +16,7 @@ const reactPlugin = eslintPluginReact;
 /**
  * @type {import("../types/index.js").ESLintFlatConfig}
  */
-const reactConfig = {
+const reactBaseConfig = {
   languageOptions: {
     parserOptions: {
       ecmaFeatures: {
@@ -36,40 +38,54 @@ const reactConfig = {
   rules: {
     // react plugin
     ...reactPlugin.configs.flat.recommended.rules,
-    ...rules.reactRules,
+    ...reactRules,
     // jsx-a11y plugin
     ...jsxA11y.flatConfigs.recommended.rules,
-    ...rules.reactA11yRules,
+    ...reactA11yRules,
     ...react.configs.recommended.rules,
     // react-hooks plugin
     ...reactHooks.configs.recommended.rules,
-    ...rules.reactHooksRules,
+    ...reactHooksRules,
   },
 };
 
 /**
  * @type {import("../types/index.js").ESLintFlatConfig}
  */
-const reactJS = mergeConfigs(reactConfig, {
-  name: "react-js",
-  files: ["**/*.js", "**/*.jsx"],
-  rules: {
-    // turn on/off or modify js rules necessary for react
-    "react/jsx-filename-extension": [2, { extensions: [".js", ".jsx"] }],
+const reactJS = mergeConfigs(
+  // base it on the recommended javascript config
+  recommendedJS,
+  // add the base react config
+  reactBaseConfig,
+  // add qlik's recommended react config for javascript
+  {
+    name: "react-js",
+    files: ["**/*.js", "**/*.jsx"],
+    rules: {
+      // turn on/off or modify js rules necessary for react
+      "react/jsx-filename-extension": [2, { extensions: [".js", ".jsx"] }],
+    },
   },
-});
+);
 
 /**
  * @type {import("../types/index.js").ESLintFlatConfig}
  */
-const reactTS = mergeConfigs(reactConfig, {
-  name: "react-ts",
-  files: ["**/*.ts", "**/*.tsx"],
-  rules: {
-    // turn on/off or modify js/ts rules necessary for react
-    "react/jsx-filename-extension": [2, { extensions: [".js", ".jsx", ".ts", ".tsx"] }],
+const reactTS = mergeConfigs(
+  // base it on the recommended typescript config
+  recommendedTS,
+  // add the base react config
+  reactBaseConfig,
+  // add qlik's recommended react config for typescript
+  {
+    name: "react-ts",
+    files: ["**/*.ts", "**/*.tsx"],
+    rules: {
+      // turn on/off or modify js/ts rules necessary for react
+      "react/jsx-filename-extension": [2, { extensions: [".js", ".jsx", ".ts", ".tsx"] }],
+    },
   },
-});
+);
 
-export default [recommendedJS, reactTS, recommendedTS, reactTS];
+export default [reactJS, reactTS];
 export { reactJS, reactTS };

package/src/configs/recommended.js

@@ -5,9 +5,15 @@ import eslintPluginImportX from "eslint-plugin-import-x";
 import globals from "globals";
 import tsconfig from "typescript-eslint";
 import { mergeConfigs } from "../utils/config.js";
-import rules from "./rules/index.js";
+import eslintCoreRules from "./rules/eslint-core.js";
+import importXRules from "./rules/import-x.js";
+import typescriptRules from "./rules/typescript.js";
 
 const baseConfig = mergeConfigs(
+  // basic js config
+  js.configs.recommended,
+  // import-x plugin config
+  eslintPluginImportX.flatConfigs.recommended,
   {
     languageOptions: {
       globals: globals.browser,
@@ -17,13 +23,10 @@ const baseConfig = mergeConfigs(
       ecmaVersion: "latest",
       sourceType: "module",
     },
-  },
-  js.configs.recommended,
-  eslintPluginImportX.flatConfigs.recommended,
-  {
     rules: {
-      ...rules.importXRules,
-      ...rules.eslintCoreRules,
+      // add our recommended rules
+      ...eslintCoreRules,
+      ...importXRules,
     },
   },
 );
@@ -35,6 +38,7 @@ const recommendedJS = mergeConfigs(
   baseConfig,
   // tsconfig.configs.base sets eslint parser to use the typescript parser to parse .js files - handles all modern syntax
   tsconfig.configs.base,
+  // add qlik's recommended javascript config
   {
     name: "recommended-js",
     files: ["**/*.js", "**/*.mjs", "**/*.cjs"],
@@ -45,8 +49,15 @@ const recommendedJS = mergeConfigs(
  * @type {import("../types/index.js").ESLintFlatConfig}
  */
 const recommendedTS = mergeConfigs(
+  // base it on base config
   baseConfig,
+  // add recommended typescript config
+  ...tsconfig.configs.recommended,
+  // add import-x recommended typescript config
+  eslintPluginImportX.flatConfigs.typescript,
+  // add qlik's recommended typescript config
   {
+    name: "recommended-ts",
     files: ["**/*.ts", "**/*.tsx", "**/*.mts", "**/*.cts", "**/*.d.ts"],
     languageOptions: {
       parserOptions: {
@@ -54,12 +65,7 @@ const recommendedTS = mergeConfigs(
         projectService: true,
       },
     },
-  },
-  ...tsconfig.configs.recommended,
-  eslintPluginImportX.flatConfigs.typescript,
-  {
-    name: "recommended-ts",
-    rules: rules.typescriptRules,
+    rules: typescriptRules,
   },
 );
 

package/src/configs/svelte.js

@@ -4,45 +4,51 @@ import svelteParser from "svelte-eslint-parser";
 import tsEslint from "typescript-eslint";
 import { mergeConfigs } from "../utils/config.js";
 import { recommendedJS, recommendedTS } from "./recommended.js";
-import rules from "./rules/svelte.js";
+import svelteRules from "./rules/svelte.js";
 
 /**
  * @type {import("../types/index.js").ESLintFlatConfig}
  * config for Svelte https://github.com/sveltejs/eslint-plugin-svelte
  */
-const svelte = mergeConfigs(...eslintPluginSvelte.configs["flat/recommended"], {
-  name: "svelte",
-  files: ["**/*.svelte"],
-  languageOptions: {
-    parser: svelteParser,
-    parserOptions: {
-      parser: tsEslint.parser,
-      extraFileExtensions: [".svelte"],
+const svelteSvelte = mergeConfigs(
+  // base it on svelte plugin recommended config
+  ...eslintPluginSvelte.configs["flat/recommended"],
+  // add qlik's recommended svelte config
+  {
+    name: "svelte",
+    files: ["**/*.svelte"],
+    languageOptions: {
+      parser: svelteParser,
+      parserOptions: {
+        parser: tsEslint.parser,
+        extraFileExtensions: [".svelte"],
+      },
     },
-  },
-  rules: {
-    ...rules,
-    // modify rules from eslint-plugin-svelte here
+    rules: {
+      ...svelteRules,
+      // modify rules from eslint-plugin-svelte here
 
-    // Conflicting rules
-    // https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/OTHER_PLUGINS.md
-    "import-x/first": "off",
-    "import-x/no-duplicates": "off",
-    "import-x/no-mutable-exports": "off",
-    "import-x/no-unresolved": "off",
-    "import-x/prefer-default-export": "off",
-    "import-x/extensions": "off",
+      // Conflicting rules
+      // https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/OTHER_PLUGINS.md
+      "import-x/first": "off",
+      "import-x/no-duplicates": "off",
+      "import-x/no-mutable-exports": "off",
+      "import-x/no-unresolved": "off",
+      "import-x/prefer-default-export": "off",
+      "import-x/extensions": "off",
 
-    "@typescript-eslint/no-unsafe-call": "off",
-    "@typescript-eslint/no-unsafe-return": "off",
-    "@typescript-eslint/no-unsafe-argument": "off",
-    "@typescript-eslint/no-unsafe-assignment": "off",
-    "@typescript-eslint/no-unsafe-member-access": "off",
+      // Issues with TypeScript rules
+      "@typescript-eslint/no-unsafe-call": "off",
+      "@typescript-eslint/no-unsafe-return": "off",
+      "@typescript-eslint/no-unsafe-argument": "off",
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
 
-    // Issues with function types that define parameters
-    "no-unused-vars": "off",
+      // Issues with function types that define parameters
+      "no-unused-vars": "off",
+    },
   },
-});
+);
 
-export default [recommendedJS, recommendedTS, svelte];
-export { svelte };
+export default [recommendedJS, recommendedTS, svelteSvelte];
+export { svelteSvelte as svelte };

package/src/configs/vitest.js

@@ -1,36 +1,26 @@
 // @ts-check
 import vitestPlugin from "@vitest/eslint-plugin";
-// @ts-expect-error no types yet
 import testingLibraryPlugin from "eslint-plugin-testing-library";
 import { mergeConfigs } from "../utils/config.js";
-import rules from "./rules/index.js";
-
-/**
- * @satisfies {import("../types/index.js").ESLintFlatConfig["rules"]}
- */
-const vitestCommon = {};
 
 /**
  * @type {import("../types/index.js").ESLintFlatConfig}
  * config for jest https://github.com/jest-community/eslint-plugin-jest
  */
-const vitest = mergeConfigs(vitestCommon, {
-  name: "vitest-js",
-  plugins: {
-    vitest: vitestPlugin,
-    "testing-library": testingLibraryPlugin,
-  },
-
-  files: ["**/__test__/**/*.{js,jsx,ts,tsx}", "**/__tests__/**/*.{js,jsx,ts,tsx}"],
-
-  rules: {
-    // modify rules from eslint-plugin-vitest here
-    ...vitestPlugin.configs.recommended.rules, // you can also use vitest.configs.all.rules to enable all rules
-    ...rules.testingLibraryRules,
-    "no-magic-numbers": "off",
-    "@typescript-eslint/no-magic-numbers": "off",
+const vitest = mergeConfigs(
+  // base it on the recommended vitest config
+  vitestPlugin.configs.recommended,
+  // add testing-library plugin recommended config for react
+  testingLibraryPlugin.configs["flat/react"],
+  // add qlik's recommended vitest config
+  {
+    name: "vitest",
+    files: ["**/__test__/**/*.{js,jsx,ts,tsx}", "**/__tests__/**/*.{js,jsx,ts,tsx}"],
+    rules: {
+      // modify rules from eslint-plugin-vitest here
+    },
   },
-});
+);
 
 export default [vitest];
 export { vitest };

package/src/index.d.ts

@@ -1,4 +1,12 @@
-export default qlikEslintConfig;
+import cjs, { cjsJS, cjsTS } from "./configs/cjs.js";
+import esm, { esmJS, esmTS } from "./configs/esm.js";
+import jest from "./configs/jest.js";
+import playwright from "./configs/playwright.js";
+import react, { reactJS, reactTS } from "./configs/react.js";
+import recommended, { recommendedJS, recommendedTS } from "./configs/recommended.js";
+import svelte from "./configs/svelte.js";
+import vitest from "./configs/vitest.js";
+import compose from "./utils/compose.js";
 
 declare namespace qlikEslintConfig {
   export namespace configs {
@@ -13,12 +21,6 @@ declare namespace qlikEslintConfig {
   }
   export { compose };
 }
-import cjs from "./configs/cjs.js";
-import esm from "./configs/esm.js";
-import jest from "./configs/jest.js";
-import playwright from "./configs/playwright.js";
-import react from "./configs/react.js";
-import recommended from "./configs/recommended.js";
-import svelte from "./configs/svelte.js";
-import vitest from "./configs/vitest.js";
-import compose from "./utils/compose.js";
+
+export default qlikEslintConfig;
+export { cjsJS, cjsTS, esmJS, esmTS, reactJS, reactTS, recommendedJS, recommendedTS };

package/src/index.js

@@ -1,10 +1,10 @@
 // Import ESLint configuration modules
-import cjs from "./configs/cjs.js";
-import esm from "./configs/esm.js";
+import cjs, { cjsJS, cjsTS } from "./configs/cjs.js";
+import esm, { esmJS, esmTS } from "./configs/esm.js";
 import jest from "./configs/jest.js";
 import playwright from "./configs/playwright.js";
-import react from "./configs/react.js";
-import recommended from "./configs/recommended.js";
+import react, { reactJS, reactTS } from "./configs/react.js";
+import recommended, { recommendedJS, recommendedTS } from "./configs/recommended.js";
 import svelte from "./configs/svelte.js";
 import vitest from "./configs/vitest.js";
 import compose from "./utils/compose.js";
@@ -27,3 +27,5 @@ const qlikEslintConfig = {
 };
 
 export default qlikEslintConfig;
+
+export { cjsJS, cjsTS, esmJS, esmTS, reactJS, reactTS, recommendedJS, recommendedTS };

package/src/types/index.ts

@@ -44,9 +44,9 @@ interface ESLintFlatConfigWithExtend extends ESLintFlatConfig {
   extend?: ESLintFlatConfig[];
 }
 
-export type QlikEslintConfig = {
+type QlikEslintConfig = {
   configs: Record<string, ESLintFlatConfig[]>;
   compose: (...configs: ESLintFlatConfigWithExtend[]) => ESLintFlatConfig[];
 };
 
-export type { ESLintFlatConfig, ESLintFlatConfigWithExtend, ESLintLanguageOptions, ESLintPlugin };
+export type { ESLintFlatConfig, ESLintFlatConfigWithExtend, ESLintLanguageOptions, ESLintPlugin, QlikEslintConfig };

package/src/utils/compose.js

@@ -1,4 +1,7 @@
 // @ts-check
+
+import { mergeConfigs } from "./config.js";
+
 /**
  * Utility function to make it easy to strictly type your "Flat" config file
  *
@@ -7,17 +10,20 @@
  *
  * @example
  * ```js
- * import eslint from '@eslint/js';
- * import tseslint from 'typescript-eslint';
+ * import qlik from "@qlik/eslint-config";
  *
  * export default qlik.compose(
- *   eslint.configs.recommended,
- *   ...tseslint.configs.recommended,
+ *   ...qlik.configs.react,
+ *   ...qlik.configs.vitest,
  *   {
  *     rules: {
- *       '@typescript-eslint/array-type': 'error',
+ *       // Override rules if needed
  *     },
  *   },
+ *   // In its own object so it's global
+ *   {
+ *     ignores: ["dist", "node_modules", "script"],
+ *   },
  * );
  * ```
  */
@@ -30,6 +36,7 @@ export default function compose(...configs) {
     if (extendArr == null || extendArr.length === 0) {
       return config;
     }
+
     const undefinedExtensions = extendArr.reduce((acc, extension, extensionIndex) => {
       const maybeExtension = extension;
       if (maybeExtension == null) {
@@ -49,14 +56,8 @@ export default function compose(...configs) {
     return [
       ...extendArr.map((extension) => {
         const name = [config.name, extension.name].filter(Boolean).join("__");
-        return {
-          ...extension,
-          ...(config.files && { files: config.files }),
-          ...(config.ignores && { ignores: config.ignores }),
-          ...(name && { name }),
-        };
+        return mergeConfigs(extension, config, name ? { name } : {});
       }),
-      config,
     ];
   });
 }

package/src/utils/merge.js

@@ -1,5 +1,6 @@
 // these ones will only do shallow merge, but the merge function will do deep merge
 const noNeedToDeepMerge = ["plugins", "rules", "parser"];
+const overWrite = ["files", "globals", "ignores"];
 
 /**
  *
@@ -14,7 +15,9 @@ export const merge = (obj1, obj2) => {
   }
   const merged = { ...obj1 };
   Object.keys(obj2).forEach((key) => {
-    if (Array.isArray(obj1[key]) && Array.isArray(obj2[key])) {
+    if (overWrite.includes(key)) {
+      merged[key] = obj2[key];
+    } else if (Array.isArray(obj1[key]) && Array.isArray(obj2[key])) {
       merged[key] = [...new Set([...obj1[key], ...obj2[key]])];
     } else if (noNeedToDeepMerge.includes(key)) {
       merged[key] = { ...obj1[key], ...obj2[key] };

package/src/configs/rules/index.js

@@ -1,19 +0,0 @@
-import eslintCoreRules from "./eslint-core.js";
-import importXRules from "./import-x.js";
-import nodeRules from "./node.js";
-import reactA11yRules from "./react-a11y.js";
-import reactHooksRules from "./react-hooks.js";
-import reactRules from "./react.js";
-import testingLibraryRules from "./testing-library.js";
-import typescriptRules from "./typescript.js";
-
-export default {
-  eslintCoreRules,
-  importXRules,
-  nodeRules,
-  reactRules,
-  reactA11yRules,
-  reactHooksRules,
-  testingLibraryRules,
-  typescriptRules,
-};

package/src/configs/rules/testing-library.js

@@ -1,74 +0,0 @@
-// @ts-check
-
-/**
- * @satisfies {import("../../types/index.js").ESLintFlatConfig["rules"]}
- */
-const rules = {
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/await-async-events.md
-  "testing-library/await-async-events": ["error", { eventModule: "userEvent" }],
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/await-async-queries.md
-  "testing-library/await-async-queries": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/await-async-utils.md
-  "testing-library/await-async-utils": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-await-sync-events.md
-  "testing-library/no-await-sync-events": ["error", { eventModules: ["fire-event"] }],
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-await-sync-queries.md
-  "testing-library/no-await-sync-queries": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-container.md
-  "testing-library/no-container": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-debugging-utils.md
-  "testing-library/no-debugging-utils": "warn",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-dom-import.md
-  "testing-library/no-dom-import": ["error", "react"],
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-global-regexp-flag-in-query.md
-  "testing-library/no-global-regexp-flag-in-query": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-manual-cleanup.md
-  "testing-library/no-manual-cleanup": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-node-access.md
-  "testing-library/no-node-access": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-promise-in-fire-event.md
-  "testing-library/no-promise-in-fire-event": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-render-in-lifecycle.md
-  "testing-library/no-render-in-lifecycle": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-unnecessary-act.md
-  "testing-library/no-unnecessary-act": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-wait-for-multiple-assertions.md
-  "testing-library/no-wait-for-multiple-assertions": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-wait-for-side-effects.md
-  "testing-library/no-wait-for-side-effects": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-wait-for-snapshot.md
-  "testing-library/no-wait-for-snapshot": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-find-by.md
-  "testing-library/prefer-find-by": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-presence-queries.md
-  "testing-library/prefer-presence-queries": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-query-by-disappearance.md
-  "testing-library/prefer-query-by-disappearance": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-screen-queries.md
-  "testing-library/prefer-screen-queries": "error",
-
-  // https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/render-result-naming-convention.md
-  "testing-library/render-result-naming-convention": "error",
-};
-
-export default rules;