Allow ability to pass scope to MDX document

[johno]

It'd be nice to be able pass in additional components and props to the component scope.

import React from 'react'
import { Box } from './ui'
import Document from './doc.md'

export default () => <Document scope={{ title: 'Hello', Box }} />

# This is some markdown

That has `Box` and `title` in scope:

<Box>{title}</Box>

[johno]

After some discussion we decided that this should happen via custom loaders.

[fabe]

Is there anything official planned from the MDX side in regards to a webpack loader etc. that would make this possible?

[johno]

I've been pondering this a bit lately and am toying with the idea of allowing optional scope to be passed to the loader.

This would allow someone to:

const images = require('remark-images')
const emoji = require('remark-emoji')
const toc = require('remark-toc')

module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx?$/,
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: '@mdx-js/loader',
            options: {
              scope: 'import { Box, Heading } from "./ui"',
              mdPlugins: [images, emoji, [toc, {heading: 'intro'}]]
            }
          }
        ]
      }
    ]
  }
}

And that'd result as an import at the top of the loaded/transpiled JSX output. This'd allow one to specify a single import for all MDX files.

[silvenon]

I think hiding imports would make code harder to read and harder to implement MDX plugins for tools like ESLint.

What is the use case where this feature would be useful?

[johno]

I def hear you there. Probably isn't the best solution.

I've run into this once so far on a project (basically wanted to add scope to a collection of MDX documents without having to explicitly import), but I ended up writing a custom loader.

I wonder if we perhaps write up a doc instead on how to write your own MDX loader? There isn't much to the loader itself since all the logic/transpilation is in core.

[fabe]

We thought about giving MDX files to editors of a website. Having them import components from a remote location doesn't sound particularly usable or safe, so we wondered if we could handle the imports at build time.

Docs for a custom loader would be very appreciated!