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

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

@@ -0,0 +1,50 @@
+import { motion } from 'framer-motion';
+import { cn } from '../../utils';
+import { Tooltip } from '../tooltip';
+
+interface ToolbarButtonProps extends React.ComponentProps<'button'> {
+  children: React.ReactNode;
+  active?: boolean;
+  tooltip?: React.ReactNode;
+}
+
+export const ToolbarButton = ({
+  children,
+  className,
+  active,
+  tooltip,
+  ...props
+}: ToolbarButtonProps) => {
+  return (
+    <Tooltip.Provider>
+      <Tooltip>
+        <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',
+              'hover:text-slate-12 transition-colors',
+              active && 'data-[state=active]:text-cyan-11',
+              className,
+            )}
+          >
+            {children}
+            {active ? (
+              <motion.span
+                className="-bottom-px absolute rounded-sm left-0 w-full bg-cyan-11 h-px"
+                layoutId="active-toolbar-button"
+                transition={{
+                  type: 'spring',
+                  bounce: 0.2,
+                  duration: 0.6,
+                }}
+              />
+            ) : null}
+          </button>
+        </Tooltip.Trigger>
+        {tooltip ? <Tooltip.Content>{tooltip}</Tooltip.Content> : null}
+      </Tooltip>
+    </Tooltip.Provider>
+  );
+};

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

@@ -0,0 +1,33 @@
+import { useSyncExternalStore } from 'react';
+
+export const useCachedState = <T>(key: string) => {
+  let value: T | undefined = undefined;
+  if ('localStorage' in global) {
+    const storedValue = global.localStorage.getItem(key);
+    if (storedValue !== null) {
+      try {
+        value = JSON.parse(storedValue) as T;
+      } catch (exception) {
+        console.warn(
+          'Failed to load stored value for',
+          key,
+          'with value',
+          value,
+        );
+      }
+    }
+  }
+
+  return [
+    useSyncExternalStore(
+      () => () => {},
+      () => value,
+      () => undefined,
+    ),
+    function setValue(newValue: T | undefined) {
+      if ('localStorage' in global) {
+        global.localStorage.setItem(key, JSON.stringify(newValue));
+      }
+    },
+  ] as const;
+};

package/src/components/toolbar.tsx

@@ -1,90 +1,53 @@
+'use client';
 import * as Tabs from '@radix-ui/react-tabs';
-import { LayoutGroup, motion } from 'framer-motion';
+import { LayoutGroup } from 'framer-motion';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useEffect } from 'react';
+import { use, useEffect } from 'react';
+import { isBuilding } from '../app/env';
+import { PreviewContext } from '../contexts/preview';
 import { cn } from '../utils';
 import { IconArrowDown } from './icons/icon-arrow-down';
 import { IconReload } from './icons/icon-reload';
 import { IconScanner } from './icons/icon-scanner';
 import { IconScissors } from './icons/icon-scissors';
-import { Linter, useLinter } from './toolbar/linter';
-import { SpamAssassin, useSpamAssassin } from './toolbar/spam-assassin';
-import { Tooltip } from './tooltip';
+import { Linter, type LintingRow, useLinter } from './toolbar/linter';
+import {
+  SpamAssassin,
+  type SpamCheckingResult,
+  useSpamAssassin,
+} from './toolbar/spam-assassin';
+import { ToolbarButton } from './toolbar/toolbar-button';
+import { useCachedState } from './toolbar/use-cached-state';
 
-type ToolbarProps = React.ComponentProps<'div'> & {
-  emailSlug: string;
-  markup: string;
-  plainText: string;
-};
-
-type ActivePanelValue = 'linter' | 'spam-assassin';
+export type ToolbarTabValue = 'linter' | 'spam-assassin';
 
