feat(render): Separate pretty from render (#1906)

Co-authored-by: gabriel miranda <[email protected]>

Author: thena-seer

.changeset/strong-peas-kneel.md

@@ -0,0 +1,5 @@
+---
+"@react-email/render": minor
+---
+
+Deprecate the `pretty` option for `render` in favor of standalone `pretty` function

apps/docs/utilities/render.mdx

@@ -50,15 +50,13 @@ export default MyTemplate;
 
 Import an existing React component and convert into a HTML string.
 
-<Info>You can use the `pretty` option to beautify the output.</Info>
+<Info>You can use the `pretty` function to beautify the output.</Info>
 
 ```jsx
 import { MyTemplate } from './email';
-import { render } from '@react-email/render';
+import { render, pretty } from '@react-email/render';
 
-const html = await render(<MyTemplate />, {
-  pretty: true,
-});
+const html = await pretty(await render(<MyTemplate />));
 
 console.log(html);
 ```
@@ -117,7 +115,7 @@ Click me [https://example.com]
 
 ## Options
 
-<ResponseField name="pretty" type="boolean">
+<ResponseField name="pretty" type="boolean" deprecated>
   Beautify HTML output
 </ResponseField>
 <ResponseField name="plainText" type="boolean">
@@ -126,4 +124,3 @@ Click me [https://example.com]
 <ResponseField name="htmlToTextOptions" type="HtmlToTextOptions">
   `html-to-text` [options](https://github.com/html-to-text/node-html-to-text/tree/master/packages/html-to-text#options) used for rendering
 </ResponseField>
-

apps/web/components/ensure-matching-variants.spec.tsx

@@ -1,6 +1,6 @@
 import { existsSync } from 'node:fs';
 import path from 'node:path';
-import { render } from '@react-email/components';
+import { pretty, render } from '@react-email/components';
 import { parse, stringify } from 'html-to-ast';
 import type { Attr, IDoc as Doc } from 'html-to-ast/dist/types';
 import postcss from 'postcss';
@@ -81,12 +81,13 @@ describe('copy-paste components', () => {
           inlineStylesVariantPath,
         );
         const tailwindHtml = getComparableHtml(
-          await render(<Layout>{tailwindElement}</Layout>, { pretty: true }),
+          await pretty(await render(<Layout>{tailwindElement}</Layout>)),
         );
         const inlineStylesHtml = getComparableHtml(
-          await render(
-            <Layout withTailwind={false}>{inlineStylesElement}</Layout>,
-            { pretty: true },
+          await pretty(
+            await render(
+              <Layout withTailwind={false}>{inlineStylesElement}</Layout>,
+            ),
           ),
         );
         expect(tailwindHtml).toBe(inlineStylesHtml);

apps/web/src/app/components/get-imported-components-for.tsx

@@ -2,7 +2,7 @@ import { promises as fs } from 'node:fs';
 import path from 'node:path';
 import { parse } from '@babel/parser';
 import traverse from '@babel/traverse';
-import { render } from '@react-email/components';
+import { pretty, render } from '@react-email/components';
 import { z } from 'zod';
 import { Layout } from '../../../components/_components/layout';
 import type { Category, Component } from '../../../components/structure';
@@ -84,9 +84,7 @@ export const getImportedComponent = async (
   if (variantFilenames.length === 1 && variantFilenames[0] === 'index.tsx') {
     const filePath = path.join(dirpath, 'index.tsx');
     const element = <Layout>{await getComponentElement(filePath)}</Layout>;
-    const html = await render(element, {
-      pretty: true,
-    });
+    const html = await pretty(await render(element));
     const fileContent = await fs.readFile(filePath, 'utf8');
     const code = getComponentCodeFrom(fileContent);
     return {
@@ -121,9 +119,7 @@ export const getImportedComponent = async (
 
   const element = <Layout>{elements[0]}</Layout>;
 
-  codePerVariant.html = await render(element, {
-    pretty: true,
-  });
+  codePerVariant.html = await pretty(await render(element));
 
   return {
     ...component,

packages/react-email/src/actions/render-email-by-path.tsx

@@ -58,15 +58,16 @@ export const renderEmailByPath = async (
     emailComponent: Email,
     createElement,
     render,
+    pretty,
     sourceMapToOriginalFile,
   } = componentResult;
 
   const previewProps = Email.PreviewProps || {};
   const EmailComponent = Email as React.FC;
   try {
-    const markup = await render(createElement(EmailComponent, previewProps), {
-      pretty: true,
-    });
+    const markup = await pretty(
+      await render(createElement(EmailComponent, previewProps)),
+    );
     const plainText = await render(
       createElement(EmailComponent, previewProps),
       {

packages/react-email/src/cli/commands/export.ts

@@ -29,6 +29,7 @@ const getEmailTemplatesFromDirectory = (emailDirectory: EmailsDirectory) => {
 
 type ExportTemplatesOptions = Options & {
   silent?: boolean;
+  pretty?: boolean;
 };
 
 /*
@@ -117,12 +118,15 @@ export const exportTemplates = async (
           element: React.ReactElement,
           options: Record<string, unknown>,
         ) => Promise<string>;
+        pretty: (str: string, options?: Options) => Promise<string>;
         reactEmailCreateReactElement: typeof React.createElement;
       };
-      const rendered = await emailModule.render(
+      let rendered = await emailModule.render(
         emailModule.reactEmailCreateReactElement(emailModule.default, {}),
         options,
       );
+      if (!options.plainText && options.pretty)
+        rendered = await emailModule.pretty(rendered);
       const htmlPath = template.replace(
         '.cjs',
         options.plainText ? '.txt' : '.html',

packages/react-email/src/cli/commands/testing/export.spec.ts

@@ -11,8 +11,8 @@ test(
     );
     const pathToDumpMarkup = path.resolve(__dirname, './out');
     await exportTemplates(pathToDumpMarkup, pathToEmailsDirectory, {
-      pretty: true,
       silent: true,
+      pretty: true,
     });
 
     expect(fs.existsSync(pathToDumpMarkup)).toBe(true);

packages/react-email/src/cli/index.ts

@@ -49,7 +49,7 @@ program
     false,
   )
   .action(({ outDir, pretty, plainText, silent, dir: srcDir }) =>
-    exportTemplates(outDir, srcDir, { pretty, silent, plainText }),
+    exportTemplates(outDir, srcDir, { silent, plainText, pretty }),
   );
 
 program.parse();

packages/react-email/src/utils/esbuild/renderring-utilities-exporter.ts

@@ -28,7 +28,7 @@ export const renderingUtilitiesExporter = (emailTemplates: string[]) => ({
       async ({ path: pathToFile }) => {
         return {
           contents: `${await fs.readFile(pathToFile, 'utf8')};
-          export { render } from 'react-email-module-that-will-export-render'
+          export { render, pretty } from 'react-email-module-that-will-export-render'
           export { createElement as reactEmailCreateReactElement } from 'react';
         `,
           loader: path.extname(pathToFile).slice(1) as Loader,

packages/react-email/src/utils/get-email-component.ts

@@ -1,5 +1,5 @@
 import path from 'node:path';
-import type { render } from '@react-email/components';
+import type { pretty, render } from '@react-email/components';
 import { type BuildFailure, type OutputFile, build } from 'esbuild';
 import type React from 'react';
 import type { RawSourceMap } from 'source-map-js';
@@ -14,6 +14,7 @@ import type { ErrorObject } from './types/error-object';
 const EmailComponentModule = z.object({
   default: z.any(),
   render: z.function(),
+  pretty: z.function(),
   reactEmailCreateReactElement: z.function(),
 });
 
@@ -27,6 +28,8 @@ export const getEmailComponent = async (
 
       render: typeof render;
 
+      pretty: typeof pretty;
+
       sourceMapToOriginalFile: RawSourceMap;
     }
   | { error: ErrorObject }
@@ -126,6 +129,7 @@ export const getEmailComponent = async (
   return {
     emailComponent: componentModule.default as EmailComponent,
     render: componentModule.render as typeof render,
+    pretty: componentModule.pretty as typeof pretty,
     createElement:
       componentModule.reactEmailCreateReactElement as typeof React.createElement,