import Post from './post.mdx' // `Post` is now typed.

(alias) function Post(props: MDXProps): Element
import Post

import mdx from '@mdx-js/esbuild'
import esbuild from 'esbuild'

await esbuild.build({
  entryPoints: ['index.mdx'],
  format: 'esm',
  outfile: 'output.js',
  plugins: [mdx({/* jsxImportSource: …, otherOptions… */})]
})

(alias) function mdx(options?: Readonly<Options> | null | undefined): esbuild.Plugin
import mdx

import esbuild

import esbuild

function build<{
    entryPoints: string[];
    format: "esm";
    outfile: string;
    plugins: esbuild.Plugin[];
}>(options: esbuild.SameShape<esbuild.BuildOptions, {
    entryPoints: string[];
    format: "esm";
    outfile: string;
    plugins: esbuild.Plugin[];
}>): Promise<...>

(property) entryPoints: string[]

(property) format: "esm"

(property) outfile: string

(property) plugins: esbuild.Plugin[]

(alias) mdx(options?: Readonly<Options> | null | undefined): esbuild.Plugin
import mdx

/**
 * @import {RollupOptions} from 'rollup'
 */

import mdx from '@mdx-js/rollup'
import {babel} from '@rollup/plugin-babel'

/** @type {RollupOptions} */
const config = {
  // …
  plugins: [
    // …
    mdx({/* jsxImportSource: …, otherOptions… */}),
    // Babel is optional:
    babel({
      // Also run on what used to be `.mdx` (but is now JS):
      extensions: ['.js', '.jsx', '.cjs', '.mjs', '.md', '.mdx'],
      // Other options…
    })
  ]
}

export default config

(alias) function mdx(options?: Readonly<Options> | null | undefined): Plugin
import mdx

(alias) function babel(options?: RollupBabelInputPluginOptions): Plugin
import babel

const config: RollupOptions

(property) InputOptions.plugins?: InputPluginOption

(alias) mdx(options?: Readonly<Options> | null | undefined): Plugin
import mdx

(alias) babel(options?: RollupBabelInputPluginOptions): Plugin
import babel

(property) RollupBabelInputPluginOptions.extensions?: string[]

const config: RollupOptions

/**
 * @import {Options} from '@mdx-js/loader'
 * @import {Configuration} from 'webpack'
 */

/** @type {Configuration} */
const webpackConfig = {
  module: {
    // …
    rules: [
      // …
      {
        test: /\.mdx?$/,
        use: [
          // Babel is optional:
          {loader: 'babel-loader', options: {}},
          {
            loader: '@mdx-js/loader',
            /** @type {Options} */
            options: {/* jsxImportSource: …, otherOptions… */}
          }
        ]
      }
    ]
  }
}

export default webpackConfig

const webpackConfig: Configuration

(property) Configuration.module?: ModuleOptions

(property) ModuleOptions.rules?: (false | "" | 0 | RuleSetRule | "..." | null | undefined)[]

(property) RuleSetRule.test?: string | RegExp | ((value: string) => boolean) | RuleSetLogicalConditionsAbsolute | RuleSetConditionAbsolute[]

(property) RuleSetRule.use?: string | (string | false | 0 | {
    ident?: string;
    loader?: string;
    options?: string | {
        [index: string]: any;
    };
} | ((data: object) => string | {
    ident?: string;
    loader?: string;
    options?: string | {
        [index: string]: any;
    };
} | __TypeWebpackOptions | __Type_2[]) | null | undefined)[] | ((data: {
    resource: string;
    realResource: string;
    resourceQuery: string;
    issuer: string;
    compiler: string;
}) => __Type_2[]) | {
    ...;
} | __TypeWebpackOptions

(property) loader?: string

(property) options?: string | {
    [index: string]: any;
}

(property) loader?: string

(property) options?: string | {
    [index: string]: any;
}

const webpackConfig: Configuration

import mdx from '@mdx-js/rollup'
import {defineConfig} from 'vite'

const viteConfig = defineConfig({
  plugins: [
    mdx(/* jsxImportSource: …, otherOptions… */)
  ]
})

export default viteConfig

(alias) function mdx(options?: Readonly<Options> | null | undefined): Plugin
import mdx

(alias) function defineConfig(config: UserConfig): UserConfig (+5 overloads)
import defineConfig

const viteConfig: UserConfig

(alias) defineConfig(config: UserConfig): UserConfig (+5 overloads)
import defineConfig

(property) UserConfig.plugins?: PluginOption[]

(alias) mdx(options?: Readonly<Options> | null | undefined): Plugin
import mdx

const viteConfig: UserConfig

