react-email 2.0.0 → 2.0.1-canary.1

package/cli/index.js

@@ -252,7 +252,7 @@ var import_commander = require("commander");
 // package.json
 var package_default = {
     name: "react-email",
-    version: "2.0.0",
+    version: "2.0.1-canary.1",
     description: "A live preview of your emails right in your browser.",
     bin: {
         email: "./cli/index.js"
@@ -302,7 +302,7 @@ var package_default = {
         glob: "10.3.4",
         "log-symbols": "4.1.0",
         "mime-types": "2.1.35",
-        next: "14.0.5-canary.46",
+        next: "14.1.0",
         "normalize-path": "3.0.0",
         ora: "5.4.1",
         postcss: "8.4.32",
@@ -872,8 +872,6 @@ var import_node_child_process = require("child_process");
 var import_node_fs4 = __toESM(require("fs"));
 var import_node_path5 = __toESM(require("path"));
 var isFileAnEmail = function(fullPath) {
-    var unixFullPath = fullPath.replaceAll(import_node_path5.default.sep, "/");
-    if (/(\/|^)_[^/]*/.test(unixFullPath)) return false;
     var stat = import_node_fs4.default.statSync(fullPath);
     if (stat.isDirectory()) return false;
     var ext = import_node_path5.default.parse(fullPath).ext;
@@ -1001,7 +999,9 @@ var getEmailSlugsFromEmailDirectory = function(emailDirectory, emailsDirectoryAb
     var directoryPathRelativeToEmailsDirectory = emailDirectory.absolutePath.replace(emailsDirectoryAbsolutePath, "").trim();
     var slugs = [];
     emailDirectory.emailFilenames.forEach(function(filename) {
-        return slugs.push(import_node_path6.default.join(directoryPathRelativeToEmailsDirectory, filename));
+        return slugs.push(import_node_path6.default.join(directoryPathRelativeToEmailsDirectory, filename).split(import_node_path6.default.sep).filter(function(segment) {
+            return segment.length > 0;
+        }));
     });
     emailDirectory.subDirectories.forEach(function(directory) {
         var _slugs;
@@ -1029,7 +1029,7 @@ var forceSSGForEmailPreviews = function() {
                     });
                     return [
                         4,
-                        import_node_fs5.default.promises.appendFile(import_node_path6.default.resolve(builtPreviewAppPath, "./src/app/preview/[slug]/page.tsx"), "\n\nexport async function generateStaticParams() { \n  return ".concat(JSON.stringify(parameters), ";\n}"), "utf8")
+                        import_node_fs5.default.promises.appendFile(import_node_path6.default.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"), "\n\nexport async function generateStaticParams() { \n  return ".concat(JSON.stringify(parameters), ";\n}"), "utf8")
                     ];
                 case 2:
                     _state.sent();
@@ -1043,7 +1043,7 @@ var forceSSGForEmailPreviews = function() {
         return _ref.apply(this, arguments);
     };
 }();
-var updatePackageJsonScripts = function() {
+var updatePackageJson = function() {
     var _ref = _async_to_generator(function(builtPreviewAppPath) {
         var packageJsonPath, packageJson, _;
         return _ts_generator(this, function(_state) {
@@ -1061,6 +1061,7 @@ var updatePackageJsonScripts = function() {
                     ]);
                     packageJson.scripts.build = "next build";
                     packageJson.scripts.start = "next start";
+                    packageJson.dependencies.sharp = "0.33.2";
                     return [
                         4,
                         import_node_fs5.default.promises.writeFile(packageJsonPath, JSON.stringify(packageJson), "utf8")
@@ -1073,7 +1074,7 @@ var updatePackageJsonScripts = function() {
             }
         });
     });
-    return function updatePackageJsonScripts(builtPreviewAppPath) {
+    return function updatePackageJson(builtPreviewAppPath) {
         return _ref.apply(this, arguments);
     };
 }();
@@ -1187,7 +1188,7 @@ var build = function() {
                     spinner.text = "Updating package.json's build and start scripts";
                     return [
                         4,
-                        updatePackageJsonScripts(builtPreviewAppPath)
+                        updatePackageJson(builtPreviewAppPath)
                     ];
                 case 9:
                     _state.sent();

package/cli/index.mjs

@@ -6,7 +6,7 @@ import { program } from "commander";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "2.0.0",
+  version: "2.0.1-canary.1",
   description: "A live preview of your emails right in your browser.",
   bin: {
     email: "./cli/index.js"
@@ -56,7 +56,7 @@ var package_default = {
     glob: "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
-    next: "14.0.5-canary.46",
+    next: "14.1.0",
     "normalize-path": "3.0.0",
     ora: "5.4.1",
     postcss: "8.4.32",
@@ -451,9 +451,6 @@ import { spawn } from "child_process";
 import fs4 from "fs";
 import path6 from "path";
 var isFileAnEmail = (fullPath) => {
-  const unixFullPath = fullPath.replaceAll(path6.sep, "/");
-  if (/(\/|^)_[^/]*/.test(unixFullPath))
-    return false;
   const stat = fs4.statSync(fullPath);
   if (stat.isDirectory())
     return false;
@@ -580,7 +577,9 @@ var getEmailSlugsFromEmailDirectory = (emailDirectory, emailsDirectoryAbsolutePa
   const directoryPathRelativeToEmailsDirectory = emailDirectory.absolutePath.replace(emailsDirectoryAbsolutePath, "").trim();
   const slugs = [];
   emailDirectory.emailFilenames.forEach(
-    (filename) => slugs.push(path7.join(directoryPathRelativeToEmailsDirectory, filename))
+    (filename) => slugs.push(
+      path7.join(directoryPathRelativeToEmailsDirectory, filename).split(path7.sep).filter((segment) => segment.length > 0)
+    )
   );
   emailDirectory.subDirectories.forEach((directory) => {
     slugs.push(
@@ -602,7 +601,7 @@ var forceSSGForEmailPreviews = async (emailsDirPath, builtPreviewAppPath) => {
     emailsDirPath
   ).map((slug) => ({ slug }));
   await fs5.promises.appendFile(
-    path7.resolve(builtPreviewAppPath, "./src/app/preview/[slug]/page.tsx"),
+    path7.resolve(builtPreviewAppPath, "./src/app/preview/[...slug]/page.tsx"),
     `
 
 export async function generateStaticParams() { 
@@ -611,13 +610,14 @@ export async function generateStaticParams() {
     "utf8"
   );
 };
-var updatePackageJsonScripts = async (builtPreviewAppPath) => {
+var updatePackageJson = async (builtPreviewAppPath) => {
   const packageJsonPath = path7.resolve(builtPreviewAppPath, "./package.json");
   const packageJson = JSON.parse(
     await fs5.promises.readFile(packageJsonPath, "utf8")
   );
   packageJson.scripts.build = "next build";
   packageJson.scripts.start = "next start";
+  packageJson.dependencies.sharp = "0.33.2";
   await fs5.promises.writeFile(
     packageJsonPath,
     JSON.stringify(packageJson),
@@ -686,7 +686,7 @@ var build = async ({
     spinner.text = "Setting server side generation for the email preview pages";
     await forceSSGForEmailPreviews(emailsDirPath, builtPreviewAppPath);
     spinner.text = "Updating package.json's build and start scripts";
-    await updatePackageJsonScripts(builtPreviewAppPath);
+    await updatePackageJson(builtPreviewAppPath);
     spinner.text = "Installing dependencies on `.react-email`";
     await npmInstall(builtPreviewAppPath, packageManager);
     spinner.stopAndPersist({

package/dist/package.json

@@ -14,7 +14,7 @@
     "license": "MIT",
     "repository": {
         "type": "git",
-        "url": "https://github.com/resend/react-email.git",
+        "url": "https://github.com/resendlabs/react-email.git",
         "directory": "packages/react-email"
     },
     "keywords": [

package/dist/source/utils/download-client.js

@@ -54,7 +54,7 @@ var downloadClient = function () { return __awaiter(void 0, void 0, void 0, func
                 return [4 /*yield*/, octokit.repos.downloadTarballArchive({
                         owner: 'resendlabs',
                         repo: 'react-email',
-                        ref: 'v0.0.15',
+                        ref: 'v0.0.15-canary.0',
                     })];
             case 1:
                 downloadRes = _a.sent();

package/package.json

@@ -1,16 +1,10 @@
 {
   "name": "react-email",
-  "version": "2.0.0",
+  "version": "2.0.1-canary.1",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./cli/index.js"
   },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "clean": "rm -rf dist",
-    "lint": "eslint . && tsc"
-  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -50,7 +44,7 @@
     "glob": "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
-    "next": "14.0.5-canary.46",
+    "next": "14.1.0",
     "normalize-path": "3.0.0",
     "ora": "5.4.1",
     "postcss": "8.4.32",
@@ -80,5 +74,11 @@
     "tsx": "4.7.0",
     "vitest": "1.1.3",
     "watch": "1.0.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "lint": "eslint . && tsc"
   }
-}
+}

package/src/actions/get-emails-directory-metadata.ts

@@ -4,11 +4,6 @@ import fs from 'node:fs';
 import path from 'node:path';
 
 const isFileAnEmail = (fullPath: string): boolean => {
-  const unixFullPath = fullPath.replaceAll(path.sep, '/');
-
-  // eslint-disable-next-line prefer-named-capture-group
-  if (/(\/|^)_[^/]*/.test(unixFullPath)) return false;
-
   const stat = fs.statSync(fullPath);
 
   if (stat.isDirectory()) return false;

package/src/app/preview/{[slug] → [...slug]}/page.tsx

@@ -1,3 +1,7 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import { Suspense } from 'react';
+import { redirect } from 'next/navigation';
 import { getEmailsDirectoryMetadata } from '../../../actions/get-emails-directory-metadata';
 import { renderEmailBySlug } from '../../../actions/render-email-by-slug';
 import { emailsDirectoryAbsolutePath } from '../../../utils/emails-directory-absolute-path';
@@ -6,13 +10,13 @@ import Preview from './preview';
 export const dynamicParams = true;
 
 export interface PreviewParams {
-  slug: string;
+  slug: string[];
 }
 
 export default async function Page({ params }: { params: PreviewParams }) {
-  // will come in here as a relative path to the email
-  // ex: authentication/verify-password.tsx but encoded like authentication%20verify-password.tsx
-  const slug = decodeURIComponent(params.slug);
+  // will come in here as segments of a relative path to the email
+  // ex: ['authentication', 'verify-password.tsx']
+  const slug = params.slug.join('/');
   const emailsDirMetadata = await getEmailsDirectoryMetadata(
     emailsDirectoryAbsolutePath,
   );
@@ -23,6 +27,8 @@ export default async function Page({ params }: { params: PreviewParams }) {
     );
   }
 
+  const emailPath = path.join(emailsDirectoryAbsolutePath, slug);
+  if (!fs.existsSync(emailPath)) redirect('/');
   const emailRenderingResult = await renderEmailBySlug(slug);
 
   if (
@@ -34,9 +40,15 @@ export default async function Page({ params }: { params: PreviewParams }) {
     });
   }
 
-  return <Preview renderingResult={emailRenderingResult} slug={slug} />;
+  // This suspense is so that this page doesn't warning with
+  // de-opt into client-side rendering on build
+  return (
+    <Suspense>
+      <Preview renderingResult={emailRenderingResult} slug={slug} />
+    </Suspense>
+  );
 }
 
 export function generateMetadata({ params }: { params: PreviewParams }) {
-  return { title: `${decodeURIComponent(params.slug)} — React Email` };
+  return { title: `${params.slug.pop()} — React Email` };
 }

package/src/app/preview/{[slug] → [...slug]}/preview.tsx

@@ -77,7 +77,7 @@ const Preview = ({
       setActiveView={hasNoErrors ? handleViewChange : undefined}
     >
       {/* This relative is so that when there is any error the user can still switch between emails */}
-      <div className="relative h-full">
+      <div className="bg-white relative h-full">
         {'error' in renderingResult ? (
           <RenderingError error={renderingResult.error} />
         ) : null}

package/src/components/shell.tsx

@@ -59,7 +59,7 @@ export const Shell = ({
       <div className="flex bg-slate-2">
         <Sidebar
           className={cn(
-            'w-screen max-w-full bg-black h-screen lg:h-auto z-50 lg:max-w-[275px] fixed top-[70px] lg:top-0 left-0',
+            'w-screen max-w-full bg-black h-screen lg:h-auto z-50 lg:z-auto lg:max-w-[275px] fixed top-[70px] lg:top-0 left-0',
             {
               'translate-x-0 lg:-translate-x-full': sidebarToggled,
               '-translate-x-full lg:translate-x-0': !sidebarToggled,

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

@@ -67,7 +67,7 @@ export const SidebarDirectoryChildren = (props: {
                     return (
                       <Link
                         href={{
-                          pathname: `/preview/${encodeURIComponent(emailSlug)}`,
+                          pathname: `/preview/${emailSlug}`,
                           search: searchParams.toString(),
                         }}
                         key={emailSlug}
@@ -75,7 +75,7 @@ export const SidebarDirectoryChildren = (props: {
                         <motion.span
                           animate={{ x: 0, opacity: 1 }}
                           className={cn(
-                            'text-[14px] flex items-center align-middle pl-3 h-8 max-w-full rounded-md text-slate-11 relative transition ease-in-out duration-200',
+                            'text-[14px] flex items-center align-middle pl-3 h-8 max-w-full rounded-md text-slate-11 relative transition-colors',
                             {
                               'text-cyan-11': isCurrentPage,
                               'hover:text-slate-12':
@@ -84,7 +84,7 @@ export const SidebarDirectoryChildren = (props: {
                           )}
                           initial={{ x: -10 + -index * 1.5, opacity: 0 }}
                           transition={{
-                            x: { delay: 0.03 * index, duration: 0.05 },
+                            x: { delay: 0.03 * index, duration: 0.2 },
                             opacity: { delay: 0.03 * index, duration: 0.2 },
                           }}
                         >

package/src/components/sidebar/sidebar.tsx

@@ -30,12 +30,14 @@ export const Sidebar = ({
       </div>
       <nav className="p-4 flex-grow lg:pt-0 pl-0 w-screen h-[calc(100vh_-_70px)] lg:w-full lg:min-w-[275px] lg:max-w-[275px] flex flex-col overflow-y-auto">
         <Collapsible.Root>
-          <SidebarDirectoryChildren
-            currentEmailOpenSlug={currentEmailOpenSlug}
-            emailsDirectoryMetadata={emailsDirectoryMetadata}
-            isRoot
-            open
-          />
+          <React.Suspense>
+            <SidebarDirectoryChildren
+              currentEmailOpenSlug={currentEmailOpenSlug}
+              emailsDirectoryMetadata={emailsDirectoryMetadata}
+              isRoot
+              open
+            />
+          </React.Suspense>
         </Collapsible.Root>
       </nav>
     </aside>

package/src/components/topbar.tsx

@@ -11,6 +11,7 @@ import { IconPhone } from './icons/icon-phone';
 import { IconSource } from './icons/icon-source';
 import { Send } from './send';
 import { Tooltip } from './tooltip';
+import { pathSeparator } from '../utils/emails-directory-absolute-path';
 
 interface TopbarProps {
   currentEmailOpenSlug: string;
@@ -49,7 +50,7 @@ export const Topbar: React.FC<Readonly<TopbarProps>> = ({
 
         <div className="items-center overflow-hidden hidden lg:flex text-center absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2">
           <Heading as="h2" className="truncate" size="2" weight="medium">
-            {currentEmailOpenSlug}
+            {currentEmailOpenSlug.split(pathSeparator).pop()}
           </Heading>
         </div>