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...

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

yarn or npm can be used

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.