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

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconInfo = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M12 4C7.58173 4 4 7.58172 4 12C4 16.4182 7.58173 20 12 20C16.4183 20 20 16.4182 20 12C20 7.58172 16.4183 4 12 4ZM5.14754 12C5.14754 8.21549 8.21551 5.14754 12 5.14754C15.7845 5.14754 18.8525 8.21549 18.8525 12C18.8525 15.7844 15.7845 18.8525 12 18.8525C8.21551 18.8525 5.14754 15.7844 5.14754 12ZM12.906 8.37648C12.906 8.87682 12.5004 9.28243 12 9.28243C11.4997 9.28243 11.0941 8.87682 11.0941 8.37648C11.0941 7.87613 11.4997 7.47053 12 7.47053C12.5004 7.47053 12.906 7.87613 12.906 8.37648ZM10.1883 10.1884H10.7922H12.0002C12.3337 10.1884 12.6041 10.4588 12.6041 10.7924V15.0201H13.2081H13.8121V16.2281H13.2081H12.0002H10.7922H10.1883V15.0201H10.7922H11.3962V11.3963H10.7922H10.1883V10.1884Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </IconBase>
+  ),
+);
+
+IconInfo.displayName = 'IconInfo';

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

@@ -1,19 +1,18 @@
-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}
-    >
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconReload = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...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"
+        d="M17.9354 12C17.9354 9.01537 15.5828 6.05264 11.9202 6.05264C8.96229 6.05264 7.50033 8.21724 6.87735 9.36841H8.72625C9.02024 9.36841 9.25858 9.60406 9.25858 9.89473C9.25858 10.1854 9.02024 10.421 8.72625 10.421H5.53232C5.23833 10.421 5 10.1854 5 9.89473V6.73684C5 6.44617 5.23833 6.21052 5.53232 6.21052C5.82631 6.21052 6.06465 6.44617 6.06465 6.73684V8.64548C6.81471 7.33819 8.54959 5 11.9202 5C16.2456 5 19 8.51094 19 12C19 15.4891 16.2456 19 11.9202 19C9.8507 19 8.12769 18.1904 6.9009 16.9562C6.24405 16.2954 5.73107 15.5148 5.38132 14.6744C5.26942 14.4057 5.39911 14.0981 5.67098 13.9875C5.94285 13.8768 6.25395 14.0051 6.36583 14.2738C6.66482 14.9921 7.10262 15.6574 7.66023 16.2183C8.69486 17.2593 10.1475 17.9474 11.9202 17.9474C15.5828 17.9474 17.9354 14.9846 17.9354 12Z"
         fill="currentColor"
       />
-    </svg>
-  );
-};
+    </IconBase>
+  ),
+);
+
+IconReload.displayName = 'IconReload';

package/src/components/logo.tsx