/**
 * @import {ParseResult, ParserOptions} from '@babel/parser'
 * @import {File} from '@babel/types'
 * @import {Program} from 'estree'
 * @import {Plugin} from 'unified'
 */

import parser from '@babel/parser'
import {compileSync} from '@mdx-js/mdx'
import estreeToBabel from 'estree-to-babel'

/**
 * Plugin that tells Babel to use a different parser.
 */
export function babelPluginSyntaxMdx() {
  return {parserOverride: babelParserWithMdx}
}

/**
 * Parser that handles MDX with `@mdx-js/mdx` and passes other things through
 * to the normal Babel parser.
 *
 * @param {string} value
 * @param {ParserOptions} options
 * @returns {ParseResult<File>}
 */
function babelParserWithMdx(value, options) {
  /** @type {string | undefined} */
  // @ts-expect-error: babel changed the casing at some point and the types are out of date.
  const filename = options.sourceFilename || options.sourceFileName

  if (filename && /\.mdx?$/.test(filename)) {
    // Babel does not support async parsers, unfortunately.
    const file = compileSync(
      {value, path: options.sourceFilename},
      {recmaPlugins: [recmaBabel] /* jsxImportSource: …, otherOptions… */}
    )
    return /** @type {ParseResult<File>} */ (file.result)
  }

  return parser.parse(value, options)
}

/**
 * A “recma” plugin is a unified plugin that runs on the estree (used by
 * `@mdx-js/mdx` and much of the JS ecosystem but not Babel).
 * This plugin defines `'estree-to-babel'` as the compiler,
 * which means that the resulting Babel tree is given back by `compileSync`.
 *
 * @type {Plugin<[], Program, unknown>}
 */
function recmaBabel() {
  // @ts-expect-error: `Program` is similar enough to a unist node.
  this.compiler = compiler

  /**
   * @param {Program} tree
   * @returns {unknown}
   */
  function compiler(tree) {
    // @ts-expect-error: TS2349: This expression *is* callable, `estreeToBabel` types are wrong.
    return estreeToBabel(tree)
  }
}

/// <reference types="node" />
// ---cut---
// @filename: plugin.js
/**
 * @import {ParseResult, ParserOptions} from '@babel/parser'
 * @import {File} from '@babel/types'
 * @import {Program} from 'estree'
 * @import {Plugin} from 'unified'
 */

import parser from '@babel/parser'
import {compileSync} from '@mdx-js/mdx'
import estreeToBabel from 'estree-to-babel'

/**
 * Plugin that tells Babel to use a different parser.
 */
export function babelPluginSyntaxMdx() {
  return {parserOverride: babelParserWithMdx}
}

/**
 * Parser that handles MDX with `@mdx-js/mdx` and passes other things through
 * to the normal Babel parser.
 *
 * @param {string} value
 * @param {ParserOptions} options
 * @returns {ParseResult<File>}
 */
function babelParserWithMdx(value, options) {
  /** @type {string | undefined} */
  // @ts-expect-error: babel types are wrong.
  const filename = options.sourceFilename || options.sourceFileName

  if (filename && /\.mdx?$/.test(filename)) {
    // Babel does not support async parsers, unfortunately.
    const file = compileSync(
      {value, path: options.sourceFilename},
      {recmaPlugins: [recmaBabel] /* jsxImportSource: …, otherOptions… */}
    )
    return /** @type {ParseResult<File>} */ (file.result)
  }

  return parser.parse(value, options)
}

/**
 * A “recma” plugin is a unified plugin that runs on the estree (used by
 * `@mdx-js/mdx` and much of the JS ecosystem but not Babel).
 * This plugin defines `'estree-to-babel'` as the compiler,
 * which means that the resulting Babel tree is given back by `compileSync`.
 *
 * @type {Plugin<[], Program, unknown>}
 */
function recmaBabel() {
  // @ts-expect-error: `Program` is similar enough to a unist node.
  this.compiler = compiler

  /**
   * @param {Program} tree
   * @returns {unknown}
   */
  function compiler(tree) {
    // @ts-expect-error: TS2349: This expression *is* callable, `estreeToBabel` types are wrong.
    return estreeToBabel(tree)
  }
}
// @filename: example.js
// ---cut---
import babel from '@babel/core'
import {babelPluginSyntaxMdx} from './plugin.js'

const document = '# Hello, world!'

// Note that a filename must be set for our plugin to know it’s MDX instead of JS.
const result = await babel.transformAsync(document, {
  filename: 'example.mdx',
  plugins: [babelPluginSyntaxMdx]
})

console.log(result)

import nextMdx from '@next/mdx'

const withMdx = nextMdx({
  // By default only the `.mdx` extension is supported.
  extension: /\.mdx?$/,
  options: {/* otherOptions… */}
})

