npm - @react-email/preview-server - Versions diffs - 4.1.0-canary.11 → 4.1.0-canary.12 - Mend

@react-email/preview-server 4.1.0-canary.11 → 4.1.0-canary.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

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

@@ -2,6 +2,7 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
+import * as React from 'react';
 import { cn } from '../../utils';
 import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { IconFile } from '../icons/icon-file';
@@ -16,6 +17,8 @@ export const FileTreeDirectoryChildren = (props: {
   const searchParams = useSearchParams();
   const router = useRouter();
+  const id = React.useId();
   return (
     <AnimatePresence initial={false}>
       {props.open ? (
@@ -33,7 +36,7 @@ export const FileTreeDirectoryChildren = (props: {
               <div className="line absolute left-2.5 h-full w-px bg-slate-6" />
             )}
             <div className="flex flex-col truncate">
-              <LayoutGroup id="sidebar">
+              <LayoutGroup id={`sidebar-${id}`}>
                 {props.emailsDirectoryMetadata.subDirectories.map(
                   (subDirectory) => (
                     <FileTreeDirectory

package/src/components/toolbar.tsx CHANGED Viewed

@@ -2,7 +2,7 @@
 import * as Tabs from '@radix-ui/react-tabs';
 import { LayoutGroup } from 'framer-motion';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { use, useEffect } from 'react';
+import * as React from 'react';
 import type { CompatibilityCheckingResult } from '../actions/email-validation/check-compatibility';
 import { isBuilding } from '../app/env';
 import { PreviewContext } from '../contexts/preview';
@@ -105,7 +105,8 @@ const ToolbarInner = ({
   if (!isBuilding) {
     // biome-ignore lint/correctness/useHookAtTopLevel: This is fine since isBuilding does not change at runtime
-    useEffect(() => {
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Setters don't need dependencies
+    React.useEffect(() => {
       (async () => {
         const lintingRows = await loadLinting();
         setCachedLintingRows(lintingRows);
@@ -119,6 +120,8 @@ const ToolbarInner = ({
     }, []);
   }
+  const id = React.useId();
   return (
     <div
       data-toggled={toggled}
@@ -137,7 +140,7 @@ const ToolbarInner = ({
       >
         <div className="flex flex-col h-full">
           <Tabs.List className="flex gap-4 px-4 border-b border-solid border-slate-6 h-10 w-full flex-shrink-0">
-            <LayoutGroup id="toolbar">
+            <LayoutGroup id={`toolbar-${id}`}>
               <Tabs.Trigger asChild value="linter">
                 <ToolbarButton active={activeTab === 'linter'}>
                   Linter
@@ -189,7 +192,7 @@ const ToolbarInner = ({
                   <IconReload
                     size={24}
                     className={cn({
-                      'animate-spin opacity-60 animate-spin-fast':
+                      'opacity-60 animate-spin-fast':
                         lintLoading || spamLoading,
                     })}
                   />
@@ -329,7 +332,8 @@ export const Toolbar = ({
   serverSpamCheckingResult,
   serverCompatibilityResults,
 }: ToolbarProps) => {
-  const { emailPath, emailSlug, renderedEmailMetadata } = use(PreviewContext)!;
+  const { emailPath, emailSlug, renderedEmailMetadata } =
+    React.use(PreviewContext)!;
   if (renderedEmailMetadata === undefined) return null;
   const { markup, plainText, reactMarkup } = renderedEmailMetadata;

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

@@ -1,3 +1,185 @@
 // 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="margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:0.5rem;padding-right:0.5rem;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;"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Join Alan on Vercel<div> ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏</div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-left:auto;margin-right:auto;margin-top:40px;margin-bottom:40px;max-width:465px;border-radius:0.25rem;border-width:1px;border-color:rgb(234,234,234);border-style:solid;padding:20px"><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 Logo" height="37" src="/static/vercel-logo.png" style="margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;display:block;outline:none;border:none;text-decoration:none" width="40"/></td></tr></tbody></table><h1 style="margin-left:0px;margin-right:0px;margin-top:30px;margin-bottom:30px;padding:0px;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">Join <strong>Enigma</strong> on <strong>Vercel</strong></h1><p style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">Hello <!-- -->alanturing<!-- -->,</p><p style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom: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 alt="alanturing&#x27;s profile picture" 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="Arrow indicating invitation" 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 alt="Enigma team logo" 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="margin-top:32px;margin-bottom:32px;text-align:center"><tbody><tr><td><a href="https://vercel.com" style="border-radius:0.25rem;background-color:rgb(0,0,0);padding-left:20px;padding-right:20px;padding-top:12px;padding-bottom:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px" 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="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">or copy and paste this URL into your browser:<!-- --> <a href="https://vercel.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://vercel.com</a></p><hr style="margin-left:0px;margin-right:0px;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea"/><p style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom: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>"`;
+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='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:0.5rem;padding-right:0.5rem;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
+    <div
+      style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
+      data-skip-in-text="true">
+      Join Alan on Vercel
+      <div>
+         ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏
+      </div>
+    </div>
+    <table
+      align="center"
+      width="100%"
+      border="0"
+      cellpadding="0"
+      cellspacing="0"
+      role="presentation"
+      style="margin-left:auto;margin-right:auto;margin-top:40px;margin-bottom:40px;max-width:465px;border-radius:0.25rem;border-width:1px;border-color:rgb(234,234,234);border-style:solid;padding:20px">
+      <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 Logo"
+                      height="37"
+                      src="/static/vercel-logo.png"
+                      style="margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;display:block;outline:none;border:none;text-decoration:none"
+                      width="40" />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <h1
+              style="margin-left:0px;margin-right:0px;margin-top:30px;margin-bottom:30px;padding:0px;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
+              Join <strong>Enigma</strong> on <strong>Vercel</strong>
+            </h1>
+            <p
+              style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+              Hello
+              <!-- -->alanturing<!-- -->,
+            </p>
+            <p
+              style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom: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
+                              alt="alanturing&#x27;s profile picture"
+                              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="Arrow indicating invitation"
+                              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
+                              alt="Enigma team logo"
+                              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="margin-top:32px;margin-bottom:32px;text-align:center">
+              <tbody>
+                <tr>
+                  <td>
+                    <a
+                      href="https://vercel.com"
+                      style="border-radius:0.25rem;background-color:rgb(0,0,0);padding-left:20px;padding-right:20px;padding-top:12px;padding-bottom:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px"
+                      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="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
+              or copy and paste this URL into your browser:<!-- -->
+              <a
+                href="https://vercel.com"
+                style="color:rgb(37,99,235);text-decoration-line:none"
+                target="_blank"
+                >https://vercel.com</a
+              >
+            </p>
+            <hr
+              style="margin-left:0px;margin-right:0px;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
+            <p
+              style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom: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>
+"
+`;

package/src/utils/caniemail/ast/get-used-style-properties.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/nursery/noNestedComponentDefinitions: There are no components here, just visitor functions */
 import traverse from '@babel/traverse';
 import type { AST } from '../../../actions/email-validation/check-compatibility';
 import { generateTailwindCssRules } from '../tailwind/generate-tailwind-rules';

package/src/utils/get-email-component.spec.ts CHANGED Viewed

@@ -34,6 +34,9 @@ describe('getEmailComponent()', () => {
           result.emailComponent,
           result.emailComponent.PreviewProps,
         ),
+        {
+          pretty: true,
+        },
       );
       expect(emailHtml).toMatchSnapshot();
     }