Vite: Support legacyMdx1 fallback flag

[IanVS]

Issue: #

What I did

Pair to #20747, adds support for legacyMdx1 feature flag to vite projects.

How to test

Same as webpack projects listed in the PR above. Note I didn't actually test it myself.

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[IanVS]

This did not have a TOC before my vscode addon picked it up and added it. But I think this change isn't the most general for all users, so I moved it from the top to lower on the list. I honestly have a bit of a hard time understanding what users need to do based on the migration instructions, but maybe others do.

[IanVS]

@valentinpalkovic I've fixed the conflicts here. Let me know if you have any concerns, it would be great to get this in soon, to achieve parity with the Webpack flag.

[valentinpalkovic]

@IanVS I followed the test instructions in the other PR for a vite sandbox. I have adjusted the name of Introduction.mdx to Introduction.stories.mdx. I have added MDX1 only syntax and enabled the legacy mdx1 feature flag. Unfortunately, the Introduction site is blank in Storybook.

[shilman]

LGTM!

[IanVS]

Note I didn't actually test it myself.

Guess I should have. :(

I did things the same way as webpack, so I'm confused why it's not working, but I'll take a look. Thanks.

[IanVS]

I'm seeing that the mdx1-csf transform is adding pragmas of '/* @jsxRuntime classic */\n' and '/* @jsx mdx */\n', and then using mdx as a global like:

    ' return mdx(MDXLayout, _extends({}, layoutProps, props, {\n' +
    '    components: components,\n' +
    '    mdxType: "MDXLayout"\n' +
    '  }), mdx(Meta, {\n' +
    '    title: "Example/Introduction",\n' +
    '    mdxType: "Meta"\n' +
    '  }), mdx("style", null, `\n' +

Which results in a ReferenceError: mdx is not defined error.

[IanVS]

OK, I figured this out. the MDX1 compiler for Webpack uses a loader which injects the mdx compiler (https://github.com/storybookjs/mdx1-csf/blob/d58cb032a8902b3f24ad487b6a7aae11ba8b33f6/loader.js#L12-L16), which we used to do in the vite plugin too, but removed for mdx2 because it was no longer necessary. So, this re-introduces the injecting of the mdx compiler, being sure to grab it from the right version of @mdx-js/react.

[shilman]

@IanVS does the fix of adding the MDX compiler belong in the mdx1-csf package? Ideally mdx1-csf and mdx2-csf should be interchangeable and it looks like they're not. I must've forgotten about that change in mdx2-csf. Or maybe I'm misunderstanding.

[IanVS]

I think ideally you're right, adding the mdx import should probably be done in the compile function itself, and not in the loader. That would allow them to be swapped out interchangeably (more or less, I think). I'm not sure if it was a change that we actually had to make in mdx2-csf, or mdx just compiles differently now and doesn't require the same kind of addition.