Remove whitespace between unraveled text nodes

Closes GH-2000. Closes GH-2252.

Author: wooorm

packages/mdx/lib/plugin/remark-mark-and-unravel.js

@@ -1,4 +1,5 @@
 /**
+ * @typedef {import('mdast').Content} Content
  * @typedef {import('mdast').Root} Root
  *
  * @typedef {import('remark-mdx')} DoNotTouchAsThisImportItIncludesMdxInTree
@@ -47,6 +48,9 @@ export function remarkMarkAndUnravel() {
  if (all && oneOrMore) {
  offset = -1
 
+ /** @type {Array<Content>} */
+ const newChildren = []
+
  while (++offset < children.length) {
  const child = children[offset]
 
@@ -59,9 +63,18 @@ export function remarkMarkAndUnravel() {
  // @ts-expect-error: content model is fine.
  child.type = 'mdxFlowExpression'
  }
+
+ if (
+ child.type === 'text' &&
+ /^[\t\r\n ]+$/.test(String(child.value))
+ ) {
+ // Empty.
+ } else {
+ newChildren.push(child)
+ }
  }
 
- parent.children.splice(index, 1, ...children)
+ parent.children.splice(index, 1, ...newChildren)
  return index
  }
  }

packages/mdx/test/compile.js

@@ -1256,7 +1256,7 @@ test('MDX (JSX)', async () => {
  renderToStaticMarkup(
  React.createElement(await run(compileSync('<a>b</a>\t<b>c</b>')))
  ),
- '<a>b</a>\n\t\n<b>c</b>',
+ '<a>b</a>\n<b>c</b>',
  'should unravel JSX (text) and whitespace as only children'
  )
 
@@ -1363,6 +1363,46 @@ test('MDX (JSX)', async () => {
  '<i>the sum of one and one is: 2</i>',
  'should support JSX in expressions'
  )
+
+ // Important: there should not be whitespace in the `tr`.
+ // This is normally not present, but unraveling makes this a bit more complex.
+ // See: <https://github.com/mdx-js/mdx/issues/2000>.
+ assert.equal(
+ compileSync(`<table>
+ <thead>
+ <tr>
+ <th>a</th>
+ <th>b</th>
+ </tr>
+ </thead>
+</table>`).value,
+ [
+ '/*@jsxRuntime automatic @jsxImportSource react*/',
+ 'import {jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";',
+ 'function _createMdxContent(props) {',
+ ' return _jsx("table", {',
+ ' children: _jsx("thead", {',
+ ' children: _jsxs("tr", {',
+ ' children: [_jsx("th", {',
+ ' children: "a"',
+ ' }), _jsx("th", {',
+ ' children: "b"',
+ ' })]',
+ ' })',
+ ' })',
+ ' });',
+ '}',
+ 'function MDXContent(props = {}) {',
+ ' const {wrapper: MDXLayout} = props.components || ({});',
+ ' return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {',
+ ' children: _jsx(_createMdxContent, props)',
+ ' })) : _createMdxContent(props);',
+ '}',
+ 'export default MDXContent;',
+ ''
+ ].join('\n'),
+ 'should support JSX in expressions'
+ )
 })
 
 test('MDX (ESM)', async () => {