v0.2.5
Documentation
IntroductionGetting StartedSyntaxComponentsThemingPresentExamples
API
@mdxp/core
@mdxp/components
@mdxp/rehypex-plugins
Auto ImportBetter MediaTable Align

Auto Import

Auto Import is a Rehype plugin for MDXHAST that modifies JSX nodes to automatically import files that are passed as properties. It only works for JSX nodes and thus will not work with other nodes like regular HAST element nodes.

NOTE
In order to automatically import from image nodes as well, you can use the Better Media plugin, which transforms image elements to JSX nodes, before using this plugin.

Arguments

test
(value, dir) => bool
(value, dir) => fs.existsSync(path.resolve(dir, value))
noImport
string
null (not being used)

Usage

To use this plugin, put it in the rehypePlugins option of your MDX-JS loader.
In this example we also pass the string '!noimport!' as noImport option.

// Webpack example
const rehypeAutoImport = require('@mdxp/rehypex-plugins/auto-import');
module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx$/,
        use: [
          'babel-loader',
          {
            loader: '@mdx-js/loader',
            options: {
              rehypePlugins: [
                [rehypeAutoImport, {noImport: '!noimport!'}]
              ]
            }
          }
        ]
      },
      ...
    ]
  }
}

Examples

Once the plugin is setup, you can write the following code:

<MyComponent file="./path/to/some/data.json" />
// Gets transformed by the plugin to:
import AI__path_to_some_data_json from "./path/to/some/data.json"
<MyComponent file={AI__path_to_some_data_json} />

If you do not want to import a certain path and you setup a noImport string as shown above, you can use:

<MyComponent file="!noimport!./path/to/some/data.json" />
// Gets transformed by the plugin to:
<MyComponent file="./path/to/some/data.json" />