lerna.json

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

package.json

@@ -24,6 +24,7 @@
   },
   "scripts": {
     "bootstrap": "lerna bootstrap && lerna link --force-local",
+    "clean": "lerna exec \"rm -rf node_modules\"",
     "docs": "x0 docs",
     "docs:build": "x0 build docs",
     "docs:deploy": "npm run docs:build && now dist --public && now alias",

packages/loader/package.json

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

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

@@ -108,6 +108,8 @@ function toJSX(node, parentNode = {}, options = {}) {
     this.layout = ${layout}
   }
   render() {
+    const { components = {} } = this.props
+
     return <MDXTag
              name="wrapper"
              ${layout ? `Layout={this.layout} layoutProps={props}` : ''}

packages/mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdx-js/mdx",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "description": "Parse MDX and transpile to JSX",
   "license": "MIT",
   "keywords": [
@@ -43,10 +43,14 @@
     "@babel/core": "^7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
     "@babel/plugin-syntax-jsx": "^7.0.0",
+    "@babel/plugin-transform-react-jsx": "^7.1.6",
     "@mapbox/rehype-prism": "^0.3.0",
+    "@mdx-js/tag": "^0.16.1",
     "hast-util-select": "^3.0.0",
     "jest": "^23.6.0",
     "prettier": "^1.14.2",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
     "rehype-katex": "^1.1.1",
     "remark-math": "^1.0.4"
   },

packages/mdx/test/index.test.js

@@ -1,13 +1,17 @@
 const babel = require('@babel/core')
-const mdx = require('../index')
-const mdxHastToJsx = require('../mdx-hast-to-jsx')
 const fs = require('fs')
 const path = require('path')
 const {select} = require('hast-util-select')
 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 React = require('react')
+const {renderToStaticMarkup} = require('react-dom/server')
+
+const mdx = require('..')
+const mdxHastToJsx = require('../mdx-hast-to-jsx')
 
 const fixtureBlogPost = fs.readFileSync(
   path.join(__dirname, './fixtures/blog-post.md')
@@ -21,12 +25,43 @@ const parse = code =>
     ]
   })
 
+const transform = code =>
+  babel.transform(code, {
+    plugins: [
+      '@babel/plugin-transform-react-jsx',
+      '@babel/plugin-proposal-object-rest-spread'
+    ]
+  }).code
+
+const renderWithReact = async mdxCode => {
+  const jsx = await mdx(mdxCode, {skipExport: true})
+  const code = transform(jsx)
+  const scope = {MDXTag}
+
+  const fn = new Function( // eslint-disable-line no-new-func
+    'React',
+    ...Object.keys(scope),
+    `
+      ${code}; return React.createElement(MDXContent)`
+  )
+
+  const element = fn(React, ...Object.values(scope))
+
+  return renderToStaticMarkup(element)
+}
+
 it('Should output parseable JSX', async () => {
   const result = await mdx('Hello World')
 
   parse(result)
 })
 
+it('Should be able to render JSX with React', async () => {
+  const result = await renderWithReact('# Hello, world!')
+
+  expect(result).toContain('<h1>Hello, world!</h1>')
+})
+
 it('Should output parseable JSX when using < or >', async () => {
   const result = await mdx(`
   # Hello, MDX
@@ -53,6 +88,8 @@ it('Should match sample blog post snapshot', async () => {
     this.layout = undefined;
   }
   render() {
+    const { components = {} } = this.props;
+
     return (
       <MDXTag name=\\"wrapper\\" components={components}>
         <MDXTag name=\\"h1\\" components={components}>{\`Hello World\`}</MDXTag>

packages/parcel-plugin-mdx/package.json

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

packages/runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdx-js/runtime",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "description": "Parse and render MDX in a runtime environment",
   "license": "MIT",
   "keywords": [
@@ -30,18 +30,18 @@
     "src/"
   ],
   "dependencies": {
-    "@mdx-js/mdx": "^0.16.2",
+    "@mdx-js/mdx": "^0.16.3",
     "@mdx-js/tag": "^0.16.1",
-    "buble": "^0.19.3"
+    "buble": "^0.19.6"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
-    "jest": "^23.2.0",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "jest": "^23.6.0",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
     "rehype-add-classes": "^1.0.0",
     "remark-autolink-headings": "^5.0.0",
     "remark-slug": "^5.1.0"

packages/runtime/src/index.js

@@ -29,15 +29,15 @@ export default ({
   const {code} = transform(jsx)
 
   const keys = Object.keys(fullScope)
-  const values = keys.map(key => fullScope[key])
+  const values = Object.values(fullScope)
   // eslint-disable-next-line no-new-func
   const fn = new Function(
     '_fn',
     'React',
     ...keys,
     `${code}
 
-  return React.createElement(MDXContent);`
+  return React.createElement(MDXContent, { components });`
   )
 
   return fn({}, React, ...values)