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

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, 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 {
@@ -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,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);
@@ -113,8 +75,8 @@ const Preview = ({
   }, 300);
 
   return (
-    <Shell currentEmailOpenSlug={slug}>
-      <Topbar pathSeparator={pathSeparator} currentEmailOpenSlug={slug}>
+    <>
+      <Topbar emailTitle={emailTitle}>
         <ViewSizeControls
           setViewHeight={(height) => {
             setHeight(height);
@@ -199,7 +161,7 @@ const Preview = ({
                     width: `${width}px`,
                     height: `${height}px`,
                   }}
-                  title={slug}
+                  title={emailTitle}
                 />
               </ResizableWarpper>
             )}
@@ -235,15 +197,7 @@ const Preview = ({
 
         <Toaster />
       </ShellContent>
-
-      {!hasErrors && hasRenderingMetadata ? (
-        <Toolbar
-          emailSlug={slug}
-          markup={renderedEmailMetadata.markup}
-          plainText={renderedEmailMetadata.plainText}
-        />
-      ) : undefined}
-    </Shell>
+    </>
   );
 };
 

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/toolbar/linter.tsx

@@ -1,167 +1,310 @@
 import prettyBytes from 'pretty-bytes';
-import { useEffect, useState } from 'react';
-import {
-  type ImageCheck,
-  type ImageCheckingResult,
-  checkImages,
-} from '../../actions/email-validation/check-images';
-import {
-  type LinkCheck,
-  type LinkCheckingResult,
-  checkLinks,
-} from '../../actions/email-validation/check-links';
+import { useRef, useState } from 'react';
+import { nicenames } from '../../actions/email-validation/caniemail-data';
+import type { CompatibilityCheckingResult } from '../../actions/email-validation/check-compatibility';
+import type { ImageCheckingResult } from '../../actions/email-validation/check-images';
+import type { LinkCheckingResult } from '../../actions/email-validation/check-links';
+import { cn } from '../../utils';
+import { getLintingSources, loadLintingRowsFrom } from '../../utils/linting';
 import { IconWarning } from '../icons/icon-warning';
 import { Results } from './results';
 
-type LintingResult = Omit<
-  ImageCheckingResult | LinkCheckingResult,
-  'checks'
-> & {
-  checks: (LinkCheck | ImageCheck)[];
-};
+export type LintingRow =
+  | {
+      source: 'image';
+      result: ImageCheckingResult;
+    }
+  | {
+      source: 'link';
+      result: LinkCheckingResult;
+    }
+  | {
+      source: 'compatibility';
+      result: CompatibilityCheckingResult;
+    };
 
 interface LinterProps {
-  results: LintingResult[] | undefined;
+  rows: LintingRow[] | undefined;
 }
 
 export const useLinter = ({
   markup,
-  slug,
+  reactMarkup,
+  emailPath,
+
+  initialRows,
 }: {
+  reactMarkup: string;
   markup: string;
-  slug: string;
+  emailPath: string;
+
+  initialRows?: LintingRow[];
 }) => {
-  const cacheKey = `linter-${slug.replaceAll('/', '-')}`;
-  const [results, setResults] = useState<LintingResult[] | undefined>();
-
-  useEffect(() => {
-    const cachedValue =
-      'localStorage' in global ? global.localStorage.getItem(cacheKey) : null;
-    if (cachedValue) {
-      setResults(JSON.parse(cachedValue));
-    }
-  }, [cacheKey]);
+  const [rows, setRows] = useState<LintingRow[] | undefined>(initialRows);
+
+  const sources = getLintingSources(
+    markup,
+    reactMarkup,
+    emailPath,
+    'location' in global
+      ? `${global.location.protocol}//${global.location.host}`
+      : '',
+  );
 
   const [loading, setLoading] = useState(false);
+  const isStreaming = useRef(false);
 
   const load = async () => {
+    if (isStreaming.current) return;
+    isStreaming.current = true;
     setLoading(true);
-    const imageResultsReader = (
-      await checkImages(markup, `${location.protocol}//${location.host}`)
-    ).getReader();
-    const linkResultsReader = (await checkLinks(markup)).getReader();
-    setResults([]);
 
+    setRows([]);
     try {
-      while (true) {
-        const { done: imageResultsReaderDone, value: imageLintingResult } =
-          await imageResultsReader.read();
-        if (imageLintingResult) {
-          setResults((results) => [...results!, imageLintingResult]);
-        }
-        const { done: linkResultsReaderDone, value: linkLintingResult } =
-          await linkResultsReader.read();
-        if (linkLintingResult) {
-          setResults((results) => [...results!, linkLintingResult]);
-        }
-        if (linkResultsReaderDone && imageResultsReaderDone) {
-          break;
-        }
+      let rows: LintingRow[] = [];
+      for await (const row of loadLintingRowsFrom(sources)) {
+        setRows((current) => {
+          if (!current) {
+            return [row];
+          }
+          const newArray = [...current, row];
+          newArray.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;
+          });
+          rows = newArray;
+          return newArray;
+        });
       }
+      return rows;
     } finally {
-      linkResultsReader.releaseLock();
-      imageResultsReader.releaseLock();
       setLoading(false);
+      isStreaming.current = false;
     }
   };
 
-  useEffect(() => {
-    load();
-  }, []);
-
-  return [results, { loading, load }] as const;
+  return [rows, { loading, load }] as const;
 };
 
