lint

resend · Jan 16, 2025 · d2bc0a6 · d2bc0a6
1 parent 8660f0d
commit d2bc0a6
Show file tree

Hide file tree

Showing 18 changed files with 100 additions and 81 deletions.
diff --git a/apps/demo/emails/magic-links/aws-verify-email.tsx b/apps/demo/emails/magic-links/aws-verify-email.tsx
@@ -12,10 +12,10 @@ import {
   Text,
 } from '@react-email/components';
 import { setupForPreview } from 'react-email';
-import { z } from "zod";
+import { z } from 'zod';
 
 const AWSVerifyEmailProps = z.object({
-  verificationCode: z.string()
+  verificationCode: z.string(),
 });
 
 type AWSVerifyEmailProps = z.infer<typeof AWSVerifyEmailProps>;
@@ -88,7 +88,7 @@ export default function AWSVerifyEmail({
 }
 
 AWSVerifyEmail.PreviewProps = {
-  verificationCode: '596583'
+  verificationCode: '596583',
 } satisfies AWSVerifyEmailProps;
 
 AWSVerifyEmail.PreviewSchema = AWSVerifyEmailProps;

diff --git a/apps/demo/emails/magic-links/jobaccepted-magic-link.tsx b/apps/demo/emails/magic-links/jobaccepted-magic-link.tsx
@@ -9,8 +9,8 @@ import {
   Preview,
   Section,
   Text,
-} from "@react-email/components";
-import { setupForPreview } from "react-email";
+} from '@react-email/components';
+import { setupForPreview } from 'react-email';
 
 interface MagicCodeEmailProps {
   code: string;
@@ -53,9 +53,9 @@ const MagicCodeEmail = ({ code }: MagicCodeEmailProps) => {
 
 setupForPreview(MagicCodeEmail, {
   code: {
-    type: "text",
-    defaultValue: "544432"
-  }
+    type: 'text',
+    defaultValue: '544432',
+  },
 });
 
 export default MagicCodeEmail;

diff --git a/apps/demo/emails/magic-links/linear-login-code.tsx b/apps/demo/emails/magic-links/linear-login-code.tsx
@@ -11,8 +11,8 @@ import {
   Preview,
   Section,
   Text,
-} from "@react-email/components";
-import { setupForPreview } from "react-email";
+} from '@react-email/components';
+import { setupForPreview } from 'react-email';
 
 interface LinearLoginCodeEmailProps {
   validationCode: string;

diff --git a/apps/demo/emails/magic-links/notion-magic-link.tsx b/apps/demo/emails/magic-links/notion-magic-link.tsx
@@ -8,9 +8,9 @@ import {
   Link,
   Preview,
   Text,
-} from "@react-email/components";
-import * as React from "react";
-import { setupForPreview } from "react-email";
+} from '@react-email/components';
+import * as React from 'react';
+import { setupForPreview } from 'react-email';
 
 interface NotionMagicLinkEmailProps {
   loginCode: string;

diff --git a/apps/demo/emails/magic-links/plaid-verify-identity.tsx b/apps/demo/emails/magic-links/plaid-verify-identity.tsx
@@ -8,9 +8,9 @@ import {
   Link,
   Section,
   Text,
-} from "@react-email/components";
-import * as React from "react";
-import { setupForPreview } from "react-email";
+} from '@react-email/components';
+import * as React from 'react';
+import { setupForPreview } from 'react-email';
 
 interface PlaidVerifyIdentityEmailProps {
   validationCode: string;
@@ -58,8 +58,8 @@ export const PlaidVerifyIdentityEmail = ({
 setupForPreview(PlaidVerifyIdentityEmail, {
   validationCode: {
     type: 'text',
-    defaultValue: '144833'
-  }
+    defaultValue: '144833',
+  },
 });
 
 export default PlaidVerifyIdentityEmail;

diff --git a/apps/demo/emails/magic-links/raycast-magic-link.tsx b/apps/demo/emails/magic-links/raycast-magic-link.tsx
@@ -10,9 +10,9 @@ import {
   Preview,
   Section,
   Text,
-} from "@react-email/components";
-import * as React from "react";
-import { setupForPreview } from "react-email";
+} from '@react-email/components';
+import * as React from 'react';
+import { setupForPreview } from 'react-email';
 
 interface RaycastMagicLinkEmailProps {
   magicLink: string;
@@ -74,8 +74,8 @@ export const RaycastMagicLinkEmail = ({
 setupForPreview(RaycastMagicLinkEmail, {
   magicLink: {
     type: 'text',
-    defaultValue: 'https://raycast.com'
-  }
+    defaultValue: 'https://raycast.com',
+  },
 });
 
 export default RaycastMagicLinkEmail;

diff --git a/apps/demo/emails/magic-links/slack-confirm.tsx b/apps/demo/emails/magic-links/slack-confirm.tsx
@@ -11,9 +11,9 @@ import {
   Row,
   Section,
   Text,
-} from "@react-email/components";
-import * as React from "react";
-import { setupForPreview } from "react-email";
+} from '@react-email/components';
+import * as React from 'react';
+import { setupForPreview } from 'react-email';
 
 interface SlackConfirmEmailProps {
   validationCode: string;

diff --git a/packages/react-email/src/actions/get-preview-props.ts b/packages/react-email/src/actions/get-preview-props.ts
@@ -1,9 +1,12 @@
 'use server';
 
-import { cookies } from "next/headers";
-import type { Controls } from "../package";
+import { cookies } from 'next/headers';
+import type { Controls } from '../package';
 
-export const getPreviewProps = async (emailSlug: string, controls: Controls | undefined) => {
+export const getPreviewProps = async (
+  emailSlug: string,
+  controls: Controls | undefined,
+) => {
   const cookieStore = await cookies();
 
   const previewPropsCoookieName = `preview-props-${emailSlug.replaceAll('/', '-')}`;
@@ -12,7 +15,10 @@ export const getPreviewProps = async (emailSlug: string, controls: Controls | un
   let previewProps: Record<string, unknown>;
   try {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    previewProps = JSON.parse(previewPropsCookie!.value) as Record<string, unknown>;
+    previewProps = JSON.parse(previewPropsCookie!.value) as Record<
+      string,
+      unknown
+    >;
   } catch (exception) {
     previewProps = {};
     if (controls) {
@@ -23,4 +29,4 @@ export const getPreviewProps = async (emailSlug: string, controls: Controls | un
   }
 
   return previewProps;
-}
+};
diff --git a/packages/react-email/src/actions/render-email-by-path.tsx b/packages/react-email/src/actions/render-email-by-path.tsx
@@ -3,10 +3,13 @@ import path from 'node:path';
 import chalk from 'chalk';
 import logSymbols from 'log-symbols';
 import ora from 'ora';
+import {
+  cachedGetEmailComponent,
+  componentCache,
+} from '../utils/cached-get-email-component';
 import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
 import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping';
 import type { ErrorObject } from '../utils/types/error-object';
-import { cachedGetEmailComponent, componentCache } from '../utils/cached-get-email-component';
 
 export interface RenderedEmailMetadata {
   markup: string;
@@ -17,8 +20,8 @@ export interface RenderedEmailMetadata {
 export type EmailRenderingResult =
   | RenderedEmailMetadata
   | {
-    error: ErrorObject;
-  };
+      error: ErrorObject;
+    };
 
 const renderingResultCache = new Map<string, EmailRenderingResult>();
 
@@ -30,18 +33,18 @@ export const invalidateRenderingCache = async (emailPath: string) => {
 // eslint-disable-next-line @typescript-eslint/require-await
 export const invalidateComponentCache = async (emailPath: string) => {
   componentCache.delete(emailPath);
-}
+};
 
 export const renderEmailByPath = async (
   emailPath: string,
   props: object,
   {
     invalidatingComponentCache = false,
-    invalidatingRenderingCache = false
+    invalidatingRenderingCache = false,
   }: {
     invalidatingRenderingCache?: boolean;
     invalidatingComponentCache?: boolean;
-  } = {}
+  } = {},
 ): Promise<EmailRenderingResult> => {
   if (invalidatingRenderingCache) renderingResultCache.delete(emailPath);
 
@@ -58,7 +61,10 @@ export const renderEmailByPath = async (
   }).start();
   registerSpinnerAutostopping(spinner);
 
-  const componentResult = await cachedGetEmailComponent(emailPath, invalidatingComponentCache);
+  const componentResult = await cachedGetEmailComponent(
+    emailPath,
+    invalidatingComponentCache,
+  );
 
   if ('error' in componentResult) {
     spinner.stopAndPersist({

diff --git a/packages/react-email/src/app/preview/[...slug]/page.tsx b/packages/react-email/src/app/preview/[...slug]/page.tsx
@@ -1,14 +1,14 @@
 import path from 'node:path';
+import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
 import { Suspense } from 'react';
-import { cookies } from 'next/headers';
+import { getEmailControls } from '../../../actions/get-email-controls';
 import { getEmailPathFromSlug } from '../../../actions/get-email-path-from-slug';
+import { getPreviewProps } from '../../../actions/get-preview-props';
 import { renderEmailByPath } from '../../../actions/render-email-by-path';
 import { emailsDirectoryAbsolutePath } from '../../../utils/emails-directory-absolute-path';
 import { getEmailsDirectoryMetadata } from '../../../utils/get-emails-directory-metadata';
 import Home from '../../page';
-import { getEmailControls } from '../../../actions/get-email-controls';
-import { getPreviewProps } from '../../../actions/get-preview-props';
 import Preview from './preview';
 
 export const dynamicParams = true;

diff --git a/packages/react-email/src/app/preview/[...slug]/preview.tsx b/packages/react-email/src/app/preview/[...slug]/preview.tsx
@@ -4,20 +4,20 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import React, { useState } from 'react';
 import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
+import type { ControlsResult } from '../../../actions/get-email-controls';
 import {
-  renderEmailByPath,
   type EmailRenderingResult,
+  renderEmailByPath,
 } from '../../../actions/render-email-by-path';
+import { updatePreviewProps } from '../../../actions/update-preview-props';
 import { CodeContainer } from '../../../components/code-container';
+import { PreviewPropControls } from '../../../components/preview-prop-controls';
 import { Shell } from '../../../components/shell';
 import { Tooltip } from '../../../components/tooltip';
+import { useEmailControls } from '../../../hooks/use-email-controls';
 import { useEmailRenderingResult } from '../../../hooks/use-email-rendering-result';
 import { useHotreload } from '../../../hooks/use-hot-reload';
 import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
-import type { ControlsResult } from '../../../actions/get-email-controls';
-import { useEmailControls } from '../../../hooks/use-email-controls';
-import { updatePreviewProps } from '../../../actions/update-preview-props';
-import { PreviewPropControls } from '../../../components/preview-prop-controls';
 import { RenderingError } from './rendering-error';
 
 interface PreviewProps {

diff --git a/packages/react-email/src/components/preview-prop-controls.tsx b/packages/react-email/src/components/preview-prop-controls.tsx
@@ -1,5 +1,5 @@
-import * as Select from '@radix-ui/react-select';
 import * as Checkbox from '@radix-ui/react-checkbox';
+import * as Select from '@radix-ui/react-select';
 import type { Controls } from '../package';
 import { IconArrowDown } from './icons/icon-arrow-down';
 import { IconCheck } from './icons/icon-check';
@@ -61,14 +61,20 @@ export const PreviewPropControls = ({
                     }}
                     value={value as string}
                   >
-                    <Select.Trigger className="flex rounded-lg px-2 py-1 mb-3 outline-none w-full bg-slate-3 border placeholder-slate-10 border-slate-6 text-slate-12 text-sm focus:ring-1 focus:ring-slate-10 transition duration-300 ease-in-out" id={fieldId}>
+                    <Select.Trigger
+                      className="flex rounded-lg px-2 py-1 mb-3 outline-none w-full bg-slate-3 border placeholder-slate-10 border-slate-6 text-slate-12 text-sm focus:ring-1 focus:ring-slate-10 transition duration-300 ease-in-out"
+                      id={fieldId}
+                    >
                       <Select.Value />
                       <Select.Icon className="ml-auto">
                         <IconArrowDown />
                       </Select.Icon>
                     </Select.Trigger>
                     <Select.Portal>
-                      <Select.Content className="bg-[#0d0f0f] px-2 py-1 text-slate-12 rounded-lg border border-solid border-slate-6 text-sm" position='item-aligned'>
+                      <Select.Content
+                        className="bg-[#0d0f0f] px-2 py-1 text-slate-12 rounded-lg border border-solid border-slate-6 text-sm"
+                        position="item-aligned"
+                      >
                         <Select.Viewport>
                           {control.options.map((option) => (
                             <Select.Item

diff --git a/packages/react-email/src/hooks/use-email-controls.ts b/packages/react-email/src/hooks/use-email-controls.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import {
-  getEmailControls,
   type ControlsResult,
+  getEmailControls,
 } from '../actions/get-email-controls';
 import type { EmailRenderingResult } from '../actions/render-email-by-path';
 import type { Controls } from '../package';
@@ -18,7 +18,9 @@ export const useEmailControls = (
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       getEmailControls(emailPath)
-        .then((result) => { setEmailControlsResult(result); })
+        .then((result) => {
+          setEmailControlsResult(result);
+        })
         .catch((exception) => {
           throw new Error('Could not get controls after rendering email', {
             cause: exception,

diff --git a/packages/react-email/src/hooks/use-email-rendering-result.ts b/packages/react-email/src/hooks/use-email-rendering-result.ts
@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
+import { invalidateEmailComponentCache } from '../actions/invalidate-email-component-cache';
 import {
   type EmailRenderingResult,
-  renderEmailByPath,
-  invalidateRenderingCache,
   invalidateComponentCache,
+  invalidateRenderingCache,
+  renderEmailByPath,
 } from '../actions/render-email-by-path';
-import { invalidateEmailComponentCache } from '../actions/invalidate-email-component-cache';
 import { useHotreload } from './use-hot-reload';
 
 export const useEmailRenderingResult = (
@@ -40,7 +40,7 @@ export const useEmailRenderingResult = (
           setRenderingResult(
             await renderEmailByPath(pathForChangedEmail, previewProps, {
               invalidatingComponentCache: true,
-              invalidatingRenderingCache: true
+              invalidatingRenderingCache: true,
             }),
           );
         }

diff --git a/packages/react-email/src/package/setup-for-preview.ts b/packages/react-email/src/package/setup-for-preview.ts
@@ -1,29 +1,29 @@
 export type Control<ValueType> =
   | {
-    type: 'number';
-    defaultValue: ValueType;
-  }
+      type: 'number';
+      defaultValue: ValueType;
+    }
   | {
-    type: 'email' | 'text';
-    defaultValue: string;
-  }
+      type: 'email' | 'text';
+      defaultValue: string;
+    }
   | {
-    type: 'checkbox';
-    defaultValue: boolean;
-  }
+      type: 'checkbox';
+      defaultValue: boolean;
+    }
   | {
-    type: 'select';
-    options: { name: string; value: ValueType }[];
-    defaultValue: ValueType;
-  };
+      type: 'select';
+      options: { name: string; value: ValueType }[];
+      defaultValue: ValueType;
+    };
 
 type SafeControl<ValueType> = ValueType extends string
   ? Control<ValueType> & { type: 'email' | 'text' | 'select' }
   : ValueType extends number
-  ? Control<ValueType> & { type: 'number' }
-  : ValueType extends boolean
-  ? Control<ValueType> & { type: 'checkbox' }
-  : Control<ValueType>;
+    ? Control<ValueType> & { type: 'number' }
+    : ValueType extends boolean
+      ? Control<ValueType> & { type: 'checkbox' }
+      : Control<ValueType>;
 
 export type Controls<Props extends object = Record<string, unknown>> = {
   [K in keyof Props]?: SafeControl<Props[K]>;
@@ -38,4 +38,3 @@ export const setupForPreview = <Props extends object>(
 ) => {
   component.controls = controls;
 };
-