-interface ToolbarButton extends React.ComponentProps<'button'> {
-  children: React.ReactNode;
-  active?: boolean;
-  tooltip?: React.ReactNode;
-}
-
-const ToolbarButton = ({
-  children,
-  className,
-  active,
-  tooltip,
-  ...props
-}: ToolbarButton) => {
-  return (
-    <Tooltip.Provider>
-      <Tooltip>
-        <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',
-              'hover:text-slate-12 transition-colors',
-              active && 'data-[state=active]:text-cyan-11',
-              className,
-            )}
-          >
-            {children}
-            {active ? (
-              <motion.span
-                className="-bottom-px absolute rounded-sm left-0 w-full bg-cyan-11 h-px"
-                layoutId="active-toolbar-button"
-                transition={{
-                  type: 'spring',
-                  bounce: 0.2,
-                  duration: 0.6,
-                }}
-              />
-            ) : null}
-          </button>
-        </Tooltip.Trigger>
-        {tooltip ? <Tooltip.Content>{tooltip}</Tooltip.Content> : null}
-      </Tooltip>
-    </Tooltip.Provider>
-  );
-};
+const ToolbarInner = ({
+  serverLintingRows,
+  serverSpamCheckingResult,
 
-export const Toolbar = ({
-  emailSlug,
   markup,
+  reactMarkup,
   plainText,
-  className,
-  ...rest
-}: ToolbarProps) => {
+  emailPath,
+  emailSlug,
+}: ToolbarProps & {
+  markup: string;
+  reactMarkup: string;
+  plainText: string;
+  emailSlug: string;
+  emailPath: string;
+}) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const router = useRouter();
 
-  const activePanelValue = (searchParams.get('toolbar-panel') ?? undefined) as
-    | ActivePanelValue
+  const activeTab = (searchParams.get('toolbar-panel') ?? undefined) as
+    | ToolbarTabValue
     | undefined;
 
-  const toggled = activePanelValue !== undefined;
+  const toggled = activeTab !== undefined;
 
-  const setActivePanelValue = (newValue: ActivePanelValue | undefined) => {
-    console.log(newValue);
+  const setActivePanelValue = (newValue: ToolbarTabValue | undefined) => {
     const params = new URLSearchParams(searchParams);
     if (newValue === undefined) {
       params.delete('toolbar-panel');
@@ -94,36 +57,52 @@ export const Toolbar = ({
     router.push(`${pathname}?${params.toString()}`);
   };
 
+  const [cachedSpamCheckingResult, setCachedSpamCheckingResult] =
+    useCachedState<SpamCheckingResult>(
+      `spam-assassin-${emailSlug.replaceAll('/', '-')}`,
+    );
   const [spamCheckingResult, { load: loadSpamChecking }] = useSpamAssassin({
-    slug: emailSlug,
     markup,
     plainText,
+
+    initialResult: serverSpamCheckingResult ?? cachedSpamCheckingResult,
   });
 
-  const [lintingResults, { load: loadLinting }] = useLinter({
-    slug: emailSlug,
+  const [cachedLintingRows, setCachedLintingRows] = useCachedState<
+    LintingRow[]
+  >(`linter-${emailSlug.replaceAll('/', '-')}`);
+  const [lintingRows, { load: loadLinting }] = useLinter({
+    reactMarkup,
+    emailPath,
     markup,
+
+    initialRows: serverLintingRows ?? cachedLintingRows,
   });
 
-  useEffect(() => {
-    loadLinting();
-    loadSpamChecking();
-  }, []);
+  if (!isBuilding) {
+    useEffect(() => {
+      (async () => {
+        const lintingRows = await loadLinting();
+        setCachedLintingRows(lintingRows);
+
+        const spamCheckingResult = await loadSpamChecking();
+        setCachedSpamCheckingResult(spamCheckingResult);
+      })();
+    }, []);
+  }
 
   return (
     <div
-      {...rest}
       data-toggled={toggled}
       className={cn(
         'bg-black group/toolbar text-xs text-slate-11 h-48 transition-all',
         'data-[toggled=false]:h-8',
-        className,
       )}
     >
       <Tabs.Root
-        value={activePanelValue}
+        value={activeTab}
         onValueChange={(newValue) => {
-          setActivePanelValue(newValue as ActivePanelValue);
+          setActivePanelValue(newValue as ToolbarTabValue);
         }}
         asChild
       >
@@ -131,38 +110,40 @@ export const Toolbar = ({
           <Tabs.List className="flex gap-4 px-2 border-b border-solid border-slate-6 h-7 w-full">
             <LayoutGroup id="toolbar">
               <Tabs.Trigger asChild value="spam-assassin">
-                <ToolbarButton active={activePanelValue === 'spam-assassin'}>
+                <ToolbarButton active={activeTab === 'spam-assassin'}>
                   <IconScissors />
                   Spam Assassin
                 </ToolbarButton>
               </Tabs.Trigger>
               <Tabs.Trigger asChild value="linter">
-                <ToolbarButton active={activePanelValue === 'linter'}>
+                <ToolbarButton active={activeTab === 'linter'}>
                   <IconScanner />
                   Linter
                 </ToolbarButton>
               </Tabs.Trigger>
             </LayoutGroup>
             <div className="flex gap-1 ml-auto">
-              <ToolbarButton
-                tooltip="Reload"
-                onClick={() => {
-                  if (activePanelValue === 'spam-assassin') {
-                    void loadSpamChecking();
-                  } else if (activePanelValue === 'linter') {
-                    void loadLinting();
-                  } else {
-                    setActivePanelValue('linter');
-                    void loadLinting();
-                  }
-                }}
-              >
-                <IconReload />
-              </ToolbarButton>
+              {isBuilding ? null : (
+                <ToolbarButton
+                  tooltip="Reload"
+                  onClick={async () => {
+                    if (activeTab === undefined) {
+                      setActivePanelValue('linter');
+                    }
+                    if (activeTab === 'spam-assassin') {
+                      await loadSpamChecking();
+                    } else {
+                      await loadLinting();
+                    }
+                  }}
+                >
+                  <IconReload />
+                </ToolbarButton>
+              )}
               <ToolbarButton
                 tooltip="Toggle toolbar"
                 onClick={() => {
-                  if (activePanelValue === undefined) {
+                  if (activeTab === undefined) {
                     setActivePanelValue('linter');
                   } else {
                     setActivePanelValue(undefined);
@@ -176,7 +157,7 @@ export const Toolbar = ({
 
           <div className="flex-grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto px-2">
             <Tabs.Content value="linter">
-              <Linter results={lintingResults} />
+              <Linter rows={lintingRows} />
             </Tabs.Content>
             <Tabs.Content value="spam-assassin">
               <SpamAssassin result={spamCheckingResult} />
@@ -187,3 +168,30 @@ export const Toolbar = ({
     </div>
   );
 };
+
+interface ToolbarProps {
+  serverSpamCheckingResult: SpamCheckingResult | undefined;
+  serverLintingRows: LintingRow[] | undefined;
+}
+
+export const Toolbar = ({
+  serverLintingRows,
+  serverSpamCheckingResult,
+}: ToolbarProps) => {
+  const { emailPath, emailSlug, renderedEmailMetadata } = use(PreviewContext)!;
+
+  if (renderedEmailMetadata === undefined) return null;
+  const { markup, plainText, reactMarkup } = renderedEmailMetadata;
+
+  return (
+    <ToolbarInner
+      emailPath={emailPath}
+      emailSlug={emailSlug}
+      markup={markup}
+      reactMarkup={reactMarkup}
+      plainText={plainText}
+      serverLintingRows={serverLintingRows}
+      serverSpamCheckingResult={serverSpamCheckingResult}
+    />
+  );
+};

package/src/components/topbar/view-size-controls.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { motion } from 'framer-motion';
 import * as React from 'react';

package/src/components/topbar.tsx

@@ -7,17 +7,11 @@ import { ShellContext } from './shell';
 import { Tooltip } from './tooltip';
 
 interface TopbarProps {
-  currentEmailOpenSlug: string;
-  pathSeparator: string;
-
+  emailTitle: string;
   children: React.ReactNode;
 }
 
-export const Topbar = ({
-  currentEmailOpenSlug,
-  pathSeparator,
-  children,
-}: TopbarProps) => {
+export const Topbar = ({ emailTitle, children }: TopbarProps) => {
   const { toggleSidebar } = use(ShellContext)!;
 
   return (
@@ -40,7 +34,7 @@ export const Topbar = ({
           </Tooltip>
           <div className="hidden items-center overflow-hidden text-center lg:flex">
             <Heading as="h2" className="truncate" size="2" weight="medium">
-              {currentEmailOpenSlug.split(pathSeparator).pop()}
+              {emailTitle}
             </Heading>
           </div>
         </div>

package/src/contexts/emails.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { createContext, useContext, useState } from 'react';
 import { getEmailsDirectoryMetadataAction } from '../actions/get-emails-directory-metadata-action';
+import { isBuilding } from '../app/env';
 import { useHotreload } from '../hooks/use-hot-reload';
 import type { EmailsDirectory } from '../utils/get-emails-directory-metadata';
 
@@ -30,7 +31,7 @@ export const EmailsProvider = (props: {
   const [emailsDirectoryMetadata, setEmailsDirectoryMetadata] =
     useState<EmailsDirectory>(props.initialEmailsDirectoryMetadata);
 
-  if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
+  if (!isBuilding) {
     // this will not change on runtime so it doesn't violate
     // the rules of hooks
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/src/contexts/preview.tsx

@@ -0,0 +1,81 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import { createContext } from 'react';
+import type {
+  EmailRenderingResult,
+  RenderedEmailMetadata,
+} from '../actions/render-email-by-path';
+import { isBuilding } from '../app/env';
+import { useEmailRenderingResult } from '../hooks/use-email-rendering-result';
+import { useHotreload } from '../hooks/use-hot-reload';
+import { useRenderingMetadata } from '../hooks/use-rendering-metadata';
+
+export const PreviewContext = createContext<
+  | {
+      renderedEmailMetadata: RenderedEmailMetadata | undefined;
+      renderingResult: EmailRenderingResult;
+
+      emailSlug: string;
+      emailPath: string;
+    }
+  | undefined
+>(undefined);
+
+interface PreviewProvider {
+  emailSlug: string;
+  emailPath: string;
+
+  serverRenderingResult: EmailRenderingResult;
+
+  children: React.ReactNode;
+}
+
+export const PreviewProvider = ({
+  emailSlug,
+  emailPath,
+  serverRenderingResult,
+  children,
+}: PreviewProvider) => {
+  const router = useRouter();
+
+  const renderingResult = useEmailRenderingResult(
+    emailPath,
+    serverRenderingResult,
+  );
+
+  const renderedEmailMetadata = useRenderingMetadata(
+    emailPath,
+    renderingResult,
+    serverRenderingResult,
+  );
+
+  if (!isBuilding) {
+    // this will not change on runtime so it doesn't violate
+    // the rules of hooks
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHotreload((changes) => {
+      const changeForThisEmail = changes.find((change) =>
+        change.filename.includes(emailSlug),
+      );
+
+      if (typeof changeForThisEmail !== 'undefined') {
+        if (changeForThisEmail.event === 'unlink') {
+          router.push('/');
+        }
+      }
+    });
+  }
+
+  return (
+    <PreviewContext.Provider
+      value={{
+        emailPath,
+        emailSlug,
+        renderedEmailMetadata,
+        renderingResult,
+      }}
+    >
+      {children}
+    </PreviewContext.Provider>
+  );
+};

package/src/hooks/use-email-rendering-result.ts

@@ -4,6 +4,7 @@ import {
   type EmailRenderingResult,
   renderEmailByPath,
 } from '../actions/render-email-by-path';
+import { isBuilding } from '../app/env';
 import { useHotreload } from './use-hot-reload';
 
 export const useEmailRenderingResult = (
@@ -14,7 +15,7 @@ export const useEmailRenderingResult = (
     serverEmailRenderedResult,
   );
 
-  if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
+  if (!isBuilding) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useHotreload(async (changes) => {
       for await (const change of changes) {

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><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>"`;
+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-bottom:16px;margin-top:16px">Hello <!-- -->alanturing<!-- -->,</p><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px"><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-bottom:16px;margin-top:16px">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-bottom:16px;margin-top:16px">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>"`;