@react-email/preview-server 1.0.0-canary.0

package/src/components/toolbar/checking-results.tsx

@@ -0,0 +1,150 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { AnimatePresence, motion } from 'framer-motion';
+import type { ComponentProps } from 'react';
+import { cn } from '../../utils';
+
+export type ResultStatus = 'error' | 'warning' | 'success';
+
+const statusStyles = {
+  error: 'text-red-600 hover:bg-red-600/10',
+  warning: 'text-yellow-300 hover:bg-yellow-400/10',
+  success: 'text-green-600 hover:bg-green-600/10',
+};
+
+interface ResultListProps {
+  status: ResultStatus;
+  label: React.ReactNode;
+
+  disabled?: boolean;
+  defaultOpen?: boolean;
+
+  children: React.ReactNode;
+}
+
+export const ResultList = ({
+  status,
+  label,
+
+  disabled,
+  defaultOpen,
+
+  children,
+}: ResultListProps) => {
+  return (
+    <Collapsible.Root className="group" defaultOpen={defaultOpen && !disabled}>
+      <Collapsible.Trigger
+        className={cn(
+          'group flex w-full items-center gap-1 rounded p-2 transition-colors duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+          statusStyles[status],
+          disabled && 'cursor-not-allowed opacity-70',
+        )}
+        disabled={disabled}
+      >
+        <span
+          className={cn(
+            '-mt-[.125rem] transition-transform duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+            'rotate-0 group-data-[state=open]:rotate-90',
+          )}
+        >
+          <svg
+            fill="none"
+            height="15"
+            viewBox="0 0 15 15"
+            width="15"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clipRule="evenodd"
+              d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
+        <div className="flex flex-1 items-center gap-1 font-bold text-[.625rem] uppercase tracking-wide">
+          {label}
+        </div>
+      </Collapsible.Trigger>
+      {children ? (
+        <Collapsible.Content>
+          <ol className="mt-2 mb-1 flex list-none flex-col gap-4">
+            {children}
+          </ol>
+        </Collapsible.Content>
+      ) : null}
+    </Collapsible.Root>
+  );
+};
+
+type ResultProps = {
+  status: ResultStatus;
+} & ComponentProps<typeof motion.li>;
+
+const resultAnimation = {
+  hidden: { opacity: 0, y: 10 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: 'easeOut', staggerChildren: 0.1 },
+  },
+};
+
+export const Result = ({ children, status, ...rest }: ResultProps) => {
+  return (
+    <AnimatePresence mode="wait">
+      <motion.li
+        data-status={status}
+        initial="hidden"
+        layout
+        variants={resultAnimation}
+        animate="visible"
+        {...rest}
+        className={cn(
+          'group/item relative w-full rounded-md p-2 pl-4 transition-colors duration-300 ease-out hover:bg-slate-5',
+          rest.className,
+        )}
+      >
+        {children}
+      </motion.li>
+    </AnimatePresence>
+  );
+};
+
+const titleStatusAnimation = {
+  hidden: { opacity: 0, y: 5 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: 'easeOut' },
+  },
+};
+
+interface ResultStatusDescriptionProps {
+  children: React.ReactNode;
+}
+
+Result.StatusDescription = ({ children }: ResultStatusDescriptionProps) => {
+  return (
+    <motion.div
+      className="mt-1 font-semibold text-[.625rem] uppercase"
+      variants={titleStatusAnimation}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+interface ResultTitleProps {
+  children: React.ReactNode;
+}
+
+Result.Title = ({ children }: ResultTitleProps) => {
+  return (
+    <motion.div
+      className="flex w-full items-center gap-2 text-xs group-data-[status=error]/item:text-red-400 group-data-[status=success]/item:text-green-400 group-data-[status=warning]/item:text-yellow-300 "
+      variants={titleStatusAnimation}
+    >
+      {children}
+    </motion.div>
+  );
+};

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

@@ -0,0 +1,278 @@
+import prettyBytes from 'pretty-bytes';
+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';
+
+export type LintingRow =
+  | {
+      source: 'image';
+      result: ImageCheckingResult;
+    }
+  | {
+      source: 'link';
+      result: LinkCheckingResult;
+    };
+
+interface LinterProps {
+  rows: LintingRow[] | undefined;
+}
+
+export const useLinter = ({
+  markup,
+
+  initialRows,
+}: {
+  markup: string;
+
+  initialRows?: LintingRow[];
+}) => {
+  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);
+
+    setRows([]);
+    try {
+      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 {
+      setLoading(false);
+      isStreaming.current = false;
+    }
+  };
+
+  return [rows, { loading, load }] as const;
+};
+
+export const Linter = ({ rows }: LinterProps) => {
+  if (rows === undefined) return null;
+
+  return (
+    <Results>
+      {rows.map((row, i) => {
+        if (row.source === 'link') {
+          const failingCheck = row.result.checks.find(
+            (check) => check.passed === false,
+          )!;
+          const metadata: React.ReactNode[] = [];
+          for (const check of row.result.checks) {
+            if (
+              check.type === 'fetch_attempt' &&
+              check.metadata.fetchStatusCode
+            ) {
+              metadata.push(<>HTTP {check.metadata.fetchStatusCode}</>);
+            }
+          }
+          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
+                  ? '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 === 'fetch_attempt' &&
+                failingCheck.metadata.fetchStatusCode === undefined
+                  ? 'The link could not be reached'
+                  : null}
+                {failingCheck.type === 'syntax'
+                  ? 'The link is broken due to invalid syntax'
+                  : null}
+
+                <span className="ml-2 text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
+                  {row.result.link}
+                </span>
+              </Result.Description>
+              <Result.Metadata>{metadata}</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 (
+              check.type === 'fetch_attempt' &&
+              check.metadata.fetchStatusCode
+            ) {
+              metadata.push(<>HTTP {check.metadata.fetchStatusCode}</>);
+            }
+          }
+          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
+                  ? '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 === 'fetch_attempt' &&
+                failingCheck.metadata.fetchStatusCode === undefined
+                  ? 'The image could not be reached'
+                  : 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="ml-2 text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
+                  {row.result.source}
+                </span>
+              </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>
+  );
+};

package/src/components/toolbar/results.tsx

@@ -0,0 +1,51 @@
+import { cn } from '../../utils';
+
+export const Results = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'table'>) => {
+  return (
+    <table
+      className={cn(
+        'group relative w-full border-collapse text-left text-slate-10 text-sm',
+        className,
+      )}
+    >
+      <tbody>{children}</tbody>
+    </table>
+  );
+};
+
+Results.Row = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'tr'>) => {
+  return (
+    <tr
+      className={cn(
+        'border-collapse align-bottom border-slate-6 border-b last:border-b-0',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </tr>
+  );
+};
+
+Results.Column = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'td'>) => {
+  return (
+    <td
+      className={cn('py-1.5 align-bottom font-regular', className)}
+      {...props}
+    >
+      {children}
+    </td>
+  );
+};