babel-plugin-apply-mdx-type-prop

Babel plugin that applies the mdxType prop which is used by the MDX pragma.

It also stores all components encountered as names in the plugin state.

Installation

yarn add babel-plugin-apply-mdx-type-prop

Usage

const babel = require('@babel/core')

const BabelPluginApplyMdxTypeProp = require('babel-plugin-apply-mdx-type-prop')

const jsx = `
export const Foo = () => (
  <div>
    <Button />
  </div>
)

export default () => (
  <>
    <h1>Hello!</h1>
    <TomatoBox />
  </>
)
`

const plugin = new BabelPluginApplyMdxTypeProp()

const result = babel.transform(jsx, {
  configFile: false,
  plugins: ['@babel/plugin-syntax-jsx', plugin.plugin]
})

console.log(result.code)
console.log(plugin.state.names)

Input

export const Foo = () => (
  <div>
    <Button />
  </div>
)

export default () => (
  <>
    <h1>Hello!</h1>
    <TomatoBox />
  </>
)

Output

export const Foo = () => (
  <div>
    <Button mdxType="Button" />
  </div>
)

export default () => (
  <>
    <h1>Hello!</h1>
    <TomatoBox mdxType="Button" />
  </>
)

License

MIT