Use unified plugin only for MDX transform #10869
Conversation
🦋 Changeset detectedLatest commit: 9209ee0 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
pkg: integration
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
There was a problem hiding this comment.
This file is a port of ./babel.ts so I understand if this is a bit raw to review 😄 Let me know if there's part you don't understand or grasp and I can add additional comments.
| @@ -30,7 +31,6 @@ export function createMdxProcessor(mdxOptions: MdxOptions, extraOptions: MdxProc | |||
| rehypePlugins: getRehypePlugins(mdxOptions), | |||
| recmaPlugins: mdxOptions.recmaPlugins, | |||
| remarkRehypeOptions: mdxOptions.remarkRehype, | |||
| jsx: true, | |||
There was a problem hiding this comment.
This is removed so the default of jsx is false, so MDX will compile directly to JS instead of needing a babel step.
There was a problem hiding this comment.
That must be quite faster I assume!
| function injectUnderscoreFragmentImport(code: string, imports: readonly ImportSpecifier[]) { | ||
| if (!isSpecifierImported(code, imports, underscoreFragmentImportRegex, 'astro/jsx-runtime')) { |
There was a problem hiding this comment.
I changed the Fragment detection to _Fragment as it's often already generated by MDX, which should reduce the code generation.
|
@ematipico This is merging into the |
|
I didn't see that, sorry @bluwy Feel free to remove the milestone and merge it whenever you want |
* fix(mdx): convert remark-images-to-component plugin to a rehype plugin (#10697) * Remove fs read for MDX transform (#10866) * Tag MDX component for faster checks when rendering (#10864) * Use unified plugin only for MDX transform (#10869) * Only traverse children and handle mdxJsxTextElement when optimizing (#10885) * Rename to `optimize.ignoreComponentNames` in MDX (#10884) * Allow remark/rehype plugins added after mdx to work (#10877) * Improve MDX optimize with sibling nodes (#10887) * Improve types in rehype-optimize-static.ts * Rename `ignoreComponentNames` to `ignoreElementNames` I think this better reflects what it's actually doing * Simplify plain MDX nodes in optimize option (#10934) * Format code * Minimize diff changes * Update .changeset/slimy-cobras-end.md Co-authored-by: Sarah Rainsberger <[email protected]> --------- Co-authored-by: Armand Philippot <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]>
Changes
jsx/babel.tstojsx/rehype.ts. The file logic are essentially the same thing but written as a rehype plugin.vite-plugin-mdxplugin is deleted by@astrojs/mdx, the integration will takeover MDX transformation instead, using the rehype plugin.Performance:
Rollup build time of Astro docs dropped from 108s to 96s (12s or 11% faster)
How this perf improvement works is by removing the hoops needed to compile MDX as JS:
Testing
Existing tests should pass, we have extensive coverage for MDX usecases and edgecases.
Docs
This is a breaking change. I've added a changeset explaning the change, but the only change needed is to upgrade to Astro v4.8.0 (to be released together)