unified

Project: mdx-js/mdx

Package: babel-plugin-apply-mdx-type-prop@1.6.17

  1. Dependencies: 2·Dependents: 2
  2. Apply the MDX type prop used in the MDX pragma
  1. remark 192
  2. markdown 122
  3. mdx 23
  4. react 22
  5. jsx 18
  6. babel 4

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