Implement runtime for MDX with buble (#177)

* Implement runtime for MDX with buble

* Add babel presets locally for ci

packages/runtime/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "env",
+    "stage-0",
+    "react"
+  ]
+}

packages/runtime/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/runtime/license

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2017-2018 Compositor and Zeit, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+

packages/runtime/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@mdx-js/runtime",
+  "description": "Parse and render MDX in a runtime environment",
+  "version": "0.0.1",
+  "license": "MIT",
+  "author": "John Otander",
+  "main": "dist",
+  "scripts": {
+    "test": "jest",
+    "prepare": "babel src -d dist"
+  },
+  "keywords": [
+    "mdx",
+    "react"
+  ],
+  "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"
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "^0.12.0",
+    "@mdx-js/tag": "^0.11.0",
+    "buble": "^0.19.3"
+  }
+}

packages/runtime/readme.md

@@ -0,0 +1,35 @@
+# Runtime MDX
+
+> Parse and render MDX in a runtime environment
+
+## :warning: Warning
+
+This is not the preferred way to use MDX since it introduces a substantial amount of overhead and dramatically increases bundle sizes.
+It should also not be used with user input that isn't sandboxed.
+
+## Installation
+
+```
+npm install --save @mdx-js/runtime
+```
+
+## Usage
+
+```jsx
+import React from 'react'
+import MDX from '@mdx-js/runtime'
+
+const components = {
+  h1: props => <h1 style={{ color: 'tomato' }} {...props} />
+}
+
+const mdx = '# Hello, world!'
+
+export default () => (
+  <MDX components={components}>{mdx}</MDX>
+)
+```
+
+## Related
+
+- [MDX Docs](https://github.com/mdx-js/mdx)

packages/runtime/src/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { transform } from 'buble'
+import mdx from '@mdx-js/mdx'
+import { MDXTag } from '@mdx-js/tag'
+
+export default ({ scope = {}, components = {}, children }) => {
+  const fullScope = {
+    MDXTag,
+    components,
+    ...scope
+  }
+
+  // We should add this as an output option to mdx core so we don't
+  // need to do hacky regexing.
+  const jsx = mdx.sync(children).replace(/^(\s)*export default \({components}\) =>/, '')
+  const { code } = transform(jsx)
+
+  const keys = Object.keys(fullScope)
+  const values = keys.map(key => fullScope[key])
+  const fn = new Function('_fn', 'React', ...keys, `return ${code}`)
+
+  return fn({}, React, ...values)
+}

packages/runtime/test/index.test.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { renderToString as render } from 'react-dom/server'
+import { MDXProvider } from '@mdx-js/tag'
+
+import MDX from '../src'
+
+const components = {
+  h1: props => <h1 style={{ color: 'tomato'}} {...props} />
+}
+
+const scope = {
+  Foo: props => <div>Foobarbaz</div>
+}
+
+const mdx = `
+# Hello, world
+
+<Foo />
+`
+
+it('renders MDX with the proper components', () => {
+  const result = render(
+    <MDX
+      components={components}
+      scope={scope}
+      children={mdx}
+    />
+  )
+
+  expect(result).toMatch(/style="color:tomato"/)
+  expect(result).toMatch(/Foobarbaz/)
+})