Co-locate and bundle demos with their corresponding MDX

[jsardid]

Hello,

I'm having a look at your website architecture as inspiration for an MDX-based design system documentation site, and I have a question regarding the way you are using mdx-bundler with your demo components.

I was trying to co-locate my demo component files together with the MDX files, and import the demo directly from the MDX. I got some issues with this approach (related to my demos using styled-components) that I couldn't solve.

Then I saw how you are passing them all together inside the "components" prop of the MDXComponent instead, and I was thinking about the implications of this approach. As far as I understand, this way all demos are bundled together and sent to the client with the [slug] page, am I right?

Is there a reason why you chose this approach instead of importing the demos directly from the mdx files?

[benoitgrelard]

This is something @peduarte should be able to answer I think.