react-email 4.0.0-alpha.2 → 4.0.0-alpha.4

package/dist/preview/.next/types/app/layout.ts

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email.git/chore-1/packages/react-email/src/app/layout.tsx
+// File: /home/gabriel/Projects/Resend/react-email.git/4.0/packages/react-email/src/app/layout.tsx
 import * as entry from '../../../src/app/layout.js'
 import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
 

package/dist/preview/.next/types/app/preview/[...slug]/page.ts

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email.git/chore-1/packages/react-email/src/app/preview/[...slug]/page.tsx
+// File: /home/gabriel/Projects/Resend/react-email.git/4.0/packages/react-email/src/app/preview/[...slug]/page.tsx
 import * as entry from '../../../../../src/app/preview/[...slug]/page.js'
 import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.4",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -35,6 +35,7 @@
     "socket.io": "4.8.1"
   },
   "devDependencies": {
+    "@lottiefiles/dotlottie-react": "0.12.3",
     "@radix-ui/colors": "1.0.1",
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-dropdown-menu": "2.1.4",
@@ -57,7 +58,6 @@
     "autoprefixer": "10.4.20",
     "clsx": "2.1.0",
     "framer-motion": "12.0.0-alpha.2",
-    "@lottiefiles/dotlottie-react": "0.12.3",
     "node-html-parser": "6.1.13",
     "postcss": "8.4.40",
     "prettier-plugin-tailwindcss": "0.6.6",
@@ -70,6 +70,7 @@
     "socket.io-client": "4.8.0",
     "sonner": "1.7.1",
     "source-map-js": "1.0.2",
+    "spamc": "0.0.5",
     "stacktrace-parser": "0.1.10",
     "tailwind-merge": "2.2.0",
     "tailwindcss": "3.4.0",

package/src/app/preview/[...slug]/preview.tsx

@@ -111,6 +111,7 @@ const Preview = ({
       activeView={activeView}
       currentEmailOpenSlug={slug}
       markup={renderedEmailMetadata?.markup}
+      plainText={renderedEmailMetadata?.plainText}
       pathSeparator={pathSeparator}
       setActiveView={handleViewChange}
       setViewHeight={(height) => {
@@ -130,7 +131,7 @@ const Preview = ({
     >
       {/* This relative is so that when there is any error the user can still switch between emails */}
       <div
-        className="relative flex h-full pb-8 bg-gray-200"
+        className="relative flex h-full bg-gray-200 pb-8"
         ref={(element) => {
           const observer = new ResizeObserver((entry) => {
             const [elementEntry] = entry;
@@ -194,27 +195,29 @@ const Preview = ({
             )}
 
             {activeView === 'source' && (
-              <div className="mx-auto flex max-w-3xl gap-6 p-6">
-                <Tooltip.Provider>
-                  <CodeContainer
-                    activeLang={activeLang}
-                    markups={[
-                      {
-                        language: 'jsx',
-                        content: renderedEmailMetadata.reactMarkup,
-                      },
-                      {
-                        language: 'markup',
-                        content: renderedEmailMetadata.markup,
-                      },
-                      {
-                        language: 'markdown',
-                        content: renderedEmailMetadata.plainText,
-                      },
-                    ]}
-                    setActiveLang={handleLangChange}
-                  />
-                </Tooltip.Provider>
+              <div className="h-full w-full bg-black">
+                <div className="m-auto flex max-w-3xl p-6">
+                  <Tooltip.Provider>
+                    <CodeContainer
+                      activeLang={activeLang}
+                      markups={[
+                        {
+                          language: 'jsx',
+                          content: renderedEmailMetadata.reactMarkup,
+                        },
+                        {
+                          language: 'markup',
+                          content: renderedEmailMetadata.markup,
+                        },
+                        {
+                          language: 'markdown',
+                          content: renderedEmailMetadata.plainText,
+                        },
+                      ]}
+                      setActiveLang={handleLangChange}
+                    />
+                  </Tooltip.Provider>
+                </div>
               </div>
             )}
           </>

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

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconBug = forwardRef<IconElement, IconProps>((props, ref) => (
+  <IconBase {...props} ref={ref}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
+      <path d="m8 2l1.88 1.88m4.24 0L16 2M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
+      <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6m0 0v-9" />
+      <path d="M6.53 9C4.6 8.8 3 7.1 3 5m3 8H2m1 8c0-2.1 1.7-3.9 3.8-4M20.97 5c0 2.1-1.6 3.8-3.5 4M22 13h-4m-.8 4c2.1.1 3.8 1.9 3.8 4" />
+    </g>
+  </IconBase>
+));

package/src/components/shell.tsx

@@ -10,6 +10,7 @@ type RootProps = React.ComponentPropsWithoutRef<'div'>;
 
 interface ShellProps extends RootProps {
   markup?: string;
+  plainText?: string;
   currentEmailOpenSlug?: string;
   pathSeparator?: string;
 
@@ -27,6 +28,7 @@ export const Shell = ({
   children,
   pathSeparator,
   markup,
+  plainText,
   activeView,
   setActiveView,
   viewHeight,
@@ -76,6 +78,7 @@ export const Shell = ({
           })}
           currentEmailOpenSlug={currentEmailOpenSlug}
           markup={markup}
+          plainText={plainText}
           style={{
             transition: triggerTransition ? 'transform 0.2s ease-in-out' : '',
           }}

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

@@ -76,7 +76,8 @@ export const FileTreeDirectoryChildren = (props: {
                         <motion.span
                           animate={{ x: 0, opacity: 1 }}
                           className={cn(
-                            'relative flex h-8 max-w-full items-center rounded-md pl-3 align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
+                            'relative flex h-8 max-w-full items-center gap-2 rounded-md align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
+                            props.isRoot ? undefined : 'pl-3',
                             {
                               'text-cyan-11': isCurrentPage,
                               'hover:text-slate-12':
@@ -96,23 +97,25 @@ export const FileTreeDirectoryChildren = (props: {
                               exit={{ opacity: 0 }}
                               initial={{ opacity: 0 }}
                             >
-                              <motion.div
-                                className="absolute top-1 left-[.625rem] h-6 w-px rounded-sm bg-cyan-11"
-                                layoutId="active-file"
-                                transition={{
-                                  type: 'spring',
-                                  bounce: 0.2,
-                                  duration: 0.6,
-                                }}
-                              />
+                              {props.isRoot ? null : (
+                                <motion.div
+                                  className="absolute top-1 left-[.625rem] h-6 w-px rounded-sm bg-cyan-11"
+                                  layoutId="active-file"
+                                  transition={{
+                                    type: 'spring',
+                                    bounce: 0.2,
+                                    duration: 0.6,
+                                  }}
+                                />
+                              )}
                             </motion.span>
                           ) : null}
                           <IconFile
-                            className="absolute left-4 h-5 w-5"
+                            className="h-5 w-5"
                             height="20"
                             width="20"
                           />
-                          <span className="truncate pl-8">{emailFilename}</span>
+                          <span className="truncate">{emailFilename}</span>
                         </motion.span>
                       </Link>
                     );

package/src/components/sidebar/image-checker.tsx

@@ -150,7 +150,8 @@ export const ImageChecker = ({ emailSlug, emailMarkup }: ImageCheckerProps) => {
         </>
       ) : (
         <span className="text-xs leading-relaxed">
-          Check if all links are valid and redirect to the correct pages.
+          Check if all images exist, have proper size, are accessible, and are
+          secure.
         </span>
       )}
       <Button loading={loading} onClick={handleRun}>

package/src/components/sidebar/sidebar.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import * as Tabs from '@radix-ui/react-tabs';
 import { clsx } from 'clsx';
@@ -15,18 +14,25 @@ import { useIconAnimation } from '../../hooks/use-icon-animation';
 import { cn } from '../../utils';
 import { Button } from '../button';
 import { Heading } from '../heading';
+import { IconBug } from '../icons/icon-bug';
 import { IconImage } from '../icons/icon-image';
 import { Tooltip } from '../tooltip';
 import { FileTree } from './file-tree';
 import { ImageChecker } from './image-checker';
 import { LinkChecker } from './link-checker';
+import { SpamAssassin } from './spam-assassin';
 
-type SidebarPanelValue = 'file-tree' | 'link-checker' | 'image-checker';
+type SidebarPanelValue =
+  | 'file-tree'
+  | 'link-checker'
+  | 'image-checker'
+  | 'spam-assassin';
 
 interface SidebarProps {
   className?: string;
   currentEmailOpenSlug?: string;
   markup?: string;
+  plainText?: string;
   style?: React.CSSProperties;
 }
 
@@ -179,6 +185,7 @@ export const Sidebar = ({
   className,
   currentEmailOpenSlug,
   markup: emailMarkup,
+  plainText: emailPlainText,
   style,
 }: SidebarProps) => {
   const pathname = usePathname();
@@ -256,6 +263,14 @@ export const Sidebar = ({
           >
             <IconImage className="h-6 w-6" />
           </TabTrigger>
+          <TabTrigger
+            activeTabValue={activePanelValue}
+            className="relative"
+            tabValue="spam-assassin"
+            tooltipText="Spam Assassin"
+          >
+            <IconBug className="h-6 w-6" />
+          </TabTrigger>
           <div className="mt-auto flex flex-col">
             <NavigationButton
               className="flex items-center justify-center"
@@ -325,6 +340,25 @@ export const Sidebar = ({
                 )}
               </Panel>
             )}
+            {activePanelValue === 'spam-assassin' && (
+              <Panel
+                title="Image Checker"
+                active={activePanelValue === 'spam-assassin'}
+              >
+                {currentEmailOpenSlug && emailMarkup && emailPlainText ? (
+                  <SpamAssassin
+                    emailMarkup={emailMarkup}
+                    emailPlainText={emailPlainText}
+                    emailSlug={currentEmailOpenSlug}
+                  />
+                ) : (
+                  <EmptyState
+                    title="Spam Assassin"
+                    onSelectTemplate={() => setActivePanelValue('file-tree')}
+                  />
+                )}
+              </Panel>
+            )}
             {activePanelValue === 'file-tree' && (
               <Panel
                 title="File Explorer"

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

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { toast } from 'sonner';
+import { cn } from '../../utils';
+import { Button } from '../button';
+
+interface SpamAssassinProps {
+  emailSlug: string;
+  emailMarkup: string;
+  emailPlainText: string;
+}
+
+interface SpamCheckingResult {
+  checks: {
+    name: string;
+    description: string;
+    points: number;
+  }[];
+  isSpam: boolean;
+  points: number;
+}
+
+export const SpamAssassin = ({
+  emailSlug,
+  emailMarkup,
+  emailPlainText,
+}: SpamAssassinProps) => {
+  const cacheKey = `spam-checking-results-${emailSlug.replaceAll('/', '-')}`;
+
+  const [result, setResult] = React.useState<SpamCheckingResult | undefined>();
+
+  React.useEffect(() => {
+    const cachedValue =
+      'localStorage' in global ? global.localStorage.getItem(cacheKey) : null;
+    if (cachedValue) {
+      try {
+        setResult(JSON.parse(cachedValue));
+      } catch (exception) {
+        setResult(undefined);
+      }
+    }
+  }, [cacheKey]);
+
+  const [loading, setLoading] = React.useState(false);
+
+  const handleRun = async () => {
+    setLoading(true);
+
+    try {
+      const response = await fetch('https://react.email/api/check-spam', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          html: emailMarkup,
+          plainText: emailPlainText,
+        }),
+      });
+
+      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));
+        }
+      } else {
+        console.error(await response.text());
+        toast.error('Something went wrong');
+      }
+    } catch (exception) {
+      console.error(exception);
+      toast.error(JSON.stringify(exception));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="mt-4 flex w-full flex-col gap-2 text-pretty">
+      {result ? (
+        <div
+          className="group flex flex-col gap-2"
+          aria-label={result.isSpam ? 'spam' : 'ham'}
+        >
+          <table className="w-full border-collapse text-left text-slate-10 text-sm">
+            <thead className="mb-4 h-8 border border-t-0 border-slate-6 bg-slate-3 text-xs">
+              <tr>
+                <th scope="col" className="px-3 py-1">
+                  Rule
+                </th>
+                <th scope="col" className="px-3 py-1" align="right">
+                  Score
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {result.checks.length > 0 ? (
+                result.checks.map((check) => (
+                  <tr
+                    key={check.name}
+                    className="border-collapse border-slate-6 border-b"
+                  >
+                    <td className="px-3 py-2">
+                      <div className="font-medium text-slate-12">
+                        {check.name}
+                      </div>
+                      <div className="mt-1 text-slate-9 text-xs">
+                        {check.description}
+                      </div>
+                    </td>
+                    <td
+                      align="right"
+                      className={cn(
+                        'px-3 py-2 font-medium',
+                        check.points > 0 ? 'text-yellow-200' : null,
+                        check.points > 1 ? 'text-yellow-300' : null,
+                        check.points > 2 ? 'text-orange-400' : null,
+                        check.points > 3 ? 'text-red-400' : null,
+                      )}
+                    >
+                      {check.points.toFixed(1)}
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={2} className="py-10 font-medium text-center">
+                    Nothing from Spam Assassin
+                  </td>
+                </tr>
+              )}
+            </tbody>
+            <tfoot className="mb-4 h-8 border border-slate-6 bg-slate-3">
+              <tr className="border-collapse border-slate-6 border-b">
+                <td className="px-3 py-2">Considered </td>
+                <td
+                  className="text-green-300 py-2 px-3 group-aria-[label=spam]:text-red-300 bg-transparent"
+                  align="right"
+                >
+                  {result.isSpam ? 'spam' : 'safe'}
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      ) : (
+        <span className="text-xs leading-relaxed">
+          Check how well your email goes on a batch of spam testing.
+        </span>
+      )}
+      <Button loading={loading} onClick={handleRun}>
+        {result ? 'Re-run' : 'Run'}
+      </Button>
+    </div>
+  );
+};

package/src/utils/__snapshots__/get-email-component.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`getEmailComponent() > with a demo email template 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="/static/vercel-logo.png"/><link rel="preload" as="image" href="/static/vercel-user.png"/><link rel="preload" as="image" href="/static/vercel-arrow.png"/><link rel="preload" as="image" href="/static/vercel-team.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--></head><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Join Alan on Vercel<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><body style="background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;padding-left:0.5rem;padding-right:0.5rem"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);border-radius:0.25rem;margin-top:40px;margin-bottom:40px;margin-left:auto;margin-right:auto;padding:20px;max-width:465px"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px"><tbody><tr><td><img alt="Vercel" height="37" src="/static/vercel-logo.png" style="margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;display:block;outline:none;border:none;text-decoration:none" width="40"/></td></tr></tbody></table><h1 style="color:rgb(0,0,0);font-size:24px;font-weight:400;text-align:center;padding:0px;margin-top:30px;margin-bottom:30px;margin-left:0px;margin-right:0px">Join <strong>Enigma</strong> on <strong>Vercel</strong></h1><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">Hello <!-- -->alanturing<!-- -->,</p><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0"><strong>Alan</strong> (<a href="mailto:alan.turing@example.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">alan.turing@example.com</a>) has invited you to the <strong>Enigma</strong> team on<!-- --> <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="right" data-id="__react-email-column"><img height="64" src="/static/vercel-user.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td><td align="center" data-id="__react-email-column"><img alt="invited you to" height="9" src="/static/vercel-arrow.png" style="display:block;outline:none;border:none;text-decoration:none" width="12"/></td><td align="left" data-id="__react-email-column"><img height="64" src="/static/vercel-team.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-top:32px;margin-bottom:32px"><tbody><tr><td><a href="https://vercel.com/teams/invite/foo" style="background-color:rgb(0,0,0);border-radius:0.25rem;color:rgb(255,255,255);font-size:12px;font-weight:600;text-decoration-line:none;text-align:center;padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px">Join the team</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a></td></tr></tbody></table><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">or copy and paste this URL into your browser:<!-- --> <a href="https://vercel.com/teams/invite/foo" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://vercel.com/teams/invite/foo</a></p><hr style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);margin-top:26px;margin-bottom:26px;margin-left:0px;margin-right:0px;width:100%;border:none;border-top:1px solid #eaeaea"/><p style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin:16px 0">This invitation was intended for<!-- --> <span style="color:rgb(0,0,0)">alanturing</span>. This invite was sent from <span style="color:rgb(0,0,0)">204.13.186.218</span> <!-- -->located in<!-- --> <span style="color:rgb(0,0,0)">São Paulo, Brazil</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account&#x27;s safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table><!--/$--></body></html>"`;
+exports[`getEmailComponent() > with a demo email template 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="/static/vercel-logo.png"/><link rel="preload" as="image" href="/static/vercel-user.png"/><link rel="preload" as="image" href="/static/vercel-arrow.png"/><link rel="preload" as="image" href="/static/vercel-team.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--></head><body style="background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;padding-left:0.5rem;padding-right:0.5rem"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Join Alan on Vercel<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);border-radius:0.25rem;margin-top:40px;margin-bottom:40px;margin-left:auto;margin-right:auto;padding:20px;max-width:465px"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px"><tbody><tr><td><img alt="Vercel" height="37" src="/static/vercel-logo.png" style="margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;display:block;outline:none;border:none;text-decoration:none" width="40"/></td></tr></tbody></table><h1 style="color:rgb(0,0,0);font-size:24px;font-weight:400;text-align:center;padding:0px;margin-top:30px;margin-bottom:30px;margin-left:0px;margin-right:0px">Join <strong>Enigma</strong> on <strong>Vercel</strong></h1><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">Hello <!-- -->alanturing<!-- -->,</p><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0"><strong>Alan</strong> (<a href="mailto:alan.turing@example.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">alan.turing@example.com</a>) has invited you to the <strong>Enigma</strong> team on<!-- --> <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="right" data-id="__react-email-column"><img height="64" src="/static/vercel-user.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td><td align="center" data-id="__react-email-column"><img alt="invited you to" height="9" src="/static/vercel-arrow.png" style="display:block;outline:none;border:none;text-decoration:none" width="12"/></td><td align="left" data-id="__react-email-column"><img height="64" src="/static/vercel-team.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-top:32px;margin-bottom:32px"><tbody><tr><td><a href="https://vercel.com/teams/invite/foo" style="background-color:rgb(0,0,0);border-radius:0.25rem;color:rgb(255,255,255);font-size:12px;font-weight:600;text-decoration-line:none;text-align:center;padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px">Join the team</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a></td></tr></tbody></table><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">or copy and paste this URL into your browser:<!-- --> <a href="https://vercel.com/teams/invite/foo" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://vercel.com/teams/invite/foo</a></p><hr style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);margin-top:26px;margin-bottom:26px;margin-left:0px;margin-right:0px;width:100%;border:none;border-top:1px solid #eaeaea"/><p style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin:16px 0">This invitation was intended for<!-- --> <span style="color:rgb(0,0,0)">alanturing</span>. This invite was sent from <span style="color:rgb(0,0,0)">204.13.186.218</span> <!-- -->located in<!-- --> <span style="color:rgb(0,0,0)">São Paulo, Brazil</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account&#x27;s safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table><!--/$--></body></html>"`;

package/tsconfig.json

@@ -35,5 +35,5 @@
     "outDir": "dist"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": [".next", "dist", "node_modules", "**/*.spec.ts", "**/*.spec.tsx"]
+  "exclude": [".next", "dist", "node_modules"]
 }

package/vitest.config.ts

@@ -1,6 +1,4 @@
-import type { TsconfigRaw } from 'esbuild';
 import { defineConfig } from 'vitest/config';
-import tsconfig from './tsconfig.test.json';
 
 export default defineConfig({
   test: {
@@ -8,6 +6,10 @@ export default defineConfig({
     environment: 'happy-dom',
   },
   esbuild: {
-    tsconfigRaw: tsconfig as TsconfigRaw,
+    tsconfigRaw: {
+      compilerOptions: {
+        jsx: 'react-jsx',
+      },
+    },
   },
 });