npm - react-email - Versions diffs - 4.0.0-alpha.8 → 4.0.0 - Mend

react-email 4.0.0-alpha.8 → 4.0.0

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 (66) hide show

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

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email/packages/react-email/src/app/layout.tsx
+// File: /home/gabriel/Projects/Resend/react-email.git/release/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/page.ts CHANGED Viewed

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

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

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email/packages/react-email/src/app/preview/[...slug]/page.tsx
+// File: /home/gabriel/Projects/Resend/react-email.git/release/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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.0.0-alpha.8",
+  "version": "4.0.0",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"

package/src/app/layout.tsx CHANGED Viewed

@@ -27,7 +27,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       className={`${inter.variable} ${sfMono.variable} font-sans`}
       lang="en"
     >
-      <body className="relative flex h-screen flex-col overflow-x-hidden bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
+      <body className="relative flex h-screen flex-col bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
         <EmailsProvider
           initialEmailsDirectoryMetadata={emailsDirectoryMetadata}
         >

package/src/app/page.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Button, Heading, Text } from '../components';
 import CodeSnippet from '../components/code-snippet';
-import { Shell, ShellContent } from '../components/shell';
+import { Shell } from '../components/shell';
 import { emailsDirectoryAbsolutePath } from './env';
 import logo from './logo.png';
