mdx.macro
A babel-macro for converting mdx into an inline component.
## This is some MDX source
<SomeComponent />
~~strikethrough~~import { mdx, imports } from 'mdx.macro'
import { MDXTag } from '@mdx-js/tag'
imports() // copies import statements from markdown file to here
const SomeMDXComponent = mdx('./markdown.md')
generates...
```js
const SomeMDXComponent = ({ components, ...props }) => (
<MDXTag name="wrapper" components={components}>
<MDXTag name="h2" components={components}>{`This is some MDX source`}</MDXTag>{' '}
<SomeComponent />{' '}
<MDXTag name="p" components={components}>
<MDXTag
name="del"
components={components}
parentName="p"
>
{`strikethrough`}
</MDXTag>
</MDXTag>
</MDXTag>
)Getting started
Set up an application
Recommended setup - set up an application from scratch
create a package.json file
npm init
yarn init
install webpack and webpack-cli as dev dependencies
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin -D
add to package.json
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
install and save react and react-dom
npm i react react-dom
yarn add react react-dom
install and save the following dev dependencies
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react -D
yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react -D
create a webpack config. Example of a basic webpack config file:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [htmlPlugin]
};
create a .babelrc file and add the following presets
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Install and save the following dev dependencies
npm i @innerfuse/mdx.macro babel-plugin-macros @mdx-js/tag -D
yarn add @innerfuse/mdx-macro babel-plugin-macros @mdx-js/tag -D
Add babel-plugin-macros to your babel config file
"plugins": [
"babel-plugin-macros"
]
Known Problems
If you use a React component which is not defined in the Javascript file and is not imported the application will stop working and you will get an error similar to __jsxFilename not defined. If this is the case ensure you have the component referred in the Markdown file is defined.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent