.eslintignore

@@ -1,2 +1,4 @@
 node_modules
 dist
+build
+.next

.eslintrc.yml

@@ -15,6 +15,8 @@ plugins:
   - prettier
 
 extends:
+  - eslint:recommended
+  - plugin:react/recommended
   - plugin:import/errors
   - xo
   - prettier
@@ -23,9 +25,21 @@ rules:
   eqeqeq: off
   no-eq-null: off
   no-negated-condition: off
-  no-unused-vars: off
+  no-unused-vars:
+    - error
+    - args: after-used
+      argsIgnorePattern: "^_"
+  no-var: error
   import/no-extraneous-dependencies: error
   prettier/prettier: error
+  no-console: off
+  react/prop-types: off
+  react/display-name: off
+  react/no-children-prop: off
+
+settings:
+  react: 
+    version: 16.3.2
 
 overrides:
   -
@@ -46,3 +60,8 @@ overrides:
     rules:
       import/no-unresolved: off
       import/no-extraneous-dependencies: off
+  -
+    files:
+      - "examples/next/**/*.js"
+    rules:
+      react/react-in-jsx-scope: off

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 package-lock.json
 dist
+build
 bundle.js
 .next
 *-error.log

docs/_app.js

@@ -25,6 +25,7 @@ const navOrder = [
     'gatsby',
     'x0',
     'typescript',
+    'react-static',
   'plugins',
   'advanced',
     'ast',

docs/_ui.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pre, Box, Border} from 'rebass'
+import {Pre} from 'rebass'
 import {LiveEditor as Editor, LivePreview} from '@compositor/x0/components'
 
 export const Logo = () => <img src="https://mdx-logo.now.sh" width="70" />

docs/advanced/custom-loader.md

@@ -1,7 +1,47 @@
-import { Message } from 'rebass'
-
 # Custom loader
 
-<Message>
-  This docs page is a WIP
-</Message>
+By design, the default MDX is very minimal and likely won’t see any additional features outside of the MDX spec.  However, webpack [makes it straightforward][webpack-loader] to write your own loader to add custom syntax support.
+
+Consider a scenario where you wanted to add frontmatter support to all your MDX documents.  You could achieve this with a remark plugin or a custom loader.  Here we’ll write a [custom loader][x0]:
+
+```js
+// lib/fm-loader.js
+const matter = require('gray-matter')
+const stringifyObject = require('stringify-object')
+
+module.exports = async function (src) {
+  const callback = this.async()
+  const { content, data } = matter(src)
+
+  const code = `export const frontMatter = ${stringifyObject(data)}
+
+${content}`
+
+  return callback(null, code)
+}
+```
+
+The loader code above parses out the frontmatter, exports it as the named export `frontMatter`, and then returns the rest of the document which will then be handled by `@mdx-js/loader` and then `babel-loader`.
+
+Then, you can use it with the following config:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.mdx?$/,
+        use: [
+          'babel-loader',
+          '@mdx-js/loader',
+          path.join(__dirname, './lib/fm-loader')
+        ]
+      }
+    ]
+  }
+}
+```
+
+[webpack-loader]: https://webpack.js.org/contribute/writing-a-loader
+
+[x0]: https://github.com/c8r/x0/blob/master/lib/mdx-fm-loader.js

docs/advanced/writing-a-plugin.md

@@ -1,7 +1,27 @@
-import { Message } from 'rebass'
-
 # Writing a plugin
 
-<Message>
-  This docs page is a WIP
-</Message>
+For a full-fledged introduction to plugins it’s recommended to read the [remark guides][remark-guides] and about [syntax trees][syntax-trees].
+
+Now let’s consider an example where we want to pass all headings through the [title][] module to ensure consistent capitalization.  We can use [unist-util-visit][] to visit all headings and change the text nodes with `title(text)`.
+
+```js
+const title = require('title')
+const visit = require('unist-util-visit')
+
+module.exports = () => (tree, file) => {
+  visit(tree, 'heading', node => {
+    visit(node, 'text', textNode => {
+      const text = textNode.value ? textNode.value.trim() : ''  
+      textNode.value = title(text)
+    })
+  })
+}
+```
+
+[remark-guides]: https://github.com/remarkjs/remark/blob/master/doc/plugins.md#creating-plugins
+
+[syntax-trees]: https://github.com/syntax-tree/unist#syntax-tree
+
+[title]: https://github.com/zeit/title
+
+[unist-util-visit]: https://github.com/syntax-tree/unist-util-visit

docs/getting-started/index.md

@@ -91,10 +91,55 @@ export default props =>
 This allows you to remove duplicated component imports and passing.
 It will typically go in layout files.
 
-#### How it works
+### How it works
 
-MDXProvider uses React [context][] to provide the component mapping to MDXTag.
-MDXTag knows to use these components when determining which to render.
+MDXProvider uses [React Context][context] to provide the component mapping to
+MDXTag.  This way MDXTag knows that it should override the standard components
+with those provided in this mapping.
+
+Because MDXProvider uses React Context directly, [it is affected by the same
+caveats][context-caveats].  It is therefore important that you do **not**
+declare your components mapping inline in the JSX.  Doing so will trigger a
+rerender of your entire MDX page with every render cycle.  Not only is this bad
+for performance, but it can cause unwanted side affects, like breaking in-page
+browser navigation.
+
+Avoid this by following the pattern shown above and declare your mapping as a
+constant.
+
+### Updating the mapping object during application runtime
+
+If you need to change the mapping during runtime, declare it on the componentʼs
+state object:
+
+```jsx
+import React from 'react'
+import { MDXProvider } from '@mdx-js/tag'
+
+import { Heading, Text, Pre, Code, Table } from './components'
+
+export default class Layout extends React.Component {
+  state = {
+    h1: Heading.H1,
+    h2: Heading.H2,
+    // ...
+    p: Text,
+    code: Pre,
+    inlineCode: Code
+  }
+
+  render() {
+    return (
+      <MDXProvider components={this.state}>
+        <main {...this.props} />
+      </MDXProvider>
+    )
+  }
+}
+```
+
+You can now use the `setState` function to update the mapping object and be
+assured that it wonʼt trigger unnecessary renders.
 
 ## Projects, libraries and frameworks
 
@@ -111,3 +156,4 @@ following commands:
 [next]: https://github.com/zeit/next.js
 
 [context]: https://reactjs.org/docs/context.html
+[context-caveats]: https://reactjs.org/docs/context.html#caveats

docs/getting-started/react-static.md

@@ -39,7 +39,6 @@ export default {
     return config;
   }
 };
-
 ```
 
 Finally, add an `.mdx` file anywhere in the `src` directory.

