Skip to content

Commit

Permalink
react: remove deprecated, MDXContext, withMDXComponents
Browse files Browse the repository at this point in the history
  • Loading branch information
wooorm committed Oct 18, 2023
1 parent 4f92422 commit a362bb4
Show file tree
Hide file tree
Showing 4 changed files with 6 additions and 111 deletions.
7 changes: 1 addition & 6 deletions packages/react/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1 @@
export {
MDXContext,
MDXProvider,
useMDXComponents,
withMDXComponents
} from './lib/index.js'
export {MDXProvider, useMDXComponents} from './lib/index.js'
38 changes: 1 addition & 37 deletions packages/react/lib/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/**
* @typedef {import('mdx/types.js').MDXComponents} Components
* @typedef {import('react').Context<Components>} Context
* @typedef {import('react').ReactNode} ReactNode
*/

Expand All @@ -24,42 +23,7 @@

import React from 'react'

/**
* @type {Context}
* @deprecated
* This export is marked as a legacy feature.
* That means it’s no longer recommended for use as it might be removed
* in a future major release.
*
* Please use `useMDXComponents` to get context based components and
* `MDXProvider` to set context based components instead.
*/
export const MDXContext = React.createContext({})

/**
* @param {import('react').ComponentType<any>} Component
* Component.
* @deprecated
* This export is marked as a legacy feature.
* That means it’s no longer recommended for use as it might be removed
* in a future major release.
*
* Please use `useMDXComponents` to get context based components instead.
*/
export function withMDXComponents(Component) {
return boundMDXComponent

/**
* @param {Record<string, unknown> & {components?: Components | null | undefined}} props
* Props.
* @returns {JSX.Element}
* Element.
*/
function boundMDXComponent(props) {
const allComponents = useMDXComponents(props.components)
return React.createElement(Component, {...props, allComponents})
}
}
const MDXContext = React.createContext({})

/**
* Get current components from the MDX Context.
Expand Down
25 changes: 2 additions & 23 deletions packages/react/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ React context for MDX.
* [API](#api)
* [`MDXProvider(props?)`](#mdxproviderprops)
* [`useMDXComponents(components?)`](#usemdxcomponentscomponents)
* [`MDXContext`](#mdxcontext)
* [`withMDXComponents(Component)`](#withmdxcomponentscomponent)
* [Types](#types)
* [Security](#security)
* [Contribute](#contribute)
Expand Down Expand Up @@ -92,8 +90,8 @@ provider.

## API

This package exports the following identifiers: `MDXContext`, `MDXProvider`,
`useMDXComponents`, and `withMDXComponents`.
This package exports the following identifiers: `MDXProvider` and
`useMDXComponents`.
There is no default export.

### `MDXProvider(props?)`
Expand Down Expand Up @@ -135,25 +133,6 @@ Components`).

`Components`.

### `MDXContext`

> 🪦 **Deprecated**: This export is not recommended for use as it exposes
> internals which should be hidden.
> It might be removed in a future major release.
> Please use `useMDXComponents` to get context based components and
> `MDXProvider` to set context based components instead.
The React Context for MDX (`React.Context`).

### `withMDXComponents(Component)`

> 🪦 **Deprecated**: This export is not recommended for use.
> It might be removed in a future major release.
> Please use `useMDXComponents` to get context based components instead.
Create a HOC of `Components` which is given the current context based MDX
components.

## Types

This package is fully typed with [TypeScript][].
Expand Down
47 changes: 2 additions & 45 deletions packages/react/test/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
import assert from 'node:assert/strict'
import {test} from 'node:test'
import {evaluate} from '@mdx-js/mdx'
import {MDXProvider, useMDXComponents, withMDXComponents} from '@mdx-js/react'
import {MDXProvider, useMDXComponents} from '@mdx-js/react'
import React from 'react'
import * as runtime_ from 'react/jsx-runtime'
import {renderToString} from 'react-dom/server'
Expand All @@ -17,10 +17,8 @@ const runtime = /** @type {RuntimeProduction} */ (
test('@mdx-js/react', async function (t) {
await t.test('should expose the public api', async function () {
assert.deepEqual(Object.keys(await import('@mdx-js/preact')).sort(), [
'MDXContext',
'MDXProvider',
'useMDXComponents',
'withMDXComponents'
'useMDXComponents'
])
})

Expand Down Expand Up @@ -207,45 +205,4 @@ test('@mdx-js/react', async function (t) {
)
}
)

await t.test('should support `withComponents`', async function () {
const {default: Content} = await evaluate('# hi\n## hello', {
...runtime,
useMDXComponents
})

// Unknown props.
// type-coverage:ignore-next-line
const With = withMDXComponents(function (props) {
// Unknown props.
// type-coverage:ignore-next-line
return props.children
})

// Bug: this should use the `h2` component too, logically?
// As `withMDXComponents` is deprecated, and it would probably be a breaking
// change, we can just remove it later.
assert.equal(
renderToString(
<MDXProvider
components={{
h1(props) {
return <h1 style={{color: 'tomato'}} {...props} />
}
}}
>
<With
components={{
h2(props) {
return <h2 style={{color: 'papayawhip'}} {...props} />
}
}}
>
<Content />
</With>
</MDXProvider>
),
'<h1 style="color:tomato">hi</h1>\n<h2>hello</h2>'
)
})
})

1 comment on commit a362bb4

@vercel
Copy link

@vercel vercel bot commented on a362bb4 Oct 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mdx – ./

mdxjs.com
mdx-git-main-mdx.vercel.app
v2.mdxjs.com
mdx-mdx.vercel.app

Please sign in to comment.