feat: support new flat config (#468)

close #455

.changeset/fifty-vans-vanish.md

@@ -0,0 +1,6 @@
+---
+"eslint-mdx": minor
+"eslint-plugin-mdx": minor
+---
+
+feat: add metadata for parser, processor and plugin

.changeset/shy-mayflies-dress.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-mdx": minor
+---
+
+feat: support new flat config - close #455

README.md

@@ -32,6 +32,8 @@
 - [Install](#install)
 - [Notice](#notice)
 - [Usage](#usage)
+  - [Classic](#classic)
+  - [Flat Config](#flat-config)
 - [Parser Options](#parser-options)
 - [Rules](#rules)
   - [mdx/remark](#mdxremark)
@@ -74,26 +76,58 @@ See [#251](https://github.com/mdx-js/eslint-mdx/issues/251#issuecomment-73613922
 
 ## Usage
 
-1. In your ESLint 8+ config file, just add:
-
-   ```jsonc
-   {
-     "extends": ["plugin:mdx/recommended"],
-     // optional, if you want to lint code blocks at the same time
-     "settings": {
-       "mdx/code-blocks": true,
-       // optional, if you want to disable language mapper, set it to `false`
-       // if you want to override the default language mapper inside, you can provide your own
-       "mdx/language-mapper": {}
-     }
-   }
-   ```
-
-2. Make sure ESLint knows to run on `.md` or `.mdx` files:
-
-   ```sh
-   eslint . --ext js,md,mdx
-   ```
+### Classic
+
+`.eslintrc` file:
+
+```jsonc
+{
+  "extends": ["plugin:mdx/recommended"],
+  // optional, if you want to lint code blocks at the same time
+  "settings": {
+    "mdx/code-blocks": true,
+    // optional, if you want to disable language mapper, set it to `false`
+    // if you want to override the default language mapper inside, you can provide your own
+    "mdx/language-mapper": {}
+  }
+}
+```
+
+### Flat Config
+
+`eslint.config.js` file:
+
+```js
+import * as mdx from 'eslint-plugin-mdx'
+
+export default [
+  {
+    ...mdx.flat,
+    // optional, if you want to lint code blocks at the same
+    processor: mdx.createRemarkProcessor({
+      lintCodeBlocks: true,
+      // optional, if you want to disable language mapper, set it to `false`
+      // if you want to override the default language mapper inside, you can provide your own
+      languageMapper: {},
+    }),
+  },
+  {
+    ...mdx.flatCodeBlocks,
+    rules: {
+      ...mdx.flatCodeBlocks.rules,
+      // if you want to override some rules for code blocks
+      'no-var': 'error',
+      'prefer-const': 'error',
+    },
+  },
+]
+```
+
+Then, make sure ESLint knows to run on `.md` or `.mdx` files:
+
+```sh
+eslint . --ext js,md,mdx
+```
 
 ## Parser Options
 

packages/eslint-mdx/README.md

@@ -32,6 +32,8 @@
 - [Install](#install)
 - [Notice](#notice)
 - [Usage](#usage)
+  - [Classic](#classic)
+  - [Flat Config](#flat-config)
 - [Parser Options](#parser-options)
 - [Rules](#rules)
   - [mdx/remark](#mdxremark)
@@ -74,26 +76,58 @@ See [#251](https://github.com/mdx-js/eslint-mdx/issues/251#issuecomment-73613922
 
 ## Usage
 
-1. In your ESLint 8+ config file, just add:
-
-   ```jsonc
-   {
-     "extends": ["plugin:mdx/recommended"],
-     // optional, if you want to lint code blocks at the same time
-     "settings": {
-       "mdx/code-blocks": true,
-       // optional, if you want to disable language mapper, set it to `false`
-       // if you want to override the default language mapper inside, you can provide your own
-       "mdx/language-mapper": {}
-     }
-   }
-   ```
-
-2. Make sure ESLint knows to run on `.md` or `.mdx` files:
-
-   ```sh
-   eslint . --ext js,md,mdx
-   ```
+### Classic
+
+`.eslintrc` file:
+
+```jsonc
+{
+  "extends": ["plugin:mdx/recommended"],
+  // optional, if you want to lint code blocks at the same time
+  "settings": {
+    "mdx/code-blocks": true,
+    // optional, if you want to disable language mapper, set it to `false`
+    // if you want to override the default language mapper inside, you can provide your own
+    "mdx/language-mapper": {}
+  }
+}
+```
+
+### Flat Config
+
+`eslint.config.js` file:
+
+```js
+import * as mdx from 'eslint-plugin-mdx'
+
+export default [
+  {
+    ...mdx.flat,
+    // optional, if you want to lint code blocks at the same
+    processor: mdx.createRemarkProcessor({
+      lintCodeBlocks: true,
+      // optional, if you want to disable language mapper, set it to `false`
+      // if you want to override the default language mapper inside, you can provide your own
+      languageMapper: {},
+    }),
+  },
+  {
+    ...mdx.flatCodeBlocks,
+    rules: {
+      ...mdx.flatCodeBlocks.rules,
+      // if you want to override some rules for code blocks
+      'no-var': 'error',
+      'prefer-const': 'error',
+    },
+  },
+]
+```
+
+Then, make sure ESLint knows to run on `.md` or `.mdx` files:
+
+```sh
+eslint . --ext js,md,mdx
+```
 
 ## Parser Options
 

packages/eslint-mdx/src/index.ts

@@ -1,4 +1,5 @@
 export * from './helpers'
+export * from './meta'
 export * from './parser'
 export * from './sync'
 export * from './types'

packages/eslint-mdx/src/meta.ts

@@ -0,0 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error -- no idea
+// @ts-ignore
+import { name, version } from '../package.json'
+
+export const meta = { name, version }

packages/eslint-plugin-mdx/README.md

@@ -32,6 +32,8 @@
 - [Install](#install)
 - [Notice](#notice)
 - [Usage](#usage)
+  - [Classic](#classic)
+  - [Flat Config](#flat-config)
 - [Parser Options](#parser-options)
 - [Rules](#rules)
   - [mdx/remark](#mdxremark)
@@ -74,26 +76,58 @@ See [#251](https://github.com/mdx-js/eslint-mdx/issues/251#issuecomment-73613922
 
 ## Usage
 
-1. In your ESLint 8+ config file, just add:
-
-   ```jsonc
-   {
-     "extends": ["plugin:mdx/recommended"],
-     // optional, if you want to lint code blocks at the same time
-     "settings": {
-       "mdx/code-blocks": true,
-       // optional, if you want to disable language mapper, set it to `false`
-       // if you want to override the default language mapper inside, you can provide your own
-       "mdx/language-mapper": {}
-     }
-   }
-   ```
-
-2. Make sure ESLint knows to run on `.md` or `.mdx` files:
-
-   ```sh
-   eslint . --ext js,md,mdx
-   ```
+### Classic
+
+`.eslintrc` file:
+
+```jsonc
+{
+  "extends": ["plugin:mdx/recommended"],
+  // optional, if you want to lint code blocks at the same time
+  "settings": {
+    "mdx/code-blocks": true,
+    // optional, if you want to disable language mapper, set it to `false`
+    // if you want to override the default language mapper inside, you can provide your own
+    "mdx/language-mapper": {}
+  }
+}
+```
+
+### Flat Config
+
+`eslint.config.js` file:
+
+```js
+import * as mdx from 'eslint-plugin-mdx'
+
+export default [
+  {
+    ...mdx.flat,
+    // optional, if you want to lint code blocks at the same
+    processor: mdx.createRemarkProcessor({
+      lintCodeBlocks: true,
+      // optional, if you want to disable language mapper, set it to `false`
+      // if you want to override the default language mapper inside, you can provide your own
+      languageMapper: {},
+    }),
+  },
+  {
+    ...mdx.flatCodeBlocks,
+    rules: {
+      ...mdx.flatCodeBlocks.rules,
+      // if you want to override some rules for code blocks
+      'no-var': 'error',
+      'prefer-const': 'error',
+    },
+  },
+]
+```
+
+Then, make sure ESLint knows to run on `.md` or `.mdx` files:
+
+```sh
+eslint . --ext js,md,mdx
+```
 
 ## Parser Options
 

packages/eslint-plugin-mdx/src/configs/code-blocks.ts

@@ -1,6 +1,6 @@
 import type { Linter } from 'eslint'
 
-export const codeBlocks: Linter.Config = {
+export const codeBlocks = {
   parserOptions: {
     ecmaFeatures: {
       // Adding a "use strict" directive at the top of
@@ -31,4 +31,4 @@ export const codeBlocks: Linter.Config = {
     // Mark from the Markdown parser.
     'unicode-bom': 'off',
   },
-}
+} satisfies Linter.Config

packages/eslint-plugin-mdx/src/configs/flat.ts

@@ -0,0 +1,36 @@
+import type { Linter } from 'eslint'
+import * as eslintMdx from 'eslint-mdx'
+
+import * as mdx from '..'
+
+import { codeBlocks } from './code-blocks'
+
+export const flat: Linter.FlatConfig = {
+  files: ['**/*.{md,mdx}'],
+  languageOptions: {
+    sourceType: 'module',
+    ecmaVersion: 'latest',
+    parser: eslintMdx,
+    globals: {
+      React: false,
+    },
+  },
+  plugins: {
+    mdx,
+  },
+  rules: {
+    'mdx/remark': 'warn',
+    'no-unused-expressions': 'error',
+    'react/react-in-jsx-scope': 0,
+  },
+}
+
+const { parserOptions, ...restConfig } = codeBlocks
+
+export const flatCodeBlocks: Linter.FlatConfig = {
+  files: ['**/*.{md,mdx}/*'],
+  languageOptions: {
+    parserOptions,
+  },
+  ...restConfig,
+}

packages/eslint-plugin-mdx/src/configs/index.ts

@@ -2,15 +2,18 @@
 
 import { base } from './base'
 import { codeBlocks } from './code-blocks'
+import { flat, flatCodeBlocks } from './flat'
 import { overrides } from './overrides'
 import { recommended } from './recommended'
 
-export { base, codeBlocks, overrides, recommended }
+export { base, codeBlocks, flat, flatCodeBlocks, overrides, recommended }
 
 export const configs = {
   base,
   'code-blocks': codeBlocks,
   codeBlocks,
+  flat,
+  flatCodeBlocks,
   overrides,
   recommended,
 }

packages/eslint-plugin-mdx/src/index.ts

@@ -1,4 +1,5 @@
 export * from './configs'
 export * from './helpers'
+export * from './meta'
 export * from './processors'
 export * from './rules'

packages/eslint-plugin-mdx/src/meta.ts

@@ -0,0 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error -- no idea
+// @ts-ignore
+import { name, version } from '../package.json'
+
+export const meta = { name, version }

packages/eslint-plugin-mdx/src/processors/index.ts

@@ -1,11 +1,8 @@
-/**
- * workaround for @link https://github.com/benmosher/eslint-plugin-import/issues/2002
- */
-
 import { remark } from './remark'
 
 export * from './helpers'
 export * from './options'
+export { createRemarkProcessor } from './remark'
 export * from './types'
 
 export const processors = { remark }