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

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,50 +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,
-                    });
-                    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>

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>
+  );
+};