From e51112746e613b1f16cbe121fc050bdaba0a4ca7 Mon Sep 17 00:00:00 2001
From: Max Stoiber <mxstbr@github.com>
Date: Wed, 23 Jan 2019 11:09:41 +0100
Subject: [PATCH 1/2] Pass exports to Layout

Closes #378
---
 packages/mdx/mdx-hast-to-jsx.js | 21 ++++++++--
 packages/mdx/test/index.test.js | 68 ++++++++++++++++++++++++++++++++-
 2 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/packages/mdx/mdx-hast-to-jsx.js b/packages/mdx/mdx-hast-to-jsx.js
index 3dc6ec4a2..c9cd81a28 100644
--- a/packages/mdx/mdx-hast-to-jsx.js
+++ b/packages/mdx/mdx-hast-to-jsx.js
@@ -95,14 +95,23 @@ function toJSX(node, parentNode = {}, options = {}) {
 
       jsxNodes.push(childNode)
     }
+
+    const exportNames = exportNodes
+      .map(node =>
+        node.value.match(/export\s*(var|const|let|class|function)?\s*(\w+)/)
+      )
+      .map(match => (Array.isArray(match) ? match[2] : null))
+      .filter(Boolean)
+
     return (
       importNodes.map(childNode => toJSX(childNode, node)).join('\n') +
       '\n' +
       exportNodes.map(childNode => toJSX(childNode, node)).join('\n') +
       '\n' +
-      `${
-        skipExport ? '' : 'export default'
-      } class MDXContent extends React.Component {
+      `const layoutProps = {
+  ${exportNames.join(',\n')}
+};
+${skipExport ? '' : 'export default'} class MDXContent extends React.Component {
   constructor(props) {
     super(props)
     this.layout = ${layout || 'null'}
@@ -112,7 +121,11 @@ function toJSX(node, parentNode = {}, options = {}) {
 
     return <MDXTag
              name="wrapper"
-             ${layout ? `Layout={this.layout} layoutProps={props}` : ''}
+             ${
+               layout
+                 ? `Layout={this.layout} layoutProps={{ ...layoutProps, ...props }}`
+                 : ''
+             }
              components={components}>${jsxNodes
                .map(childNode => toJSX(childNode, node))
                .join('')}
diff --git a/packages/mdx/test/index.test.js b/packages/mdx/test/index.test.js
index 20ca8881a..ff409003c 100644
--- a/packages/mdx/test/index.test.js
+++ b/packages/mdx/test/index.test.js
@@ -91,7 +91,8 @@ it('Should match sample blog post snapshot', async () => {
   const result = await mdx(`# Hello World`)
 
   expect(prettier.format(result, {parser: 'babylon'})).toMatchInlineSnapshot(`
-"export default class MDXContent extends React.Component {
+"const layoutProps = {};
+export default class MDXContent extends React.Component {
   constructor(props) {
     super(props);
     this.layout = null;
@@ -350,3 +351,68 @@ test('Should expose a sync compiler', () => {
 
   expect(result).toMatch(/Hello, world!/)
 })
+
+test('Should handle layout props', () => {
+  const result = mdx.sync(fixtureBlogPost)
+
+  expect(result).toMatchInlineSnapshot(`
+"import { Baz } from './Fixture'
+import { Buz } from './Fixture'
+export const foo = {
+  hi: \`Fudge \${Baz.displayName || 'Baz'}\`,
+  authors: [
+    'fred',
+    'sally'
+  ]
+}
+const layoutProps = {
+  foo
+};
+export default class MDXContent extends React.Component {
+  constructor(props) {
+    super(props)
+    this.layout = ({children}) => <div>{children}</div>
+
+  }
+  render() {
+    const { components, ...props } = this.props
+
+    return <MDXTag
+             name=\\"wrapper\\"
+             Layout={this.layout} layoutProps={{ ...layoutProps, ...props }}
+             components={components}>
+
+<MDXTag name=\\"h1\\" components={components}>{\`Hello, world!\`}</MDXTag>
+<MDXTag name=\\"p\\" components={components}>{\`I'm an awesome paragraph.\`}</MDXTag>
+{/* I'm a comment */}
+<Foo bg='red'>
+  <Bar>hi</Bar>
+    {hello}
+    {/* another commment */}
+</Foo>
+<MDXTag name=\\"pre\\" components={components}><MDXTag name=\\"code\\" components={components} parentName=\\"pre\\" props={{}}>{\`test codeblock
+\`}</MDXTag></MDXTag>
+<MDXTag name=\\"pre\\" components={components}><MDXTag name=\\"code\\" components={components} parentName=\\"pre\\" props={{\\"className\\":\\"language-js\\"}}>{\`module.exports = 'test'
+\`}</MDXTag></MDXTag>
+<MDXTag name=\\"pre\\" components={components}><MDXTag name=\\"code\\" components={components} parentName=\\"pre\\" props={{\\"className\\":\\"language-sh\\"}}>{\`npm i -g foo
+\`}</MDXTag></MDXTag>
+<MDXTag name=\\"table\\" components={components}>
+<MDXTag name=\\"thead\\" components={components} parentName=\\"table\\">
+<MDXTag name=\\"tr\\" components={components} parentName=\\"thead\\">
+<MDXTag name=\\"th\\" components={components} parentName=\\"tr\\" props={{\\"align\\":\\"left\\"}}>{\`Test\`}</MDXTag>
+<MDXTag name=\\"th\\" components={components} parentName=\\"tr\\" props={{\\"align\\":\\"left\\"}}>{\`Table\`}</MDXTag>
+</MDXTag>
+</MDXTag>
+<MDXTag name=\\"tbody\\" components={components} parentName=\\"table\\">
+<MDXTag name=\\"tr\\" components={components} parentName=\\"tbody\\">
+<MDXTag name=\\"td\\" components={components} parentName=\\"tr\\" props={{\\"align\\":\\"left\\"}}>{\`Col1\`}</MDXTag>
+<MDXTag name=\\"td\\" components={components} parentName=\\"tr\\" props={{\\"align\\":\\"left\\"}}>{\`Col2\`}</MDXTag>
+</MDXTag>
+</MDXTag>
+</MDXTag>
+
+           </MDXTag>
+  }
+}"
+`)
+})

From ad2c7332b595075c396f33627513d8fb0ca7ec6e Mon Sep 17 00:00:00 2001
From: Max Stoiber <contact@mxstbr.com>
Date: Thu, 24 Jan 2019 08:42:03 +0100
Subject: [PATCH 2/2] Use Object.assign

---
 packages/mdx/mdx-hast-to-jsx.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mdx/mdx-hast-to-jsx.js b/packages/mdx/mdx-hast-to-jsx.js
index c9cd81a28..9231d971c 100644
--- a/packages/mdx/mdx-hast-to-jsx.js
+++ b/packages/mdx/mdx-hast-to-jsx.js
@@ -123,7 +123,7 @@ ${skipExport ? '' : 'export default'} class MDXContent extends React.Component {
              name="wrapper"
              ${
                layout
-                 ? `Layout={this.layout} layoutProps={{ ...layoutProps, ...props }}`
+                 ? `Layout={this.layout} layoutProps={Object.assign({}, layoutProps, props)}`
                  : ''
              }
              components={components}>${jsxNodes