fix: use <$> instead of <> to wrap jsx blocks for parsing (#41)

Author: JounQin

.eslintrc.js

@@ -1,4 +1,4 @@
-const { all } = require('eslint-config-1stg/overrides')
+const { overrides } = require('eslint-config-1stg/overrides')
 
 require('ts-node').register({
   transpileOnly: true,
@@ -8,16 +8,12 @@ module.exports = {
   root: true,
   extends: ['1stg'],
   overrides: [
-    ...all,
+    ...overrides,
     {
       files: '*.ts',
       rules: {
         '@typescript-eslint/unbound-method': 0, // See https://github.com/typescript-eslint/typescript-eslint/issues/636
       },
     },
-    {
-      files: '*.test.ts',
-      extends: ['plugin:jest/recommended'],
-    },
   ],
 }

package.json

@@ -27,10 +27,9 @@
     "babel-eslint": "^10.0.2",
     "commitlint": "^8.1.0",
     "eslint": "^6.1.0",
-    "eslint-config-1stg": "^5.7.0",
+    "eslint-config-1stg": "^5.8.1",
     "eslint-formatter-friendly": "^7.0.0",
     "eslint-mdx": "link:packages/eslint-mdx/src",
-    "eslint-plugin-jest": "^22.15.0",
     "husky": "^3.0.3",
     "jest": "^24.8.0",
     "lerna": "^3.16.4",

packages/eslint-mdx/src/parser.ts

@@ -198,18 +198,18 @@ export class Parser {
   private _normalizeJsxNodes(node: Node): Node | Node[] {
     const value = node.value as string
 
-    // wrap into single Fragment, so that it won't break on adjacent JSX nodes
     let program: AST.Program
 
     try {
-      program = this._eslintParse(`<>${value}</>`).ast
+      // wrap into single element which is valid jsx but not valid jsx in mdx, so that it won't break on adjacent JSX nodes
+      program = this._eslintParse(`<$>${value}</$>`).ast
     } catch (e) {
       if (hasProperties<LocationError>(e, LOC_ERROR_PROPERTIES)) {
         const {
           position: { start },
         } = node
 
-        e.index += start.offset - 2
+        e.index += start.offset - 3
         e.column = e.lineNumber > 1 ? e.column : e.column + start.column - 3
         e.lineNumber += start.line - 1
 
@@ -241,21 +241,21 @@ export class Parser {
       } = jsNode
       const startLine = line + start.line - 1
       const endLine = line + end.line - 1
-      const startOffset = range[0] - 2
-      const endOffset = range[1] - 2
+      const startOffset = range[0] - 3
+      const endOffset = range[1] - 3
       nodes.push({
         type: 'jsx',
         data: nodes.length ? null : node.data,
         value: value.slice(startOffset, endOffset),
         position: {
           start: {
             line: startLine,
-            column: line === startLine ? start.column - 2 : start.column,
+            column: line === startLine ? start.column - 3 : start.column,
             offset: offset + startOffset,
           },
           end: {
             line: endLine,
-            column: line === startLine ? end.column - 2 : end.column,
+            column: line === startLine ? end.column - 3 : end.column,
             offset: offset + endOffset,
           },
         },

test/parser.test.ts

@@ -156,7 +156,7 @@ describe('parser', () => {
       "Expected corresponding JSX closing tag for 'h1'.",
     )
     expect(() => parser.parse('Header\n<>', parserOptions)).toThrow(
-      'JSX fragment has no corresponding closing tag.',
+      'Expected corresponding closing tag for JSX fragment.',
     )
     expect(() => parser.parse('<main><</main>', parserOptions)).toThrow(
       'Identifier expected.',
@@ -169,19 +169,22 @@ describe('parser', () => {
     ).toThrow('Identifier expected.')
   })
 
-  it('should not throw on adjacent JSX nodes', () => {
+  it('should not throw on adjacent JSX nodes', () =>
     expect(() =>
       parser.parse(
         '<header></header>\n<main><section>left</section><section>right<input name="name"/></section></main>',
         parserOptions,
       ),
-    ).not.toThrow()
-  })
+    ).not.toThrow())
 
-  it('should not throw on JSX with blank lines', () => {
+  it('should not throw on JSX with blank lines', () =>
     expect(() =>
       parser.parse('<header>\n\nTitle\n\n</header>', parserOptions),
-    ).not.toThrow()
+    ).not.toThrow())
+
+  it("should not throw on <$> or </$> because it's not considered as jsx", () => {
+    expect(() => parser.parse('<$>', parserOptions)).not.toThrow()
+    expect(() => parser.parse('</$>', parserOptions)).not.toThrow()
   })
 
   it('should be able to parse normal js file', () => {

yarn.lock

@@ -3215,11 +3215,12 @@ escodegen@^1.9.1:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-1stg@^5.7.0:
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-1stg/-/eslint-config-1stg-5.7.0.tgz#2dc5cf477163d1f1bd990d469cefc86d68b4a0fe"
-  integrity sha512-FJVxqb+wAR+a02RokbfNE+u/MjSBeHzu02nRNjzj+l+pE/6muwy118tw+QoULvpztahIMKfscJBLWvhNlpXAlQ==
+eslint-config-1stg@^5.8.1:
+  version "5.8.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-1stg/-/eslint-config-1stg-5.8.1.tgz#59fbdfd2f307613c61423dc810e9a14b09c8529f"
+  integrity sha512-r4MPqsGPfnS6rXcMp+eK2GgZ4ywf4+eOxZH284bzXLnOI++qHcRVBqhn2ITdDPwk2H6oZDqv3MOqnqw097uTMQ==
   dependencies:
+    "@rxts/eslint-plugin-mdx" "^0.11.1"
     "@typescript-eslint/eslint-plugin" "^2.0.0-alpha.5"
     "@typescript-eslint/parser" "^2.0.0-alpha.5"
     babel-eslint "^10.0.2"
@@ -3228,10 +3229,12 @@ eslint-config-1stg@^5.7.0:
     eslint-import-resolver-typescript JounQin/eslint-import-resolver-typescript#feat/resolve_dts
     eslint-plugin-babel "^5.3.0"
     eslint-plugin-import "^2.18.2"
+    eslint-plugin-jest "^22.15.1"
     eslint-plugin-node "^9.1.0"
     eslint-plugin-prettier "^3.1.0"
     eslint-plugin-promise "^4.2.1"
     eslint-plugin-react "^7.14.3"
+    eslint-plugin-react-hooks "^1.7.0"
     eslint-plugin-standard "^4.0.0"
     eslint-plugin-vue "^5.2.3"
     prettier-config-1stg "^0.2.0"
@@ -3268,7 +3271,7 @@ eslint-import-resolver-node@^0.3.2:
     debug "^2.6.9"
     resolve "^1.5.0"
 
-eslint-import-resolver-typescript@JounQin/eslint-import-resolver-typescript#feat/resolve_dts:
+"eslint-import-resolver-typescript@github:JounQin/eslint-import-resolver-typescript#feat/resolve_dts":
   version "1.1.1"
   resolved "https://codeload.github.com/JounQin/eslint-import-resolver-typescript/tar.gz/23e2e8cf71ee6c19da9f55e85b2ab34543d2a12e"
   dependencies:
@@ -3320,10 +3323,10 @@ eslint-plugin-import@^2.18.2:
     read-pkg-up "^2.0.0"
     resolve "^1.11.0"
 
-eslint-plugin-jest@^22.15.0:
-  version "22.15.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.15.0.tgz#fe70bfff7eeb47ca0ab229588a867f82bb8592c5"
-  integrity sha512-hgnPbSqAIcLLS9ePb12hNHTRkXnkVaCfOwCt2pzQ8KpOKPWGA4HhLMaFN38NBa/0uvLfrZpcIRjT+6tMAfr58Q==
+eslint-plugin-jest@^22.15.1:
+  version "22.15.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.15.1.tgz#54c4a752a44c4bc5a564ecc22b32e1cd16a2961a"
+  integrity sha512-CWq/RR/3tLaKFB+FZcCJwU9hH5q/bKeO3rFP8G07+q7hcDCFNqpvdphVbEbGE6o6qo1UbciEev4ejUWv7brUhw==
   dependencies:
     "@typescript-eslint/experimental-utils" "^1.13.0"
 
@@ -3351,6 +3354,11 @@ eslint-plugin-promise@^4.2.1:
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz#845fd8b2260ad8f82564c1222fce44ad71d9418a"
   integrity sha512-VoM09vT7bfA7D+upt+FjeBO5eHIJQBUWki1aPvB+vbNiHS3+oGIJGIeyBtKQTME6UPXXy3vV07OL1tHd3ANuDw==
 
+eslint-plugin-react-hooks@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
+  integrity sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==
+
 eslint-plugin-react@^7.14.3:
   version "7.14.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz#911030dd7e98ba49e1b2208599571846a66bdf13"