From e71de2fcdb29f4a95577327edc812fae1f5b6ab9 Mon Sep 17 00:00:00 2001
From: Travis Arnold <ftntravis@gmail.com>
Date: Sun, 17 Nov 2024 23:16:17 -0800
Subject: [PATCH] add shouldFormat prop

---
 .changeset/khaki-rice-tickle.md                   | 15 +++++++++++++++
 apps/site/components/MDXComponents.tsx            |  2 +-
 .../renoun/src/components/CodeBlock/CodeBlock.tsx |  5 +++++
 packages/renoun/src/components/CodeInline.tsx     |  7 ++++---
 .../src/utils/parse-source-text-metadata.ts       |  9 +++++----
 5 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/khaki-rice-tickle.md

diff --git a/.changeset/khaki-rice-tickle.md b/.changeset/khaki-rice-tickle.md
new file mode 100644
index 00000000..af7ec58c
--- /dev/null
+++ b/.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} />
+    },
+  }
+}
+```
diff --git a/apps/site/components/MDXComponents.tsx b/apps/site/components/MDXComponents.tsx
index b051b36d..301663e7 100644
--- a/apps/site/components/MDXComponents.tsx
+++ b/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
diff --git a/packages/renoun/src/components/CodeBlock/CodeBlock.tsx b/packages/renoun/src/components/CodeBlock/CodeBlock.tsx
index b3936361..cb947d5f 100644
--- a/packages/renoun/src/components/CodeBlock/CodeBlock.tsx
+++ b/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 = {
diff --git a/packages/renoun/src/components/CodeInline.tsx b/packages/renoun/src/components/CodeInline.tsx
index 6aeb6e36..e94dcfa6 100644
--- a/packages/renoun/src/components/CodeInline.tsx
+++ b/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,
diff --git a/packages/renoun/src/utils/parse-source-text-metadata.ts b/packages/renoun/src/utils/parse-source-text-metadata.ts
index 089e116f..97360e53 100644
--- a/packages/renoun/src/utils/parse-source-text-metadata.ts
+++ b/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}`
       )
     }