docs/getting-started/react-static.md

@@ -0,0 +1,54 @@
+# React Static
+
+In order to use MDX with [React Static][react-static] you just need to [configure the `webpack` option](https://react-static.js.org/docs/config/#webpack) in `static.config.js`.
+
+First, scaffold a new React Static site:
+
+```shell
+react-static create myapp
+yarn add @mdx-js/loader
+```
+
+Then add the `webpack` field to your `static.config.js`:
+
+```javascript
+export default {
+  getSiteData: () => ({
+    // ...
+  }),
+  getRoutes: async () => {
+    // ...
+  },
+  webpack: config => {
+    config.module.rules.map(rule => {
+      // rules is an array of objects, we want the one with the `oneOf` field
+      if (
+        typeof rule.test !== 'undefined' ||
+        typeof rule.oneOf === 'undefined'
+      ) {
+        return rule;
+      }
+      // add the mdx-js loader to it
+      rule.oneOf.unshift({
+        test: /.mdx$/,
+        use: ['babel-loader', '@mdx-js/loader']
+      });
+
+      return rule;
+    });
+    return config;
+  }
+};
+
+```
+
+Finally, add an `.mdx` file anywhere in the `src` directory.
+It “Just Works” when you import it.
+
+```markdown
+# My first MDX Page
+
+some awesome content
+```
+
+[react-static]: http://react-static.js.org

docs/projects.md

@@ -1,5 +1,11 @@
 # Projects using MDX
 
+## Apps
+
+*   [demoboard][]: The simplest editor alive
+
+## Libraries
+
 *   [ok-mdx][]: Browser-based MDX editor
 *   [docz][]: Documentation framework
 *   [mdx-deck][]: MDX-based presentation decks
@@ -16,6 +22,8 @@
 
 *   [awesome-mdx][]
 
+[demoboard]: https://frontarm.com/demoboard
+
 [ok-mdx]: https://github.com/jxnblk/ok-mdx
 
 [mdx-deck]: https://github.com/jxnblk/mdx-deck

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "3.4.0",
-  "version": "0.16.4",
+  "version": "0.16.5",
   "packages": [
     "packages/*"
   ],

packages/loader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdx-js/loader",
-  "version": "0.16.4",
+  "version": "0.16.5",
   "description": "Loader for MDX",
   "license": "MIT",
   "keywords": [
@@ -27,7 +27,7 @@
     "index.js"
   ],
   "dependencies": {
-    "@mdx-js/mdx": "^0.16.4",
+    "@mdx-js/mdx": "^0.16.5",
     "@mdx-js/tag": "^0.16.1",
     "loader-utils": "^1.1.0"
   },

packages/mdx/mdx-hast-to-jsx.js

@@ -108,7 +108,7 @@ function toJSX(node, parentNode = {}, options = {}) {
     this.layout = ${layout || 'null'}
   }
   render() {
-    const { components = {}, ...props } = this.props
+    const { components, ...props } = this.props
 
     return <MDXTag
              name="wrapper"

packages/mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdx-js/mdx",
-  "version": "0.16.4",
+  "version": "0.16.5",
   "description": "Parse MDX and transpile to JSX",
   "license": "MIT",
   "keywords": [

packages/mdx/test/index.test.js

@@ -6,7 +6,7 @@ const prism = require('@mapbox/rehype-prism')
 const math = require('remark-math')
 const katex = require('rehype-katex')
 const prettier = require('prettier')
-const {MDXTag} = require('@mdx-js/tag')
+const {MDXTag, MDXProvider} = require('@mdx-js/tag')
 const React = require('react')
 const {renderToStaticMarkup} = require('react-dom/server')
 
@@ -46,8 +46,18 @@ const renderWithReact = async mdxCode => {
   )
 
   const element = fn(React, ...Object.values(scope))
+  const components = {
+    h1: ({children}) =>
+      React.createElement('h1', {style: {color: 'tomato'}}, children)
+  }
+
+  const elementWithProvider = React.createElement(
+    MDXProvider,
+    {components},
+    element
+  )
 
-  return renderToStaticMarkup(element)
+  return renderToStaticMarkup(elementWithProvider)
 }
 
 it('Should output parseable JSX', async () => {
@@ -59,7 +69,7 @@ it('Should output parseable JSX', async () => {
 it('Should be able to render JSX with React', async () => {
   const result = await renderWithReact('# Hello, world!')
 
-  expect(result).toContain('<h1>Hello, world!</h1>')
+  expect(result).toContain('<h1 style="color:tomato">Hello, world!</h1>')
 })
 
 it('Should output parseable JSX when using < or >', async () => {
@@ -88,7 +98,7 @@ it('Should match sample blog post snapshot', async () => {
     this.layout = null;
   }
   render() {
-    const { components = {}, ...props } = this.props;
+    const { components, ...props } = this.props;
 
     return (
       <MDXTag name=\\"wrapper\\" components={components}>

packages/parcel-plugin-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdx-js/parcel-plugin-mdx",
-  "version": "0.16.4",
+  "version": "0.16.5",
   "description": "Parcel plugin for MDX",
   "license": "MIT",
   "keywords": [
@@ -27,7 +27,7 @@
     "src"
   ],
   "dependencies": {
-    "@mdx-js/mdx": "^0.16.4",
+    "@mdx-js/mdx": "^0.16.5",
     "parcel-bundler": "^1.4.1"
   },
   "peerDependencies": {

packages/runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdx-js/runtime",
-  "version": "0.16.4",
+  "version": "0.16.5",
   "description": "Parse and render MDX in a runtime environment",
   "license": "MIT",
   "keywords": [
@@ -30,7 +30,7 @@
     "src/"
   ],
   "dependencies": {
-    "@mdx-js/mdx": "^0.16.4",
+    "@mdx-js/mdx": "^0.16.5",
     "@mdx-js/tag": "^0.16.1",
     "buble": "^0.19.6"
   },