fix: incompatible with some react rules (#493)

Author: JounQin

.changeset/ninety-bugs-dance.md

@@ -0,0 +1,5 @@
+---
+"eslint-mdx": patch
+---
+
+fix: incorrect `JSXAttribute` node position info - close #488, related #425

.changeset/tasty-actors-protect.md

@@ -0,0 +1,6 @@
+---
+"eslint-mdx": patch
+"eslint-plugin-mdx": patch
+---
+
+fix: incompatible with some react rules: `jsx-curly-brace-presence`, `jsx-sort-props`, `self-closing-comp`

.eslintrc.js

@@ -21,11 +21,20 @@ module.exports = {
     {
       files: '*.{md,mdx}',
       rules: {
+        'react/jsx-curly-brace-presence': 'error',
+        'react/jsx-sort-props': 'error',
+        'react/self-closing-comp': 'error',
         'react/no-unescaped-entities': 'warn',
       },
       settings: {
         'mdx/code-blocks': true,
       },
     },
+    {
+      files: '**/*.{md,mdx}/**/*.ts',
+      rules: {
+        'no-magic-numbers': 'off',
+      },
+    },
   ],
 }

.gitignore

@@ -2,9 +2,9 @@
 *.tsbuildinfo
 .*cache
 .changelog
+.idea
 .type-coverage
 coverage
 lib
 node_modules
-/test.mdx
-.idea/
+/test.*

README.md

