refactor: totally replace no-unescaped-entities, default warning

lot of code/type refactor

Author: JounQin

README.md

@@ -58,9 +58,11 @@ npm i -D @rxts/eslint-plugin-mdx
             "plugins": ["@rxts/mdx"],
             "rules": {
               "@rxts/mdx/no-jsx-html-comments": 2,
+              "@rxts/mdx/no-unescaped-entities": 1,
               "@rxts/mdx/no-unused-expressions": 2,
               "no-unused-expressions": 0,
-              "react/react-in-jsx-scope": 0
+              "react/react-in-jsx-scope": 0,
+              "react/no-unescaped-entities": 0
             }
           }
         ]
@@ -101,9 +103,13 @@ This parser/plugin should only affects `.mdx` files, and `overrides` in `shared
 
 HTML style comments in jsx block is invalid, this rule will help you to fix it by transforming it to JSX style comments.
 
+### @rxts/mdx/no-unescaped-entities
+
+Inline JSX like `Inline <Component />` is supported by [MDX], but rule `react/no-unescaped-entities` from [eslint-plugin-react] is incompatible with it, `@rxts/mdx/no-unescaped-entities` is the replacement.
+
 ### @rxts/mdx/no-unused-expressions
 
-`MDX` can render `jsx` block automatically without exporting them, but `eslint` will report `no-unused-expressions` issue which could be unexpected, this rule is a replacement of it, so make sure that you've turned off the original `no-unused-expressions` rule.
+[MDX] can render `jsx` block automatically without exporting them, but [ESLint] will report `no-unused-expressions` issue which could be unexpected, this rule is a replacement of it, so make sure that you've turned off the original `no-unused-expressions` rule.
 
 ## Limitation
 
@@ -120,6 +126,7 @@ Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.m
 [MIT]
 
 [eslint]: https://eslint.org
+[eslint-plugin-react]: https://github.com/yannickcr/eslint-plugin-react
 [mdx]: https://github.com/mdx-js/mdx
 [mit]: http://opensource.org/licenses/MIT
 [markdownlint]: https://github.com/markdownlint/markdownlint

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxts/eslint-plugin-mdx",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "ESLint Parser/Plugin for MDX",
   "repository": "[email protected]:rx-ts/eslint-plugin-mdx.git",
   "author": "JounQin <[email protected]>",

src/helper.ts

@@ -1,4 +1,7 @@
-import { Position } from 'unist'
+import { isComment, COMMENT_CONTENT_REGEX } from './regexp'
+import { Comment } from './types'
+
+import { Position, Node, Parent } from 'unist'
 import { AST } from 'eslint'
 // `SourceLocation` is not exported from estree, but it is actually working
 // eslint-disable-next-line import/named
@@ -78,3 +81,66 @@ export const first = <T>(items: T[] | ReadonlyArray<T>) => items && items[0]
 
 export const last = <T>(items: T[] | ReadonlyArray<T>) =>
   items && items[items.length - 1]
+
+export const normalizeJsxNode = (node: Node, parent?: Parent) => {
+  const value = node.value as string
+
+  if (isComment(value)) {
+    return node
+  }
+
+  const matched = value.match(COMMENT_CONTENT_REGEX)
+
+  if (!matched) {
+    return node
+  }
+
+  const comments: Comment[] = []
+  const {
+    position: {
+      start: { line, column, offset: startOffset },
+    },
+  } = node
+
+  return Object.assign(node, {
+    data: {
+      ...node.data,
+      jsxType: 'JSXElementWithHTMLComments',
+      comments,
+      // jsx in paragraph is considered as plain html in mdx, what means html style comments are valid
+      // TODO: in this case, jsx style comments could be a mistake
+      inline: !!parent && parent.type !== 'root',
+    },
+    value: value.replace(
+      COMMENT_CONTENT_REGEX,
+      (matched: string, $0: string, $1: string, $2: string, offset: number) => {
+        const endOffset = offset + matched.length
+        const startLines = value.slice(0, offset).split('\n')
+        const endLines = value.slice(0, endOffset).split('\n')
+        const fixed = `{/${'*'.repeat($0.length - 2)}${$1}${'*'.repeat(
+          $2.length - 2,
+        )}/}`
+        const startLineOffset = startLines.length - 1
+        const endLineOffset = endLines.length - 1
+        comments.push({
+          fixed,
+          loc: {
+            start: {
+              line: line + startLineOffset,
+              column:
+                last(startLines).length + (startLineOffset ? 0 : column - 1),
+              offset: startOffset + offset,
+            },
+            end: {
+              line: line + endLineOffset - 1,
+              column: last(endLines).length + (endLineOffset ? 0 : column - 1),
+              offset: startOffset + endOffset,
+            },
+          },
+          origin: matched,
+        })
+        return fixed
+      },
+    ),
+  })
+}

src/index.ts

@@ -1,7 +1,6 @@
 import path from 'path'
 
 export * from './helper'
-export * from './normalizer'
 export * from './parser'
 export * from './regexp'
 export * from './rules'
@@ -13,7 +12,7 @@ export const configs = {
     plugins: ['@rxts/mdx'],
     rules: {
       '@rxts/mdx/no-jsx-html-comments': 2,
-      '@rxts/mdx/no-unescaped-entities': 2,
+      '@rxts/mdx/no-unescaped-entities': 1,
       '@rxts/mdx/no-unused-expressions': 2,
       'no-unused-expressions': 0,
       'react/no-unescaped-entities': 0,

src/normalizer.ts

@@ -6,8 +6,11 @@ import remarkMdx from 'remark-mdx'
 import remarkParse from 'remark-parse'
 import unified from 'unified'
 
-import { normalizeJsxNode } from './normalizer'
-import { normalizePosition, restoreNodeLocation } from './helper'
+import {
+  normalizeJsxNode,
+  normalizePosition,
+  restoreNodeLocation,
+} from './helper'
 import { isComment } from './regexp'
 import { traverse } from './traverse'
 

src/parser.ts

@@ -19,12 +19,13 @@ const attributeValue =
 const attribute =
   '(?:\\s+' + attributeName + '(?:\\s*=\\s*' + attributeValue + ')?)'
 
-const openTag = '<[A-Za-z]*[A-Za-z0-9\\.\\-]*' + attribute + '*\\s*>'
-const closeTag = '<\\s*\\/[A-Za-z]*[A-Za-z0-9\\.\\-]*\\s*>'
-const selfClosingTag = '<[A-Za-z]*[A-Za-z0-9\\.\\-]*' + attribute + '*\\s*\\/?>'
-const comment = '<!---->|<!--(?:-?[^>-])(?:-?[^-])*-->'
-const commentOpen = '(<!---*)'
-const commentClose = '(-*-->)'
+export const openTag = '<[A-Za-z]*[A-Za-z0-9\\.\\-]*' + attribute + '*\\s*>'
+export const closeTag = '<\\s*\\/[A-Za-z]*[A-Za-z0-9\\.\\-]*\\s*>'
+export const selfClosingTag =
+  '<[A-Za-z]*[A-Za-z0-9\\.\\-]*' + attribute + '*\\s*\\/?>'
+export const comment = '<!---->|<!--(?:-?[^>-])(?:-?[^-])*-->'
+export const commentOpen = '(<!---*)'
+export const commentClose = '(-*-->)'
 
 export const OPEN_TAG_REGEX = new RegExp(`^(?:${openTag})$`)
 export const CLOSE_TAG_REGEX = new RegExp(`^(?:${closeTag})$`)

src/regexp.ts

@@ -0,0 +1,6 @@
+import { JsxNode, JsxType, JsxTypes } from './types'
+
+export const JSX_TYPES: JsxTypes = ['JSXElement', 'JSXFragment']
+
+export const isJsxNode = (node: { type: string }): node is JsxNode =>
+  JSX_TYPES.includes(node.type as JsxType)

src/rules/helper.ts

@@ -2,7 +2,10 @@ import { noJsxHtmlComments } from './no-jsx-html-comments'
 import { noUnEscapedEntities } from './no-unescaped-entities'
 import { noUnUsedExpressions } from './no-unused-expressions'
 
-export { noJsxHtmlComments, noUnUsedExpressions }
+export * from './helper'
+export * from './types'
+
+export { noJsxHtmlComments, noUnEscapedEntities, noUnUsedExpressions }
 
 export const rules = {
   'no-jsx-html-comments': noJsxHtmlComments,

src/rules/index.ts

@@ -1,6 +1,7 @@
-import { Comment } from '../normalizer'
+import { Comment } from '../types'
 
-import { ExpressionStatementWithParent, JSX_TYPES, JsxType } from './types'
+import { JSX_TYPES } from './helper'
+import { ExpressionStatementWithParent, JsxType } from './types'
 
 import { Rule } from 'eslint'
 import { Node } from 'unist'