add parseCodeProps to CodeInline component

.changeset/loud-cars-march.md

@@ -0,0 +1,18 @@
+---
+'renoun': minor
+---
+
+Adds a `parseCodeProps` helper to the `CodeInline` component making it easier to type custom MDX components correctly:
+
+```tsx
+import { CodeInline } from 'renoun/components'
+import type { MDXComponents } from 'renoun/mdx'
+
+export function useMDXComponents() {
+  return {
+    code: (props) => {
+      return <CodeInline {...CodeInline.parseCodeProps(props)} />
+    },
+  } satisfies MDXComponents
+}
+```

apps/site/components/MDXComponents.tsx

@@ -1,4 +1,8 @@
-import { CodeInline, PackageInstall } from 'renoun/components'
+import {
+  CodeBlock as RenounCodeBlock,
+  CodeInline,
+  PackageInstall,
+} from 'renoun/components'
 import type { MDXComponents as MDXComponentsType } from 'renoun/mdx'
 import { GeistMono } from 'geist/font/mono'
 
@@ -86,10 +90,11 @@ export const MDXComponents = {
     )
   },
   code: (props) => {
+    const { value, language } = CodeInline.parseCodeProps(props)
     return (
       <CodeInline
-        value={props.children as string}
-        language={props.language}
+        value={value}
+        language={language}
         paddingY="0"
         css={{
           lineHeight: 1.15,
@@ -100,7 +105,8 @@ export const MDXComponents = {
       />
     )
   },
-  pre: ({ children, ...restProps }) => {
-    return <CodeBlock shouldFormat={false} {...restProps} />
+  pre: (props) => {
+    const parsedProps = RenounCodeBlock.parsePreProps(props)
+    return <CodeBlock shouldFormat={false} {...parsedProps} />
   },
 } satisfies MDXComponentsType

apps/site/guides/02.next.mdx

@@ -127,11 +127,10 @@ import type { MDXComponents } from 'renoun/mdx'
 export function useMDXComponents() {
   return {
     pre: (props) => {
-      const { value, language } = CodeBlock.parsePreProps(props)
-      return <CodeBlock allowErrors value={value} language={language} />
+      return <CodeBlock {...CodeBlock.parsePreProps(props)} />
     },
     code: (props) => {
-      return <CodeInline value={props.children} language="typescript" />
+      return <CodeInline {...CodeInline.parseCodeProps(props)} />
     },
   } satisfies MDXComponents
 }

examples/blog/mdx-components.tsx

@@ -4,9 +4,8 @@ import type { MDXComponents } from 'renoun/mdx'
 export function useMDXComponents() {
   return {
     code: (props) => {
-      return (
-        <CodeInline value={props.children as string} language="typescript" />
-      )
+      const { value, language } = CodeInline.parseCodeProps(props)
+      return <CodeInline value={value} language={language} />
     },
     pre: (props) => {
       const { value, language } = CodeBlock.parsePreProps(props)

examples/design-system/mdx-components.tsx

@@ -4,13 +4,10 @@ import type { MDXComponents } from 'renoun/mdx'
 export function useMDXComponents() {
   return {
     code: (props) => {
-      return (
-        <CodeInline value={props.children as string} language="typescript" />
-      )
+      return <CodeInline {...CodeInline.parseCodeProps(props)} />
     },
     pre: (props) => {
-      const { value, language } = CodeBlock.parsePreProps(props)
-      return <CodeBlock value={value} language={language} />
+      return <CodeBlock {...CodeBlock.parsePreProps(props)} />
     },
   } satisfies MDXComponents
 }

packages/renoun/src/components/APIReference.tsx

@@ -23,8 +23,7 @@ import type { MDXComponents } from '../mdx/index.js'
 
 const mdxComponents = {
   pre: (props) => {
-    const { value, language } = CodeBlock.parsePreProps(props)
-    return <CodeBlock allowErrors value={value} language={language} />
+    return <CodeBlock {...CodeBlock.parsePreProps(props)} />
   },
   code: (props) => {
     return <CodeInline value={props.children} language="typescript" />

packages/renoun/src/components/CodeBlock/CodeBlock.tsx

@@ -465,10 +465,11 @@ const languageKey = 'language-'
 const languageLength = languageKey.length
 
 /** Parses the props of an MDX `pre` element for passing to `CodeBlock`. */
-CodeBlock.parsePreProps = (
-  props: React.ComponentProps<NonNullable<MDXComponents['pre']>>
-) => {
-  const code = props.children as React.ReactElement<{
+CodeBlock.parsePreProps = ({
+  children,
+  ...props
+}: React.ComponentProps<NonNullable<MDXComponents['pre']>>) => {
+  const code = children as React.ReactElement<{
     className: `language-${string}`
     children: string
   }>
@@ -481,7 +482,11 @@ CodeBlock.parsePreProps = (
     language: (languageClassName
       ? languageClassName.slice(languageLength)
       : 'plain') as Languages,
-  }
+    ...props,
+  } as {
+    value: string
+    language?: Languages
+  } & Omit<React.ComponentProps<NonNullable<MDXComponents['pre']>>, 'children'>
 }
 
 const StyledContainer = styled('div')

packages/renoun/src/components/CodeInline.tsx

@@ -1,6 +1,7 @@
 import React, { Fragment, Suspense } from 'react'
 import { css, styled, type CSSObject } from 'restyle'
 
+import type { MDXComponents } from '../mdx/index.js'
 import { analyzeSourceText } from '../project/client.js'
 import type { Languages } from '../utils/get-language.js'
 import { getThemeColors } from '../utils/get-theme-colors.js'
@@ -179,3 +180,17 @@ export function CodeInline({
     </Suspense>
   )
 }
+
+/** Parses the props of an MDX `code` element for passing to `CodeInline`. */
+CodeInline.parseCodeProps = ({
+  children,
+  ...props
+}: React.ComponentProps<NonNullable<MDXComponents['code']>>) => {
+  return {
+    value: (children as string).trim(),
+    ...props,
+  } as {
+    value: string
+    language?: Languages
+  } & Omit<React.ComponentProps<NonNullable<MDXComponents['code']>>, 'children'>
+}

packages/renoun/src/file-system/index.tsx

@@ -46,8 +46,7 @@ export { Repository } from './Repository.js'
 
 const mdxComponents = {
   pre: (props) => {
-    const { value, language } = CodeBlock.parsePreProps(props)
-    return <CodeBlock value={value} language={language} />
+    return <CodeBlock {...CodeBlock.parsePreProps(props)} />
   },
   code: (props) => {
     return <CodeInline value={props.children} language="typescript" />