babel-plugin-apply-mdx-type-prop
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" />
</>
)