react-email 4.0.0-alpha.4 → 4.0.0-alpha.6

package/src/actions/email-validation/check-links.ts

@@ -3,7 +3,7 @@
 import { parse } from 'node-html-parser';
 import { quickFetch } from './quick-fetch';
 
-type Check = { passed: boolean } & (
+export type LinkCheck = { passed: boolean } & (
   | {
       type: 'fetch_attempt';
       metadata: {
@@ -21,71 +21,74 @@ type Check = { passed: boolean } & (
 export interface LinkCheckingResult {
   status: 'success' | 'warning' | 'error';
   link: string;
-  checks: Check[];
+  checks: LinkCheck[];
 }
 
 export const checkLinks = async (code: string) => {
   const ast = parse(code);
 
-  const linkCheckingResults: LinkCheckingResult[] = [];
+  const readableStream = new ReadableStream<LinkCheckingResult>({
+    async start(controller) {
+      const anchors = ast.querySelectorAll('a');
+      for await (const anchor of anchors) {
+        const link = anchor.attributes.href;
+        if (!link) continue;
+        if (link.startsWith('mailto:')) continue;
 
-  const anchors = ast.querySelectorAll('a');
-  for await (const anchor of anchors) {
-    const link = anchor.attributes.href;
-    if (!link) continue;
-    if (linkCheckingResults.some((result) => result.link === link)) continue;
-    if (link.startsWith('mailto:')) continue;
+        const result: LinkCheckingResult = {
+          link,
+          status: 'success',
+          checks: [],
+        };
 
-    const result: LinkCheckingResult = {
-      link,
-      status: 'success',
-      checks: [],
-    };
+        try {
+          const url = new URL(link);
+          result.checks.push({
+            passed: true,
+            type: 'syntax',
+          });
 
-    try {
-      const url = new URL(link);
-      result.checks.push({
-        passed: true,
-        type: 'syntax',
-      });
+          if (link.startsWith('http://')) {
+            result.checks.push({
+              passed: false,
+              type: 'security',
+            });
+            result.status = 'warning';
+          } else {
+            result.checks.push({
+              passed: true,
+              type: 'security',
+            });
+          }
 
-      if (link.startsWith('https://')) {
-        result.checks.push({
-          passed: true,
-          type: 'security',
-        });
-      } else {
-        result.checks.push({
-          passed: false,
-          type: 'security',
-        });
-        result.status = 'warning';
-      }
+          const res = await quickFetch(url);
+          const hasSucceeded =
+            res.statusCode?.toString().startsWith('2') ?? false;
+          result.checks.push({
+            type: 'fetch_attempt',
+            passed: hasSucceeded,
+            metadata: {
+              fetchStatusCode: res.statusCode,
+            },
+          });
+          if (!hasSucceeded) {
+            result.status = res.statusCode?.toString().startsWith('3')
+              ? 'warning'
+              : 'error';
+          }
+        } catch (exception) {
+          result.checks.push({
+            passed: false,
+            type: 'syntax',
+          });
+          result.status = 'error';
+        }
 
-      const res = await quickFetch(url);
-      const hasSucceeded = res.statusCode?.toString().startsWith('2') ?? false;
-      result.checks.push({
-        type: 'fetch_attempt',
-        passed: hasSucceeded,
-        metadata: {
-          fetchStatusCode: res.statusCode,
-        },
-      });
-      if (!hasSucceeded) {
-        result.status = res.statusCode?.toString().startsWith('3')
-          ? 'warning'
-          : 'error';
+        controller.enqueue(result);
       }
-    } catch (exception) {
-      result.checks.push({
-        passed: false,
-        type: 'syntax',
-      });
-      result.status = 'error';
-    }
-
-    linkCheckingResults.push(result);
-  }
+      controller.close();
+    },
+  });
 
-  return linkCheckingResults;
+  return readableStream;
 };

package/src/actions/get-email-path-from-slug.ts

@@ -2,7 +2,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { cache } from 'react';
-import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
+import { emailsDirectoryAbsolutePath } from '../app/env';
 
 // eslint-disable-next-line @typescript-eslint/require-await
 export const getEmailPathFromSlug = cache(async (slug: string) => {

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

@@ -4,6 +4,7 @@ import path from 'node:path';
 import chalk from 'chalk';
 import logSymbols from 'log-symbols';
 import ora from 'ora';
+import { isBuilding } from '../app/env';
 import { getEmailComponent } from '../utils/get-email-component';
 import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
 import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping';
@@ -35,7 +36,7 @@ export const renderEmailByPath = async (
 
   const emailFilename = path.basename(emailPath);
   let spinner: ora.Ora | undefined;
-  if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
+  if (!isBuilding) {
     spinner = ora({
       text: `Rendering email template ${emailFilename}\n`,
       prefixText: ' ',

package/src/{utils/emails-directory-absolute-path.ts → app/env.ts}

@@ -8,3 +8,5 @@ export const userProjectLocation = process.env.USER_PROJECT_LOCATION!;
 /** ONLY ACCESSIBLE ON THE SERVER */
 export const emailsDirectoryAbsolutePath =
   process.env.EMAILS_DIR_ABSOLUTE_PATH!;
+
+export const isBuilding = process.env.NEXT_PUBLIC_IS_BUILDING === 'true';

package/src/app/fonts.ts

@@ -0,0 +1,39 @@
+import { Inter } from 'next/font/google';
+import Local from 'next/font/local';
+
+export const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+});
+
+export const sfMono = Local({
+  src: [
+    {
+      path: './fonts/SFMono/SFMonoLight.otf',
+      weight: '300',
+    },
+    {
+      path: './fonts/SFMono/SFMonoRegular.otf',
+      weight: '400',
+    },
+    {
+      path: './fonts/SFMono/SFMonoMedium.otf',
+      weight: '500',
+    },
+    {
+      path: './fonts/SFMono/SFMonoSemibold.otf',
+      weight: '600',
+    },
+    {
+      path: './fonts/SFMono/SFMonoBold.otf',
+      weight: '700',
+    },
+    {
+      path: './fonts/SFMono/SFMonoHeavy.otf',
+      weight: '800',
+    },
+  ],
+  variable: '--font-sf-mono',
+  display: 'swap',
+});

package/src/app/layout.tsx

@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
 import './globals.css';
 import { EmailsProvider } from '../contexts/emails';
-import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
 import { getEmailsDirectoryMetadata } from '../utils/get-emails-directory-metadata';
-import { inter } from './inter';
+import { emailsDirectoryAbsolutePath } from './env';
+import { inter, sfMono } from './fonts';
 
 export const metadata: Metadata = {
   title: 'React Email',
@@ -23,7 +23,10 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
   }
 
   return (
-    <html className={inter.className} lang="en">
+    <html
+      className={`${inter.variable} ${sfMono.variable} font-sans`}
+      lang="en"
+    >
       <body className="relative flex h-screen flex-col overflow-x-hidden bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
         <EmailsProvider
           initialEmailsDirectoryMetadata={emailsDirectoryMetadata}

package/src/app/page.tsx

@@ -3,8 +3,8 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Button, Heading, Text } from '../components';
 import CodeSnippet from '../components/code-snippet';
-import { Shell } from '../components/shell';
-import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
+import { Shell, ShellContent } from '../components/shell';
+import { emailsDirectoryAbsolutePath } from './env';
 import logo from './logo.png';
 
 const Home = () => {
@@ -12,7 +12,7 @@ const Home = () => {
 
   return (
     <Shell>
-      <div className="relative mx-auto flex h-[inherit] max-w-lg items-center justify-center p-8">
+      <ShellContent className="mx-auto flex max-w-lg items-center justify-center p-8">
         <div className="-mt-10 relative flex flex-col items-center gap-3 text-center">
           <Image
             alt="React Email Icon"
@@ -38,7 +38,7 @@ const Home = () => {
             <Link href="https://react.email/docs">Check the docs</Link>
           </Button>
         </div>
-      </div>
+      </ShellContent>
     </Shell>
   );
 };

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

@@ -3,8 +3,14 @@ import { redirect } from 'next/navigation';
 import { Suspense } from 'react';
 import { getEmailPathFromSlug } from '../../../actions/get-email-path-from-slug';
 import { renderEmailByPath } from '../../../actions/render-email-by-path';
-import { emailsDirectoryAbsolutePath } from '../../../utils/emails-directory-absolute-path';
+import { Shell } from '../../../components/shell';
+import { Toolbar } from '../../../components/toolbar';
+import type { LintingRow } from '../../../components/toolbar/linter';
+import type { SpamCheckingResult } from '../../../components/toolbar/spam-assassin';
+import { PreviewProvider } from '../../../contexts/preview';
 import { getEmailsDirectoryMetadata } from '../../../utils/get-emails-directory-metadata';
+import { getLintingSources, loadLintingRowsFrom } from '../../../utils/linting';
+import { emailsDirectoryAbsolutePath, isBuilding } from '../../env';
 import Home from '../../page';
 import Preview from './preview';
 
@@ -50,27 +56,78 @@ This is most likely not an issue with the preview server. Maybe there was a typo
 
   const serverEmailRenderingResult = await renderEmailByPath(emailPath);
 
-  if (
-    process.env.NEXT_PUBLIC_IS_BUILDING === 'true' &&
-    'error' in serverEmailRenderingResult
-  ) {
+  if (isBuilding && 'error' in serverEmailRenderingResult) {
     throw new Error(serverEmailRenderingResult.error.message, {
       cause: serverEmailRenderingResult.error,
     });
   }
 
+  let spamCheckingResult: SpamCheckingResult | undefined = undefined;
+  let lintingRows: LintingRow[] | undefined = undefined;
+
+  if (isBuilding && !('error' in serverEmailRenderingResult)) {
+    const lintingSources = getLintingSources(
+      serverEmailRenderingResult.markup,
+      serverEmailRenderingResult.reactMarkup,
+      emailPath,
+      '',
+    );
+    lintingRows = [];
+    for await (const row of loadLintingRowsFrom(lintingSources)) {
+      lintingRows.push(row);
+    }
+    lintingRows.sort((a, b) => {
+      if (a.result.status === 'error' && b.result.status === 'warning') {
+        return -1;
+      }
+
+      if (a.result.status === 'warning' && b.result.status === 'error') {
+        return 1;
+      }
+
+      return 0;
+    });
+
+    const response = await fetch('https://react.email/api/check-spam', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        html: serverEmailRenderingResult.markup,
+        plainText: serverEmailRenderingResult.plainText,
+      }),
+    });
+    const responseBody = (await response.json()) as
+      | { error: string }
+      | SpamCheckingResult;
+    if ('error' in responseBody) {
+      throw new Error(`Failed doing Spam Check. ${responseBody.error}`, {
+        cause: responseBody,
+      });
+    }
+
+    spamCheckingResult = responseBody;
+  }
+
   return (
-    // This suspense is so that this page doesn't throw warnings
-    // on the build of the preview server de-opting into
-    // client-side rendering on build
-    <Suspense fallback={<Home />}>
-      <Preview
-        emailPath={emailPath}
-        pathSeparator={path.sep}
-        serverRenderingResult={serverEmailRenderingResult}
-        slug={slug}
-      />
-    </Suspense>
+    <PreviewProvider
+      emailSlug={slug}
+      emailPath={emailPath}
+      serverRenderingResult={serverEmailRenderingResult}
+    >
+      <Shell currentEmailOpenSlug={slug}>
+        {/* This suspense is so that this page doesn't throw warnings */}
+        {/* on the build of the preview server de-opting into         */}
+        {/* client-side rendering on build                            */}
+        <Suspense fallback={<Home />}>
+          <Preview emailTitle={path.basename(emailPath)} />
+
+          <Toolbar
+            serverLintingRows={lintingRows}
+            serverSpamCheckingResult={spamCheckingResult}
+          />
+        </Suspense>
+      </Shell>
+    </PreviewProvider>
   );
 };
 

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

@@ -1,37 +1,32 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useState } from 'react';
+import { use, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
-import type { EmailRenderingResult } from '../../../actions/render-email-by-path';
+import { Topbar } from '../../../components';
 import { CodeContainer } from '../../../components/code-container';
 import {
   ResizableWarpper,
   makeIframeDocumentBubbleEvents,
 } from '../../../components/resizable-wrapper';
-import { Shell } from '../../../components/shell';
+import { Send } from '../../../components/send';
+import { ShellContent } from '../../../components/shell';
 import { Tooltip } from '../../../components/tooltip';
+import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
+import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
+import { PreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
-import { useEmailRenderingResult } from '../../../hooks/use-email-rendering-result';
-import { useHotreload } from '../../../hooks/use-hot-reload';
-import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
 import { RenderingError } from './rendering-error';
 
 interface PreviewProps {
-  slug: string;
-  emailPath: string;
-  pathSeparator: string;
-  serverRenderingResult: EmailRenderingResult;
+  emailTitle: string;
 }
 
-const Preview = ({
-  slug,
-  emailPath,
-  pathSeparator,
-  serverRenderingResult,
-}: PreviewProps) => {
+const Preview = ({ emailTitle }: PreviewProps) => {
+  const { renderingResult, renderedEmailMetadata } = use(PreviewContext)!;
+
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -39,34 +34,6 @@ const Preview = ({
   const activeView = searchParams.get('view') ?? 'preview';
   const activeLang = searchParams.get('lang') ?? 'jsx';
 
-  const renderingResult = useEmailRenderingResult(
-    emailPath,
-    serverRenderingResult,
-  );
-
-  const renderedEmailMetadata = useRenderingMetadata(
-    emailPath,
-    renderingResult,
-    serverRenderingResult,
-  );
-
-  if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
-    // this will not change on runtime so it doesn't violate
-    // the rules of hooks
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useHotreload((changes) => {
-      const changeForThisEmail = changes.find((change) =>
-        change.filename.includes(slug),
-      );
-
-      if (typeof changeForThisEmail !== 'undefined') {
-        if (changeForThisEmail.event === 'unlink') {
-          router.push('/');
-        }
-      }
-    });
-  }
-
   const handleViewChange = (view: string) => {
     const params = new URLSearchParams(searchParams);
     params.set('view', view);
@@ -80,7 +47,8 @@ const Preview = ({
     router.push(`${pathname}?${params.toString()}`);
   };
 
-  const hasNoErrors = typeof renderedEmailMetadata !== 'undefined';
+  const hasRenderingMetadata = typeof renderedEmailMetadata !== 'undefined';
+  const hasErrors = 'error' in renderingResult;
 
   const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);
   const [maxHeight, setMaxHeight] = useState(Number.POSITIVE_INFINITY);
@@ -107,31 +75,37 @@ const Preview = ({
   }, 300);
 
   return (
-    <Shell
-      activeView={activeView}
-      currentEmailOpenSlug={slug}
-      markup={renderedEmailMetadata?.markup}
-      plainText={renderedEmailMetadata?.plainText}
-      pathSeparator={pathSeparator}
-      setActiveView={handleViewChange}
-      setViewHeight={(height) => {
-        setHeight(height);
-        flushSync(() => {
-          handleSaveViewSize();
-        });
-      }}
-      setViewWidth={(width) => {
-        setWidth(width);
-        flushSync(() => {
-          handleSaveViewSize();
-        });
-      }}
-      viewHeight={height}
-      viewWidth={width}
-    >
-      {/* This relative is so that when there is any error the user can still switch between emails */}
-      <div
-        className="relative flex h-full bg-gray-200 pb-8"
+    <>
+      <Topbar emailTitle={emailTitle}>
+        <ViewSizeControls
+          setViewHeight={(height) => {
+            setHeight(height);
+            flushSync(() => {
+              handleSaveViewSize();
+            });
+          }}
+          setViewWidth={(width) => {
+            setWidth(width);
+            flushSync(() => {
+              handleSaveViewSize();
+            });
+          }}
+          viewHeight={height}
+          viewWidth={width}
+        />
+        <ActiveViewToggleGroup
+          activeView={activeView}
+          setActiveView={handleViewChange}
+        />
+        {hasRenderingMetadata ? (
+          <div className="flex justify-end">
+            <Send markup={renderedEmailMetadata.markup} />
+          </div>
+        ) : null}
+      </Topbar>
+
+      <ShellContent
+        className="relative flex bg-gray-200"
         ref={(element) => {
           const observer = new ResizeObserver((entry) => {
             const [elementEntry] = entry;
@@ -150,11 +124,9 @@ const Preview = ({
           };
         }}
       >
-        {'error' in renderingResult ? (
-          <RenderingError error={renderingResult.error} />
-        ) : null}
+        {hasErrors ? <RenderingError error={renderingResult.error} /> : null}
 
-        {hasNoErrors ? (
+        {hasRenderingMetadata ? (
           <>
             {activeView === 'preview' && (
               <ResizableWarpper
@@ -189,7 +161,7 @@ const Preview = ({
                     width: `${width}px`,
                     height: `${height}px`,
                   }}
-                  title={slug}
+                  title={emailTitle}
                 />
               </ResizableWarpper>
             )}
@@ -224,8 +196,8 @@ const Preview = ({
         ) : null}
 
         <Toaster />
-      </div>
-    </Shell>
+      </ShellContent>
+    </>
   );
 };
 

package/src/components/code.tsx

@@ -78,7 +78,6 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
                   {line.map((token, key) => {
                     const tokenProps = getTokenProps({
                       token,
-                      key,
                     });
                     const isException =
                       token.content === 'from' &&

package/src/components/icons/icon-base.tsx

@@ -8,7 +8,7 @@ export interface IconProps extends RootProps {
 }
 
 export const IconBase = React.forwardRef<IconElement, Readonly<IconProps>>(
-  ({ size = 20, ...props }, forwardedRef) => (
+  ({ size = 20, children, ...props }, forwardedRef) => (
     <svg
       fill="none"
       height={size}
@@ -17,7 +17,9 @@ export const IconBase = React.forwardRef<IconElement, Readonly<IconProps>>(
       width={size}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
-    />
+    >
+      {children}
+    </svg>
   ),
 );
 

package/src/components/icons/icon-reload.tsx

@@ -0,0 +1,19 @@
+export const IconReload = (props: React.ComponentProps<'svg'>) => {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.52 6C10.52 3.73168 8.75221 1.48 6.00006 1.48C3.77741 1.48 2.67886 3.1251 2.21074 3.99999H3.60005C3.82096 3.99999 4.00005 4.17908 4.00005 4.39999C4.00005 4.6209 3.82096 4.79999 3.60005 4.79999H1.20005C0.979137 4.79999 0.800049 4.6209 0.800049 4.39999V1.99999C0.800049 1.77908 0.979137 1.59999 1.20005 1.59999C1.42096 1.59999 1.60005 1.77908 1.60005 1.99999V3.45056C2.16367 2.45702 3.4673 0.679993 6.00006 0.679993C9.25029 0.679993 11.32 3.34831 11.32 6C11.32 8.65169 9.25029 11.32 6.00006 11.32C4.44499 11.32 3.15027 10.7047 2.22843 9.76673C1.73486 9.26449 1.34939 8.67121 1.08658 8.03257C1.0025 7.8283 1.09995 7.59453 1.30424 7.51046C1.50853 7.42638 1.7423 7.52384 1.82637 7.72812C2.05104 8.27401 2.38001 8.77961 2.79901 9.20593C3.57646 9.99705 4.66802 10.52 6.00006 10.52C8.75221 10.52 10.52 8.26833 10.52 6Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};