const nextConfig = withMdx({
  // Support MDX files as pages:
  pageExtensions: ['md', 'mdx', 'tsx', 'ts', 'jsx', 'js'],
})

export default nextConfig

(alias) function nextMdx(options?: nextMdx.NextMDXOptions): WithMDX
(alias) namespace nextMdx
import nextMdx

const withMdx: WithMDX

(alias) nextMdx(options?: nextMdx.NextMDXOptions): WithMDX
import nextMdx

(property) nextMDX.NextMDXOptions.extension?: RuleSetConditionAbsolute

(property) nextMDX.NextMDXOptions.options?: Options

const nextConfig: NextConfig

const withMdx: (config: NextConfig) => NextConfig

(property) pageExtensions: string[]

const nextConfig: NextConfig

import {compile} from '@mdx-js/mdx'

const js = String(await compile('# hi', {jsxImportSource: '@emotion/react', /* otherOptions… */}))

(alias) function compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

const js: string

var String: StringConstructor
(value?: any) => string

(alias) compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

(property) jsxImportSource?: string | null | undefined

import React from 'react'
import {Text, render} from 'ink'
import Content from './example.mdx' // Assumes an integration is used to compile MDX -> JS.

render(
  React.createElement(Content, {
    components: {
      h1(properties) {
        return React.createElement(Text, {bold: true, ...properties})
      },
      p: Text
    }
  })
)

(alias) namespace React
import React

(alias) function Text({ color, backgroundColor, dimColor, bold, italic, underline, strikethrough, inverse, wrap, children, }: Props): React.JSX.Element | null
import Text

(alias) const render: (node: React.ReactNode, options?: NodeJS.WriteStream | RenderOptions) => Instance
import render

(alias) function Content(props: MDXProps): Element
import Content

(alias) render(node: React.ReactNode, options?: NodeJS.WriteStream | RenderOptions): Instance
import render

(alias) namespace React
import React

function React.createElement<MDXProps>(type: React.FunctionComponent<MDXProps>, props?: (React.Attributes & MDXProps) | null | undefined, ...children: React.ReactNode[]): React.FunctionComponentElement<...> (+6 overloads)

(alias) function Content(props: MDXProps): Element
import Content

(property) MDXProps.components?: MDXComponents

(method) h1(properties: JSX.IntrinsicElements): React.FunctionComponentElement<Props>

(parameter) properties: JSX.IntrinsicElements

(alias) namespace React
import React

function React.createElement<Props>(type: React.FunctionComponent<Props>, props?: (React.Attributes & Props) | null | undefined, ...children: React.ReactNode[]): React.FunctionComponentElement<...> (+6 overloads)

(alias) function Text({ color, backgroundColor, dimColor, bold, italic, underline, strikethrough, inverse, wrap, children, }: Props): React.JSX.Element | null
import Text

(property) bold?: boolean

(parameter) properties: JSX.IntrinsicElements

(property) p: ({ color, backgroundColor, dimColor, bold, italic, underline, strikethrough, inverse, wrap, children, }: Props) => React.JSX.Element | null

(alias) function Text({ color, backgroundColor, dimColor, bold, italic, underline, strikethrough, inverse, wrap, children, }: Props): React.JSX.Element | null
import Text

import {compile} from '@mdx-js/mdx'

const js = String(await compile('# hi', {jsxImportSource: 'preact', /* otherOptions… */}))

(alias) function compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

const js: string

var String: StringConstructor
(value?: any) => string

(alias) compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

(property) jsxImportSource?: string | null | undefined

import {compile} from '@mdx-js/mdx'

const js = String(await compile('# hi', {jsxImportSource: 'svelte-jsx', /* otherOptions… */}))

(alias) function compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

const js: string

var String: StringConstructor
(value?: any) => string

(alias) compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

(property) jsxImportSource?: string | null | undefined

import {compile} from '@mdx-js/mdx'

const js = String(await compile('# hi', {jsxImportSource: 'vue', /* otherOptions… */}))

(alias) function compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

const js: string

var String: StringConstructor
(value?: any) => string

(alias) compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

(property) jsxImportSource?: string | null | undefined

import {compile} from '@mdx-js/mdx'

const js = String(await compile('# hi', {jsxImportSource: 'solid-js/h', /* otherOptions… */}))

(alias) function compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

const js: string

var String: StringConstructor
(value?: any) => string

(alias) compile(vfileCompatible: Readonly<Compatible>, compileOptions?: Readonly<CompileOptions> | null | undefined): Promise<VFile>
import compile

(property) jsxImportSource?: string | null | undefined