CLI: MDX template support

[shilman]

Issue: #7543

What I did

• Added --story-format option to sb init, defaulting to CSF
• Added MDX template support for React, Vue, Angular, HTML
• Prepared all templates for multiple story format support (e.g. typescript)
• Updated the CLI tests for MDX

How to test

New test argument for testing MDX:

cd lib/cli
yarn test -s mdx

[shilman]

@Aaron-Pool I've tested all of the templates per the instructions above, and the Vue MDX templates are failing due to some babel issue. Would you mind taking a look? The difference between these test cases and examples/vue-kitchen-sink is not obvious to me on first look.

[shilman]

@tmeasday @igor-dv The React examples are mostly failing unless I set configureJSX = true. I'm wondering whether it should be true by default starting in 6.0, or whether we can do some more sophisticated auto-detection? This seems to be the last obstacle to a nice zero-config setup for React.

[Aaron-Pool]

@shilman didn't have time to dig in super deep this morning, but I did see that you have two Vue mdx stories with JSX, and to the best of my knowledge, that's still a no go.

[tmeasday]

@shilman I don't really understand what's going on there you may need to spell it out for me.

[shilman]

@Aaron-Pool the MDX files in the template are functions that return objects that contain template: '<some jsx>' fields, which is the same as what's in vue-kitchen-sink. AFAIK it's "inline" JSX that's still broken for vue, no?

[Aaron-Pool]

@shilman, I don't think that's correct. If you look at the areas I commented, they use JSX in render functions. Which aren't template: '<blah/> format. The core technical issue with Vue jsx in the MDX doc is that it introduces a second distinct flavor of jsx on the page. Both flavors need to be transpiled by their own loader, and only their own loader, or else the result won't be correct.

So, no matter what order the Babel loaders run in, the final product be in an error state. If the Vue jsx one runs first, then it will incorrectly transpile the jsx outside of the story blocks and things will be broken. If react jsx runs first, it will try to transpile the jsx in the story incorrectly, and things will be broken. Bit of a catch-22.

That was why in a thread a while ago I suggested using babel macros by Kent Dodds to implement story blocks for different view layers, because it's a pretty elegant way of scoping Babel transformations to a particular code block. Still something worth considering imho.

[shilman]

@Aaron-Pool You're right! 🙇 I'm going to remove that story from the template for now, and we can figure a better solution together separately.

UPDATE: Removed the JSX stories but still getting the same error. 😭 What else is different about the vue-kitchen-sink example that it works?

[Aaron-Pool]

Looks fine for me, in the Vue area, at least 👍