fix: use source code to get combined jsx value (#218)

Author: JounQin

.gitignore

@@ -6,3 +6,4 @@
 coverage
 lib
 node_modules
+/test.mdx

package.json

@@ -24,15 +24,15 @@
     "prelint": "yarn build",
     "pretest": "yarn clean",
     "test": "ts-node --skip-ignore node_modules/.bin/jest",
-    "type-coverage": "type-coverage --cache --detail --ignore-catch --ignore-files '**/*.d.ts' --strict"
+    "type-coverage": "type-coverage --cache --detail --ignore-catch --ignore-files '**/*.d.ts' --strict --update"
   },
   "devDependencies": {
     "@1stg/lib-config": "^0.5.5",
-    "@1stg/tslint-config": "^0.8.4",
+    "@1stg/tslint-config": "^0.8.5",
     "@types/eslint": "^7.2.0",
-    "@types/jest": "^26.0.3",
-    "@types/node": "^14.0.14",
-    "@types/react": "^16.9.41",
+    "@types/jest": "^26.0.4",
+    "@types/node": "^14.0.22",
+    "@types/react": "^16.9.43",
     "@types/rebass": "^4.0.6",
     "@types/unist": "^2.0.3",
     "cosmiconfig": "^6.0.0",
@@ -44,9 +44,12 @@
     "ts-jest": "^26.1.1",
     "ts-node": "^8.10.2",
     "tslint": "^6.1.2",
-    "type-coverage": "^2.8.3",
-    "typescript": "^3.9.5",
-    "yarn-deduplicate": "^2.0.0"
+    "type-coverage": "^2.8.4",
+    "typescript": "^3.9.6",
+    "yarn-deduplicate": "^2.1.0"
+  },
+  "resolutions": {
+    "prettier": "^2.0.5"
   },
   "commitlint": {
     "extends": [
@@ -84,6 +87,6 @@
     ]
   },
   "typeCoverage": {
-    "atLeast": 99
+    "atLeast": 97.96
   }
 }

packages/eslint-mdx/src/parser.ts

@@ -178,6 +178,7 @@ export class Parser {
 
     if (isMdx) {
       traverse(root, {
+        code,
         enter: (node, parent) => {
           if (!ES_NODE_TYPES.includes(node.type)) {
             return

packages/eslint-mdx/src/traverse.ts

@@ -10,18 +10,23 @@ import {
 import { Node, Parent, TraverseOptions, Traverser } from './types'
 
 export class Traverse {
+  code: string
+
   // @internal
   private readonly _enter: Traverser
 
-  constructor({ enter }: TraverseOptions) {
+  constructor({ code, enter }: TraverseOptions) {
+    this.code = code
     this._enter = enter
   }
 
   combineLeftJsxNodes(jsxNodes: Node[]) {
+    const start = jsxNodes[0].position.start
+    const end = last(jsxNodes).position.end
     return {
       type: 'jsx',
       data: jsxNodes[0].data,
-      value: jsxNodes.reduce((acc, { value }) => (acc += value), ''),
+      value: this.code.slice(start.offset, end.offset),
       position: {
         start: jsxNodes[0].position.start,
         end: last(jsxNodes).position.end,

packages/eslint-mdx/src/types.ts

@@ -45,6 +45,7 @@ export interface ParserOptions extends Linter.ParserOptions {
 export type Traverser = (node: Node, parent?: Parent) => void
 
 export interface TraverseOptions {
+  code: string
   enter: Traverser
 }
 

test/no-unescaped-entities.test.ts

@@ -1,4 +1,3 @@
-import { DEFAULT_PARSER_OPTIONS as parserOptions } from 'eslint-mdx'
 import { noUnescapedEntities } from 'eslint-plugin-mdx'
 
 import { parser, ruleTester } from './helper'
@@ -10,13 +9,11 @@ ruleTester.run('no-unescaped-entities', noUnescapedEntities, {
     {
       code: '<header> &apos; </header>',
       parser,
-      parserOptions,
       filename,
     },
     {
       code: `# Title\n\n## Header <header> &apos; </header>\nMain<main></main>`,
       parser,
-      parserOptions,
       filename,
     },
     {
@@ -25,15 +22,33 @@ ruleTester.run('no-unescaped-entities', noUnescapedEntities, {
       <Aside>I chose this video to test my theme. I did this to myself</Aside>
       `,
       parser,
-      parserOptions,
+      filename,
+    },
+    {
+      // #217
+      code: `<div style={{ color: 'white', backgroundColor: 'black', padding: '24px 32px' }}>
+
+      <a
+        style={{
+          color: 'white',
+          textDecoration: 'none',
+          fontWeight: 'bold',
+          fontSize: 32
+        }}
+        href="https://blacklivesmatters.carrd.co/"
+      >
+        #BlackLivesMatter &rarr;
+      </a>
+
+      </div>`,
+      parser,
       filename,
     },
   ],
   invalid: [
     {
       code: '<main> > </main>',
       parser,
-      parserOptions,
       filename,
       errors: [
         {
@@ -44,7 +59,6 @@ ruleTester.run('no-unescaped-entities', noUnescapedEntities, {
     {
       code: '<main>\n<section> > </section></main>',
       parser,
-      parserOptions,
       filename,
       errors: [
         {
@@ -55,7 +69,6 @@ ruleTester.run('no-unescaped-entities', noUnescapedEntities, {
     {
       code: 'Main <main> & </main>',
       parser,
-      parserOptions,
       options: [
         {
           forbid: ['&'],

tsconfig.base.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@1stg/tsconfig/lib",
+  "extends": "@1stg/tsconfig/lib.json",
   "compilerOptions": {
     "strictFunctionTypes": false,
     "strictNullChecks": false