export parsePreProps on its own

.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 <CodeBlock {...parsePreProps(props)} />
+    },
+  } satisfies MDXComponents
+}
+```

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 (
       <CodeInline
-        value={value}
-        language={language}
+        {...parseCodeProps(props)}
         paddingY="0"
         css={{
           lineHeight: 1.15,
@@ -107,7 +106,6 @@ export const MDXComponents = {
     )
   },
   pre: (props) => {
-    const parsedProps = RenounCodeBlock.parsePreProps(props)
-    return <CodeBlock shouldFormat={false} {...parsedProps} />
+    return <CodeBlock {...parsePreProps(props)} shouldFormat={false} />
   },
 } satisfies MDXComponentsType

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 <CodeBlock {...CodeBlock.parsePreProps(props)} />
+      return <CodeBlock {...parsePreProps(props)} />
     },
     code: (props) => {
       return <CodeInline {...parseCodeProps(props)} />

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 <CodeBlock {...parsePreProps(props)} />
+    },
     code: (props) => {
       return <CodeInline {...parseCodeProps(props)} />
     },
-    pre: (props) => {
-      const { value, language } = CodeBlock.parsePreProps(props)
-      return <CodeBlock value={value} language={language} />
-    },
   } satisfies MDXComponents
 }

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 <CodeBlock {...parsePreProps(props)} />
+    },
     code: (props) => {
       return <CodeInline {...parseCodeProps(props)} />
     },
-    pre: (props) => {
-      return <CodeBlock {...CodeBlock.parsePreProps(props)} />
-    },
   } satisfies MDXComponents
 }

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 <CodeBlock {...CodeBlock.parsePreProps(props)} />
+    return <CodeBlock {...parsePreProps(props)} />
   },
   code: (props) => {
     return <CodeInline value={props.children} language="typescript" />

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<NonNullable<MDXComponents['pre']>>) => {
+}: React.ComponentProps<NonNullable<MDXComponents['pre']>>) {
   const code = children as React.ReactElement<{
     className: `language-${string}`
     children: string

packages/renoun/src/components/CodeBlock/index.ts

@@ -1,5 +1,6 @@
 export {
   CodeBlock,
+  parsePreProps,
   type BaseCodeBlockProps,
   type CodeBlockProps,
 } from './CodeBlock.js'

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'

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 <CodeBlock {...CodeBlock.parsePreProps(props)} />
+    return <CodeBlock {...parsePreProps(props)} />
   },
   code: (props) => {
     return <CodeInline value={props.children} language="typescript" />