[@vinxi/plugin-mdx] MDX v3 compat

[birkskyum]

Add MDX v3 as a possible peerDependency.

The React SPA/MDX example is updated to demonstrate this functionality.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[changeset-bot]

🦋 Changeset detected

Latest commit: 2e50739

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@vinxi/plugin-mdx	Minor
react-spa-mdx	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @nksaraf on Vercel.

@nksaraf first needs to authorize it.

[milomg]

I wonder if a plugin like the following would make sense as a replacement? This seems to be the recommendation for how to use MDX in vite these days: vite-plugin-mdx.

I had to slightly tweak https://github.com/mdx-js/mdx/blob/main/packages/rollup/lib/index.js to trim the query param but then everything basically seemed to work: path = path.replace(/\?[^/.]*$/, '')

import {createFormatAwareProcessors} from '@mdx-js/mdx/internal-create-format-aware-processors'
import {createFilter} from '@rollup/pluginutils'
import {SourceMapGenerator} from 'source-map'
import {VFile} from 'vfile'

/**
 * Plugin to compile MDX w/ rollup.
 *
 * @param {Readonly<Options> | null | undefined} [options]
 *   Configuration (optional).
 * @return {Plugin}
 *   Rollup plugin.
 */
export function rollup(options) {
  const {exclude, include, ...rest} = options || {}
  /** @type {FormatAwareProcessors} */
  let formatAwareProcessors
  const filter = createFilter(include, exclude)

  return {
    name: '@mdx-js/rollup',
    enforce: 'pre',
    config(config, env) {
      formatAwareProcessors = createFormatAwareProcessors({
        SourceMapGenerator,
        development: env.mode === 'development',
        ...rest
      })
    },
    async transform(value, path) {
      if (!formatAwareProcessors) {
        formatAwareProcessors = createFormatAwareProcessors({
          SourceMapGenerator,
          ...rest
        })
      }


      // Strip the queryparameters that are part of the file extension
      path = path.split("?")[0]

      const file = new VFile({path, value})

      if (
        file.extname &&
        filter(file.path) &&
        formatAwareProcessors.extnames.includes(file.extname)
      ) {
        const compiled = await formatAwareProcessors.process(file)
        const code = String(compiled.value)
        /** @type {SourceDescription} */
        const result = {
          code,
          // @ts-expect-error: `rollup` is not compiled with `exactOptionalPropertyTypes`,
          // so it does not allow `sourceRoot` in `file.map` to be `undefined` here.
          map: compiled.map
        }
        return result
      }
    }
  }
}