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

package/src/components/toolbar/compatibility.tsx

@@ -0,0 +1,113 @@
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { nicenames } from '../../actions/email-validation/caniemail-data';
+import {
+  type CompatibilityCheckingResult,
+  checkCompatibility,
+} from '../../actions/email-validation/check-compatibility';
+import { sanitize } from '../../utils';
+import { loadStream } from '../../utils/load-stream';
+import { IconWarning } from '../icons/icon-warning';
+import { CodePreviewLineLink } from './code-preview-line-link';
+import { Results } from './results';
+
+export const useCompatibility = ({
+  reactMarkup,
+  emailPath,
+
+  initialResults,
+}: {
+  reactMarkup: string;
+  emailPath: string;
+
+  initialResults?: CompatibilityCheckingResult[];
+}) => {
+  const [results, setResults] = useState(initialResults);
+
+  const [loading, setLoading] = useState(false);
+  const isLoadingRef = useRef(false);
+
+  const load = async () => {
+    if (isLoadingRef.current) return;
+    isLoadingRef.current = true;
+    setLoading(true);
+
+    setResults([]);
+    let rawResults: CompatibilityCheckingResult[] = [];
+
+    try {
+      const stream = await checkCompatibility(reactMarkup, emailPath);
+      for await (const result of loadStream(stream)) {
+        if (result.status !== 'error') continue;
+        setResults((current) => {
+          if (!current) {
+            return [result];
+          }
+          rawResults = [...current, result];
+          return rawResults;
+        });
+      }
+    } catch (exception) {
+      console.error(exception);
+      toast.error(JSON.stringify(exception));
+    } finally {
+      setLoading(false);
+      isLoadingRef.current = false;
+    }
+
+    return rawResults;
+  };
+
+  return [results, { loading, load }] as const;
+};
+
+interface CompatibilityProps {
+  results: CompatibilityCheckingResult[] | undefined;
+}
+
+export const Compatibility = ({ results }: CompatibilityProps) => {
+  return (
+    <Results>
+      {results?.map((result, i) => {
+        const statsReportedNotWorking = Object.entries(
+          result.statsPerEmailClient,
+        ).filter(([, stats]) => stats.status === 'error');
+        const unsupportedClientsString = statsReportedNotWorking
+          .map(([emailClient]) => nicenames.family[emailClient])
+          .join(', ');
+
+        return (
+          <Results.Row key={i}>
+            <Results.Column>
+              <span className="flex text-red-400 uppercase gap-2 items-center">
+                <IconWarning />
+                {sanitize(result.entry.title)}
+              </span>
+            </Results.Column>
+            <Results.Column>
+              {statsReportedNotWorking.length > 0
+                ? `Not supported in ${unsupportedClientsString}`
+                : null}
+
+              <a
+                href={result.entry.url}
+                className="underline ml-2 decoration-slate-9 decoration-1 hover:decoration-slate-11 transition-colors hover:text-slate-12"
+                rel="noreferrer"
+                target="_blank"
+              >
+                More ↗
+              </a>
+            </Results.Column>
+            <Results.Column className="font-mono text-slate-11 text-right">
+              <CodePreviewLineLink
+                line={result.location.start.line}
+                column={result.location.start.column}
+                type="react"
+              />
+            </Results.Column>
+          </Results.Row>
+        );
+      })}
+    </Results>
+  );
+};

package/src/components/toolbar/linter.tsx

@@ -1,12 +1,11 @@
 import prettyBytes from 'pretty-bytes';
-import { useRef, useState } from 'react';
-import { nicenames } from '../../actions/email-validation/caniemail-data';
-import type { CompatibilityCheckingResult } from '../../actions/email-validation/check-compatibility';
+import { Children, useRef, useState } from 'react';
 import type { ImageCheckingResult } from '../../actions/email-validation/check-images';
 import type { LinkCheckingResult } from '../../actions/email-validation/check-links';
-import { cn } from '../../utils';
+import { cn, sanitize } from '../../utils';
 import { getLintingSources, loadLintingRowsFrom } from '../../utils/linting';
 import { IconWarning } from '../icons/icon-warning';
+import { CodePreviewLineLink } from './code-preview-line-link';
 import { Results } from './results';
 
 export type LintingRow =
