Support rehype plugins that inject namespaced attributes #6243
Conversation
🦋 Changeset detectedLatest commit: 98f6599 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
the
pkg: integration
| @@ -74,6 +74,7 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI | |||
| const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id); | |||
| const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), { | |||
| ...mdxPluginOpts, | |||
| elementAttributeNameCase: 'html', | |||
There was a problem hiding this comment.
The compiled MDX will be rendered by Astro's JSX runtime only so it would be fine. React JSX happens outside of MDX, where they are imported and compiled separately (without MDX).
There was a problem hiding this comment.
Oh right, that answers most of my Qs, but I do wonder whether there’s overlap.
How does the passing of props work between Astro’s own JSX runtime, and React’s JSX runtime? Maybe this point only relates to JSX written by the author tho, and the above option is for generated elements, not components.
Though, does Astro allow component overwrites? (h1 -> MyComponent)? In that case, the MyComponent currently gets className, and would now get class?
There was a problem hiding this comment.
How does the passing of props work between Astro’s own JSX runtime, and React’s JSX runtime?
The props should be passed as-is from Astro's JSX to React. Yes this option only affects generated elements from rehype plugins.
Though, does Astro allow component overwrites? (
h1->MyComponent)? In that case, theMyComponentcurrently getsclassName, and would now getclass?
I believe you can with https://docs.astro.build/en/guides/markdown-content/#assigning-custom-components-to-html-elements. I'm not very sure about how the entire MDX flow works, but from a quick stackblitz test, it looks like className is passed down as is.
There was a problem hiding this comment.
The stackblitz is on the stable release of astro right?
I am worried that this change breaks that (particularly when heading2.astro is instead a react component)
The props should be passed as-is from Astro's JSX to React
I think that's a problem. React expects className. This PR changes to pass class.
There was a problem hiding this comment.
Ah you're right. I've tested it locally now and it seems to be the case. We probably can't revert this as it's fixing a bug, I'll make another PR to make this a breaking minor.
It kinda is a bit awkward if the component is a React component, but I think it's a tradeoff to take for now, as the user can still workaround it.
EDIT: Just realized it has been released. We might need to revert, release, then release a new minor.
There was a problem hiding this comment.
This is likely breaking everyone that is using react, and "component overwrites".
This feature in MDX lets users specify their framework, through two options.
Those options need to be configured by the end user.
If Astro is in the middle, it would also need similar functionality: if it wants to hijack things, it needs to deal with different props expected by different frameworks
There was a problem hiding this comment.
I think it's fine for Astro to take a stance on the default options since you can mix Astro and React components in component overwrites. It's also difficult to know the casing type ahead of time when compiling. Exposing another option isn't bulletproof too since casing wouldn't be right when using an Astro component override. So I think it's worth the tradeoff for now.
Changes
Fix #5796
Thanks to mdx-js/mdx#2255, there's a way to properly render namespaced attributes injected by rehype plugins, without Astro needing to manually map camelCase namespaced attributes, to the normal ones.
With this PR, Astro should render
<use xlink:hrefinstead of<use xlinkhrefTesting
Added test to mdx integration
Docs
n/a. bug fix.