@qlik/eslint-config 1.1.11 → 1.2.1

package/README.md

@@ -53,7 +53,7 @@ To get started, create `eslint.config.js` (if your package json has `"type": "mo
 If you are not building your project with TypeScript (using Webpack or Vite for example), then tell TypeScript to include
 all files by setting `"include": [".*", "**/*"]` in `tsconfig.json`.
 
-For a pure browser environment with no specific frameworks use:
+For a pure browser environment with a bundler and no specific framework use:
 
 ```js
 // @ts-check
@@ -67,7 +67,7 @@ export default qlik.compose(
 );
 ```
 
-Using React with vitest:
+Using React:
 
 ```js
 // @ts-check
@@ -81,6 +81,20 @@ export default qlik.compose(
 );
 ```
 
+Using Pure ES modules in browser:
+
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
+
+export default qlik.compose(
+  ...qlik.configs.esbrowser, // based on the recommended config and adds specific es module rules (file endings)
+  {
+    ignores: ["dist", "node_modules"],
+  },
+);
+```
+
 Using Svelte:
 
 ```js
@@ -141,6 +155,21 @@ export default qlik.compose(
 );
 ```
 
+Example: Using React with vitest:
+
+```js
+// @ts-check
+import qlik from "@qlik/eslint-config";
+
+export default qlik.compose(
+  ...qlik.configs.react, // based on the recommended config and adds react linting on .jsx and .tsx files
+  ...qlik.configs.vitest,       // enable vitest linting on files inside __test(s)__ folder
+  {
+    ignores: ["dist", "node_modules"],
+  },
+);
+```
+
 ## Using the named exports configs
 
 The different configs are also accessible through named imports. These configs can be used in specific scenarios where more

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlik/eslint-config",
-  "version": "1.1.11",
+  "version": "1.2.1",
   "description": "Qlik's ESLint configs",
   "repository": "git@github.com:qlik-oss/dev-tools-js.git",
   "license": "ISC",
@@ -15,34 +15,35 @@
     "!**/__tests__"
   ],
   "dependencies": {
-    "@eslint-react/eslint-plugin": "^1.26.2",
-    "@eslint/js": "^9.20.0",
-    "@typescript-eslint/parser": "^8.24.1",
-    "@typescript-eslint/utils": "^8.24.0",
-    "@vitest/eslint-plugin": "^1.1.31",
+    "@eslint-react/eslint-plugin": "^1.30.1",
+    "@eslint/js": "^9.21.0",
+    "@typescript-eslint/parser": "^8.26.0",
+    "@typescript-eslint/utils": "^8.26.0",
+    "@vitest/eslint-plugin": "^1.1.36",
     "confusing-browser-globals": "^1.0.11",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-import-resolver-typescript": "^3.8.0",
+    "eslint-config-prettier": "^10.0.2",
+    "eslint-import-resolver-typescript": "^3.8.3",
     "eslint-plugin-import-x": "^4.6.1",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-playwright": "^2.2.0",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-svelte": "^2.46.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-svelte": "^3.0.2",
     "eslint-plugin-testing-library": "^7.1.1",
-    "globals": "^15.15.0",
-    "svelte-eslint-parser": "^0.43.0",
-    "typescript-eslint": "^8.24.0"
+    "globals": "^16.0.0",
+    "svelte-eslint-parser": "^1.0.0",
+    "typescript-eslint": "^8.26.0"
   },
   "devDependencies": {
     "@types/confusing-browser-globals": "^1.0.3",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/eslint-plugin-jsx-a11y": "^6.10.0",
-    "@types/eslint__js": "^8.42.3",
-    "eslint": "^9.20.1",
-    "prettier": "^3.5.1",
-    "vitest": "^3.0.5",
+    "@types/eslint__js": "^9.14.0",
+    "@types/node": "^22.13.9",
+    "eslint": "^9.21.0",
+    "prettier": "^3.5.3",
+    "vitest": "^3.0.7",
     "@qlik/tsconfig": "0.3.0"
   },
   "peerDependencies": {

package/src/configs/esbrowser.js

@@ -0,0 +1,71 @@
+// @ts-check
+import prettier from "eslint-config-prettier";
+import globals from "globals";
+import { mergeConfigs } from "../utils/config.js";
+import { recommendedJS, recommendedTS } from "./recommended.js";
+
+/**
+ * @satisfies {import("../types/index.js").ESLintFlatConfig["rules"]}
+ */
+const browserEsmRules = {
+  // modify rules for browser esm here
+
+  // Ensure consistent use of file extension within the import path
+  // https://github.com/un-ts/eslint-plugin-import-x/blob/master/docs/rules/extensions.md
+  "import-x/extensions": [
+    "error",
+    "ignorePackages",
+    {
+      ts: "never",
+      mts: "never",
+      tsx: "never",
+    },
+  ],
+};
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const esbrowserJS = mergeConfigs(
+  // base it on the recommended javascript config
+  recommendedJS,
+  // add qlik's recommended node esm config for javascript
+  {
+    name: "esbrowser-js",
+    files: ["**/*.{js,mjs}"],
+    languageOptions: {
+      globals: globals.browser,
+      sourceType: "module",
+    },
+    rules: {
+      ...browserEsmRules,
+      // modify javascript specific rules for node esm here if needed
+    },
+  },
+  prettier,
+);
+
+/**
+ * @type {import("../types/index.js").ESLintFlatConfig}
+ */
+const esbrowserTS = mergeConfigs(
+  // base it on the recommended typescript config
+  recommendedTS,
+  // add qlik's recommended node esm config for typescript
+  {
+    name: "esbrowser-ts",
+    files: ["**/*.{ts,mts}"],
+    languageOptions: {
+      globals: globals.browser,
+      sourceType: "module",
+    },
+    rules: {
+      ...browserEsmRules,
+      // modify typescript specific rules for node esm here if needed
+    },
+  },
+  prettier,
+);
+
+export default [esbrowserJS, esbrowserTS];
+export { esbrowserJS, esbrowserTS };

package/src/index.d.ts

@@ -1,4 +1,5 @@
 import cjs, { cjsJS, cjsTS } from "./configs/cjs.js";
+import esbrowser, { esbrowserJS, esbrowserTS } from "./configs/esbrowser.js";
 import esm, { esmJS, esmTS } from "./configs/esm.js";
 import jest from "./configs/jest.js";
 import playwright from "./configs/playwright.js";
@@ -11,6 +12,7 @@ import compose from "./utils/compose.js";
 declare namespace qlikEslintConfig {
   export namespace configs {
     export { cjs };
+    export { esbrowser };
     export { esm };
     export { playwright };
     export { jest };
@@ -23,4 +25,16 @@ declare namespace qlikEslintConfig {
 }
 
 export default qlikEslintConfig;
-export { cjsJS, cjsTS, esmJS, esmTS, reactJS, reactTS, recommendedJS, recommendedTS, svelteJS };
+export {
+  cjsJS,
+  cjsTS,
+  esbrowserJS,
+  esbrowserTS,
+  esmJS,
+  esmTS,
+  reactJS,
+  reactTS,
+  recommendedJS,
+  recommendedTS,
+  svelteJS,
+};

package/src/index.js

@@ -1,5 +1,6 @@
 // Import ESLint configuration modules
 import cjs, { cjsJS, cjsTS } from "./configs/cjs.js";
+import esbrowser, { esbrowserJS, esbrowserTS } from "./configs/esbrowser.js";
 import esm, { esmJS, esmTS } from "./configs/esm.js";
 import jest from "./configs/jest.js";
 import playwright from "./configs/playwright.js";
@@ -15,6 +16,7 @@ import compose from "./utils/compose.js";
 const qlikEslintConfig = {
   configs: {
     cjs,
+    esbrowser,
     esm,
     jest,
     playwright,
@@ -28,4 +30,16 @@ const qlikEslintConfig = {
 
 export default qlikEslintConfig;
 
-export { cjsJS, cjsTS, esmJS, esmTS, reactJS, reactTS, recommendedJS, recommendedTS, svelteJS };
+export {
+  cjsJS,
+  cjsTS,
+  esbrowserJS,
+  esbrowserTS,
+  esmJS,
+  esmTS,
+  reactJS,
+  reactTS,
+  recommendedJS,
+  recommendedTS,
+  svelteJS,
+};