`jsx: true` output does not handle custom elements correctly

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

1. Run the MDX compiler with the rehypeRaw plugin applied + some other plugin that inserts a custom element (Shiki twoslash in this case).
2. Set jsx: true in the compiler config
3. 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)

[bholmesdev]

@wooorm Addressed in the latest! Should be good for review. #2101

[bholmesdev]

@wooorm That could work too! So create variables below the _components declaration with an incrementing counter?