Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite/Addon-docs: Fix customization of MDX plugins #20116

Merged
merged 1 commit into from
Feb 2, 2023

Conversation

joshwooding
Copy link
Member

@joshwooding joshwooding commented Dec 7, 2022

Blocked by storybookjs/mdx2-csf#28
Replaces #20096
Closes #20116

Issue:

What I did

How to test

  • Is this testable with Jest or Chromatic screenshots?
  • Does this need a new example in the kitchen sink apps?
  • Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

Sorry, something went wrong.

@joshwooding joshwooding force-pushed the support-customization-of-mdx-plugins branch 2 times, most recently from ab3f5e9 to 52ab68f Compare December 11, 2022 01:00
skipCsf: true,
...mdxPluginOptions,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shilman How do you think we should merge these configs?

This setup always respects skipCsf but merges everything else

@joshwooding joshwooding force-pushed the support-customization-of-mdx-plugins branch 7 times, most recently from c88d18d to 930a4d2 Compare December 14, 2022 23:00
@joshwooding joshwooding force-pushed the support-customization-of-mdx-plugins branch 3 times, most recently from 253f95a to 7825e7e Compare December 24, 2022 00:30
@IanVS
Copy link
Member

IanVS commented Dec 29, 2022

I see this is still a draft, what is left to do before it is ready for review?

@joshwooding
Copy link
Member Author

I see this is still a draft, what is left to do before it is ready for review?

Was hoping to get some guidance on my earlier questions

@joshwooding joshwooding marked this pull request as ready for review January 3, 2023 15:44
@joshwooding joshwooding requested a review from shilman January 3, 2023 15:44
Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@joshwooding This is the current Webpack configuration in 7.0

https://github.com/storybookjs/storybook/blob/next/code/addons/docs/src/preset.ts#L46-L53

I'm wondering how this change squares with that. It's also possible that we made an unintentional breaking change there & we need to restore some level of configuration there that we deleted with the last round of changes. WDYT?

code/addons/docs/src/preset.ts Outdated Show resolved Hide resolved
@joshwooding joshwooding force-pushed the support-customization-of-mdx-plugins branch from 7825e7e to 504049f Compare January 6, 2023 12:14
@ndelangen
Copy link
Member

@shilman let's discuss tomorrow?

@shilman shilman changed the title Support customization of MDX plugins Addon-docs: Fix customization of MDX plugins Jan 12, 2023
@ndelangen ndelangen removed their assignment Jan 13, 2023
@joshwooding joshwooding force-pushed the support-customization-of-mdx-plugins branch 2 times, most recently from 7d14b62 to 3b38180 Compare January 26, 2023 00:47
@@ -15,10 +15,8 @@ const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith
export async function mdxPlugin(options: Options): Promise<Plugin> {
const include = /\.mdx?$/;
const filter = createFilter(include);
const addons = await options.presets.apply<StorybookConfig['addons']>('addons', []);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shilman addons wasn't defined when doing this. When I debugged the code it seems like I can get the options directly?

@joshwooding joshwooding force-pushed the support-customization-of-mdx-plugins branch from 3b38180 to 21dc26f Compare January 26, 2023 00:50
@joshwooding
Copy link
Member Author

I've tested this locally with:

 { name: "@storybook/addon-docs",
      options: {
      mdxPluginOptions: {
        mdxCompileOptions: {
          remarkPlugins: [remarkGfm]
        }
        }
      }
    }

and it works

Verified

This commit was signed with the committer’s verified signature.
joshwooding Josh Wooding
@joshwooding joshwooding force-pushed the support-customization-of-mdx-plugins branch from 21dc26f to a9f388e Compare January 26, 2023 11:00
@joshwooding joshwooding requested a review from shilman January 27, 2023 10:00
const docsOptions =
// @ts-expect-error - not sure what type to use here
addons.find((a) => [a, a.name].includes('@storybook/addon-docs'))?.options ?? {};
const { mdxPluginOptions, jsxOptions } = await options.presets.apply<Record<string, any>>(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This behavior is really strange. Neither @ndelangen or I know where options is coming from. Somehow this works. Merging and I hope that we can get rid of this code in 8.0 when we get rid of defining stories in MDX.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I was quite surprised too. I only found it when debugging through the code.

@shilman shilman changed the title Addon-docs: Fix customization of MDX plugins Vite/Addon-docs: Fix customization of MDX plugins Feb 2, 2023
@shilman shilman merged commit 3d4dfa4 into next Feb 2, 2023
@shilman shilman deleted the support-customization-of-mdx-plugins branch February 2, 2023 16:37
@ndelangen
Copy link
Member

@joshwooding you're a hero! ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

None yet

4 participants