chore(react-email): Use deprecated pretty to allow for backwards-compatibility for now (#2091)

Author: gabrielmfern

.changeset/famous-years-knock.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+fix backwards compatibility with `render` versions

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

@@ -58,16 +58,15 @@ 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 pretty(
-      await render(createElement(EmailComponent, previewProps)),
-    );
+    const markup = await render(createElement(EmailComponent, previewProps), {
+      pretty: true,
+    });
     const plainText = await render(
       createElement(EmailComponent, previewProps),
       {
@@ -77,11 +76,11 @@ export const renderEmailByPath = async (
 
     const reactMarkup = await fs.promises.readFile(emailPath, 'utf-8');
 
-    const milisecondsToRendered = performance.now() - timeBeforeEmailRendered;
-    let timeForConsole = `${milisecondsToRendered.toFixed(0)}ms`;
-    if (milisecondsToRendered <= 450) {
+    const millisecondsToRendered = performance.now() - timeBeforeEmailRendered;
+    let timeForConsole = `${millisecondsToRendered.toFixed(0)}ms`;
+    if (millisecondsToRendered <= 450) {
       timeForConsole = chalk.green(timeForConsole);
-    } else if (milisecondsToRendered <= 1000) {
+    } else if (millisecondsToRendered <= 1000) {
       timeForConsole = chalk.yellow(timeForConsole);
     } else {
       timeForConsole = chalk.red(timeForConsole);

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

@@ -118,15 +118,12 @@ export const exportTemplates = async (
           element: React.ReactElement,
           options: Record<string, unknown>,
         ) => Promise<string>;
-        pretty: (str: string, options?: Options) => Promise<string>;
         reactEmailCreateReactElement: typeof React.createElement;
       };
-      let rendered = await emailModule.render(
+      const 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/hooks/use-email-rendering-result.ts

@@ -23,20 +23,20 @@ export const useEmailRenderingResult = (
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useHotreload(async (changes) => {
       for await (const change of changes) {
-        const slugForChangedEmail =
+        const slugForChangedFile =
           // ex: apple-receipt.tsx
           // it will be the path relative to the emails directory, so it is already
           // going to be equivalent to the slug
           change.filename;
 
         if (
-          containsEmailTemplate(slugForChangedEmail, emailsDirectoryMetadata)
+          containsEmailTemplate(slugForChangedFile, emailsDirectoryMetadata)
         ) {
           continue;
         }
 
         const pathForChangedEmail =
-          await getEmailPathFromSlug(slugForChangedEmail);
+          await getEmailPathFromSlug(slugForChangedFile);
 
         const newRenderingResult = await renderEmailByPath(
           pathForChangedEmail,

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, pretty } from 'react-email-module-that-will-export-render'
+          export { render } 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 { pretty, render } from '@react-email/components';
+import type { 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,7 +14,6 @@ import type { ErrorObject } from './types/error-object';
 const EmailComponentModule = z.object({
   default: z.any(),
   render: z.function(),
-  pretty: z.function(),
   reactEmailCreateReactElement: z.function(),
 });
 
@@ -28,8 +27,6 @@ export const getEmailComponent = async (
 
       render: typeof render;
 
-      pretty: typeof pretty;
-
       sourceMapToOriginalFile: RawSourceMap;
     }
   | { error: ErrorObject }
@@ -129,7 +126,6 @@ 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,