@@ -1,10 +1,11 @@
 export const Logo = () => (
   <svg
     fill="none"
-    height="32"
+    height="30"
     viewBox="0 0 119 32"
-    width="119"
+    width="113"
     xmlns="http://www.w3.org/2000/svg"
+    style={{ opacity: 0.9 }}
   >
     <g clipPath="url(#clip0_27_291)">
       <path

package/src/components/resizable-wrapper.tsx

@@ -100,10 +100,7 @@ export const ResizableWarpper = ({
   return (
     <div
       {...rest}
-      className={cn(
-        'relative mx-auto my-auto box-content px-4 py-2',
-        rest.className,
-      )}
+      className={cn('relative mx-auto my-auto box-content', rest.className)}
     >
       <div
         aria-label="resize-west"

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

@@ -71,6 +71,7 @@ export const FileTreeDirectoryChildren = (props: {
                           pathname: `/preview/${emailSlug}`,
                           search: searchParams.toString(),
                         }}
+                        prefetch
                         key={emailSlug}
                       >
                         <motion.span

package/src/components/sidebar/sidebar.tsx

@@ -2,7 +2,6 @@
 import { clsx } from 'clsx';
 import { useEmails } from '../../contexts/emails';
 import { cn } from '../../utils';
-import { Heading } from '../heading';
 import { Logo } from '../logo';
 import { FileTree } from './file-tree';
 
@@ -29,9 +28,9 @@ export const Sidebar = ({ className, currentEmailOpenSlug }: SidebarProps) => {
               'hidden min-h-[3.3125rem] flex-shrink items-center p-3 px-4 lg:flex',
             )}
           >
-            <Heading as="h2" className="truncate" size="2" weight="medium">
+            <h2>
               <Logo />
-            </Heading>
+            </h2>
           </div>
           <div className="relative h-full w-full border-slate-4 border-t px-4 pb-3">
             <FileTree

package/src/components/toolbar/code-preview-line-link.tsx

@@ -0,0 +1,40 @@
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+interface CodePreviewLineLinkProps {
+  line: number;
+  column: number;
+
+  type: 'react' | 'html';
+}
+
+export const CodePreviewLineLink = ({
+  line,
+  column,
+  type,
+}: CodePreviewLineLinkProps) => {
+  const searchParams = useSearchParams();
+
+  const newSearchParams = new URLSearchParams(searchParams);
+  newSearchParams.set('view', 'source');
+  if (type === 'html') {
+    newSearchParams.set('lang', 'markup');
+  } else if (type === 'react') {
+    newSearchParams.set('lang', 'jsx');
+  }
+
+  const fragmentIdentifier = `#L${line}`;
+
+  return (
+    <Link
+      href={{
+        search: newSearchParams.toString(),
+        hash: fragmentIdentifier,
+      }}
+      scroll={false}
+      className="appearance-none underline mx-2"
+    >
+      L{line.toString().padStart(2, '0')}
+    </Link>
+  );
+};

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,167 +1,268 @@
 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 { 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, 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';
 
-type LintingResult = Omit<
-  ImageCheckingResult | LinkCheckingResult,
-  'checks'
-> & {
-  checks: (LinkCheck | ImageCheck)[];
-};
+export type LintingRow =
+  | {
+      source: 'image';
+      result: ImageCheckingResult;
+    }
+  | {
+      source: 'link';
+      result: LinkCheckingResult;
+    };
 
 interface LinterProps {
-  results: LintingResult[] | undefined;
+  rows: LintingRow[] | undefined;
 }
 
 export const useLinter = ({
   markup,
-  slug,
+
+  initialRows,
 }: {
   markup: string;
-  slug: 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,
+    '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,
           )!;
+          return (
+            <Result status={row.result.status} key={i}>
+              <Result.Name>{sanitize(failingCheck.type)}</Result.Name>
+              <Result.Description>
+                {failingCheck.type === 'security'
+                  ? 'Insecure URL, use HTTPS instead of HTTP'
+                  : null}
+                {failingCheck.type === 'fetch_attempt' &&
+                failingCheck.metadata.fetchStatusCode &&
+                failingCheck.metadata.fetchStatusCode >= 300 &&
+                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 ? (
+                  <>
+                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
+                    The link is broken
+                  </>
+                ) : null}
+                {failingCheck.type === 'syntax'
+                  ? 'The link is broken due to invalid syntax'
+                  : null}
 
-          const checkDescription = (() => {
-            if (failingCheck.type === 'security') {
-              return 'Insecure URL, use HTTPS instead of HTTP';
+                <span className="ml-2 text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
+                  {row.result.link}
+                </span>
+              </Result.Description>
+              <Result.Metadata>
+                {[
+                  <CodePreviewLineLink
+                    line={row.result.codeLocation.line}
+                    column={row.result.codeLocation.column}
+                    type="html"
+                  />,
+                ]}
+              </Result.Metadata>
+            </Result>
+          );
+        }
+
+        if (row.source === 'image') {
+          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));
             }
-            if (
-              failingCheck.type === 'fetch_attempt' &&
-              failingCheck.metadata.fetchStatusCode !== undefined
-            ) {
-              if (
+          }
+          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>{sanitize(failingCheck.type)}</Result.Name>
+              <Result.Description>
+                {failingCheck.type === 'security'
+                  ? 'Insecure URL, use HTTPS instead 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`;
-            }
-          })();
+                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 ? (
+                  <>
+                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
+                    The image is broken
+                  </>
+                ) : null}
+                {failingCheck.type === 'syntax'
+                  ? 'The image is broken due to an invalid source'
+                  : null}
 
-          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}
-                >
-                  <IconWarning />
-                  {failingCheck.type}
+                {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="ml-2 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>{metadata}</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-2 items-center group-data-[status=error]/result:text-red-400 group-data-[status=warning]/result:text-orange-300">
+        <IconWarning />
+        {typeof children === 'string' ? sanitize(children) : children}
+      </span>
+    </Results.Column>
+  );
+};
+
+Result.Description = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Results.Column>) => {
+  return <Results.Column {...props}>{children}</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.map(children, (child, index) => {
+        return (
+          <>
+            {index > 0 ? ' · ' : null}
+            {child}
+          </>
+        );
+      })}
+    </Results.Column>
+  );
+};