Docz: Docz - Playground doesn't accept () => { return <Node> }

[IhToN]

Bug Report

Describe the bug

After upgrading to the new documentation system I'm no longer able to add functions that returns a child node on the Playground component. When starting or trying to build the documentation this is what I get:

_UNHANDLED REJECTION unknown: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? (35:9)_

To Reproduce
`## Playground

{() => {
const demoImage = '';
const data = [{"id":0,"title":"Slide 0","image":demoImage},{"id":1,"title":"Slide 1","image":demoImage},{"id":2,"title":"Slide 2","image":demoImage},{"id":3,"title":"Slide 3","image":demoImage},{"id":4,"title":"Slide 4","image":demoImage},{"id":5,"title":"Slide 5","image":demoImage},{"id":6,"title":"Slide 6","image":demoImage},{"id":7,"title":"Slide 7","image":demoImage}]

let componentRef = React.createRef();

return <PGDemo>
    <AnimatedSlider
        ref={componentRef}
        id="pgdemo"
        data={data}
        slidesToShow={4}
        slideWidth={170}
        slideHeight={170}
        unpinSlide={1}
        pinSlide={3}
        leaveUp={() => console.log('Leaving up')}
        leaveDown={() => console.log('Leaving down')}
        leaveLeft={() => console.log('Leaving left')}
        leaveRight={() => console.log('Leaving right')}
        selectMethod={(data) => console.log('Selected >>', data)} />
</PGDemo>

}}

`

success run static queries - 0.017 s — 1/1 169.38 queries/second
Configuring yargs through package.json is deprecated and will be removed in the next major release, please use the JS API instead.

 ERROR 

UNHANDLED REJECTION unknown: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (54:9)

  52 |         selectMethod={(data) => console.log('Selected >>', data)} />
  53 | </PGDemo>
> 54 | `}</code></pre>
     |          ^
  55 | <p>{`  }}`}</p>
  56 | </Playground>
  57 |     </MDXLayout>/**/animated-slider/index.mdx: unknown: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (54:9)

  52 |         selectMethod={(data) => console.log('Selected >>', data)} />
  53 | </PGDemo>
> 54 | `}</code></pre>
     |          ^
  55 | <p>{`  }}`}</p>
  56 | </Playground>
  57 |     </MDXLayout>



  SyntaxError: unknown: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (54:9)
    52 |         selectMethod={(data) => console.log('Selected >>', data)} />
    53 | </PGDemo>
  > 54 | `}</code></pre>
       |          ^
    55 | <p>{`  }}`}</p>
    56 | </Playground>
    57 |     </MDXLayout>/**/animated-slider/index.mdx: unknown: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment   <>...</>? (54:9)
    52 |         selectMethod={(data) => console.log('Selected >>', data)} />
    53 | </PGDemo>
  > 54 | `}</code></pre>
       |          ^
    55 | <p>{`  }}`}</p>
    56 | </Playground>
    57 |     </MDXLayout>

Environment

• OS: Ubuntu 18.06
• Node/npm version: Node 10.8.0 / NPM 6.10.3
• Docz: 2.0.0-rc.1

[haudao]

I've solved this by deleting every empty line inside the Playground component.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rakannimer]

Hey @IhToN

I was able to give a function child to a Playground component :

1. npx create-docz-app my-app && cd my-app
2. Edit src/components/Alert.mdx

- <Playground><Alert>Some message</Alert></Playground>
+ <Playground>{() => <Alert>Some message</Alert>}</Playground>

1. Open http://localhost:3000/src-components-alert

You should see the Alert component in the Playground rendered as expected.

The UNHANDLED REJECTION unknown: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (54:9) is an MDX bug that doesn't allow for empty lines inside a closure in jsx

You can track it here : https://github.com/mdx-js/mdx/issues/767

An mdx-linter should remove these empty lines if you'd like to use it.