-export const Linter = ({ results }: LinterProps) => {
-  if (results === undefined) return null;
+export const Linter = ({ rows }: LinterProps) => {
+  if (rows === undefined) return null;
 
   return (
     <Results>
-      {results
-        .filter((result) => result.status !== 'success')
-        .map((result, i) => {
-          const metadataString = result.checks
-            .map((check) => {
-              if (
-                check.type === 'fetch_attempt' &&
-                check.metadata.fetchStatusCode
-              )
-                return `${check.metadata?.fetchStatusCode}`;
-              if (check.type === 'image_size' && check.metadata.byteCount)
-                return `${prettyBytes(check.metadata.byteCount)}`;
-              return null;
-            })
-            .filter(Boolean)
-            .join(' - ');
-          const failingCheck = result.checks.find(
+      {rows.map((row, i) => {
+        if (row.source === 'link') {
+          const failingCheck = row.result.checks.find(
             (check) => check.passed === false,
           )!;
-
-          const checkDescription = (() => {
-            if (failingCheck.type === 'security') {
-              return 'Insecure URL, use HTTPS instead of HTTP';
-            }
-            if (
-              failingCheck.type === 'fetch_attempt' &&
-              failingCheck.metadata.fetchStatusCode !== undefined
-            ) {
-              if (
+          return (
+            <Result status={row.result.status} key={i}>
+              <Result.Name>{failingCheck.type}</Result.Name>
+              <Result.Description>
+                {failingCheck.type === 'security'
+                  ? 'Insecure URL, use HTTPS insted of HTTP'
+                  : null}
+                {failingCheck.type === 'fetch_attempt' &&
+                failingCheck.metadata.fetchStatusCode &&
                 failingCheck.metadata.fetchStatusCode >= 300 &&
                 failingCheck.metadata.fetchStatusCode < 400
-              ) {
-                return `There was a redirect (${failingCheck.metadata.fetchStatusCode}), the content may have been moved`;
-              }
-              return `The link is broken, returning ${failingCheck.metadata.fetchStatusCode}`;
-            }
-            if (failingCheck.type === 'accessibility') {
-              return 'Missing alt text';
-            }
-            if (failingCheck.type === 'syntax') {
-              return 'The link is broken due to invalid syntax';
-            }
-            if (
-              failingCheck.type === 'image_size' &&
-              failingCheck.metadata.byteCount
-            ) {
-              return `This image is too large (${prettyBytes(failingCheck.metadata.byteCount)}), keep it under 1mb`;
-            }
-          })();
+                  ? 'There was a redirect, the content may have been moved'
+                  : null}
+                {failingCheck.type === 'fetch_attempt' &&
+                failingCheck.metadata.fetchStatusCode &&
+                failingCheck.metadata.fetchStatusCode >= 400
+                  ? 'The link is broken'
+                  : null}
+                {failingCheck.type === 'syntax'
+                  ? 'The link is broken due to invalid syntax'
+                  : null}
+
+                <span className="font-mono float-right text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
+                  {row.result.link}
+                </span>
+              </Result.Description>
+              <Result.Metadata>
+                {failingCheck.type === 'fetch_attempt'
+                  ? failingCheck.metadata.fetchStatusCode
+                  : ''}
+              </Result.Metadata>
+            </Result>
+          );
+        }
+
+        if (row.source === 'compatibility') {
+          const statsReportedNotWorking = Object.entries(
+            row.result.statsPerEmailClient,
+          ).filter(([, stats]) => stats.status === 'error');
+          const statsReportedPartiallyWorking = Object.entries(
+            row.result.statsPerEmailClient,
+          ).filter(([, stats]) => stats.status === 'warning');
+
+          const unsupportedClientsString = statsReportedNotWorking
+            .map(([emailClient]) => nicenames.family[emailClient])
+            .join(', ');
+          const partiallySupportedClientsString = statsReportedPartiallyWorking
+            .map(([emailClient]) => nicenames.family[emailClient])
+            .join(', ');
 
           return (
-            <Results.Row key={i}>
-              <Results.Column>
-                <span
-                  className="flex uppercase gap-1 items-center data-[status=error]:text-red-400 data-[status=warning]:text-orange-300"
-                  data-status={result.status}
+            <Result status={row.result.status} key={i}>
+              <Result.Name>{row.result.entry.title}</Result.Name>
+              <Result.Description>
+                {statsReportedNotWorking.length > 0
+                  ? `Not supported in ${unsupportedClientsString}`
+                  : null}
+                {statsReportedPartiallyWorking.length > 0 &&
+                statsReportedNotWorking.length > 0
+                  ? '. '
+                  : null}
+                {statsReportedPartiallyWorking.length > 0
+                  ? `Partially supported in ${partiallySupportedClientsString}`
+                  : null}
+              </Result.Description>
+              <Result.Metadata>
+                {row.result.location.start.line.toString().padStart(2, '0')}:
+                {row.result.location.start.column.toString().padStart(2, '0')}
+                <a
+                  href={row.result.entry.url}
+                  className="underline ml-2"
+                  rel="noreferrer"
+                  target="_blank"
                 >
-                  <IconWarning />
-                  {failingCheck.type}
+                  See more info
+                </a>
+              </Result.Metadata>
+            </Result>
+          );
+        }
+
+        if (row.source === 'image') {
+          const failingCheck = row.result.checks.find(
+            (check) => check.passed === false,
+          )!;
+          return (
+            <Result status={row.result.status} key={i}>
+              <Result.Name>{failingCheck.type}</Result.Name>
+              <Result.Description>
+                {failingCheck.type === 'security'
+                  ? 'Insecure URL, use HTTPS insted of HTTP'
+                  : null}
+                {failingCheck.type === 'fetch_attempt' &&
+                failingCheck.metadata.fetchStatusCode &&
+                failingCheck.metadata.fetchStatusCode >= 300 &&
+                failingCheck.metadata.fetchStatusCode < 400
+                  ? 'There was a redirect, the image may have been moved'
+                  : null}
+                {failingCheck.type === 'fetch_attempt' &&
+                failingCheck.metadata.fetchStatusCode &&
+                failingCheck.metadata.fetchStatusCode >= 400
+                  ? 'The image is broken'
+                  : null}
+                {failingCheck.type === 'syntax'
+                  ? 'The image is broken due to an invalid source'
+                  : null}
+
+                {failingCheck.type === 'accessibility'
+                  ? 'Missing alt text'
+                  : null}
+
+                {failingCheck.type === 'image_size' &&
+                failingCheck.metadata.byteCount
+                  ? 'This image is too large, keep it under 1mb'
+                  : null}
+
+                <span className="font-mono float-right text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
+                  {row.result.source}
                 </span>
-              </Results.Column>
-              <Results.Column>
-                {checkDescription}
-                {result.intendedFor && (
-                  <span className="float-right font-mono text-slate-11 max-w-[30ch] text-nowrap overflow-hidden text-ellipsis">
-                    {result.intendedFor}
-                  </span>
-                )}
-              </Results.Column>
-              <Results.Column align="right" className="font-mono text-slate-11">
-                {metadataString}
-              </Results.Column>
-            </Results.Row>
+              </Result.Description>
+              <Result.Metadata>
+                {row.result.checks
+                  .map((check) => {
+                    if (
+                      check.type === 'fetch_attempt' &&
+                      check.metadata.fetchStatusCode
+                    ) {
+                      return check.metadata.fetchStatusCode;
+                    }
+
+                    if (
+                      check.type === 'image_size' &&
+                      check.metadata.byteCount
+                    ) {
+                      return prettyBytes(check.metadata.byteCount);
+                    }
+
+                    return undefined;
+                  })
+                  .filter(Boolean)
+                  .join('—')}
+              </Result.Metadata>
+            </Result>
           );
-        })}
+        }
+
+        return undefined;
+      })}
     </Results>
   );
 };
+
+interface ResultProps extends React.ComponentProps<typeof Results.Row> {
+  status: 'error' | 'warning' | 'success';
+}
+
+const Result = ({ children, className, status, ...props }: ResultProps) => {
+  return (
+    <Results.Row
+      data-status={status}
+      {...props}
+      className={cn('group/result', className)}
+    >
+      {children}
+    </Results.Row>
+  );
+};
+
+Result.Name = ({
+  children,
+  ...props
+}: React.ComponentProps<typeof Results.Column>) => {
+  return (
+    <Results.Column {...props}>
+      <span className="flex uppercase gap-1 items-center group-data-[status=error]/result:text-red-400 group-data-[status=warning]/result:text-orange-300">
+        <IconWarning />
+        {children}
+      </span>
+    </Results.Column>
+  );
+};
+
+Result.Description = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Results.Column>) => {
+  return <Results.Column {...props}>{children}</Results.Column>;
+};
+
+Result.Metadata = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Results.Column>) => {
+  return (
+    <Results.Column
+      align="right"
+      {...props}
+      className={cn('font-mono text-slate-11', className)}
+    >
+      {children}
+    </Results.Column>
+  );
+};

