Skip to content

jsx: true output does not handle custom elements correctly #2100

Closed
@bholmesdev

Description

Initial checklist

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)

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions