v2.1.2 - NextJS and Eslint v9 compatability and other enhancements (#18)

* update pkg.json

* upgrade eslint dependencies

* upgrade eslint-flat-config dependencies

* upgrade docusaurus

* upgrade dependencies

* uniform script names for all examples

* fix react-eslint-v9 lint err

* wip

* fix vite linting issue

* rename next, react & vite apps

* note for Cannot redefine plugin @typescript-eslint err

* add more keywords

* add next import for flat-config

* port v2.1 of docs to current version

* dedicated usage section

* update readme for both pkgs

* renaming imports in code snippet

* add pt to changelog

.gitignore

@@ -1,2 +1,4 @@
 node_modules
 .DS_Store
+
+publish.sh

apps/eslint-config-docs/docs/changelog/v2.1.md

@@ -7,6 +7,40 @@ title: Changelog-v2.1
 
 # **What's changed?**
 
+## [2.1.2](https://github.com/nishkohli96/eslint-config/tree/v2.1.2)
+
+**Released - 17 December, 2024**
+
+- Introduce `next` import for `eslint-flat-config` making it compatible with `create-next-app` which scaffolds a NextJS v15 and eslint v9 application.
+- Add **"Quick Setup"** section in `README.md` of both packages.
+- Dedicated **"Usage"** sections for eslint v8 and v9.
+- Add `package.json` export for both packages.
+- Rename next, react and vite apps.
+- Fix _**Cannot redefine plugin "@typescript-eslint"**_ error for react and vite packages in eslint v9.
+- Added some more keywords in `package.json` for both configs
+- Change license of both packages from **ISC** to **MIT**.
+
+**Upgrade Dependencies**
+| Dependency | Version |
+|-|-|
+|[@stylistic/eslint-plugin](https://www.npmjs.com/package/@stylistic/eslint-plugin)|`2.9.0` to `2.12.1`|
+|[@typescript-eslint/eslint-plugin](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin)|`8.10.0` to `8.18.0`|
+|[@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser)|`8.10.0` to `8.18.0`|
+|[docusaurus](https://docusaurus.io/)|`3.5.2` to `3.6.3`|
+|[eslint](https://www.npmjs.com/package/eslint) and [@eslint/js](https://www.npmjs.com/package/@eslint/js)|`9.13.0` to `9.17.0`|
+|[eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y)|`6.10.0` to `6.10.2`|
+|[eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)|`7.37.1` to `7.37.2`|
+|[eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks)|`5.0.0` to `5.1.0`|
+|[globals](https://www.npmjs.com/package/globals)|`15.11.0` to `15.13.0`|
+|[prism-react-renderer](https://www.npmjs.com/package/prism-react-renderer)| `2.4.0` to `2.4.1` |
+|[typescript-eslint](https://www.npmjs.com/package/typescript-eslint)|`8.10.0` to `8.18.0`|
+
+## 2.1.1
+
+**Released - 21 October, 2024**
+
+- Correct link for documentation website in the README for both packages.
+
 ## [2.1.0](https://github.com/nishkohli96/eslint-config/tree/v2.1.0)
 
 **Released - 20 October, 2024**

apps/eslint-config-docs/docs/migration/eslint-8_to_9.md

@@ -39,12 +39,12 @@ The `react` folder import from `@nish1896/eslint-config/react` has been renamed
 Add the following content to this file -
 
 ```js
-import jsEslintConfig from '@nish1896/eslint-flat-config/js';
-import jsxEslintConfig from '@nish1896/eslint-flat-config/jsx';
+import jsConfig from '@nish1896/eslint-flat-config/js';
+import jsxConfig from '@nish1896/eslint-flat-config/jsx';
 
 export default [
-  ...jsEslintConfig,
-  ...jsxEslintConfig, 
+  ...jsConfig,
+  ...jsxConfig, 
   {
     rules: {}
   }

apps/eslint-config-docs/docs/usage/_category_.yml

@@ -0,0 +1,6 @@
+position: 4
+label: Usage
+collapsible: true
+collapsed: false
+customProps:
+  description: How to import and use this package in your eslint config file.

apps/eslint-config-docs/docs/usage/eslint-8.md

@@ -0,0 +1,59 @@
+---
+sidebar_position: 1
+sidebar_label: Eslint 8
+description: Import and use this configuration with eslint version 8.
+title: Usage with eslint 8
+---
+
+:::note
+If you are using eslint version ***8.57 or below***, use [@nish1896/eslint-config](https://www.npmjs.com/package/@nish1896/eslint-config) package.
+:::
+
+To set up ESLint, create a `.eslintrc`, `.eslintrc.js` or `.eslintrc.json` file in your project root. Use this file to specify the configuration for your application by referring to the relevant section of this guide.
+
+```sh
+touch .eslintrc.js
+```
+
+### NodeJS
+
+For NodeJS applications, use only the `js` configuration this package. This import is essential for all JavaScript-based projects, as it defines the recommended set of JavaScript-specific linting rules and ensures consistent code quality.
+
+```js
+module.exports = {
+  extends: [
+    "@nish1896/eslint-config/js"
+  ],
+  rules: {}
+}
+```
+
+### React & Vite
+
+The `react` import of this package contains the relevant rules for linting jsx code.
+
+```js
+module.exports = {
+  extends: [
+    "@nish1896/eslint-config/js",
+    "@nish1896/eslint-config/react"
+  ],
+  rules: {}
+}
+```
+
+### NextJS
+
+The existing `react` import caused conflicts with the [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) plugin, which prevented linting to execute. From version **2.1.0** onwards, a separate `next` import has been introduced to address these conflicts, since NextJS also provides its own set of eslint configuration.
+
+If you are using this configuration in a NextJS Application, it is highly recommended to upgrade to version `2.1.0` or above.
+
+```js
+module.exports = {
+  extends: [
+    "@nish1896/eslint-config/js",
+    "@nish1896/eslint-config/next"
+  ],
+  rules: {}
+}
+```

apps/eslint-config-docs/docs/usage/eslint-9.md

@@ -0,0 +1,87 @@
+---
+sidebar_position: 2
+sidebar_label: Eslint 9
+description: Import and use this configuration with eslint version 9.
+title: Usage with eslint 9
+---
+
+:::note
+Use [@nish1896/eslint-flat-config](https://www.npmjs.com/package/@nish1896/eslint-flat-config) for eslint version ***9 and above***.
+:::
+
+If you have specified `"type": "module"` in the `package.json` of your application, create a `eslint.config.js` file, else use `eslint.config.mjs` file. 
+
+```sh
+touch eslint.config.mjs
+```
+
+### NodeJS
+
+The `js` import extends rules from the [typescript-eslint](https://www.npmjs.com/package/typescript-eslint) package. 
+
+```js
+import jsConfig from '@nish1896/eslint-flat-config/js';
+
+export default [
+  ...jsConfig,
+  {
+    rules: {}
+  }
+];
+```
+
+### React & Vite
+
+Use both `js` and `jsx` rules from the package for React and Vite applications.
+
+```js
+import jsConfig from '@nish1896/eslint-flat-config/js';
+import jsxConfig from '@nish1896/eslint-flat-config/jsx';
+
+export default [
+  ...jsConfig,
+  ...jsxConfig,
+  {
+    rules: {}
+  }
+];
+```
+
+### NextJS
+
+A dedicated ESLint configuration for [Next.js](https://nextjs.org/) applications is now available since version **1.1.0** of the package. It integrates seamlessly with the `create-next-app` boilerplate, which sets up projects using Next.js version 15. This simplifies setup, ensuring compatibility and optimized linting rules tailored for Next.js applications.
+
+The `next` module in this package consolidates rules from both `js` and `jsx` configurations, extending the [stylistic](https://www.npmjs.com/package/@stylistic/eslint-plugin) plugin. It leverages the `typescript-eslint` and other React plugins provided by [eslint-config-next](https://www.npmjs.com/package/eslint-config-next), ensuring no need to duplicate plugin configurations for Next.js projects and to prevent the [redefine plugin error](#duplicate-import-error).
+
+```js
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+import nextConfig from '@nish1896/eslint-flat-config/next';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname
+});
+
+const eslintConfig = [
+  ...nextConfig,
+  ...compat.extends('next/core-web-vitals', 'next/typescript')
+];
+
+export default eslintConfig;
+```
+
+Make sure to preserve the order of the imports to avoid getting the `Error: 'React' is not defined.  no-undef` linting error, else this needs to be manually fixed in the code.
+
+### Duplicate Import Error
+
+For ESLint 9, the error _**"Cannot redefine plugin @typescript-eslint"**_ or anything similar occurs because the `@typescript-eslint` plugin is initialized twice: once from the `js` config of this package and then from your current configuration. To fix this:
+
+- Remove `@typescript-eslint` from the plugins key in your ESLint config.
+- Let the `js` of **@nish1896/eslint-config** import manage the plugin initialization.
+- Adjust any rule overrides under the rules key in your config.
+
+This approach ensures no duplication while retaining flexibility for rule customization.

apps/eslint-config-docs/docs/usage/index.md

@@ -0,0 +1,13 @@
+---
+sidebar_label: Introduction
+description: What plugins does this config uses and links to the list of all rules for these plugins.
+title: Introduction
+---
+
+# Usage
+
+This guide explains how to use the package with ESLint versions 8 and 9, detailing specific configurations for each. It provides module imports tailored for [Node.js](https://nodejs.org/en), [React](https://react.dev/), [Vite](https://vite.dev/) or [Next.js](https://nextjs.org/) applications, ensuring compatibility and streamlined integration for diverse project environments.
+
+**Both [@nish1896/eslint-config](https://www.npmjs.com/package/@nish1896/eslint-config) and [@nish1896/eslint-flat-config](https://www.npmjs.com/package/@nish1896/eslint-flat-config) contain the same set of rules.** 
+
+Example applications that utilize the `eslint` and `eslint-flat-config` can be viewed [here](https://github.com/nishkohli96/eslint-config/tree/main/examples).