feat(preview-server): separate timings for bundling/rendering (#2645)

Author: gabrielmfern

.changeset/honest-carrots-shout.md

@@ -0,0 +1,5 @@
+---
+"@react-email/preview-server": patch
+---
+
+show separate timings for bundling/rendering an email template

packages/preview-server/src/actions/render-email-by-path.tsx

@@ -49,8 +49,6 @@ export const renderEmailByPath = async (
     return cache.get(emailPath)!;
   }
 
-  const timeBeforeEmailRendered = performance.now();
-
   const emailFilename = path.basename(emailPath);
   let spinner: Ora | undefined;
   if (!isBuilding && !isPreviewDevelopment) {
@@ -61,6 +59,7 @@ export const renderEmailByPath = async (
     registerSpinnerAutostopping(spinner);
   }
 
+  const timeBeforeEmailBundled = performance.now();
   const originalJsxRuntimePath = path.resolve(
     previewServerLocation,
     'jsx-runtime',
@@ -70,6 +69,7 @@ export const renderEmailByPath = async (
     originalJsxRuntimePath,
   );
   const componentResult = await getEmailComponent(emailPath, jsxRuntimePath);
+  const millisecondsToBundled = performance.now() - timeBeforeEmailBundled;
 
   if ('error' in componentResult) {
     spinner?.stopAndPersist({
@@ -90,6 +90,7 @@ export const renderEmailByPath = async (
   const previewProps = Email.PreviewProps || {};
   const EmailComponent = Email as React.FC;
   try {
+    const timeBeforeEmailRendered = performance.now();
     const element = createElement(EmailComponent, previewProps);
     const markupWithReferences = await renderWithReferences(element, {
       pretty: true,
@@ -117,7 +118,7 @@ export const renderEmailByPath = async (
     }
     spinner?.stopAndPersist({
       symbol: logSymbols.success,
-      text: `Successfully rendered ${emailFilename} in ${timeForConsole}`,
+      text: `Successfully rendered ${emailFilename} in ${timeForConsole} (bundled in ${millisecondsToBundled.toFixed(0)}ms)`,
     });
 
     const renderingResult: RenderedEmailMetadata = {