react-email 2.0.0-canary.0 → 2.0.0-canary.2

package/cli/index.js

@@ -252,7 +252,7 @@ var import_extra_typings = require("@commander-js/extra-typings");
 // package.json
 var package_default = {
     name: "react-email",
-    version: "2.0.0-canary.0",
+    version: "2.0.0-canary.2",
     description: "A live preview of your emails right in your browser.",
     bin: {
         email: "./cli/index.js"
@@ -296,7 +296,7 @@ var package_default = {
         clsx: "2.1.0",
         commander: "9.4.1",
         debounce: "2.0.0",
-        esbuild: "0.16.4",
+        esbuild: "0.19.11",
         "eslint-config-prettier": "9.0.0",
         "eslint-config-turbo": "1.10.12",
         "fast-glob": "3.3.2",
@@ -571,6 +571,22 @@ var startDevServer = function() {
                             startDevServer(emailsDirRelativePath, staticBaseDirRelativePath, nextPortToTry)
                         ];
                     }
+                    devServer.on("close", /*#__PURE__*/ _async_to_generator(function() {
+                        return _ts_generator(this, function(_state) {
+                            switch(_state.label){
+                                case 0:
+                                    return [
+                                        4,
+                                        app.close()
+                                    ];
+                                case 1:
+                                    _state.sent();
+                                    return [
+                                        2
+                                    ];
+                            }
+                        });
+                    }));
                     devServer.on("error", function(e) {
                         console.error(" ".concat(import_log_symbols.default.error, " preview server error: "), JSON.stringify(e));
                         process.exit(1);

package/cli/index.mjs

@@ -6,7 +6,7 @@ import { program } from "@commander-js/extra-typings";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "2.0.0-canary.0",
+  version: "2.0.0-canary.2",
   description: "A live preview of your emails right in your browser.",
   bin: {
     email: "./cli/index.js"
@@ -50,7 +50,7 @@ var package_default = {
     clsx: "2.1.0",
     commander: "9.4.1",
     debounce: "2.0.0",
-    esbuild: "0.16.4",
+    esbuild: "0.19.11",
     "eslint-config-prettier": "9.0.0",
     "eslint-config-turbo": "1.10.12",
     "fast-glob": "3.3.2",
@@ -275,6 +275,9 @@ var startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, po
       nextPortToTry
     );
   }
+  devServer.on("close", async () => {
+    await app.close();
+  });
   devServer.on("error", (e) => {
     console.error(
       ` ${logSymbols.error} preview server error: `,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "2.0.0-canary.0",
+  "version": "2.0.0-canary.2",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./cli/index.js"
@@ -38,7 +38,7 @@
     "clsx": "2.1.0",
     "commander": "9.4.1",
     "debounce": "2.0.0",
-    "esbuild": "0.16.4",
+    "esbuild": "0.19.11",
     "eslint-config-prettier": "9.0.0",
     "eslint-config-turbo": "1.10.12",
     "fast-glob": "3.3.2",

package/src/actions/render-email-by-slug.tsx

@@ -5,6 +5,7 @@ import { renderAsync } from '@react-email/render';
 import { getEmailComponent } from '../utils/get-email-component';
 import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 import type { ErrorObject } from '../utils/types/error-object';
+import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
 
 export interface RenderedEmailMetadata {
   markup: string;
@@ -29,22 +30,34 @@ export const renderEmailBySlug = async (
     return { error: result.error };
   }
 
-  const Email = result.emailComponent;
+  const { emailComponent: Email, sourceMapToOriginalFile } = result;
 
   const previewProps = Email.PreviewProps || {};
   const EmailComponent = Email as React.FC;
-  const markup = await renderAsync(<EmailComponent {...previewProps} />, {
-    pretty: true,
-  });
-  const plainText = await renderAsync(<EmailComponent {...previewProps} />, {
-    plainText: true,
-  });
-
-  const reactMarkup = await fs.readFile(emailPath, 'utf-8');
-
-  return {
-    markup,
-    plainText,
-    reactMarkup,
-  };
+  try {
+    const markup = await renderAsync(<EmailComponent {...previewProps} />, {
+      pretty: true,
+    });
+    const plainText = await renderAsync(<EmailComponent {...previewProps} />, {
+      plainText: true,
+    });
+
+    const reactMarkup = await fs.readFile(emailPath, 'utf-8');
+
+    return {
+      markup,
+      plainText,
+      reactMarkup,
+    };
+  } catch (exception) {
+    const error = exception as Error;
+
+    return {
+      error: improveErrorWithSourceMap(
+        error,
+        emailPath,
+        sourceMapToOriginalFile,
+      ),
+    };
+  }
 };

package/src/app/preview/[slug]/preview.tsx

@@ -101,7 +101,6 @@ const Preview = ({
             <iframe
               className="w-full h-[calc(100vh_-_140px)]"
               srcDoc={renderedEmailMetadata.markup}
-              // @ts-expect-error For some reason the title prop is not included with the iframe
               title={slug}
             />
           ) : (

package/src/components/sidebar/sidebar-directory-children.tsx

@@ -17,6 +17,7 @@ export const SidebarDirectoryChildren = (props: {
 }) => {
   const directoryPathRelativeToEmailsDirectory =
     props.emailsDirectoryMetadata.absolutePath
+      .replace(`${emailsDirectoryAbsolutePath}${pathSeparator}`, '')
       .replace(emailsDirectoryAbsolutePath, '')
       .trim();
   const isBaseEmailsDirectory =

package/src/components/sidebar/sidebar-directory.tsx

@@ -2,7 +2,10 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import * as React from 'react';
 import { cn } from '../../utils';
-import { emailsDirectoryAbsolutePath } from '../../utils/emails-directory-absolute-path';
+import {
+  emailsDirectoryAbsolutePath,
+  pathSeparator,
+} from '../../utils/emails-directory-absolute-path';
 import { type EmailsDirectory } from '../../actions/get-emails-directory-metadata';
 import { Heading } from '../heading';
 import { IconFolder } from '../icons/icon-folder';
@@ -15,34 +18,47 @@ interface SidebarDirectoryProps {
   currentEmailOpenSlug?: string;
 }
 
+const persistedOpenDirectories = new Set<string>();
+
 export const SidebarDirectory = ({
-  emailsDirectoryMetadata,
+  emailsDirectoryMetadata: directoryMetadata,
   className,
   currentEmailOpenSlug,
 }: SidebarDirectoryProps) => {
   const isBaseEmailsDirectory =
-    emailsDirectoryMetadata.absolutePath === emailsDirectoryAbsolutePath;
-  const directoryPathRelativeToEmailsDirectory =
-    emailsDirectoryMetadata.absolutePath
+    directoryMetadata.absolutePath === emailsDirectoryAbsolutePath;
+  const directoryPathRelativeToBaseEmailsDirectory =
+    directoryMetadata.absolutePath
+      .replace(`${emailsDirectoryAbsolutePath}${pathSeparator}`, '')
       .replace(emailsDirectoryAbsolutePath, '')
       .trim();
-  const doesFolderContainCurrentEmailOpen = currentEmailOpenSlug
-    ? currentEmailOpenSlug.includes(directoryPathRelativeToEmailsDirectory)
+  const doesDirectoryContainCurrentEmailOpen = currentEmailOpenSlug
+    ? currentEmailOpenSlug.includes(directoryPathRelativeToBaseEmailsDirectory)
     : false;
 
   const isEmpty =
-    emailsDirectoryMetadata.emailFilenames.length > 0 ||
-    emailsDirectoryMetadata.subDirectories.length > 0;
+    directoryMetadata.emailFilenames.length > 0 ||
+    directoryMetadata.subDirectories.length > 0;
 
   const [open, setOpen] = React.useState(
-    isBaseEmailsDirectory || doesFolderContainCurrentEmailOpen,
+    persistedOpenDirectories.has(directoryMetadata.absolutePath) ||
+      isBaseEmailsDirectory ||
+      doesDirectoryContainCurrentEmailOpen,
   );
 
   return (
     <Collapsible.Root
       className={cn('group', className)}
       data-root={isBaseEmailsDirectory}
-      onOpenChange={setOpen}
+      onOpenChange={(isOpening) => {
+        if (isOpening) {
+          persistedOpenDirectories.add(directoryMetadata.absolutePath);
+        } else {
+          persistedOpenDirectories.delete(directoryMetadata.absolutePath);
+        }
+
+        setOpen(isOpening);
+      }}
       open={open}
     >
       <Collapsible.Trigger
@@ -60,7 +76,7 @@ export const SidebarDirectory = ({
             size="2"
             weight="medium"
           >
-            {emailsDirectoryMetadata.directoryName}
+            {directoryMetadata.directoryName}
           </Heading>
           {isEmpty ? (
             <IconArrowDown
@@ -74,7 +90,7 @@ export const SidebarDirectory = ({
       {isEmpty ? (
         <SidebarDirectoryChildren
           currentEmailOpenSlug={currentEmailOpenSlug}
-          emailsDirectoryMetadata={emailsDirectoryMetadata}
+          emailsDirectoryMetadata={directoryMetadata}
           open={open}
         />
       ) : null}

package/src/components/sidebar/sidebar.tsx

@@ -17,9 +17,9 @@ export const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(
 
     return (
       <aside className={className} ref={forwardedRef} {...props}>
-        <nav className="p-6 w-screen md:w-full md:min-w-[275px] md:max-w-[275px] flex flex-col gap-4 border-r border-slate-6">
+        <nav className="p-6 h-full w-screen md:w-full md:min-w-[275px] md:max-w-[275px] flex flex-col gap-4 border-r border-slate-6">
           <SidebarDirectory
-            className="w-fit overflow-x-auto"
+            className="min-w-full w-fit overflow-x-auto"
             currentEmailOpenSlug={currentEmailOpenSlug}
             emailsDirectoryMetadata={emailsDirectoryMetadata}
           />

package/src/utils/get-email-component.ts

@@ -3,17 +3,19 @@
 import vm from 'node:vm';
 import stream from 'node:stream';
 import util from 'node:util';
-import * as stackTraceParser from 'stacktrace-parser';
-import { SourceMapConsumer, type RawSourceMap } from 'source-map-js';
+import { type RawSourceMap } from 'source-map-js';
 import { type OutputFile, build, type BuildFailure } from 'esbuild';
 import type { EmailTemplate as EmailComponent } from './types/email-template';
 import type { ErrorObject } from './types/error-object';
+import { improveErrorWithSourceMap } from './improve-error-with-sourcemap';
 
 export const getEmailComponent = async (
   emailPath: string,
 ): Promise<
   | {
       emailComponent: EmailComponent;
+
+      sourceMapToOriginalFile: RawSourceMap;
     }
   | { error: ErrorObject }
 > => {
@@ -25,7 +27,12 @@ export const getEmailComponent = async (
       platform: 'node',
       write: false,
       format: 'cjs',
-      jsx: 'transform',
+      jsx: 'automatic',
+      logLevel: 'silent',
+      // allows for using jsx on a .js file
+      loader: {
+        '.js': 'jsx',
+      },
       outdir: 'stdout', // just a stub for esbuild, it won't actually write to this folder
       sourcemap: 'external',
     });
@@ -75,59 +82,19 @@ export const getEmailComponent = async (
     },
     process,
   };
+  const sourceMapToEmail = JSON.parse(sourceMapFile.text) as RawSourceMap;
   try {
     vm.runInNewContext(builtEmailCode, fakeContext, { filename: emailPath });
   } catch (exception) {
     const error = exception as Error;
-    let stack: string | undefined;
-
-    if (typeof error.stack !== 'undefined') {
-      const parsedStack = stackTraceParser.parse(error.stack);
-      const sourceMapConsumer = new SourceMapConsumer(
-        JSON.parse(sourceMapFile.text) as RawSourceMap,
-      );
-      const newStackLines = [] as string[];
-      for (const stackFrame of parsedStack) {
-        if (stackFrame.file === emailPath) {
-          if (stackFrame.column || stackFrame.lineNumber) {
-            const positionWithError = sourceMapConsumer.originalPositionFor({
-              column: stackFrame.column ?? 0,
-              line: stackFrame.lineNumber ?? 0,
-            });
-            const columnAndLine =
-              positionWithError.column && positionWithError.line
-                ? `${positionWithError.line}:${positionWithError.column}`
-                : positionWithError.line;
-            newStackLines.push(
-              ` at ${stackFrame.methodName} (${emailPath}:${columnAndLine})`,
-            );
-          } else {
-            newStackLines.push(` at ${stackFrame.methodName} (${emailPath})`);
-          }
-        } else {
-          const columnAndLine =
-            stackFrame.column && stackFrame.lineNumber
-              ? `${stackFrame.lineNumber}:${stackFrame.column}`
-              : stackFrame.lineNumber;
-          newStackLines.push(
-            ` at ${stackFrame.methodName} (${stackFrame.file}:${columnAndLine})`,
-          );
-        }
-      }
-      stack = newStackLines.join('\n');
-    }
 
     return {
-      error: {
-        name: error.name,
-        message: error.message,
-        cause: error.cause,
-        stack,
-      },
+      error: improveErrorWithSourceMap(error, emailPath, sourceMapToEmail),
     };
   }
 
   return {
     emailComponent: fakeContext.module.exports.default as EmailComponent,
+    sourceMapToOriginalFile: sourceMapToEmail,
   };
 };

package/src/utils/improve-error-with-sourcemap.ts

@@ -0,0 +1,55 @@
+import * as stackTraceParser from 'stacktrace-parser';
+import { SourceMapConsumer, type RawSourceMap } from 'source-map-js';
+import type { ErrorObject } from './types/error-object';
+
+export const improveErrorWithSourceMap = (
+  error: Error,
+
+  originalFilePath: string,
+  sourceMapToOriginalFile: RawSourceMap,
+): ErrorObject => {
+  let stack: string | undefined;
+
+  if (typeof error.stack !== 'undefined') {
+    const parsedStack = stackTraceParser.parse(error.stack);
+    const sourceMapConsumer = new SourceMapConsumer(sourceMapToOriginalFile);
+    const newStackLines = [] as string[];
+    for (const stackFrame of parsedStack) {
+      if (stackFrame.file === originalFilePath) {
+        if (stackFrame.column || stackFrame.lineNumber) {
+          const positionWithError = sourceMapConsumer.originalPositionFor({
+            column: stackFrame.column ?? 0,
+            line: stackFrame.lineNumber ?? 0,
+          });
+          const columnAndLine =
+            positionWithError.column && positionWithError.line
+              ? `${positionWithError.line}:${positionWithError.column}`
+              : positionWithError.line;
+          newStackLines.push(
+            ` at ${stackFrame.methodName} (${originalFilePath}:${columnAndLine})`,
+          );
+        } else {
+          newStackLines.push(
+            ` at ${stackFrame.methodName} (${originalFilePath})`,
+          );
+        }
+      } else {
+        const columnAndLine =
+          stackFrame.column && stackFrame.lineNumber
+            ? `${stackFrame.lineNumber}:${stackFrame.column}`
+            : stackFrame.lineNumber;
+        newStackLines.push(
+          ` at ${stackFrame.methodName} (${stackFrame.file}:${columnAndLine})`,
+        );
+      }
+    }
+    stack = newStackLines.join('\n');
+  }
+
+  return {
+    name: error.name,
+    message: error.message,
+    cause: error.cause,
+    stack,
+  };
+};

package/src/utils/types/error-object.ts

@@ -1,3 +1,8 @@
+/**
+ * An object that mimics the structure of the Error class,
+ * we just can't use the Error class here because server actions can't
+ * return classes
+ */
 export interface ErrorObject {
   name: string;
   stack: string | undefined;