@@ -35,6 +35,10 @@
   - [Classic](#classic)
   - [Flat Config](#flat-config)
 - [Parser Options](#parser-options)
+- [Parser API](#parser-api)
+  - [`MDXCode`](#mdxcode)
+  - [`MDXHeading`](#mdxheading)
+  - [Typings](#typings)
 - [Rules](#rules)
   - [mdx/remark](#mdxremark)
 - [Prettier Integration](#prettier-integration)
@@ -47,7 +51,7 @@
 
 [![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/unifiedjs.vscode-mdx)](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx)
 
-[VSCode MDX][]\: Integrates with [VSCode ESLint][], syntaxes highlighting and error reporting.
+[VSCode MDX][]: Integrates with [VSCode ESLint][], syntaxes highlighting and error reporting.
 
 ## Packages
 
@@ -137,6 +141,56 @@ eslint . --ext js,md,mdx
 
 3. `ignoreRemarkConfig` (`boolean`): Ignore the `remark` configuration defined in the project.
 
+## Parser API
+
+### `MDXCode`
+
+A new `MDXCode` estree node type is exported from `eslint-mdx` which represents code blocks in `mdx` like the following:
+
+````mdx
+<div>
+  ```js
+  export function foo() {
+    return 'bar'
+  }
+  ```
+</div>
+````
+
+See also <https://github.com/syntax-tree/mdast#code>
+
+### `MDXHeading`
+
+A new `MDXHeading` estree node type is exported from `eslint-mdx` which represents markdown heading in `mdx` like the following:
+
+```mdx
+<div># Here's a text gradient short code!</div>
+```
+
+See also <https://github.com/syntax-tree/mdast#heading>
+
+### Typings
+
+```ts
+import type { BaseNode } from 'estree'
+import type { JSXElement } from 'estree-jsx'
+
+export interface MDXCode extends BaseNode {
+  type: 'MDXCode'
+  value: string
+  lang?: string | null
+  meta?: string | null
+}
+
+export type HeadingDepth = 1 | 2 | 3 | 4 | 5 | 6
+
+export interface MDXHeading extends BaseNode {
+  type: 'MDXHeading'
+  depth: HeadingDepth
+  children: JSXElement['children']
+}
+```
+
 ## Rules
 
 ### mdx/remark

package.json

@@ -27,7 +27,7 @@
     "typecov": "type-coverage"
   },
   "devDependencies": {
-    "@1stg/lib-config": "^12.0.0",
+    "@1stg/lib-config": "^12.0.1",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
     "@types/eslint": "^8.44.8",
@@ -50,12 +50,15 @@
     "@types/mdast": "^4.0.3",
     "acorn": "^8.11.2",
     "cliui": "npm:@isaacs/cliui@^8.0.2",
+    "eslint-mdx": "link:packages/eslint-mdx",
     "eslint-plugin-markdown": "JounQin/eslint-plugin-markdown#feat/bump",
+    "eslint-plugin-mdx": "link:packages/eslint-plugin-mdx",
     "mdast-util-frontmatter": "^2.0.1",
     "mdast-util-gfm": "^3.0.0",
     "prettier": "^2.8.8",
     "unified": "^11.0.4",
-    "unified-engine": "^11.2.0"
+    "unified-engine": "^11.2.0",
+    "unist-util-visit": "^5.0.0"
   },
   "commitlint": {
     "extends": [
@@ -68,6 +71,7 @@
     "fixtures",
     "lib",
     "CHANGELOG.md",
+    "/test.*",
     "!/.*.js"
   ],
   "jest": {

packages/eslint-mdx/README.md

@@ -35,6 +35,10 @@
   - [Classic](#classic)
   - [Flat Config](#flat-config)
 - [Parser Options](#parser-options)
+- [Parser API](#parser-api)
+  - [`MDXCode`](#mdxcode)
+  - [`MDXHeading`](#mdxheading)
+  - [Typings](#typings)
 - [Rules](#rules)
   - [mdx/remark](#mdxremark)
 - [Prettier Integration](#prettier-integration)
@@ -47,7 +51,7 @@
 
 [![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/unifiedjs.vscode-mdx)](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx)
 
-[VSCode MDX][]\: Integrates with [VSCode ESLint][], syntaxes highlighting and error reporting.
+[VSCode MDX][]: Integrates with [VSCode ESLint][], syntaxes highlighting and error reporting.
 
 ## Packages
 
@@ -137,6 +141,56 @@ eslint . --ext js,md,mdx
 
 3. `ignoreRemarkConfig` (`boolean`): Ignore the `remark` configuration defined in the project.
 
+## Parser API
+
+### `MDXCode`
+
+A new `MDXCode` estree node type is exported from `eslint-mdx` which represents code blocks in `mdx` like the following:
+
+````mdx
+<div>
+  ```js
+  export function foo() {
+    return 'bar'
+  }
+  ```
+</div>
+````
+
+See also <https://github.com/syntax-tree/mdast#code>
+
+### `MDXHeading`
+
+A new `MDXHeading` estree node type is exported from `eslint-mdx` which represents markdown heading in `mdx` like the following:
+
+```mdx
+<div># Here's a text gradient short code!</div>
+```
+
+See also <https://github.com/syntax-tree/mdast#heading>
+
+### Typings
+
+```ts
+import type { BaseNode } from 'estree'
+import type { JSXElement } from 'estree-jsx'
+
+export interface MDXCode extends BaseNode {
+  type: 'MDXCode'
+  value: string
+  lang?: string | null
+  meta?: string | null
+}
+
+export type HeadingDepth = 1 | 2 | 3 | 4 | 5 | 6
+
+export interface MDXHeading extends BaseNode {
+  type: 'MDXHeading'
+  depth: HeadingDepth
+  children: JSXElement['children']
+}
+```
+
 ## Rules
 
 ### mdx/remark

packages/eslint-mdx/src/parser.ts

@@ -64,11 +64,16 @@ export class Parser {
     } catch (err: unknown) {
       const { message, line, column, place } = err as VFileMessage
       const point = place && ('start' in place ? place.start : place)
-      throw Object.assign(new SyntaxError(message), {
-        lineNumber: line,
-        column,
-        index: /* istanbul ignore next */ point?.offset,
-      })
+      throw Object.assign(
+        new SyntaxError(message, {
+          cause: err,
+        }),
+        {
+          lineNumber: line,
+          column,
+          index: /* istanbul ignore next */ point?.offset,
+        },
+      )
     }
 
     const { root, body, comments, tokens } = result

packages/eslint-mdx/src/types.ts

@@ -1,6 +1,7 @@
 import type { Position } from 'acorn'
 import type { AST, Linter } from 'eslint'
-import type { Program } from 'estree'
+import type { BaseNode, Program } from 'estree'
+import type { JSXElement } from 'estree-jsx'
 import type { Root } from 'mdast'
 import type { VFileOptions } from 'vfile'
 import type { VFileMessage } from 'vfile-message'
@@ -43,3 +44,22 @@ export interface WorkerProcessResult {
 }
 
 export type WorkerResult = WorkerParseResult | WorkerProcessResult
+
+type _Arrayable<T, R = T extends Array<infer U> ? U : T> = R | R[]
+
+export type Arrayable<T> = _Arrayable<T>
+
+export interface MDXCode extends BaseNode {
+  type: 'MDXCode'
+  value: string
+  lang?: string | null
+  meta?: string | null
+}
+
+export type HeadingDepth = 1 | 2 | 3 | 4 | 5 | 6
+
+export interface MDXHeading extends BaseNode {
+  type: 'MDXHeading'
+  depth: HeadingDepth
+  children: JSXElement['children']
+}