react-email 4.0.0-alpha.1 → 4.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.3",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -37,6 +37,7 @@
   "devDependencies": {
     "@radix-ui/colors": "1.0.1",
     "@radix-ui/react-collapsible": "1.1.0",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
     "@radix-ui/react-popover": "1.1.1",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-tabs": "1.1.1",
@@ -75,6 +76,7 @@
     "tsup": "7.2.0",
     "tsx": "4.9.0",
     "typescript": "5.1.6",
+    "use-debounce": "10.0.4",
     "vitest": "1.1.3",
     "@react-email/render": "1.0.5"
   },

package/src/actions/email-validation/check-images.spec.tsx

@@ -1,5 +1,4 @@
 import { render } from '@react-email/render';
-import * as React from 'react';
 import { type ImageCheckingResult, checkImages } from './check-images';
 
 test('checkImages()', async () => {

package/src/actions/email-validation/check-images.ts

@@ -1,7 +1,6 @@
 'use server';
 
 import type { IncomingMessage } from 'node:http';
-import { headers } from 'next/headers';
 import { parse } from 'node-html-parser';
 import { quickFetch } from './quick-fetch';
 

package/src/actions/email-validation/check-links.spec.tsx

@@ -1,5 +1,4 @@
 import { render } from '@react-email/render';
-import * as React from 'react';
 import { type LinkCheckingResult, checkLinks } from './check-links';
 
 test('checkLinks()', async () => {

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

@@ -1,12 +1,19 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import React from 'react';
+import { useState } from 'react';
+import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
+import { useDebouncedCallback } from 'use-debounce';
 import type { EmailRenderingResult } from '../../../actions/render-email-by-path';
 import { CodeContainer } from '../../../components/code-container';
+import {
+  ResizableWarpper,
+  makeIframeDocumentBubbleEvents,
+} from '../../../components/resizable-wrapper';
 import { Shell } from '../../../components/shell';
 import { Tooltip } from '../../../components/tooltip';
+import { useClampedState } from '../../../hooks/use-clamped-state';
 import { useEmailRenderingResult } from '../../../hooks/use-email-rendering-result';
 import { useHotreload } from '../../../hooks/use-hot-reload';
 import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
@@ -29,7 +36,7 @@ const Preview = ({
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  const activeView = searchParams.get('view') ?? 'desktop';
+  const activeView = searchParams.get('view') ?? 'preview';
   const activeLang = searchParams.get('lang') ?? 'jsx';
 
   const renderingResult = useEmailRenderingResult(
@@ -75,60 +82,141 @@ const Preview = ({
 
   const hasNoErrors = typeof renderedEmailMetadata !== 'undefined';
 
+  const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);
+  const [maxHeight, setMaxHeight] = useState(Number.POSITIVE_INFINITY);
+  const minWidth = 350;
+  const minHeight = 600;
+  const storedWidth = searchParams.get('width');
+  const storedHeight = searchParams.get('height');
+  const [width, setWidth] = useClampedState(
+    storedWidth ? Number.parseInt(storedWidth) : 600,
+    350,
+    maxWidth,
+  );
+  const [height, setHeight] = useClampedState(
+    storedHeight ? Number.parseInt(storedHeight) : 1024,
+    600,
+    maxHeight,
+  );
+
+  const handleSaveViewSize = useDebouncedCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    params.set('width', width.toString());
+    params.set('height', height.toString());
+    router.push(`${pathname}?${params.toString()}`);
+  }, 300);
+
   return (
     <Shell
-      activeView={hasNoErrors ? activeView : undefined}
+      activeView={activeView}
       currentEmailOpenSlug={slug}
       markup={renderedEmailMetadata?.markup}
       pathSeparator={pathSeparator}
-      setActiveView={hasNoErrors ? handleViewChange : undefined}
+      setActiveView={handleViewChange}
+      setViewHeight={(height) => {
+        setHeight(height);
+        flushSync(() => {
+          handleSaveViewSize();
+        });
+      }}
+      setViewWidth={(width) => {
+        setWidth(width);
+        flushSync(() => {
+          handleSaveViewSize();
+        });
+      }}
+      viewHeight={height}
+      viewWidth={width}
     >
       {/* This relative is so that when there is any error the user can still switch between emails */}
-      <div className="relative h-full">
+      <div
+        className="relative flex h-full bg-gray-200 pb-8"
+        ref={(element) => {
+          const observer = new ResizeObserver((entry) => {
+            const [elementEntry] = entry;
+            if (elementEntry) {
+              setMaxWidth(elementEntry.contentRect.width - 80);
+              setMaxHeight(elementEntry.contentRect.height - 80);
+            }
+          });
+
+          if (element) {
+            observer.observe(element);
+          }
+
+          return () => {
+            observer.disconnect();
+          };
+        }}
+      >
         {'error' in renderingResult ? (
           <RenderingError error={renderingResult.error} />
         ) : null}
 
         {hasNoErrors ? (
           <>
-            {activeView === 'desktop' && (
-              <iframe
-                className="h-full w-full bg-white"
-                srcDoc={renderedEmailMetadata.markup}
-                title={slug}
-              />
-            )}
-
-            {activeView === 'mobile' && (
-              <iframe
-                className="mx-auto h-full w-[360px] bg-white"
-                srcDoc={renderedEmailMetadata.markup}
-                title={slug}
-              />
+            {activeView === 'preview' && (
+              <ResizableWarpper
+                minHeight={minHeight}
+                minWidth={minWidth}
+                maxHeight={maxHeight}
+                maxWidth={maxWidth}
+                height={height}
+                onResizeEnd={() => {
+                  handleSaveViewSize();
+                }}
+                onResize={(value, direction) => {
+                  const isHorizontal =
+                    direction === 'east' || direction === 'west';
+                  if (isHorizontal) {
+                    setWidth(value);
+                  } else {
+                    setHeight(value);
+                  }
+                }}
+                width={width}
+              >
+                <iframe
+                  className="solid max-h-full rounded-lg bg-white"
+                  ref={(iframe) => {
+                    if (iframe) {
+                      return makeIframeDocumentBubbleEvents(iframe);
+                    }
+                  }}
+                  srcDoc={renderedEmailMetadata.markup}
+                  style={{
+                    width: `${width}px`,
+                    height: `${height}px`,
+                  }}
+                  title={slug}
+                />
+              </ResizableWarpper>
             )}
 
             {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/code-snippet.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const CodeSnippet = ({ children }) => {
   return (
     <code className="m-0.5 inline-block rounded-md bg-white/10 p-1 font-mono leading-none text-slate-12">

package/src/components/logo.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 export const Logo = () => (
   <svg
     fill="none"

package/src/components/resizable-wrapper.tsx

@@ -0,0 +1,176 @@
+import { Slot } from '@radix-ui/react-slot';
+import { type ComponentProps, useCallback, useEffect, useRef } from 'react';
+import { cn } from '../utils';
+
+type Direction = 'north' | 'south' | 'east' | 'west';
+
+type ResizableWarpperProps = {
+  width: number;
+  height: number;
+
+  maxWidth: number;
+  maxHeight: number;
+  minWidth: number;
+  minHeight: number;
+
+  onResize: (newSize: number, direction: Direction) => void;
+  onResizeEnd?: () => void;
+
+  children: React.ReactNode;
+} & Omit<ComponentProps<'div'>, 'onResize' | 'children'>;
+
+export const makeIframeDocumentBubbleEvents = (iframe: HTMLIFrameElement) => {
+  const mouseMoveBubbler = (event: MouseEvent) => {
+    const bounds = iframe.getBoundingClientRect();
+    document.dispatchEvent(
+      new MouseEvent('mousemove', {
+        ...event,
+        clientX: event.clientX + bounds.x,
+        clientY: event.clientY + bounds.y,
+      }),
+    );
+  };
+  const mouseUpBubbler = (event: MouseEvent) => {
+    document.dispatchEvent(new MouseEvent('mouseup', event));
+  };
+  iframe.contentDocument?.addEventListener('mousemove', mouseMoveBubbler);
+  iframe.contentDocument?.addEventListener('mouseup', mouseUpBubbler);
+  return () => {
+    iframe.contentDocument?.removeEventListener('mousemove', mouseMoveBubbler);
+    iframe.contentDocument?.removeEventListener('mouseup', mouseUpBubbler);
+  };
+};
+
+export const ResizableWarpper = ({
+  width,
+  height,
+  onResize,
+  onResizeEnd,
+  children,
+
+  maxHeight,
+  maxWidth,
+  minHeight,
+  minWidth,
+
+  ...rest
+}: ResizableWarpperProps) => {
+  const resizableRef = useRef<HTMLElement>(null);
+
+  const mouseMoveListener = useRef<(event: MouseEvent) => void>(null);
+
+  const handleStopResizing = useCallback(() => {
+    if (mouseMoveListener.current) {
+      document.removeEventListener('mousemove', mouseMoveListener.current);
+    }
+    document.removeEventListener('mouseup', handleStopResizing);
+    onResizeEnd?.();
+  }, []);
+
+  const handleStartResizing = (direction: Direction) => {
+    mouseMoveListener.current = (event) => {
+      if (event.button === 0 && resizableRef.current) {
+        const isHorizontal = direction === 'east' || direction === 'west';
+
+        const mousePosition = isHorizontal ? event.clientX : event.clientY;
+        const resizableBoundingRect =
+          resizableRef.current.getBoundingClientRect();
+        const center = isHorizontal
+          ? resizableBoundingRect.x + resizableBoundingRect.width / 2
+          : resizableBoundingRect.y + resizableBoundingRect.height / 2;
+        onResize(Math.abs(mousePosition - center) * 2, direction);
+      } else {
+        handleStopResizing();
+      }
+    };
+
+    document.addEventListener('mouseup', handleStopResizing);
+    document.addEventListener('mousemove', mouseMoveListener.current);
+  };
+
+  useEffect(() => {
+    if (!window.document) return;
+
+    return () => {
+      handleStopResizing();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      {...rest}
+      className={cn(
+        'relative mx-auto my-auto box-content px-4 py-2',
+        rest.className,
+      )}
+    >
+      <div
+        aria-label="resize-west"
+        aria-valuenow={width}
+        aria-valuemin={minWidth}
+        aria-valuemax={maxWidth}
+        className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-2 cursor-w-resize p-2 [user-drag:none]"
+        onDragStart={(event) => event.preventDefault()}
+        draggable="false"
+        onMouseDown={() => {
+          handleStartResizing('west');
+        }}
+        role="slider"
+        tabIndex={0}
+      >
+        <div className="h-8 w-1 rounded-md bg-black/30" />
+      </div>
+      <div
+        aria-label="resize-east"
+        aria-valuenow={width}
+        aria-valuemin={minWidth}
+        aria-valuemax={maxWidth}
+        onDragStart={(event) => event.preventDefault()}
+        className="-translate-x-full -translate-y-1/2 absolute top-1/2 left-full cursor-e-resize p-2 [user-drag:none]"
+        draggable="false"
+        onMouseDown={() => {
+          handleStartResizing('east');
+        }}
+        role="slider"
+        tabIndex={0}
+      >
+        <div className="h-8 w-1 rounded-md bg-black/30" />
+      </div>
+      <div
+        aria-label="resize-north"
+        aria-valuenow={height}
+        aria-valuemin={minHeight}
+        aria-valuemax={maxHeight}
+        onDragStart={(event) => event.preventDefault()}
+        className="-translate-x-1/2 -translate-y-1/2 absolute top-0 left-1/2 cursor-n-resize p-2 [user-drag:none]"
+        draggable="false"
+        onMouseDown={() => {
+          handleStartResizing('north');
+        }}
+        role="slider"
+        tabIndex={0}
+      >
+        <div className="h-1 w-8 rounded-md bg-black/30" />
+      </div>
+      <div
+        aria-label="resize-south"
+        aria-valuenow={height}
+        aria-valuemin={minHeight}
+        aria-valuemax={maxHeight}
+        onDragStart={(event) => event.preventDefault()}
+        className="-translate-x-1/2 -translate-y-1/2 absolute top-full left-1/2 cursor-s-resize p-2 [user-drag:none]"
+        draggable="false"
+        onMouseDown={() => {
+          handleStartResizing('south');
+        }}
+        role="slider"
+        tabIndex={0}
+      >
+        <div className="h-1 w-8 rounded-md bg-black/30" />
+      </div>
+
+      <Slot ref={resizableRef}>{children}</Slot>
+    </div>
+  );
+};

package/src/components/shell.tsx

@@ -12,8 +12,14 @@ interface ShellProps extends RootProps {
   markup?: string;
   currentEmailOpenSlug?: string;
   pathSeparator?: string;
+
   activeView?: string;
   setActiveView?: (view: string) => void;
+
+  viewWidth?: number;
+  setViewWidth?: (width: number) => void;
+  viewHeight?: number;
+  setViewHeight?: (height: number) => void;
 }
 
 export const Shell = ({
@@ -23,6 +29,10 @@ export const Shell = ({
   markup,
   activeView,
   setActiveView,
+  viewHeight,
+  viewWidth,
+  setViewHeight,
+  setViewWidth,
 }: ShellProps) => {
   const [sidebarToggled, setSidebarToggled] = React.useState(false);
   const [triggerTransition, setTriggerTransition] = React.useState(false);
@@ -75,8 +85,8 @@ export const Shell = ({
         className={cn(
           'relative h-full max-h-full min-h-screen w-[100vw] overflow-hidden will-change-width sm:mt-[4.375rem] md:absolute md:right-0 lg:mt-0',
           {
-            'lg:w-[calc(100vw)] lg:translate-x-0': sidebarToggled,
-            'lg:w-[calc(100vw-20rem)] lg:translate-x-0': !sidebarToggled,
+            'lg:w-[calc(100dvw)] lg:translate-x-0': sidebarToggled,
+            'lg:w-[calc(100dvw-20rem)] lg:translate-x-0': !sidebarToggled,
           },
         )}
         style={{
@@ -104,9 +114,13 @@ export const Shell = ({
               }}
               pathSeparator={pathSeparator}
               setActiveView={setActiveView}
+              setViewHeight={setViewHeight}
+              setViewWidth={setViewWidth}
+              viewHeight={viewHeight}
+              viewWidth={viewWidth}
             />
           ) : null}
-          <div className="relative mx-auto h-[calc(100vh-3.3125rem)] grow md:h-full">
+          <div className="relative mx-auto h-[calc(100dvh-3.3125rem)] grow md:h-full">
             {children}
           </div>
         </div>

package/src/components/sidebar/sidebar.tsx

@@ -147,7 +147,7 @@ const Panel = ({ title, active, children }: PanelProps) => (
         {title}
       </Heading>
     </div>
-    <div className="-mt-[.5px] relative h-[calc(100vh-4.375rem)] w-full border-slate-4 border-t px-4 pb-3">
+    <div className="-mt-[.5px] relative h-[calc(100dvh-4.375rem)] w-full border-slate-4 border-t px-4 pb-3">
       {children}
     </div>
   </>

package/src/components/topbar/active-view-toggle-group.tsx

@@ -0,0 +1,86 @@
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import { motion } from 'framer-motion';
+import { cn } from '../../utils';
+import { tabTransition } from '../../utils/constants';
+import { IconMonitor } from '../icons/icon-monitor';
+import { IconSource } from '../icons/icon-source';
+import { Tooltip } from '../tooltip';
+
+interface ActiveViewToggleGroupProps {
+  activeView: string;
+  setActiveView: (view: string) => void;
+}
+
+export const ActiveViewToggleGroup = ({
+  activeView,
+  setActiveView,
+}: ActiveViewToggleGroupProps) => {
+  return (
+    <ToggleGroup.Root
+      aria-label="View mode"
+      className="inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
+      onValueChange={(value) => {
+        if (value) setActiveView(value);
+      }}
+      type="single"
+      value={activeView}
+    >
+      <ToggleGroup.Item value="preview">
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <div
+              className={cn(
+                'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
+                {
+                  'text-slate-11': activeView !== 'desktop',
+                  'text-slate-12': activeView === 'desktop',
+                },
+              )}
+            >
+              {activeView === 'preview' && (
+                <motion.span
+                  animate={{ opacity: 1 }}
+                  className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                  layoutId="topbar-tabs"
+                  transition={tabTransition}
+                />
+              )}
+              <IconMonitor />
+            </div>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Preview</Tooltip.Content>
+        </Tooltip>
+      </ToggleGroup.Item>
+      <ToggleGroup.Item value="source">
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <div
+              className={cn(
+                'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
+                {
+                  'text-slate-11': activeView !== 'source',
+                  'text-slate-12': activeView === 'source',
+                },
+              )}
+            >
+              {activeView === 'source' && (
+                <motion.span
+                  animate={{ opacity: 1 }}
+                  className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                  layoutId="topbar-tabs"
+                  transition={tabTransition}
+                />
+              )}
+              <IconSource />
+            </div>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Code</Tooltip.Content>
+        </Tooltip>
+      </ToggleGroup.Item>
+    </ToggleGroup.Root>
+  );
+};