react-email 4.0.0-alpha.5 → 4.0.0-alpha.7

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

@@ -1,11 +1,21 @@
 import path from 'node:path';
 import { redirect } from 'next/navigation';
 import { Suspense } from 'react';
+import {
+  type CompatibilityCheckingResult,
+  checkCompatibility,
+} from '../../../actions/email-validation/check-compatibility';
 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 Home from '../../page';
+import { getLintingSources, loadLintingRowsFrom } from '../../../utils/linting';
+import { loadStream } from '../../../utils/load-stream';
+import { emailsDirectoryAbsolutePath, isBuilding } from '../../env';
 import Preview from './preview';
 
 export const dynamicParams = true;
@@ -50,27 +60,87 @@ 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
-  ) {
-    throw new Error(serverEmailRenderingResult.error.message, {
-      cause: serverEmailRenderingResult.error,
+  let spamCheckingResult: SpamCheckingResult | undefined = undefined;
+  let lintingRows: LintingRow[] | undefined = undefined;
+  let compatibilityCheckingResults: CompatibilityCheckingResult[] | undefined =
+    undefined;
+
+  if (isBuilding) {
+    if ('error' in serverEmailRenderingResult) {
+      throw new Error(serverEmailRenderingResult.error.message, {
+        cause: serverEmailRenderingResult.error,
+      });
+    }
+    const lintingSources = getLintingSources(
+      serverEmailRenderingResult.markup,
+      '',
+    );
+    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;
     });
+    compatibilityCheckingResults = [];
+    for await (const result of loadStream(
+      await checkCompatibility(
+        serverEmailRenderingResult.reactMarkup,
+        emailPath,
+      ),
+    )) {
+      compatibilityCheckingResults.push(result);
+    }
+
+    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>
+          <Preview emailTitle={path.basename(emailPath)} />
+
+          <Toolbar
+            serverLintingRows={lintingRows}
+            serverSpamCheckingResult={spamCheckingResult}
+            serverCompatibilityResults={compatibilityCheckingResults}
+          />
+        </Suspense>
+      </Shell>
+    </PreviewProvider>
   );
 };
 

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

@@ -1,11 +1,10 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useState } from 'react';
+import { use, useRef } 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 {
@@ -13,30 +12,21 @@ import {
   makeIframeDocumentBubbleEvents,
 } from '../../../components/resizable-wrapper';
 import { Send } from '../../../components/send';
-import { Shell, ShellContent } from '../../../components/shell';
-import { Toolbar } from '../../../components/toolbar';
+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();
@@ -44,52 +34,27 @@ 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);
-    router.push(`${pathname}?${params.toString()}`);
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
   };
 
   const handleLangChange = (lang: string) => {
     const params = new URLSearchParams(searchParams);
     params.set('view', 'source');
     params.set('lang', lang);
-    router.push(`${pathname}?${params.toString()}`);
+    const isSameLang = searchParams.get('lang') === lang;
+    router.push(
+      `${pathname}?${params.toString()}${isSameLang ? location.hash : ''}`,
+    );
   };
 
   const hasRenderingMetadata = typeof renderedEmailMetadata !== 'undefined';
   const hasErrors = 'error' in renderingResult;
 
-  const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);
-  const [maxHeight, setMaxHeight] = useState(Number.POSITIVE_INFINITY);
+  const maxWidthRef = useRef(Number.POSITIVE_INFINITY);
+  const maxHeightRef = useRef(Number.POSITIVE_INFINITY);
   const minWidth = 350;
   const minHeight = 600;
   const storedWidth = searchParams.get('width');