@@ -12,8 +12,8 @@ const Home = () => {
   return (
     <Shell>
-      <ShellContent className="mx-auto flex max-w-lg items-center justify-center p-8">
-        <div className="-mt-10 relative flex flex-col items-center gap-3 text-center">
+      <div className="w-full h-full flex items-center justify-center p-8">
+        <div className="-mt-10 relative max-w-lg flex flex-col items-center gap-3 text-center">
           <Image
             alt="React Email Icon"
             className="mb-8"
@@ -38,7 +38,7 @@ const Home = () => {
             <Link href="https://react.email/docs">Check the docs</Link>
           </Button>
         </div>
-      </ShellContent>
+      </div>
     </Shell>
   );
 };

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

@@ -1,30 +1,31 @@
 'use client';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { use, useRef } from 'react';
+import { use, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
 import { Topbar } from '../../../components';
 import { CodeContainer } from '../../../components/code-container';
 import {
-  ResizableWarpper,
+  ResizableWrapper,
   makeIframeDocumentBubbleEvents,
 } from '../../../components/resizable-wrapper';
 import { Send } from '../../../components/send';
-import { ShellContent } from '../../../components/shell';
+import { useToolbarState } from '../../../components/toolbar';
 import { Tooltip } from '../../../components/tooltip';
 import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
 import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
 import { PreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
+import { cn } from '../../../utils';
 import { RenderingError } from './rendering-error';
-interface PreviewProps {
+interface PreviewProps extends React.ComponentProps<'div'> {
   emailTitle: string;
 }
-const Preview = ({ emailTitle }: PreviewProps) => {
+const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   const { renderingResult, renderedEmailMetadata } = use(PreviewContext)!;
   const router = useRouter();
@@ -53,21 +54,21 @@ const Preview = ({ emailTitle }: PreviewProps) => {
   const hasRenderingMetadata = typeof renderedEmailMetadata !== 'undefined';
   const hasErrors = 'error' in renderingResult;
-  const maxWidthRef = useRef(Number.POSITIVE_INFINITY);
-  const maxHeightRef = useRef(Number.POSITIVE_INFINITY);
-  const minWidth = 350;
-  const minHeight = 600;
+  const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);
+  const [maxHeight, setMaxHeight] = useState(Number.POSITIVE_INFINITY);
+  const minWidth = 100;
+  const minHeight = 100;
   const storedWidth = searchParams.get('width');
   const storedHeight = searchParams.get('height');
   const [width, setWidth] = useClampedState(
     storedWidth ? Number.parseInt(storedWidth) : 600,
-    350,
-    maxWidthRef.current,
+    minWidth,
+    maxWidth,
   );
   const [height, setHeight] = useClampedState(
     storedHeight ? Number.parseInt(storedHeight) : 1024,
-    600,
-    maxHeightRef.current,
+    minHeight,
+    maxHeight,
   );
   const handleSaveViewSize = useDebouncedCallback(() => {
@@ -77,6 +78,8 @@ const Preview = ({ emailTitle }: PreviewProps) => {
     router.push(`${pathname}?${params.toString()}${location.hash}`);
   }, 300);
+  const { toggled: toolbarToggled } = useToolbarState();
   return (
     <>
       <Topbar emailTitle={emailTitle}>
@@ -107,14 +110,20 @@ const Preview = ({ emailTitle }: PreviewProps) => {
         ) : null}
       </Topbar>
-      <ShellContent
-        className="relative flex bg-gray-200"
+      <div
+        {...props}
+        className={cn(
+          'h-[calc(100%-3.5rem-2.375rem)] will-change-height flex p-4 transition-all duration-300',
+          activeView === 'preview' && 'bg-gray-200',
+          toolbarToggled && 'h-[calc(100%-3.5rem-13rem)]',
+          className,
+        )}
         ref={(element) => {
           const observer = new ResizeObserver((entry) => {
             const [elementEntry] = entry;
             if (elementEntry) {
-              maxWidthRef.current = elementEntry.contentRect.width - 80;
-              maxHeightRef.current = elementEntry.contentRect.height - 80;
+              setMaxWidth(elementEntry.contentRect.width);
+              setMaxHeight(elementEntry.contentRect.height);
             }
           });
@@ -132,11 +141,11 @@ const Preview = ({ emailTitle }: PreviewProps) => {
         {hasRenderingMetadata ? (
           <>
             {activeView === 'preview' && (
-              <ResizableWarpper
+              <ResizableWrapper
                 minHeight={minHeight}
                 minWidth={minWidth}
-                maxHeight={maxHeightRef.current}
-                maxWidth={maxWidthRef.current}
+                maxHeight={maxHeight}
+                maxWidth={maxWidth}
                 height={height}
                 onResizeEnd={() => {
                   handleSaveViewSize();
@@ -145,9 +154,9 @@ const Preview = ({ emailTitle }: PreviewProps) => {
                   const isHorizontal =
                     direction === 'east' || direction === 'west';
                   if (isHorizontal) {
-                    setWidth(value);
+                    setWidth(Math.round(value));
                   } else {
-                    setHeight(value);
+                    setHeight(Math.round(value));
                   }
                 }}
                 width={width}
@@ -166,12 +175,12 @@ const Preview = ({ emailTitle }: PreviewProps) => {
                   }}
                   title={emailTitle}
                 />
-              </ResizableWarpper>
+              </ResizableWrapper>
             )}
             {activeView === 'source' && (
-              <div className="h-full w-full bg-black">
-                <div className="m-auto flex max-w-3xl p-6">
+              <div className="h-full w-full">
+                <div className="m-auto h-full flex max-w-3xl p-6">
                   <Tooltip.Provider>
                     <CodeContainer
                       activeLang={activeLang}
@@ -199,7 +208,7 @@ const Preview = ({ emailTitle }: PreviewProps) => {
         ) : null}
         <Toaster />
-      </ShellContent>
+      </div>
     </>
   );
 };

package/src/components/code-container.tsx CHANGED Viewed

@@ -39,7 +39,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
   return (
     <div
-      className="relative w-full items-center whitespace-pre rounded-md border border-slate-6 text-sm"
+      className="relative max-h-[650px] w-full h-full whitespace-pre rounded-md border border-slate-6 text-sm"
       style={{
         lineHeight: '130%',
         background:
@@ -84,7 +84,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
           filename={`email.${activeMarkup.language}`}
         />
       </div>
-      <div>
+      <div className="h-[calc(100%-2.25rem)]">
         <Code language={activeLang}>{activeMarkup.content}</Code>
       </div>
     </div>

package/src/components/code.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import type { Language } from 'prism-react-renderer';
 import { Highlight } from 'prism-react-renderer';
-import { Fragment, useEffect } from 'react';
+import { Fragment, useEffect, useRef } from 'react';
 import { useFragmentIdentifier } from '../hooks/use-fragment-identifier';
 import { cn } from '../utils';
@@ -73,12 +73,18 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
     return highlight[0] <= line && highlight[1] >= line;
   };
+  const scrollerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    if (highlight) {
-      document.getElementById(`L${highlight[0]}`)?.scrollIntoView({
-        block: 'start',
-        behavior: 'smooth',
-      });
+    const scroller = scrollerRef.current;
+    if (highlight && scroller) {
+      const lineElement = scroller.querySelector(`#L${highlight[0]}`);
+      if (lineElement instanceof HTMLAnchorElement) {
+        scroller.scrollTo({
+          top: Math.max(lineElement.offsetTop - 325, 0),
+          behavior: 'smooth',
+        });
+      }
     }
   }, [highlight]);
@@ -97,7 +103,10 @@ 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%)',
             }}
           />
-          <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
+            ref={scrollerRef}
+            className="flex max-h-[650px] h-full p-4 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

package/src/components/resizable-wrapper.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import { cn } from '../utils';
 type Direction = 'north' | 'south' | 'east' | 'west';
-type ResizableWarpperProps = {
+type ResizableWrapperProps = {
   width: number;
   height: number;
@@ -41,7 +41,7 @@ export const makeIframeDocumentBubbleEvents = (iframe: HTMLIFrameElement) => {
   };
 };
-export const ResizableWarpper = ({
+export const ResizableWrapper = ({
   width,
   height,
   onResize,
@@ -54,7 +54,7 @@ export const ResizableWarpper = ({
   minWidth,
   ...rest
-}: ResizableWarpperProps) => {
+}: ResizableWrapperProps) => {
   const resizableRef = useRef<HTMLElement>(null);
   const mouseMoveListener = useRef<(event: MouseEvent) => void>(null);

package/src/components/shell.tsx CHANGED Viewed

@@ -62,36 +62,31 @@ export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
           </svg>
         </button>
       </div>
-      <div className="flex w-[100dvw] h-[100dvh] flex-row">
+      <div className="w-[100dvw] flex h-[calc(100dvh-4.375rem)] lg:h-[100dvh]">
         <React.Suspense>
           <Sidebar
-            className={cn('shrink [transition:width_0.2s_ease-in-out]', {
-              '-translate-x-full lg:translate-x-0': sidebarToggled,
-              'lg:w-0': !sidebarToggled,
-            })}
+            className={cn(
+              'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-full max-w-full will-change-auto [transition:width_0.2s_ease-in-out]',
+              'lg:static lg:inline-block lg:z-auto lg:max-h-full lg:w-[16rem]',
+              {
+                '-translate-x-full lg:translate-x-0': sidebarToggled,
+                'lg:w-0': !sidebarToggled,
+              },
+            )}
             currentEmailOpenSlug={currentEmailOpenSlug}
           />
         </React.Suspense>
         <main
           className={cn(
-            'h-full max-h-full min-h-full overflow-hidden will-change-width lg:mt-0',
-            'grow',
+            'inline-block relative overflow-hidden will-change-width',
+            'w-full h-full',
             '[transition:width_0.2s_ease-in-out,_transform_0.2s_ease-in-out]',
+            sidebarToggled && 'lg:w-[calc(100%-16rem)]',
           )}
         >
-          <div className="relative flex h-full w-full flex-col">{children}</div>
+          {children}
         </main>
       </div>
     </ShellContext.Provider>
   );
 };
-type ShellContentRootProps = React.ComponentProps<'div'>;
-export const ShellContent = ({ children, ...rest }: ShellContentRootProps) => {
-  return (
-    <div {...rest} className={cn('relative grow', rest.className)}>
-      {children}
-    </div>
-  );
-};

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

@@ -5,7 +5,6 @@ import { useSearchParams } from 'next/navigation';
 import { cn } from '../../utils';
 import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { IconFile } from '../icons/icon-file';
-import { Tooltip } from '../tooltip';
 import { FileTreeDirectory } from './file-tree-directory';
 export const FileTreeDirectoryChildren = (props: {
@@ -117,16 +116,9 @@ export const FileTreeDirectoryChildren = (props: {
                             height="20"
                             width="20"
                           />
-                          <Tooltip.Provider>
-                            <Tooltip>
-                              <Tooltip.Trigger asChild>
-                                <span className="truncate w-[calc(100%-1.25rem)]">
-                                  {emailFilename}
-                                </span>
-                              </Tooltip.Trigger>
-                              <Tooltip.Content>{emailFilename}</Tooltip.Content>
-                            </Tooltip>
-                          </Tooltip.Provider>
+                          <span className="truncate w-[calc(100%-1.25rem)]">
+                            {emailFilename}
+                          </span>
                         </motion.span>
                       </Link>
                     );

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

@@ -7,7 +7,6 @@ import { Heading } from '../heading';
 import { IconArrowDown } from '../icons/icon-arrow-down';
 import { IconFolder } from '../icons/icon-folder';
 import { IconFolderOpen } from '../icons/icon-folder-open';
-import { Tooltip } from '../tooltip';
 import { FileTreeDirectoryChildren } from './file-tree-directory-children';
 interface SidebarDirectoryProps {
@@ -63,22 +62,15 @@ export const FileTreeDirectory = ({
         ) : (
           <IconFolder height="20" width="20" />
         )}
-        <Tooltip.Provider>
-          <Tooltip>
-            <Tooltip.Trigger asChild>
-              <Heading
-                as="h3"
-                className="transition grow w-[calc(100%-40px)] truncate duration-200 ease-in-out hover:text-slate-12"
-                color="gray"
-                size="2"
-                weight="medium"
-              >
-                {directoryMetadata.directoryName}
-              </Heading>
-            </Tooltip.Trigger>
-            <Tooltip.Content>{directoryMetadata.directoryName}</Tooltip.Content>
-          </Tooltip>
-        </Tooltip.Provider>
+        <Heading
+          as="h3"
+          className="transition grow w-[calc(100%-40px)] truncate duration-200 ease-in-out hover:text-slate-12"
+          color="gray"
+          size="2"
+          weight="medium"
+        >
+          {directoryMetadata.directoryName}
+        </Heading>
         {!isEmpty ? (
           <IconArrowDown
             width="20"

package/src/components/sidebar/sidebar.tsx CHANGED Viewed

@@ -16,7 +16,7 @@ export const Sidebar = ({ className, currentEmailOpenSlug }: SidebarProps) => {
   return (
     <aside
       className={cn(
-        'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-screen max-w-full bg-black will-change-auto',
+        'overflow-hidden bg-black',
         'lg:static lg:z-auto lg:max-h-screen lg:w-[16rem]',
         className,
       )}

package/src/components/toolbar/linter.tsx CHANGED Viewed

@@ -92,6 +92,22 @@ export const Linter = ({ rows }: LinterProps) => {
           const failingCheck = row.result.checks.find(
             (check) => check.passed === false,
           )!;
+          const metadata: React.ReactNode[] = [];
+          for (const check of row.result.checks) {
+            if (
+              check.type === 'fetch_attempt' &&
+              check.metadata.fetchStatusCode
+            ) {
+              metadata.push(<>HTTP {check.metadata.fetchStatusCode}</>);
+            }
+          }
+          metadata.push(
+            <CodePreviewLineLink
+              line={row.result.codeLocation.line}
+              column={row.result.codeLocation.column}
+              type="html"
+            />,
+          );
           return (
             <Result status={row.result.status} key={i}>
               <Result.Name>{sanitize(failingCheck.type)}</Result.Name>
@@ -102,20 +118,14 @@ export const Linter = ({ rows }: LinterProps) => {
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
                 failingCheck.metadata.fetchStatusCode >= 300 &&
-                failingCheck.metadata.fetchStatusCode < 400 ? (
-                  <>
-                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
-                    There was a redirect, the content may have been moved
-                  </>
-                ) : null}
+                failingCheck.metadata.fetchStatusCode < 400
+                  ? 'There was a redirect, the content may have been moved'
+                  : null}
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
-                failingCheck.metadata.fetchStatusCode >= 400 ? (
-                  <>
-                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
-                    The link is broken
-                  </>
-                ) : null}
+                failingCheck.metadata.fetchStatusCode >= 400
+                  ? 'The link is broken'
+                  : null}
                 {failingCheck.type === 'syntax'
                   ? 'The link is broken due to invalid syntax'
                   : null}
@@ -124,15 +134,7 @@ export const Linter = ({ rows }: LinterProps) => {
                   {row.result.link}
                 </span>
               </Result.Description>
-              <Result.Metadata>
-                {[
-                  <CodePreviewLineLink
-                    line={row.result.codeLocation.line}
-                    column={row.result.codeLocation.column}
-                    type="html"
-                  />,
-                ]}
-              </Result.Metadata>
+              <Result.Metadata>{metadata}</Result.Metadata>
             </Result>
           );
         }
@@ -146,6 +148,12 @@ export const Linter = ({ rows }: LinterProps) => {
             if (check.type === 'image_size' && check.metadata.byteCount) {
               metadata.push(prettyBytes(check.metadata.byteCount));
             }
+            if (
+              check.type === 'fetch_attempt' &&
+              check.metadata.fetchStatusCode
+            ) {
+              metadata.push(<>HTTP {check.metadata.fetchStatusCode}</>);
+            }
           }
           metadata.push(
             <CodePreviewLineLink
@@ -164,20 +172,14 @@ export const Linter = ({ rows }: LinterProps) => {
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
                 failingCheck.metadata.fetchStatusCode >= 300 &&
-                failingCheck.metadata.fetchStatusCode < 400 ? (
-                  <>
-                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
-                    There was a redirect, the image may have been moved
-                  </>
-                ) : null}
+                failingCheck.metadata.fetchStatusCode < 400
+                  ? 'There was a redirect, the image may have been moved'
+                  : null}
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
-                failingCheck.metadata.fetchStatusCode >= 400 ? (
-                  <>
-                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
-                    The image is broken
-                  </>
-                ) : null}
+                failingCheck.metadata.fetchStatusCode >= 400
+                  ? 'The image is broken'
+                  : null}
                 {failingCheck.type === 'syntax'
                   ? 'The image is broken due to an invalid source'
                   : null}

package/src/components/toolbar/results.tsx CHANGED Viewed

@@ -25,7 +25,7 @@ Results.Row = ({
   return (
     <tr
       className={cn(
-        'border-collapse align-bottom border-slate-6 border-b',
+        'border-collapse align-bottom border-slate-6 border-b last:border-b-0',
         className,
       )}
       {...props}