jsx: true
output does not handle custom elements correctly #2100
Closed
Description
Initial checklist
- I read the support docs
- I read the contributing guide
- I agree to follow the code of conduct
- I searched issues and couldn’t find anything (or linked relevant results below)
Affected packages and versions
^2.1.2"
Link to runnable example
https://stackblitz.com/github/bholmesdev/mdx-shiki-compilation?file=test.mjs
Steps to reproduce
- Run the MDX compiler with the
rehypeRaw
plugin applied + some other plugin that inserts a custom element (Shiki twoslash in this case). - Set
jsx: true
in the compiler config - Note the value contains
<_components.custom-element-name>
in the output, but dashes (-
) are not valid JSX!
Expected behavior
Ideally, the _components
statement would serialize dashes to camelCase or some other JSX-compliant string like so:
const _components = Object.assign({
...
"customElementName": "custom-element-name"
}, props.components);
Actual behavior
Instead, _components
uses the element name untouched:
const _components = Object.assign({
...
"custom-element-name": "custom-element-name"
}, props.components);
Runtime
Node v16
Package manager
pnpm
OS
macOS
Build and bundle tools
Other (please specify in steps to reproduce)