wrapper replacement (#479)

mdx-js · Mar 21, 2019 · 410d43c · 410d43c
1 parent b44aa5d
commit 410d43c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 22 deletions.
diff --git a/packages/mdx/mdx-hast-to-jsx.js b/packages/mdx/mdx-hast-to-jsx.js
@@ -71,19 +71,18 @@ function toJSX(node, parentNode = {}, options = {}) {
       `const layoutProps = {
   ${exportNames.join(',\n')}
 };
-${layout ? `const MDXLayout = ${layout}` : ''}
+const MDXLayout = ${layout ? layout : '"wrapper"'}
 ${
   skipExport ? '' : 'export default'
 } function MDXContent({ components, ...props }) {
   return (
-    <div
-      name="wrapper"
+    <MDXLayout
+      {...layoutProps}
+      {...props}
       components={components}>
-      ${layout ? `<MDXLayout {...layoutProps} {...props}>` : ''}
       ${jsxNodes.map(childNode => toJSX(childNode, node)).join('')}
-      ${layout ? `</MDXLayout>` : ''}
-    </div>
-  )
+    </MDXLayout>
+    )
 }
 MDXContent.isMDXComponent = true`
     )

diff --git a/packages/mdx/test/index.test.js b/packages/mdx/test/index.test.js
@@ -101,12 +101,12 @@ it('Should match sample blog post snapshot', async () => {
 "/* @jsx mdx */
 
 const layoutProps = {};
-
+const MDXLayout = \\"wrapper\\";
 export default function MDXContent({ components, ...props }) {
   return (
-    <div name=\\"wrapper\\" components={components}>
+    <MDXLayout {...layoutProps} {...props} components={components}>
       <h1>{\`Hello World\`}</h1>
-    </div>
+    </MDXLayout>
   );
 }
 MDXContent.isMDXComponent = true;
@@ -375,10 +375,10 @@ const layoutProps = {
 const MDXLayout = ({children}) => <div>{children}</div>
 export default function MDXContent({ components, ...props }) {
   return (
-    <div
-      name=\\"wrapper\\"
+    <MDXLayout
+      {...layoutProps}
+      {...props}
       components={components}>
-      <MDXLayout {...layoutProps} {...props}>
       
 
 <h1>{\`Hello, world!\`}</h1>
@@ -426,9 +426,8 @@ export default function MDXContent({ components, ...props }) {
     \\\\\`};
 \\\\\`
 \`}</code></pre>
-      </MDXLayout>
-    </div>
-  )
+    </MDXLayout>
+    )
 }
 MDXContent.isMDXComponent = true"
 `)

diff --git a/packages/remark-mdx/test/__snapshots__/test.js.snap b/packages/remark-mdx/test/__snapshots__/test.js.snap
@@ -11,20 +11,19 @@ const layoutProps = {
 const MDXLayout = Foo
 export default function MDXContent({ components, ...props }) {
   return (
-    <div
-      name=\\"wrapper\\"
+    <MDXLayout
+      {...layoutProps}
+      {...props}
       components={components}>
-      <MDXLayout {...layoutProps} {...props}>
       
 
 
 <h1>{\`Hello, world! \`}<Foo bar={{ baz: 'qux' }} /></h1>
 <Baz>
   Hi!
 </Baz>
-      </MDXLayout>
-    </div>
-  )
+    </MDXLayout>
+    )
 }
 MDXContent.isMDXComponent = true"
 `;