fix(preview-server): file names and extensions not being used in download (#2684)

Author: gabrielmfern

.changeset/itchy-wasps-read.md

@@ -0,0 +1,5 @@
+---
+"@react-email/preview-server": patch
+---
+
+fix file names and extensions not being used in download

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

@@ -27,6 +27,9 @@ export interface RenderedEmailMetadata {
   markupWithReferences?: string;
   plainText: string;
   reactMarkup: string;
+
+  basename: string;
+  extname: string;
 }
 
 export type EmailRenderingResult =
@@ -130,6 +133,9 @@ export const renderEmailByPath = async (
       markupWithReferences: markupWithReferences.replaceAll('\0', ''),
       plainText,
       reactMarkup,
+
+      basename: path.basename(emailPath, path.extname(emailPath)),
+      extname: path.extname(emailPath).slice(1),
     };
 
     cache.set(emailPath, renderingResult);

packages/preview-server/src/app/preview/[...slug]/preview.tsx

@@ -36,7 +36,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
 
   const isDarkModeEnabled = searchParams.get('dark') !== null;
   const activeView = searchParams.get('view') ?? 'preview';
-  const activeLang = searchParams.get('lang') ?? 'jsx';
+  const activeLang = searchParams.get('lang') ?? 'tsx';
 
   const handleDarkModeChange = (enabled: boolean) => {
     const params = new URLSearchParams(searchParams);
@@ -207,17 +207,20 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
                   <Tooltip.Provider>
                     <CodeContainer
                       activeLang={activeLang}
+                      basename={renderedEmailMetadata.basename}
                       markups={[
                         {
-                          language: 'jsx',
+                          language: 'tsx',
+                          extension: renderedEmailMetadata.extname,
                           content: renderedEmailMetadata.reactMarkup,
                         },
                         {
-                          language: 'markup',
+                          language: 'html',
                           content: renderedEmailMetadata.prettyMarkup,
                         },
                         {
                           language: 'markdown',
+                          extension: 'md',
                           content: renderedEmailMetadata.plainText,
                         },
                       ]}

packages/preview-server/src/components/code-container.tsx

@@ -13,17 +13,20 @@ import { Tooltip } from './tooltip';
 
 interface CodeContainerProps {
   markups: MarkupProps[];
+  basename: string;
   activeLang: string;
   setActiveLang: (lang: string) => void;
 }
 
 interface MarkupProps {
   language: Language;
+  extension?: string;
   content: string;
 }
 
 export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
   markups,
+  basename: filename,
   activeLang,
   setActiveLang,
 }) => {
@@ -83,7 +86,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
         <CopyToClipboardButton content={activeMarkup.content} />
         <DownloadButton
           content={activeMarkup.content}
-          filename={`email.${activeMarkup.language}`}
+          filename={`${filename}.${activeMarkup.extension || activeMarkup.language}`}
         />
       </div>
       <div className="h-[calc(100%-2.25rem)]">

packages/preview-server/src/utils/language-map.ts

@@ -1,6 +1,6 @@
 const languageMap = {
-  jsx: 'React',
-  markup: 'HTML',
+  tsx: 'React',
+  html: 'HTML',
   markdown: 'Plain Text',
 };