add shouldFormat prop

.changeset/khaki-rice-tickle.md

@@ -0,0 +1,15 @@
+---
+'renoun': minor
+---
+
+Adds `shouldFormat` prop to `CodeBlock` component to allow disabling code formatting. This is useful for MDX code blocks that are already formatted by an IDE or CI environment.
+
+```tsx
+export function useMDXComponents() {
+  return {
+    pre: (props) => {
+      return <CodeBlock shouldFormat={false} {...restProps} />
+    },
+  }
+}
+```

apps/site/components/MDXComponents.tsx

@@ -104,6 +104,6 @@ export const MDXComponents = {
     )
   },
   pre: ({ children, ...restProps }) => {
-    return <CodeBlock {...restProps} />
+    return <CodeBlock shouldFormat={false} {...restProps} />
   },
 } satisfies MDXComponentsType

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

@@ -51,6 +51,9 @@ export type BaseCodeBlockProps = {
   /** Show or hide the toolbar. */
   showToolbar?: boolean
 
+  /** Whether or not to format the source code using `prettier` if installed. */
+  shouldFormat?: boolean
+
   /** CSS styles to apply to code block elements. */
   css?: {
     container?: CSSObject
@@ -106,6 +109,7 @@ async function CodeBlockAsync({
   showErrors,
   showLineNumbers,
   showToolbar,
+  shouldFormat,
   ...props
 }: CodeBlockProps) {
   const containerPadding = computeDirectionalStyles(
@@ -138,6 +142,7 @@ async function CodeBlockAsync({
     language,
     allowErrors,
     showErrors,
+    shouldFormat,
     ...options,
   })
   const contextValue = {

packages/renoun/src/components/CodeInline.tsx

@@ -17,6 +17,9 @@ export type CodeInlineProps = {
   /** Show or hide a persistent button that copies the `value` to the clipboard. */
   allowCopy?: boolean
 
+  /** Whether or not to allow errors. Accepts a boolean or comma-separated list of allowed error codes. */
+  allowErrors?: boolean | string
+
   /** Horizontal padding to apply to the wrapping element. */
   paddingX?: string
 
@@ -31,9 +34,6 @@ export type CodeInlineProps = {
 
   /** Style to apply to the wrapping element. */
   style?: React.CSSProperties
-
-  /** Whether or not to allow errors. Accepts a boolean or comma-separated list of allowed error codes. */
-  allowErrors?: boolean | string
 }
 
 function Token({ token }: { token: Token }) {
@@ -69,6 +69,7 @@ async function CodeInlineAsync({
 }: CodeInlineProps) {
   const { tokens } = await analyzeSourceText({
     isInline: true,
+    shouldFormat: false,
     value,
     language,
     allowErrors,

packages/renoun/src/utils/parse-source-text-metadata.ts

@@ -13,6 +13,7 @@ type BaseParseMetadataOptions = {
   filename?: string
   language?: Languages
   allowErrors?: boolean | string
+  shouldFormat?: boolean
   isInline?: boolean
 }
 
@@ -43,6 +44,7 @@ export async function parseSourceTextMetadata({
   filename: filenameProp,
   language,
   allowErrors = false,
+  shouldFormat = true,
   isInline = false,
   ...props
 }: ParseMetadataOptions): Promise<ParseMetadataResult> {
@@ -99,7 +101,6 @@ export async function parseSourceTextMetadata({
   const isJavaScriptLikeLanguage = ['js', 'jsx', 'ts', 'tsx'].includes(
     finalLanguage
   )
-  const isHtmlLanguage = 'html' === finalLanguage
   const jsxOnly = isJavaScriptLikeLanguage ? isJsxOnly(finalValue) : false
   let filename = 'source' in props ? props.source : filenameProp
   let sourceFile: SourceFile | undefined
@@ -109,12 +110,12 @@ export async function parseSourceTextMetadata({
     isGeneratedFilename = true
   }
 
-  // Format JavaScript and HTML code blocks.
-  if (isJavaScriptLikeLanguage || isHtmlLanguage) {
+  // Format source text if enabled.
+  if (shouldFormat) {
     try {
       finalValue = await formatSourceText(filename, finalValue)
     } catch (error) {
-      console.log(
+      throw new Error(
         `[renoun] Error formatting "${componentName}" source text${filename ? ` at filename "${filename}"` : ''} ${error}`
       )
     }