package/src/components/toolbar/spam-assassin.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { cn } from '../../utils';
 import { IconWarning } from '../icons/icon-warning';
@@ -8,7 +8,7 @@ interface SpamAssassinProps {
   result: SpamCheckingResult | undefined;
 }
 
-interface SpamCheckingResult {
+export interface SpamCheckingResult {
   checks: {
     name: string;
     description: string;
@@ -25,33 +25,26 @@ function toSorted<T>(array: T[], sorter: (a: T, b: T) => number): T[] {
 }
 
 export const useSpamAssassin = ({
-  slug,
   markup,
   plainText,
+
+  initialResult,
 }: {
-  slug: string;
   markup: string;
   plainText: string;
-}) => {
-  const cacheKey = `spam-assassin-${slug.replaceAll('/', '-')}`;
 
-  const [result, setResult] = useState<SpamCheckingResult | undefined>();
-
-  useEffect(() => {
-    const cachedValue =
-      'localStorage' in global ? global.localStorage.getItem(cacheKey) : null;
-    if (cachedValue) {
-      try {
-        setResult(JSON.parse(cachedValue));
-      } catch (exception) {
-        setResult(undefined);
-      }
-    }
-  }, [cacheKey]);
+  initialResult?: SpamCheckingResult;
+}) => {
+  const [result, setResult] = useState<SpamCheckingResult | undefined>(
+    initialResult,
+  );
 
   const [loading, setLoading] = useState(false);
+  const isLoadingRef = useRef(false);
 
   const load = async () => {
+    if (isLoadingRef.current) return;
+    isLoadingRef.current = true;
     setLoading(true);
 
     try {
@@ -64,25 +57,21 @@ export const useSpamAssassin = ({
         }),
       });
 
-      if (response.ok) {
-        const responseBody = (await response.json()) as
-          | { error: string }
-          | SpamCheckingResult;
-        if ('error' in responseBody) {
-          toast.error(responseBody.error);
-        } else {
-          setResult(responseBody);
-          localStorage.setItem(cacheKey, JSON.stringify(responseBody));
-        }
+      const responseBody = (await response.json()) as
+        | { error: string }
+        | SpamCheckingResult;
+      if ('error' in responseBody) {
+        toast.error(responseBody.error);
       } else {
-        console.error(await response.text());
-        toast.error('Something went wrong');
+        setResult(responseBody);
+        return responseBody;
       }
     } catch (exception) {
       console.error(exception);
       toast.error(JSON.stringify(exception));
     } finally {
       setLoading(false);
+      isLoadingRef.current = false;
     }
   };