docs/projects.md

@@ -13,10 +13,11 @@
 *   [spectacle-boilerplate-mdx][]: Boilerplate that facilitates using MDX with
     Spectacle
 
-## Sites using MDX
+## Sites
 
 *   [ZEIT Docs][zeit-docs]
 *   [Compositor][compositor]
+*   [Prisma][prisma]
 
 ## Other related links
 
@@ -36,6 +37,8 @@
 
 [compositor]: https://compositor.io
 
+[prisma]: https://www.prisma.io/docs
+
 [awesome-mdx]: https://github.com/transitive-bullshit/awesome-mdx
 
 [spectacle-boilerplate-mdx]: https://github.com/FormidableLabs/spectacle-boilerplate-mdx

examples/create-react-app/config-overrides.js

@@ -1,5 +1,5 @@
 const {getBabelLoader} = require('react-app-rewired')
-module.exports = (config, env) => {
+module.exports = (config, _env) => {
   const babelLoader = getBabelLoader(config.module.rules)
   config.module.rules.map(rule => {
     if (typeof rule.test !== 'undefined' || typeof rule.oneOf === 'undefined') {

examples/create-react-app/package.json

@@ -2,15 +2,12 @@
   "private": true,
   "name": "mdx-create-react-app",
   "dependencies": {
-    "@mdx-js/loader": "^0.16.0",
-    "@mdx-js/mdx": "^0.16.0",
-    "@rebass/markdown": "^1.0.0",
-    "react": "^16.5.2",
+    "@mdx-js/loader": "^0.16.4",
+    "@mdx-js/mdx": "^0.16.4",
+    "react": "^16.6.3",
     "react-app-rewired": "^1.6.2",
-    "react-dom": "^16.5.2",
-    "react-scripts": "1.1.5",
-    "rebass": "^2.3.4",
-    "styled-components": "^3.4.9"
+    "react-dom": "^16.6.3",
+    "react-scripts": "1.1.5"
   },
   "scripts": {
     "start": "react-app-rewired start",

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

@@ -1,19 +1,17 @@
 import React, {Component} from 'react'
 import {MDXProvider} from '@mdx-js/tag'
-import {Container, Provider as RebassProvider} from 'rebass'
-import createComponents from '@rebass/markdown'
 
 import Hello from './hello.md'
 
+const components = {
+  h1: props => <h1 style={{color: 'tomato'}} {...props} />
+}
+
 class App extends Component {
   render() {
     return (
-      <MDXProvider components={createComponents()}>
-        <RebassProvider>
-          <Container>
-            <Hello />
-          </Container>
-        </RebassProvider>
+      <MDXProvider components={components}>
+        <Hello />
       </MDXProvider>
     )
   }

examples/create-react-app/src/hello.md

@@ -1,26 +1,3 @@
-import {
-  Card,
-  Box,
-  BackgroundImage,
-  Subhead,
-  Small
-} from 'rebass'
-
 # Hello, world!
 
 This is MDX!
-
-<Box width={300}>
-  <Card>
-    <BackgroundImage src="https://images.unsplash.com/photo-1533529318682-0c3e2fc1e225" />
-    <Box p={2}>
-      <Subhead>
-        <a href="https://unsplash.com/photos/e3hDxz86IxI">Alone but Powerful</a>
-      </Subhead>
-      <Small>
-        Photo by <a href="https://unsplash.com/@tentides">Jeremy Bishop</a> on{' '}
-        <a href="https://unsplash.com">Unsplash</a>
-      </Small>
-    </Box>
-  </Card>
-</Box>