@@ -97,24 +62,24 @@ const Preview = ({
   const [width, setWidth] = useClampedState(
     storedWidth ? Number.parseInt(storedWidth) : 600,
     350,
-    maxWidth,
+    maxWidthRef.current,
   );
   const [height, setHeight] = useClampedState(
     storedHeight ? Number.parseInt(storedHeight) : 1024,
     600,
-    maxHeight,
+    maxHeightRef.current,
   );
 
   const handleSaveViewSize = useDebouncedCallback(() => {
     const params = new URLSearchParams(searchParams);
     params.set('width', width.toString());
     params.set('height', height.toString());
-    router.push(`${pathname}?${params.toString()}`);
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
   }, 300);
 
   return (
-    <Shell currentEmailOpenSlug={slug}>
-      <Topbar pathSeparator={pathSeparator} currentEmailOpenSlug={slug}>
+    <>
+      <Topbar emailTitle={emailTitle}>
         <ViewSizeControls
           setViewHeight={(height) => {
             setHeight(height);
@@ -148,8 +113,8 @@ const Preview = ({
           const observer = new ResizeObserver((entry) => {
             const [elementEntry] = entry;
             if (elementEntry) {
-              setMaxWidth(elementEntry.contentRect.width - 80);
-              setMaxHeight(elementEntry.contentRect.height - 80);
+              maxWidthRef.current = elementEntry.contentRect.width - 80;
+              maxHeightRef.current = elementEntry.contentRect.height - 80;
             }
           });
 
@@ -170,8 +135,8 @@ const Preview = ({
               <ResizableWarpper
                 minHeight={minHeight}
                 minWidth={minWidth}
-                maxHeight={maxHeight}
-                maxWidth={maxWidth}
+                maxHeight={maxHeightRef.current}
+                maxWidth={maxWidthRef.current}
                 height={height}
                 onResizeEnd={() => {
                   handleSaveViewSize();
@@ -199,7 +164,7 @@ const Preview = ({
                     width: `${width}px`,
                     height: `${height}px`,
                   }}
-                  title={slug}
+                  title={emailTitle}
                 />
               </ResizableWarpper>
             )}
@@ -235,15 +200,7 @@ const Preview = ({
 
         <Toaster />
       </ShellContent>
-
-      {!hasErrors && hasRenderingMetadata ? (
-        <Toolbar
-          emailSlug={slug}
-          markup={renderedEmailMetadata.markup}
-          plainText={renderedEmailMetadata.plainText}
-        />
-      ) : undefined}
-    </Shell>
+    </>
   );
 };
 

package/src/components/code-container.tsx

@@ -27,52 +27,19 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
   activeLang,
   setActiveLang,
 }) => {
-  const [isCopied, setIsCopied] = React.useState(false);
-
-  const renderDownloadIcon = () => {
-    const value = markups.filter((markup) => markup.language === activeLang);
-    if (typeof value[0] === 'undefined') return;
-    const file = new File([value[0].content], `email.${value[0].language}`);
-    const url = URL.createObjectURL(file);
-
-    return (
-      <a
-        className="text-slate-11 transition duration-200 ease-in-out hover:text-slate-12"
-        download={file.name}
-        href={url}
-      >
-        <IconDownload />
-      </a>
-    );
-  };
-
-  const renderClipboardIcon = () => {
-    const handleClipboard = async () => {
-      const activeContent = markups.filter(({ language }) => {
-        return activeLang === language;
-      });
-      setIsCopied(true);
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      await copyTextToClipboard(activeContent[0]!.content);
-      setTimeout(() => {
-        setIsCopied(false);
-      }, 3000);
-    };
-
-    return (
-      <IconButton onClick={() => void handleClipboard()}>
-        {isCopied ? <IconCheck /> : <IconClipboard />}
-      </IconButton>
-    );
-  };
-
-  React.useEffect(() => {
-    setIsCopied(false);
-  }, [activeLang]);
+  const activeMarkup = markups.find(({ language }) => activeLang === language);
+  if (!activeMarkup) {
+    throw new Error('No markup found for the active language!', {
+      cause: {
+        activeLang,
+        markups,
+      },
+    });
+  }
 
   return (
     <div
-      className="relative w-full items-center whitespace-pre rounded-md border border-slate-6 text-sm backdrop-blur-md"
+      className="relative w-full items-center whitespace-pre rounded-md border border-slate-6 text-sm"
       style={{
         lineHeight: '130%',
         background:
@@ -111,35 +78,87 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
             })}
           </LayoutGroup>
         </div>
-        <Tooltip>
-          <Tooltip.Trigger
-            asChild
-            className="absolute right-2 top-2 hidden md:block"
-          >
-            {renderClipboardIcon()}
-          </Tooltip.Trigger>
-          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
-        </Tooltip>
-        <Tooltip>
-          <Tooltip.Trigger
-            asChild
-            className="text-gray-11 absolute right-8 top-2 hidden md:block"
-          >
-            {renderDownloadIcon()}
-          </Tooltip.Trigger>
-          <Tooltip.Content>Download</Tooltip.Content>
-        </Tooltip>
+        <CopyToClipboardButton content={activeMarkup.content} />
+        <DownloadButton
+          content={activeMarkup.content}
+          filename={`email.${activeMarkup.language}`}
+        />
+      </div>
+      <div>
+        <Code language={activeLang}>{activeMarkup.content}</Code>
       </div>
-      {markups.map(({ language, content }) => {
-        return (
-          <div
-            className={`${activeLang !== language && 'hidden'}`}
-            key={language}
-          >
-            <Code language={language}>{content}</Code>
-          </div>
-        );
-      })}
     </div>
   );
 };
+
+interface CopyToClipboardButtonProps {
+  content: string;
+}
+
+const CopyToClipboardButton = ({ content }: CopyToClipboardButtonProps) => {
+  const [isCopied, setIsCopied] = React.useState(false);
+
+  const unsetIsCopiedTimeout = React.useRef<NodeJS.Timeout>(undefined);
+  React.useEffect(() => {
+    setIsCopied(false);
+    clearTimeout(unsetIsCopiedTimeout.current);
+    unsetIsCopiedTimeout.current = undefined;
+  }, [content]);
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger
+        asChild
+        className="absolute right-2 top-2 hidden md:block"
+      >
+        <IconButton
+          onClick={async () => {
+            setIsCopied(true);
+            await copyTextToClipboard(content);
+            unsetIsCopiedTimeout.current = setTimeout(() => {
+              setIsCopied(false);
+            }, 3000);
+          }}
+        >
+          {isCopied ? <IconCheck /> : <IconClipboard />}
+        </IconButton>
+      </Tooltip.Trigger>
+      <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
+    </Tooltip>
+  );
+};
+
+interface DownloadButtonProps {
+  content: string;
+  filename: string;
+}
+
+const DownloadButton = ({ content, filename }: DownloadButtonProps) => {
+  const generatedUrl = React.useMemo(() => {
+    const file = new File([content], filename);
+    return URL.createObjectURL(file);
+  }, [content, filename]);
+  const url = React.useSyncExternalStore(
+    () => () => {},
+    () => generatedUrl,
+    () => undefined,
+  );
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger
+        asChild
+        className="text-gray-11 absolute right-8 top-2 hidden md:block"
+      >
+        <a
+          className="text-slate-11 transition duration-200 ease-in-out hover:text-slate-12"
+          download={filename}
+          href={url}
+        >
+          <IconDownload />
+        </a>
+      </Tooltip.Trigger>
+      <Tooltip.Content>Download</Tooltip.Content>
+    </Tooltip>
+  );
+};

package/src/components/code.tsx

@@ -1,6 +1,10 @@
+'use client';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
 import type { Language } from 'prism-react-renderer';
 import { Highlight } from 'prism-react-renderer';
-import * as React from 'react';
+import { Fragment, useEffect } from 'react';
+import { useFragmentIdentifier } from '../hooks/use-fragment-identifier';
 import { cn } from '../utils';
 
 interface CodeProps {
@@ -43,10 +47,43 @@ const theme = {
   ],
 };
 
+const lineHashRegex = /#L(?<start>\d+)(?:,(?<end>\d+))?/;
+
 export const Code: React.FC<Readonly<CodeProps>> = ({
   children,
   language = 'html',
 }) => {
+  const locationHash = useFragmentIdentifier();
+  const highlight = (() => {
+    if (locationHash) {
+      const match = locationHash.match(lineHashRegex);
+      if (match?.groups?.start) {
+        const start = Number.parseInt(match.groups.start);
+        const end = match.groups.end
+          ? Number.parseInt(match.groups.end)
+          : start;
+        return [start, end] as const;
+      }
+    }
+  })();
+
+  const isHighlighting = (line: number) => {
+    if (!highlight) return false;
+
+    return highlight[0] <= line && highlight[1] >= line;
+  };
+
+  useEffect(() => {
+    if (highlight) {
+      document.getElementById(`L${highlight[0]}`)?.scrollIntoView({
+        block: 'start',
+        behavior: 'smooth',
+      });
+    }
+  }, [highlight]);
+
+  const searchParams = useSearchParams();
+
   const value = children.trim();
 
   return (
@@ -60,51 +97,77 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
                 'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
             }}
           />
-          <pre className="h-[650px] overflow-auto p-4">
-            {tokens.map((line, i) => {
-              const lineProps = getLineProps({
-                line,
-                key: i,
-              });
-              return (
-                <div
-                  {...lineProps}
-                  className={cn('whitespace-pre', {
-                    "before:mr-2 before:text-slate-11 before:content-['$']":
-                      language === 'bash' && tokens.length === 1,
-                  })}
+          <div className="flex h-[650px] p-4 max-h-[calc(100vh-10rem)] after:w-full after:static after:block after:h-4 after:content-[''] overflow-auto">
+            <div className="text-[#49494f] text-[13px] font-light font-[MonoLisa,_Menlo,_monospace]">
+              {tokens.map((_, i) => (
+                <Link
+                  id={`L${i + 1}`}
                   key={i}
+                  href={{
+                    hash: `#L${i + 1}`,
+                    search: searchParams.toString(),
+                  }}
+                  scroll={false}
+                  className={cn(
+                    'align-middle block scroll-mt-[325px] rounded-l-sm select-none pr-3 cursor-pointer hover:text-slate-12',
+                    isHighlighting(i + 1) &&
+                      'text-cyan-11 hover:text-cyan-11 bg-cyan-5',
+                  )}
+                  type="button"
                 >
-                  {line.map((token, key) => {
-                    const tokenProps = getTokenProps({
-                      token,
-                      key,
-                    });
-                    const isException =
-                      token.content === 'from' &&
-                      line[key + 1]?.content === ':';
-                    const newTypes = isException
-                      ? [...token.types, 'key-white']
-                      : token.types;
-                    token.types = newTypes;
+                  {i + 1}
+                </Link>
+              ))}
+            </div>
+            <pre>
+              {tokens.map((line, i) => {
+                const lineProps = getLineProps({
+                  line,
+                  key: i,
+                });
+                return (
+                  <div
+                    {...lineProps}
+                    className={cn(
+                      'whitespace-pre flex transition-colors rounded-r-sm',
+                      isHighlighting(i + 1) && 'bg-cyan-5',
+                      {
+                        "before:mr-2 before:text-slate-11 before:content-['$']":
+                          language === 'bash' && tokens.length === 1,
+                      },
+                    )}
+                    key={i}
+                  >
+                    {line.map((token, key) => {
+                      const tokenProps = getTokenProps({
+                        token,
+                      });
+                      const isException =
+                        token.content === 'from' &&
+                        line[key + 1]?.content === ':';
+                      const newTypes = isException
+                        ? [...token.types, 'key-white']
+                        : token.types;
+                      token.types = newTypes;
 
-                    return (
-                      <React.Fragment key={key}>
-                        <span {...tokenProps} />
-                      </React.Fragment>
-                    );
-                  })}
-                </div>
-              );
-            })}
-          </pre>
-          <div
-            className="absolute bottom-0 left-0 h-px w-[200px]"
-            style={{
-              background:
-                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
-            }}
-          />
+                      return (
+                        <Fragment key={key}>
+                          <span {...tokenProps} />
+                        </Fragment>
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </pre>
+            <div
+              className="absolute bottom-0 left-0 h-px w-[200px]"
+              style={{
+                background:
+                  'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
+              }}
+            />
+          </div>
         </>
       )}
     </Highlight>