fix(tables) remove new line backtick wrapping (#180)

Removes extra whitespace between tags due to \n being wrapped.

- Add table to fixture
- Create test to fail on single wrapped new lines
- Update test with wrapped line and extra 's'
- Add table to next.js example

closes #151

examples/next/md/markdown.md

@@ -11,3 +11,9 @@ import Other from './other.md'
 Here's a paragraph
 
 https://c8r.imgix.net/028ab8c85da415103cb3b1eb/johno.png
+
+Here's a table
+
+| Test | Table |
+| :--- | :---- |
+| Col1 | Col2  |

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

@@ -57,9 +57,9 @@ function toJSX(node, parentNode = {}) {
     }${props ? ` props={${props}}` : ''}>${children}</MDXTag>`
   }
 
-  // Wraps all text nodes inside template string, so that we don't run into escaping issues.
+  // Wraps all text nodes except new lines inside template string, so that we don't run into escaping issues.
   if(node.type === 'text') {
-    return '{`' + node.value.replace(/`/g, '\\`').replace(/\$/g, '\\$') + '`}'
+    return node.value === '\n' ? node.value : '{`' + node.value.replace(/`/g, '\\`').replace(/\$/g, '\\$') + '`}'
   }
 
   if (

packages/mdx/test/fixtures/blog-post.md

@@ -31,4 +31,8 @@ module.exports = 'test'
 npm i -g foo
 ```
 
+| Test | Table |
+| :--- | :---- |
+| Col1 | Col2  |
+
 export default ({children}) => <div>{children}</div>

packages/mdx/test/index.test.js

@@ -52,16 +52,24 @@ it('Should render HTML inside inlineCode correctly', async () => {
   ).toBeTruthy()
 })
 
-it('Should recognize components as propertiess', async () => {
-  const result = await mdx('# Hello\n\n<MDX.Foo />')
-
+it('Should recognize components as properties', async () => {
+  const result = await mdx('# Hello\n\n<MDX.Foo />')  
   expect(
     result.includes(
-      '<MDXTag name="h1" components={components}>{`Hello`}</MDXTag>{`\n`}<MDX.Foo />'
+      '<MDXTag name="h1" components={components}>{`Hello`}</MDXTag>\n<MDX.Foo />'
     )
   ).toBeTruthy()
 })
 
+it('Should render elements without wrapping blank new lines', async () => {
+  const result = await mdx(`
+  | Test | Table |
+  | :--- | :---- |
+  | Col1 | Col2  |`)    
+
+  expect(result.includes('{`\n`}')).toBe(false)
+})
+
 test('Should await and render async plugins', async () => {
   const result = await mdx(fixtureBlogPost, {
     hastPlugins: [

packages/mdx/yarn.lock

@@ -130,12 +130,6 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-"@mdx-js/mdxast@^0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@mdx-js/mdxast/-/mdxast-0.7.2.tgz#588e3ad617465ca4b67a50c0079f222fb2d65614"
-  dependencies:
-    unist-util-visit "^1.3.0"
-
 abab@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"