Merge pull request #37 from rx-ts/develop

JounQin · web-flow · commit 30f18960759b · 2019-08-11T21:34:02.000+08:00
feat: support top level JSX with blank lines
diff --git a/.travis.yml b/.travis.yml
@@ -42,6 +42,6 @@ deploy:
       branch: master
   - provider: script
     skip_cleanup: true
-    script: yarn run lerna publish --canary --conventional-prerelease --preid beta --pre-dist-tag beta --yes
+    script: yarn run lerna publish --canary --conventional-prerelease --force-publish --preid beta --pre-dist-tag beta --yes
     on:
       branch: develop
diff --git a/README.md b/README.md
@@ -64,21 +64,35 @@ npm i -D @rxts/eslint-plugin-mdx
 
    2. If you're using `eslint@^5.0.0`, you need to enable this parser/plugin manually, because `eslint@5` does not support `extends` for `overrides` property in its configuration:
 
-      ```json
-      {
-        "extends": ["plugin:@rxts/mdx/recommended"],
-        "overrides": [
+      ```js
+      const rebass = require('rebass')
+
+      module.exports = {
+        extends: ['plugin:@rxts/mdx/recommended'],
+        overrides: [
           {
-            "files": ["*.mdx"],
-            "globals": {
-              "React": false
+            files: ['*.mdx'],
+            globals: Object.keys(rebass).reduce(
+              (globals, Component) =>
+                Object.assign(globals, {
+                  [Component]: false,
+                }),
+              {
+                React: false,
+              },
+            ),
+            rules: {
+              'lines-between-class-members': 0,
+              'react/jsx-no-undef': [
+                2,
+                {
+                  allowGlobals: true,
+                },
+              ],
+              'react/react-in-jsx-scope': 0,
             },
-            "rules": {
-              "lines-between-class-members": 0,
-              "react/react-in-jsx-scope": 0
-            }
-          }
-        ]
+          },
+        ],
       }
       ```
 
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@types/jest": "^24.0.17",
     "@types/node": "^12.7.1",
     "@types/react": "^16.9.1",
+    "@types/rebass": "^3.0.4",
     "@types/unist": "^2.0.3",
     "babel-eslint": "^10.0.2",
     "commitlint": "^8.1.0",
diff --git a/packages/eslint-mdx/README.md b/packages/eslint-mdx/README.md
@@ -64,21 +64,35 @@ npm i -D @rxts/eslint-plugin-mdx
 
    2. If you're using `eslint@^5.0.0`, you need to enable this parser/plugin manually, because `eslint@5` does not support `extends` for `overrides` property in its configuration:
 
-      ```json
-      {
-        "extends": ["plugin:@rxts/mdx/recommended"],
-        "overrides": [
+      ```js
+      const rebass = require('rebass')
+
+      module.exports = {
+        extends: ['plugin:@rxts/mdx/recommended'],
+        overrides: [
           {
-            "files": ["*.mdx"],
-            "globals": {
-              "React": false
+            files: ['*.mdx'],
+            globals: Object.keys(rebass).reduce(
+              (globals, Component) =>
+                Object.assign(globals, {
+                  [Component]: false,
+                }),
+              {
+                React: false,
+              },
+            ),
+            rules: {
+              'lines-between-class-members': 0,
+              'react/jsx-no-undef': [
+                2,
+                {
+                  allowGlobals: true,
+                },
+              ],
+              'react/react-in-jsx-scope': 0,
             },
-            "rules": {
-              "lines-between-class-members": 0,
-              "react/react-in-jsx-scope": 0
-            }
-          }
-        ]
+          },
+        ],
       }
       ```
 
diff --git a/packages/eslint-mdx/src/parser.ts b/packages/eslint-mdx/src/parser.ts
@@ -209,7 +209,7 @@ export class Parser {
           position: { start },
         } = node
 
-        e.index += start.offset - 3
+        e.index += start.offset - 2
         e.column = e.lineNumber > 1 ? e.column : e.column + start.column - 3
         e.lineNumber += start.line - 1
 
diff --git a/packages/eslint-mdx/src/traverse.ts b/packages/eslint-mdx/src/traverse.ts
@@ -10,41 +10,51 @@ import { Traverser, TraverseOptions } from './types'
 
 import { Node, Parent } from 'unist'
 
-export const SKIP_COMBINE_JSX_TYPES: readonly string[] = ['root', 'jsx']
-
 export class Traverse {
   private readonly _enter: Traverser
 
   constructor({ enter }: TraverseOptions) {
     this._enter = enter
   }
 
+  combineLeftJsxNodes(jsxNodes: Node[]) {
+    return {
+      type: 'jsx',
+      data: jsxNodes[0].data,
+      value: jsxNodes.reduce((acc, { value }) => (acc += value), ''),
+      position: {
+        start: jsxNodes[0].position.start,
+        end: last(jsxNodes).position.end,
+      },
+    }
+  }
+
   // fix #7
   combineJsxNodes(nodes: Node[]) {
     let offset = 0
     const jsxNodes: Node[] = []
     const { length } = nodes
     return nodes.reduce<Node[]>((acc, node, index) => {
       if (node.type === 'jsx') {
-        const rawText = node.value as string
-        if (isOpenTag(rawText)) {
+        const value = node.value as string
+        if (isOpenTag(value)) {
           offset++
           jsxNodes.push(node)
         } else {
-          if (isCloseTag(rawText)) {
+          if (isCloseTag(value)) {
             offset--
           }
           // prettier-ignore
           /* istanbul ignore next */
           else if (
-            !isComment(rawText) &&
-            !isSelfClosingTag(rawText) &&
-            !isOpenCloseTag(rawText)
+            !isComment(value) &&
+            !isSelfClosingTag(value) &&
+            !isOpenCloseTag(value)
           ) {
             // should never happen, just for robustness
             const { start } = node.position
             throw Object.assign(
-              new SyntaxError('unknown jsx node: ' + JSON.stringify(rawText)),
+              new SyntaxError('unknown jsx node: ' + JSON.stringify(value)),
               {
                 lineNumber: start.line,
                 column: start.column,
@@ -55,16 +65,8 @@ export class Traverse {
 
           jsxNodes.push(node)
 
-          if (!offset || index === length - 1) {
-            acc.push({
-              type: 'jsx',
-              data: jsxNodes[0].data,
-              value: jsxNodes.reduce((acc, { value }) => (acc += value), ''),
-              position: {
-                start: jsxNodes[0].position.start,
-                end: last(jsxNodes).position.end,
-              },
-            })
+          if (!offset) {
+            acc.push(this.combineLeftJsxNodes(jsxNodes))
             jsxNodes.length = 0
           }
         }
@@ -73,6 +75,9 @@ export class Traverse {
       } else {
         acc.push(node)
       }
+      if (index === length - 1 && jsxNodes.length) {
+        acc.push(this.combineLeftJsxNodes(jsxNodes))
+      }
       return acc
     }, [])
   }
@@ -87,9 +92,7 @@ export class Traverse {
     let children = node.children as Node[]
 
     if (children) {
-      if (!SKIP_COMBINE_JSX_TYPES.includes(node.type)) {
-        children = node.children = this.combineJsxNodes(children)
-      }
+      children = node.children = this.combineJsxNodes(children)
       children.forEach(child => this.traverse(child, node as Parent))
     }
 
diff --git a/packages/eslint-plugin-mdx/README.md b/packages/eslint-plugin-mdx/README.md
@@ -64,21 +64,35 @@ npm i -D @rxts/eslint-plugin-mdx
 
    2. If you're using `eslint@^5.0.0`, you need to enable this parser/plugin manually, because `eslint@5` does not support `extends` for `overrides` property in its configuration:
 
-      ```json
-      {
-        "extends": ["plugin:@rxts/mdx/recommended"],
-        "overrides": [
+      ```js
+      const rebass = require('rebass')
+
+      module.exports = {
+        extends: ['plugin:@rxts/mdx/recommended'],
+        overrides: [
           {
-            "files": ["*.mdx"],
-            "globals": {
-              "React": false
+            files: ['*.mdx'],
+            globals: Object.keys(rebass).reduce(
+              (globals, Component) =>
+                Object.assign(globals, {
+                  [Component]: false,
+                }),
+              {
+                React: false,
+              },
+            ),
+            rules: {
+              'lines-between-class-members': 0,
+              'react/jsx-no-undef': [
+                2,
+                {
+                  allowGlobals: true,
+                },
+              ],
+              'react/react-in-jsx-scope': 0,
             },
-            "rules": {
-              "lines-between-class-members": 0,
-              "react/react-in-jsx-scope": 0
-            }
-          }
-        ]
+          },
+        ],
       }
       ```
 
diff --git a/packages/eslint-plugin-mdx/package.json b/packages/eslint-plugin-mdx/package.json
@@ -22,6 +22,7 @@
     "eslint-plugin-react": ">=7.0.0"
   },
   "dependencies": {
-    "eslint-mdx": "^0.10.0"
+    "eslint-mdx": "^0.10.0",
+    "rebass": "^4.0.2"
   }
 }
diff --git a/packages/eslint-plugin-mdx/src/configs/overrides.ts b/packages/eslint-plugin-mdx/src/configs/overrides.ts
@@ -1,12 +1,26 @@
 import { base } from './base'
 
+import * as rebass from 'rebass'
+
 export const overrides = {
   ...base,
-  globals: {
-    React: false,
-  },
+  globals: Object.keys(rebass).reduce<Record<string, false>>(
+    (globals, Component) =>
+      Object.assign(globals, {
+        [Component]: false,
+      }),
+    {
+      React: false,
+    },
+  ),
   rules: {
     'lines-between-class-members': 0, // See https://github.com/mdx-js/mdx/issues/195
+    'react/jsx-no-undef': [
+      2,
+      {
+        allowGlobals: true,
+      },
+    ],
     'react/react-in-jsx-scope': 0,
   },
 }
diff --git a/test/__snapshots__/fixtures.test.ts.snap b/test/__snapshots__/fixtures.test.ts.snap
@@ -27,6 +27,51 @@ Lorem ipsum dolor sit _amet_, consectetur adipiscing elit. Ut ac lobortis velit.
 "
 `;
 
+exports[`fixtures should match all snapshots: blank-lines.mdx 1`] = `
+"import { Box } from '@rebass/emotion'
+
+# Getting Started
+
+If you have an existing project you want to integrate MDX with, check out
+the installation guides.
+
+<Box
+  p={3}
+  bg='lightgray'
+  style={{
+    textAlign: 'center',
+    fontWeight: 'bold',
+  }}
+>
+
+[Next.js](/getting-started/next) \\\\|
+[Gatsby](/getting-started/gatsby) \\\\|
+[Create React App](/getting-started/create-react-app) \\\\|
+[React Static](/getting-started/react-static) \\\\|
+[Webpack](/getting-started/webpack) \\\\|
+[Parcel](/getting-started/parcel) \\\\|
+[Zero](/getting-started/zero)
+
+</Box>
+
+# Hello, world!
+
+Here's a Twitter shortcode:
+
+<Tweet tweetId=\\"1116723357410447360\\" />
+
+<TextGradient>
+
+# Here's a text gradient shortcode!
+
+</TextGradient>
+
+Here's a YouTube shortcode:
+
+<YouTube videoId=\\"4fHw4GeW3EU\\" />
+"
+`;
+
 exports[`fixtures should match all snapshots: no-jsx-html-comments.mdx 1`] = `
 "# Title
 
@@ -53,4 +98,9 @@ Main <main> > </main>
 "
 `;
 
-exports[`fixtures should match all snapshots: parser.mdx 1`] = `undefined`;
+exports[`fixtures should match all snapshots: parser.mdx 1`] = `
+"# Title
+
+Header <header>
+"
+`;
diff --git a/test/fixtures/blank-lines.mdx b/test/fixtures/blank-lines.mdx
diff --git a/test/parser.test.ts b/test/parser.test.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,7 @@`
`22`	`22`	`"eslint-plugin-react": ">=7.0.0"`
`23`	`23`	`},`
`24`	`24`	`"dependencies": {`
`25`		`- "eslint-mdx": "^0.10.0"`
	`25`	`+ "eslint-mdx": "^0.10.0",`
	`26`	`+ "rebass": "^4.0.2"`
`26`	`27`	`}`
`27`	`28`	`}`