diff --git a/.changeset/spotty-radios-tickle.md b/.changeset/spotty-radios-tickle.md new file mode 100644 index 000000000..69740366f --- /dev/null +++ b/.changeset/spotty-radios-tickle.md @@ -0,0 +1,18 @@ +--- +'renoun': minor +--- + +Exports the `parsePreProps` utility for the `CodeBlock` component instead of attaching it to the component itself: + +```tsx +import { CodeBlock, parsePreProps } from 'renoun/components' +import type { MDXComponents } from 'renoun/mdx' + +export function useMDXComponents() { + return { + pre: (props) => { + return + }, + } satisfies MDXComponents +} +``` diff --git a/apps/site/components/MDXComponents.tsx b/apps/site/components/MDXComponents.tsx index 9f123d9ba..a01adf612 100644 --- a/apps/site/components/MDXComponents.tsx +++ b/apps/site/components/MDXComponents.tsx @@ -3,6 +3,7 @@ import { CodeInline, PackageInstall, parseCodeProps, + parsePreProps, } from 'renoun/components' import type { MDXComponents as MDXComponentsType } from 'renoun/mdx' import { GeistMono } from 'geist/font/mono' @@ -91,11 +92,9 @@ export const MDXComponents = { ) }, code: (props) => { - const { value, language } = parseCodeProps(props) return ( { - const parsedProps = RenounCodeBlock.parsePreProps(props) - return + return }, } satisfies MDXComponentsType diff --git a/apps/site/guides/02.next.mdx b/apps/site/guides/02.next.mdx index d583d05a1..721972fbe 100644 --- a/apps/site/guides/02.next.mdx +++ b/apps/site/guides/02.next.mdx @@ -121,13 +121,18 @@ export default withMDX({ Use the `CodeBlock` and `CodeInline` components to override the `pre` and `code` components respectively in your project's `mdx-components.tsx` file: ```tsx filename="02.mdx-components.tsx" -import { CodeBlock, CodeInline, parseCodeProps } from 'renoun/components' +import { + CodeBlock, + CodeInline, + parsePreProps, + parseCodeProps, +} from 'renoun/components' import type { MDXComponents } from 'renoun/mdx' export function useMDXComponents() { return { pre: (props) => { - return + return }, code: (props) => { return diff --git a/examples/blog/mdx-components.tsx b/examples/blog/mdx-components.tsx index 0ef05b3c2..35891aed2 100644 --- a/examples/blog/mdx-components.tsx +++ b/examples/blog/mdx-components.tsx @@ -1,14 +1,18 @@ -import { CodeBlock, CodeInline, parseCodeProps } from 'renoun/components' +import { + CodeBlock, + CodeInline, + parsePreProps, + parseCodeProps, +} from 'renoun/components' import type { MDXComponents } from 'renoun/mdx' export function useMDXComponents() { return { + pre: (props) => { + return + }, code: (props) => { return }, - pre: (props) => { - const { value, language } = CodeBlock.parsePreProps(props) - return - }, } satisfies MDXComponents } diff --git a/examples/design-system/mdx-components.tsx b/examples/design-system/mdx-components.tsx index 3db5728e3..35891aed2 100644 --- a/examples/design-system/mdx-components.tsx +++ b/examples/design-system/mdx-components.tsx @@ -1,13 +1,18 @@ -import { CodeBlock, CodeInline, parseCodeProps } from 'renoun/components' +import { + CodeBlock, + CodeInline, + parsePreProps, + parseCodeProps, +} from 'renoun/components' import type { MDXComponents } from 'renoun/mdx' export function useMDXComponents() { return { + pre: (props) => { + return + }, code: (props) => { return }, - pre: (props) => { - return - }, } satisfies MDXComponents } diff --git a/packages/renoun/src/components/APIReference.tsx b/packages/renoun/src/components/APIReference.tsx index 27a68890a..a6e1649c4 100644 --- a/packages/renoun/src/components/APIReference.tsx +++ b/packages/renoun/src/components/APIReference.tsx @@ -16,14 +16,14 @@ import type { TypeOfKind, } from '../utils/resolve-type.js' import { isParameterType, isPropertyType } from '../utils/resolve-type.js' -import { CodeBlock } from './CodeBlock/index.js' +import { CodeBlock, parsePreProps } from './CodeBlock/index.js' import { CodeInline } from './CodeInline.js' import { MDXRenderer } from './MDXRenderer.js' import type { MDXComponents } from '../mdx/index.js' const mdxComponents = { pre: (props) => { - return + return }, code: (props) => { return diff --git a/packages/renoun/src/components/CodeBlock/CodeBlock.tsx b/packages/renoun/src/components/CodeBlock/CodeBlock.tsx index 4bbb0b37c..a8b021e9b 100644 --- a/packages/renoun/src/components/CodeBlock/CodeBlock.tsx +++ b/packages/renoun/src/components/CodeBlock/CodeBlock.tsx @@ -465,10 +465,10 @@ const languageKey = 'language-' const languageLength = languageKey.length /** Parses the props of an MDX `pre` element for passing to `CodeBlock`. */ -CodeBlock.parsePreProps = ({ +export function parsePreProps({ children, ...props -}: React.ComponentProps>) => { +}: React.ComponentProps>) { const code = children as React.ReactElement<{ className: `language-${string}` children: string diff --git a/packages/renoun/src/components/CodeBlock/index.ts b/packages/renoun/src/components/CodeBlock/index.ts index 039c5acf1..470adb3fa 100644 --- a/packages/renoun/src/components/CodeBlock/index.ts +++ b/packages/renoun/src/components/CodeBlock/index.ts @@ -1,5 +1,6 @@ export { CodeBlock, + parsePreProps, type BaseCodeBlockProps, type CodeBlockProps, } from './CodeBlock.js' diff --git a/packages/renoun/src/components/index.ts b/packages/renoun/src/components/index.ts index 5fd1c3bff..79adf0b96 100644 --- a/packages/renoun/src/components/index.ts +++ b/packages/renoun/src/components/index.ts @@ -5,12 +5,17 @@ export { LineNumbers, Tokens, Toolbar, + parsePreProps, type BaseCodeBlockProps, type CodeBlockProps, type TokensProps, type ToolbarProps, } from './CodeBlock/index.js' -export { CodeInline, type CodeInlineProps } from './CodeInline.js' +export { + CodeInline, + parseCodeProps, + type CodeInlineProps, +} from './CodeInline.js' export { Copyright } from './Copyright.js' export { GitProviderLogo, GitProviderLink } from './GitProvider.js' export { MDXRenderer } from './MDXRenderer.js' diff --git a/packages/renoun/src/file-system/index.tsx b/packages/renoun/src/file-system/index.tsx index 3e6dfe0ce..d31b1b15a 100644 --- a/packages/renoun/src/file-system/index.tsx +++ b/packages/renoun/src/file-system/index.tsx @@ -3,7 +3,7 @@ import type { MDXContent } from '@renoun/mdx' import { rehypePlugins, remarkPlugins } from '@renoun/mdx' import { minimatch } from 'minimatch' -import { CodeBlock } from '../components/CodeBlock/index.js' +import { CodeBlock, parsePreProps } from '../components/CodeBlock/index.js' import { CodeInline } from '../components/CodeInline.js' import { MDXRenderer } from '../components/MDXRenderer.js' import type { MDXComponents } from '../mdx/index.js' @@ -46,7 +46,7 @@ export { Repository } from './Repository.js' const mdxComponents = { pre: (props) => { - return + return }, code: (props) => { return