@@ -17,10 +16,6 @@ export type LintingRow =
   | {
       source: 'link';
       result: LinkCheckingResult;
-    }
-  | {
-      source: 'compatibility';
-      result: CompatibilityCheckingResult;
     };
 
 interface LinterProps {
@@ -29,14 +24,10 @@ interface LinterProps {
 
 export const useLinter = ({
   markup,
-  reactMarkup,
-  emailPath,
 
   initialRows,
 }: {
-  reactMarkup: string;
   markup: string;
-  emailPath: string;
 
   initialRows?: LintingRow[];
 }) => {
@@ -44,8 +35,6 @@ export const useLinter = ({
 
   const sources = getLintingSources(
     markup,
-    reactMarkup,
-    emailPath,
     'location' in global
       ? `${global.location.protocol}//${global.location.host}`
       : '',
@@ -105,80 +94,44 @@ export const Linter = ({ rows }: LinterProps) => {
           )!;
           return (
             <Result status={row.result.status} key={i}>
-              <Result.Name>{failingCheck.type}</Result.Name>
+              <Result.Name>{sanitize(failingCheck.type)}</Result.Name>
               <Result.Description>
                 {failingCheck.type === 'security'
-                  ? 'Insecure URL, use HTTPS insted of HTTP'
+                  ? 'Insecure URL, use HTTPS instead of HTTP'
                   : null}
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
                 failingCheck.metadata.fetchStatusCode >= 300 &&
-                failingCheck.metadata.fetchStatusCode < 400
-                  ? 'There was a redirect, the content may have been moved'
-                  : null}
+                failingCheck.metadata.fetchStatusCode < 400 ? (
+                  <>
+                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
+                    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.metadata.fetchStatusCode >= 400 ? (
+                  <>
+                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
+                    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]">
+                <span className="ml-2 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 (
-            <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"
-                >
-                  See more info
-                </a>
+                {[
+                  <CodePreviewLineLink
+                    line={row.result.codeLocation.line}
+                    column={row.result.codeLocation.column}
+                    type="html"
+                  />,
+                ]}
               </Result.Metadata>
             </Result>
           );
@@ -188,24 +141,43 @@ export const Linter = ({ rows }: LinterProps) => {
           const failingCheck = row.result.checks.find(
             (check) => check.passed === false,
           )!;
+          const metadata: React.ReactNode[] = [];
+          for (const check of row.result.checks) {
+            if (check.type === 'image_size' && check.metadata.byteCount) {
+              metadata.push(prettyBytes(check.metadata.byteCount));
+            }
+          }
+          metadata.push(
+            <CodePreviewLineLink
+              line={row.result.codeLocation.line}
+              column={row.result.codeLocation.column}
+              type="html"
+            />,
+          );
           return (
             <Result status={row.result.status} key={i}>
-              <Result.Name>{failingCheck.type}</Result.Name>
+              <Result.Name>{sanitize(failingCheck.type)}</Result.Name>
               <Result.Description>
                 {failingCheck.type === 'security'
-                  ? 'Insecure URL, use HTTPS insted of HTTP'
+                  ? 'Insecure URL, use HTTPS instead 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.metadata.fetchStatusCode < 400 ? (
+                  <>
+                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
+                    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.metadata.fetchStatusCode >= 400 ? (
+                  <>
+                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
+                    The image is broken
+                  </>
+                ) : null}
                 {failingCheck.type === 'syntax'
                   ? 'The image is broken due to an invalid source'
                   : null}
@@ -219,32 +191,11 @@ export const Linter = ({ rows }: LinterProps) => {
                   ? '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]">
+                <span className="ml-2 text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
                   {row.result.source}
                 </span>
               </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.Metadata>{metadata}</Result.Metadata>
             </Result>
           );
         }
@@ -277,9 +228,9 @@ Result.Name = ({
 }: 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">
+      <span className="flex uppercase gap-2 items-center group-data-[status=error]/result:text-red-400 group-data-[status=warning]/result:text-orange-300">
         <IconWarning />
-        {children}
+        {typeof children === 'string' ? sanitize(children) : children}
       </span>
     </Results.Column>
   );
@@ -293,18 +244,25 @@ Result.Description = ({
   return <Results.Column {...props}>{children}</Results.Column>;
 };
 
-Result.Metadata = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<typeof Results.Column>) => {
+interface MetadatProps extends React.ComponentProps<typeof Results.Column> {
+  children: React.ReactNode[];
+}
+
+Result.Metadata = ({ children, className, ...props }: MetadatProps) => {
   return (
     <Results.Column
       align="right"
       {...props}
       className={cn('font-mono text-slate-11', className)}
     >
-      {children}
+      {Children.map(children, (child, index) => {
+        return (
+          <>
+            {index > 0 ? ' · ' : null}
+            {child}
+          </>
+        );
+      })}
     </Results.Column>
   );
 };

package/src/components/toolbar/results.tsx

@@ -8,7 +8,7 @@ export const Results = ({
   return (
     <table
       className={cn(
-        'group relative w-full border-collapse text-left text-slate-10 text-xs',
+        'group relative w-full border-collapse text-left text-slate-10 text-sm',
         className,
       )}
     >
@@ -41,7 +41,10 @@ Results.Column = ({
   ...props
 }: React.ComponentProps<'td'>) => {
   return (
-    <td className={cn('py-1 align-bottom font-medium', className)} {...props}>
+    <td
+      className={cn('py-1.5 align-bottom font-regular', className)}
+      {...props}
+    >
       {children}
     </td>
   );

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

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { cn } from '../../utils';
+import { cn, sanitize } from '../../utils';
 import { IconWarning } from '../icons/icon-warning';
 import { Results } from './results';
 
@@ -83,44 +83,55 @@ export const SpamAssassin = ({ result }: SpamAssassinProps) => {
     <>
       {result ? (
         <Results>
-          <Results.Row className="sticky border-b-2 top-0 bg-black">
+          <Results.Row className="sticky border-b top-0 bg-black">
             <Results.Column className="uppercase">
-              <span className="flex gap-1 items-center">
+              <span className="flex gap-2 items-center">
                 <IconWarning
                   className={cn(
-                    result.points > 1.5 ? 'text-yellow-200' : null,
-                    result.points > 3 ? 'text-orange-300' : null,
+                    result.points === 0 ? 'text-green-400' : null,
+                    result.points > 0 && result.points <= 1.5 ? null : null,
+                    result.points > 1.5 ? 'text-yellow-100' : null,
+                    result.points > 3 ? 'text-orange-400' : null,
                     result.points >= 5 ? 'text-red-400' : null,
                   )}
                 />
                 Score
               </span>
             </Results.Column>
-            <Results.Column>Lower scores are better</Results.Column>
-            <Results.Column
-              className={cn(
-                'text-right text-2xl tracking-tighter font-mono',
-                result.points > 1.5 ? 'text-yellow-200' : null,
-                result.points > 3 ? 'text-orange-300' : null,
-                result.points >= 5 ? 'text-red-400' : null,
-              )}
-            >
-              {result.points.toFixed(1)}
+            <Results.Column>
+              {result.points === 0
+                ? 'Congratulations! Your email is clean of abuse indicators.'
+                : 'Higher scores are better'}
+            </Results.Column>
+            <Results.Column className="text-right tracking-tighter font-bold">
+              <span
+                className={cn(
+                  'text-3xl',
+                  result.points === 0 ? 'text-green-400' : null,
+                  result.points > 0 && result.points <= 1.5 ? null : null,
+                  result.points > 1.5 ? 'text-yellow-200' : null,
+                  result.points > 3 ? 'text-orange-400' : null,
+                  result.points >= 5 ? 'text-red-400' : null,
+                )}
+              >
+                {(10 - result.points).toFixed(1)}
+              </span>{' '}
+              <span className="text-lg">/ 10</span>
             </Results.Column>
           </Results.Row>
           {toSorted(result.checks, (a, b) => b.points - a.points).map(
             (check) => (
               <Results.Row key={check.name}>
                 <Results.Column className="uppercase">
-                  <span className="flex gap-1 items-center">
+                  <span className="flex gap-2 items-center">
                     <IconWarning
                       className={cn(
                         check.points > 1 ? 'text-yellow-200' : null,
-                        check.points > 2 ? 'text-orange-300' : null,
+                        check.points > 2 ? 'text-orange-400' : null,
                         check.points > 3 ? 'text-red-400' : null,
                       )}
                     />
-                    {check.name}
+                    {sanitize(check.name)}
                   </span>
                 </Results.Column>
                 <Results.Column>{check.description}</Results.Column>
@@ -128,11 +139,11 @@ export const SpamAssassin = ({ result }: SpamAssassinProps) => {
                   className={cn(
                     'text-right font-mono tracking-tighter',
                     check.points > 1 ? 'text-yellow-200' : null,
-                    check.points > 2 ? 'text-orange-300' : null,
+                    check.points > 2 ? 'text-orange-400' : null,
                     check.points > 3 ? 'text-red-400' : null,
                   )}
                 >
-                  {check.points.toFixed(1)}
+                  -{check.points.toFixed(1)}
                 </Results.Column>
               </Results.Row>
             ),

package/src/components/toolbar/toolbar-button.tsx

@@ -6,6 +6,7 @@ interface ToolbarButtonProps extends React.ComponentProps<'button'> {
   children: React.ReactNode;
   active?: boolean;
   tooltip?: React.ReactNode;
+  delayDuration?: number;
 }
 
 export const ToolbarButton = ({
@@ -13,17 +14,18 @@ export const ToolbarButton = ({
   className,
   active,
   tooltip,
+  delayDuration = 500,
   ...props
 }: ToolbarButtonProps) => {
   return (
     <Tooltip.Provider>
-      <Tooltip>
+      <Tooltip delayDuration={delayDuration}>
         <Tooltip.Trigger asChild>
           <button
             type="button"
             {...props}
             className={cn(
-              'h-full w-fit font-medium flex text-sm text-slate-10 items-center align-middle justify-center px-1 py-2 gap-1 relative',
+              'h-full w-fit font-regular flex text-sm text-slate-10 items-center align-middle justify-center px-1 gap-2 relative',
               'hover:text-slate-12 transition-colors',
               active && 'data-[state=active]:text-cyan-11',
               className,

package/src/components/toolbar/use-cached-state.ts

@@ -4,7 +4,7 @@ export const useCachedState = <T>(key: string) => {
   let value: T | undefined = undefined;
   if ('localStorage' in global) {
     const storedValue = global.localStorage.getItem(key);
-    if (storedValue !== null) {
+    if (storedValue !== null && storedValue !== 'undefined') {
       try {
         value = JSON.parse(storedValue) as T;
       } catch (exception) {
@@ -12,7 +12,7 @@ export const useCachedState = <T>(key: string) => {
           'Failed to load stored value for',
           key,
           'with value',
-          value,
+          storedValue,
         );
       }
     }