@mdxvac/remark-astro-autoimports

Content

• Content
• What is this?
• When should I use this?
• Install
• Use
  • Options
    • name: string

What is this?

This package is a remark plugin for markdown files in the context of Astro site generation.

When should I use this?

In Astro you usually have to import components (Astro, JSX, …) that you want to use in your MDX file. With this plugin you can define a set of known components, that can be used in all MDX files in that directory and subdirectory without the need to explicitly import them.

Install

This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:

npm install -D @mdxvac/remark-astro-autoimports

Use

In your astro.config.mjs

import { defineConfig } from 'astro/config';

import mdx from '@astrojs/mdx';
import autoImports from '@mdxvac/remark-astro-autoimports';
//                       ^^^

// https://astro.build/config
export default defineConfig({
  integrations: [mdx()],
  markdown: {
    remarkPlugins: [autoImports],
    //              ^^^
    extendDefaultPlugins: true,
  },
});

This uses the default options, where the name of the auto-import file is _autoimports.ts.

Now create an auto-import file exporting known components:

import { Code } from 'astro/components';

export const autoimports = {
  Code,
};

In your MDX file you can now use <Code ... /> without importing it:

# My Title

Here I am embedding some fancy code from the frontmatter:

<Code code={frontmatter.rawmdx} />

By default, we use .ts files, but actually we parse them internally with an ES6 parser (acorn), hence you shouldn’t use any fancy TypeScript features in there.
You can structure your export pretty much as you like, as long as the variable initialization is an object expression without spread operator.

Files are evaluated up the directory tree, i.e. files closer to the MDX file take precedence over files further up the tree.

The variables inside a file are evaluated in order of appearance, i.e. the following export would yield the component FuzzyBear over FozzieBear for the use in <Bear />, although b is the default export:

import { FuzzyBear } from '@components/FuzzyBear';
import { FozzieBear } from '@components/FozzieBear';

export const a = {
  Bear: FuzzyBear,
};

const b = {
  Bear: FozzieBear,
};

export default b;