MDX story snippets

[zeorin]

I'm using the snippet generation in my project, and it works great. But I'd like to be able to have MDX stories be generated as snippets, too.

[rbardini]

Hi @zeorin! I never tried it with MDX, but it might work if we add mdx to the supported extensions:

storybook-addon-playroom/src/generateSnippets.tsx

Line 40 in a0b23ca

const extensions = ['ts', 'tsx', 'js', 'jsx'];

You can give it a try by manually changing the file in node_modules. We can incorporate the change into the source code if it works, otherwise it may require more investigation.

[zeorin]

I tried that already, actually:

Unexpected error: SyntaxError: Cannot use import statement outside a module

[umar-ahmed]

Seems like it might require more investigation to try and support mdx based stories. In the meantime, is there any way to filter out the stories that use mdx? Right now it seems like if you have a mix of mdx and js based stories the snippet generator will fail with the complaint @zeorin mentioned.

[umar-ahmed]

I'm pretty sure the generateSnippets script is based on the one here in the storyshots addon.

One thing I noticed is that they mention that in order for that code to work with MDX based stories, you have to apply this transform that they provide for Jest: https://github.com/storybookjs/storybook/blob/next/addons/storyshots/storyshots-core/README.md#configure-jest-for-mdx-docs-add-on-stories.

It basically boils down to running their MDX compiler plugin like so:

https://github.com/storybookjs/storybook/blob/8ab8425ec556f7350bcc211154ed26efd62a7508/addons/docs/jest-transform-mdx.js#L12-L22

This makes sense in a Jest environment, but I'm not quite sure how you would apply that same idea here

[rbardini]

Indeed, the script is based on StoryShots addon, with Jest dependencies removed. I'm not sure we can do the same here though, as the Storybook client API doesn't seem to support transformers—if it had, the Jest setup would not be needed in the first place.

Haven't had time to look into this yet, but if anyone wants to give it a try, a PR would be very welcome 🙂

[umar-ahmed]

@rbardini I can give it a go.

The approach I'm going to try is described here: mdx-js/mdx#171 (comment). I'm going to hijack Node's require and try to use something similar to the Jest transform linked earlier.

If someone thinks of a better solution, please do share! 😄

[umar-ahmed]

Ran out of time today, but I managed to get something kinda working: master...umar-ahmed:master

The main issue I am seeing is that for React elements, it converts it to MDXCreateElement:

I'm assuming that's to support changing the actual element used at runtime, but not sure how to get it to actually use a normal span tag there

[rbardini]

That looks very promising, @umar-ahmed! Nice work 👍

Don't know how to get rid of the MDXCreateElement elements, but if nothing else works we might use the displayName and filterProps options from react-element-to-jsx-string.