feat: integrate with eslint-mdx to lint .mdx with ESLint (#1195)

* feat: add eslint-mdx support to lint mdx files

* chore: lint examples

.eslintignore

@@ -1 +1,2 @@
-**/**/dist/**
+dist
+node_modules

core/docz-core/package.json

@@ -15,7 +15,7 @@
     "build": "yarn cross-env NODE_ENV=production rollup -c",
     "dev": "yarn cross-env NODE_ENV=development yarn build -w",
     "fix": "yarn lint --fix",
-    "lint": "yarn eslint . --ext .ts,.tsx",
+    "lint": "yarn eslint . --ext mdx,ts,tsx",
     "precommit": "lint-staged",
     "prepare": "yarn build",
     "test": "yarn jest"
@@ -61,7 +61,7 @@
     "cpy": "^7.3.0",
     "cross-env": "^5.2.1",
     "docz-rollup": "2.0.0-rc.54",
-    "eslint": "^6.3.0",
+    "eslint": "^6.5.1",
     "eslint-config-docz-ts": "^2.0.0-rc.1",
     "jest": "^24.9.0"
   }

core/docz-core/src/bundler/server.ts

@@ -9,7 +9,9 @@ export const server = (args: Args) => async () => {
   const doczrcFilepath = await findUp(finds('docz'))
   const machine = devServerMachine.withContext({ args, doczrcFilepath })
   const service = interpret(machine).onTransition(state => {
-    args.debug && console.log(state.value)
+    if (args.debug) {
+      console.log(state.value)
+    }
   })
 
   return {

core/docz-core/src/lib/DataServer.ts

@@ -54,7 +54,9 @@ export class DataServer {
 
   public close(): void {
     for (const state of this.states) {
-      isFunction(state.close) && state.close()
+      if (isFunction(state.close)) {
+        state.close()
+      }
     }
   }
 

core/docz-core/src/lib/Plugin.ts

@@ -37,7 +37,9 @@ export class Plugin<C = any> implements PluginFactory {
       if (plugins && plugins.length > 0) {
         for (const plugin of plugins) {
           const fn = get<Plugin, any>(method, plugin)
-          isFunction(fn) && fn(...args)
+          if (isFunction(fn)) {
+            fn(...args)
+          }
         }
       }
     }

core/docz-core/src/utils/docgen/externalProptypesHandler.ts

@@ -353,9 +353,11 @@ function filterSpecifiers(specifiers: any, computedPropNames: any) {
     if (HOP.call(computedPropNames, cp)) {
       for (const sp in specifiers) {
         if (HOP.call(specifiers, sp) && specifiers[sp].indexOf(cp) > -1) {
-          filteredSpecifiers[sp]
-            ? filteredSpecifiers[sp].push(cp)
-            : (filteredSpecifiers[sp] = [cp])
+          if (filteredSpecifiers[sp]) {
+            filteredSpecifiers[sp].push(cp)
+          } else {
+            filteredSpecifiers[sp] = [cp]
+          }
         }
       }
     }

core/docz-utils/package.json

@@ -15,7 +15,7 @@
     "dev": "cross-env NODE_ENV=development yarn build -w",
     "build": "trash lib && cross-env NODE_ENV=production rollup -c",
     "fix": "yarn lint --fix",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint . --ext mdx,ts,tsx",
     "precommit": "lint-staged"
   },
   "dependencies": {

core/docz/package.json

@@ -19,7 +19,7 @@
     "dev": "cross-env NODE_ENV=development yarn build -w",
     "build": "cross-env NODE_ENV=production rollup -c",
     "fix": "yarn lint --fix",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint . --ext mdx,ts,tsx",
     "precommit": "lint-staged"
   },
   "dependencies": {
@@ -53,6 +53,7 @@
     "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.4",
     "docz-rollup": "2.0.0-rc.54",
+    "eslint": "^6.5.1",
     "eslint-config-docz-ts": "^2.0.0-rc.1"
   }
 }

core/gatsby-theme-docz/package.json

@@ -54,7 +54,7 @@
   },
   "devDependencies": {
     "babel-eslint": "10.0.2",
-    "eslint": "^6.0.1",
+    "eslint": "^6.5.1",
     "eslint-config-docz-js": "^2.0.0-rc.1"
   },
   "peerDependencies": {

core/gatsby-theme-docz/src/wrapper.js

@@ -1,6 +1,4 @@
 import * as React from 'react'
 
-const Wrapper = ({ children }) => (
-  <React.Fragment>{children}</React.Fragment>
-)
+const Wrapper = ({ children }) => <React.Fragment>{children}</React.Fragment>
 export default Wrapper

core/rehype-docz/package.json

@@ -15,7 +15,7 @@
     "dev": "cross-env NODE_ENV=development yarn build -w",
     "build": "cross-env NODE_ENV=production rollup -c",
     "fix": "yarn lint --fix",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint . --ext mdx,ts,tsx",
     "precommit": "lint-staged",
     "test": "jest"
   },

core/remark-docz/package.json

@@ -15,7 +15,7 @@
     "dev": "cross-env NODE_ENV=development yarn build -w",
     "build": "cross-env NODE_ENV=production rollup -c",
     "fix": "yarn lint --fix",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint . --ext mdx,ts,tsx",
     "precommit": "lint-staged",
     "test": "jest"
   },

examples/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "extends": ["docz-js"],
+  "overrides": [
+    {
+      "files": "*.{ts,tsx}",
+      "extends": ["docz-ts"]
+    }
+  ]
+}

examples/create-react-app/package.json

@@ -17,9 +17,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

examples/create-react-app/src/App.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from 'react'
+import logo from './logo.svg'
+import './App.css'
 
 function App() {
   return (
@@ -20,7 +20,7 @@ function App() {
         </a>
       </header>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

examples/create-react-app/src/App.test.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})

examples/create-react-app/src/index.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'))
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister()

examples/create-react-app/src/serviceWorker.js

@@ -18,39 +18,39 @@ const isLocalhost = Boolean(
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
     )
-);
+)
 
 export function register(config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
+      return
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
 
       if (isLocalhost) {
         // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
+        checkValidServiceWorker(swUrl, config)
 
         // Add some additional logging to localhost, pointing developers to the
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
               'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
+          )
+        })
       } else {
         // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
+        registerValidSW(swUrl, config)
       }
-    });
+    })
   }
 }
 
@@ -59,9 +59,9 @@ function registerValidSW(swUrl, config) {
     .register(swUrl)
     .then(registration => {
       registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
+        const installingWorker = registration.installing
         if (installingWorker == null) {
-          return;
+          return
         }
         installingWorker.onstatechange = () => {
           if (installingWorker.state === 'installed') {
@@ -72,64 +72,64 @@ function registerValidSW(swUrl, config) {
               console.log(
                 'New content is available and will be used when all ' +
                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
+              )
 
               // Execute callback
               if (config && config.onUpdate) {
-                config.onUpdate(registration);
+                config.onUpdate(registration)
               }
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+              console.log('Content is cached for offline use.')
 
               // Execute callback
               if (config && config.onSuccess) {
-                config.onSuccess(registration);
+                config.onSuccess(registration)
               }
             }
           }
-        };
-      };
+        }
+      }
     })
     .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
+      console.error('Error during service worker registration:', error)
+    })
 }
 
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
+      const contentType = response.headers.get('content-type')
       if (
         response.status === 404 ||
         (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then(registration => {
           registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
+            window.location.reload()
+          })
+        })
       } else {
         // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
+        registerValidSW(swUrl, config)
       }
     })
     .catch(() => {
       console.log(
         'No internet connection found. App is running in offline mode.'
-      );
-    });
+      )
+    })
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
+      registration.unregister()
+    })
   }
 }

examples/monorepo-separate-docs/packages/alert-ts/src/index.tsx

@@ -9,7 +9,9 @@ const kinds = {
 
 type Kind = keyof typeof kinds
 
-type Props = { kind: Kind }
+interface Props {
+  kind: Kind
+}
 
 const AlertStyled: React.FC<Props> = ({ children, kind, ...rest }) => (
   <div

examples/react-native/src/components/Alert.mdx

@@ -35,7 +35,6 @@ import { Alert, Text } from './Alert'
 <Playground>
   {() => {
     const message = 'Hello world'
-
     return (
       <Alert><Text>{message}</Text></Alert>
     )

examples/react-router/src/gatsby-theme-docz/wrapper.js

@@ -1,6 +1,7 @@
-import React from "react";
-import { MemoryRouter } from "react-router-dom";
+import React from 'react'
+import { MemoryRouter } from 'react-router-dom'
 
+// eslint-disable-next-line react/display-name
 export default ({ children }) => {
-  return <MemoryRouter>{children}</MemoryRouter>;
-};
+  return <MemoryRouter>{children}</MemoryRouter>
+}

examples/typescript/src/components/Alert.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { SFC } from 'react'
 
 export type Kind = 'info' | 'positive' | 'negative' | 'warning'
@@ -19,6 +20,5 @@ export interface AlertProps {
 }
 
 export const Alert: SFC<AlertProps> = ({ kind, ...props }) => (
-  //@ts-ignore
-  <div className="alert"> </div>
+  <div className="alert"></div>
 )