From d2bc0a66e60c32b9a7802f182534c97feaaff1cf Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 16 Jan 2025 13:47:12 -0300 Subject: [PATCH] lint --- .../emails/magic-links/aws-verify-email.tsx | 6 ++-- .../magic-links/jobaccepted-magic-link.tsx | 10 +++--- .../emails/magic-links/linear-login-code.tsx | 4 +-- .../emails/magic-links/notion-magic-link.tsx | 6 ++-- .../magic-links/plaid-verify-identity.tsx | 10 +++--- .../emails/magic-links/raycast-magic-link.tsx | 10 +++--- .../demo/emails/magic-links/slack-confirm.tsx | 6 ++-- .../src/actions/get-preview-props.ts | 16 ++++++--- .../src/actions/render-email-by-path.tsx | 20 +++++++---- .../src/app/preview/[...slug]/page.tsx | 6 ++-- .../src/app/preview/[...slug]/preview.tsx | 10 +++--- .../src/components/preview-prop-controls.tsx | 12 +++++-- .../src/hooks/use-email-controls.ts | 6 ++-- .../src/hooks/use-email-rendering-result.ts | 8 ++--- .../src/package/setup-for-preview.ts | 35 +++++++++---------- .../src/utils/cached-get-email-component.ts | 5 ++- .../src/utils/get-email-component.spec.ts | 5 +-- .../src/utils/get-email-component.ts | 6 ++-- 18 files changed, 100 insertions(+), 81 deletions(-) diff --git a/apps/demo/emails/magic-links/aws-verify-email.tsx b/apps/demo/emails/magic-links/aws-verify-email.tsx index 85622c8a0e..239a864748 100644 --- 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; @@ -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 index 495a7fbd15..e1b85fd462 100644 --- 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 index 56595439aa..3f435167a5 100644 --- 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 index d5706e9b57..5261fe81de 100644 --- 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 index 9c7a68af70..20468b21bb 100644 --- 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 index 819a582a1f..907f85860e 100644 --- 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 index 811d0064aa..d7b9e654a8 100644 --- 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 index 36c91959a4..33f3dbeb55 100644 --- 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; try { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - previewProps = JSON.parse(previewPropsCookie!.value) as Record; + 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 index d36b2ade28..285398d8c6 100644 --- 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(); @@ -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 => { 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 index fe4f31a688..19dec9bbaa 100644 --- 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 index 842b64f49e..f7d1d6aa32 100644 --- 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 index 09ef8949be..513d73d4d6 100644 --- 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} > - + - + {control.options.map((option) => ( { 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 index ceb52bd776..d3b3c4f9d3 100644 --- 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 index 6674c83235..958b44cda9 100644 --- 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 = | { - 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 extends string ? Control & { type: 'email' | 'text' | 'select' } : ValueType extends number - ? Control & { type: 'number' } - : ValueType extends boolean - ? Control & { type: 'checkbox' } - : Control; + ? Control & { type: 'number' } + : ValueType extends boolean + ? Control & { type: 'checkbox' } + : Control; export type Controls> = { [K in keyof Props]?: SafeControl; @@ -38,4 +38,3 @@ export const setupForPreview = ( ) => { component.controls = controls; }; - diff --git a/packages/react-email/src/utils/cached-get-email-component.ts b/packages/react-email/src/utils/cached-get-email-component.ts index 3cb77f4d85..40d707c0c0 100644 --- a/packages/react-email/src/utils/cached-get-email-component.ts +++ b/packages/react-email/src/utils/cached-get-email-component.ts @@ -1,4 +1,7 @@ -import { getEmailComponent, type GetEmailComponentResult } from './get-email-component'; +import { + type GetEmailComponentResult, + getEmailComponent, +} from './get-email-component'; export const componentCache = new Map(); diff --git a/packages/react-email/src/utils/get-email-component.spec.ts b/packages/react-email/src/utils/get-email-component.spec.ts index 743aa05a20..5b317d7510 100644 --- a/packages/react-email/src/utils/get-email-component.spec.ts +++ b/packages/react-email/src/utils/get-email-component.spec.ts @@ -30,10 +30,7 @@ describe('getEmailComponent()', () => { expect(result.sourceMapToOriginalFile).toBeTruthy(); const emailHtml = await result.render( - result.createElement( - result.emailComponent, - {}, - ), + result.createElement(result.emailComponent, {}), ); expect(emailHtml).toMatchSnapshot(); } diff --git a/packages/react-email/src/utils/get-email-component.ts b/packages/react-email/src/utils/get-email-component.ts index 63dc21292c..63a12392d5 100644 --- a/packages/react-email/src/utils/get-email-component.ts +++ b/packages/react-email/src/utils/get-email-component.ts @@ -1,11 +1,11 @@ +import fs from 'node:fs'; /* eslint-disable @typescript-eslint/no-non-null-assertion */ import path from 'node:path'; import vm from 'node:vm'; -import fs from 'node:fs'; +import type { render } from '@react-email/render'; +import { type BuildFailure, type OutputFile, build } from 'esbuild'; import type React from 'react'; import type { RawSourceMap } from 'source-map-js'; -import { type OutputFile, build, type BuildFailure } from 'esbuild'; -import type { render } from '@react-email/render'; import { renderingUtilitiesExporter } from './esbuild/renderring-utilities-exporter'; import { improveErrorWithSourceMap } from './improve-error-with-sourcemap'; import { staticNodeModulesForVM } from './static-node-modules-for-vm';