diff --git a/src/emails/emails.ts b/src/emails/emails.ts index ad3461dd..a48e9ede 100644 --- a/src/emails/emails.ts +++ b/src/emails/emails.ts @@ -1,4 +1,3 @@ -import type * as React from 'react'; import { buildPaginationQuery } from '../common/utils/build-pagination-query'; import { parseEmailToApiOptions } from '../common/utils/parse-email-to-api-options'; import { render } from '../render'; @@ -53,7 +52,7 @@ export class Emails { const body: CreateEmailOptions = { ...payload }; if (payload.react) { - body.html = await render(payload.react as React.ReactElement); + body.html = await render(payload.react); } const data = await this.resend.post( diff --git a/src/templates/templates.spec.ts b/src/templates/templates.spec.ts index cacb6bc7..2780faa4 100644 --- a/src/templates/templates.spec.ts +++ b/src/templates/templates.spec.ts @@ -16,9 +16,9 @@ import type { UpdateTemplateOptions } from './interfaces/update-template.interfa const fetchMocker = createFetchMock(vi); fetchMocker.enableMocks(); -const mockRenderAsync = vi.fn(); +const mockRender = vi.fn(); vi.mock('@react-email/render', () => ({ - renderAsync: mockRenderAsync, + render: mockRender, })); const TEST_API_KEY = 're_test_api_key'; @@ -151,7 +151,7 @@ describe('Templates', () => { props: { children: 'Welcome!' }, } as React.ReactElement; - mockRenderAsync.mockResolvedValueOnce('
Welcome!
'); + mockRender.mockResolvedValueOnce('
Welcome!
'); const payload: CreateTemplateOptions = { name: 'Welcome Email', @@ -181,7 +181,7 @@ describe('Templates', () => { } `); - expect(mockRenderAsync).toHaveBeenCalledWith(mockReactComponent); + expect(mockRender).toHaveBeenCalledWith(mockReactComponent); }); it('creates template with React component and all optional fields', async () => { @@ -195,7 +195,7 @@ describe('Templates', () => { }, } as React.ReactElement; - mockRenderAsync.mockResolvedValueOnce( + mockRender.mockResolvedValueOnce( '

Welcome {{{name}}}!

Welcome to {{{company}}}.

', ); @@ -244,7 +244,7 @@ describe('Templates', () => { } `); - expect(mockRenderAsync).toHaveBeenCalledWith(mockReactComponent); + expect(mockRender).toHaveBeenCalledWith(mockReactComponent); }); it('does not mutate payload when using React component', async () => { @@ -253,7 +253,7 @@ describe('Templates', () => { props: { children: 'Welcome!' }, } as React.ReactElement; - mockRenderAsync.mockResolvedValueOnce('
Welcome!
'); + mockRender.mockResolvedValueOnce('
Welcome!
'); const payload: CreateTemplateOptions = { name: 'Welcome Email', @@ -282,7 +282,7 @@ describe('Templates', () => { } as React.ReactElement; // Temporarily clear the mock implementation to simulate module load failure - mockRenderAsync.mockImplementationOnce(() => { + mockRender.mockImplementationOnce(() => { throw new Error( 'Failed to render React component. Make sure to install `@react-email/render`', ); diff --git a/src/templates/templates.ts b/src/templates/templates.ts index 8220a8a3..2e232bdd 100644 --- a/src/templates/templates.ts +++ b/src/templates/templates.ts @@ -1,6 +1,7 @@ import type { PaginationOptions } from '../common/interfaces'; import { getPaginationQueryProperties } from '../common/utils/get-pagination-query-properties'; import { parseTemplateToApiOptions } from '../common/utils/parse-template-to-api-options'; +import { render } from '../render'; import type { Resend } from '../resend'; import { ChainableTemplateResult } from './chainable-template-result'; import type { @@ -35,7 +36,6 @@ import type { } from './interfaces/update-template.interface'; export class Templates { - private renderAsync?: (component: React.ReactElement) => Promise; constructor(private readonly resend: Resend) {} create( @@ -46,7 +46,7 @@ export class Templates { } // This creation process is being done separately from the public create so that // the user can chain the publish operation after the create operation. Otherwise, due - // to the async nature of the renderAsync, the return type would be + // to the async nature of the render, the return type would be // Promise> which wouldn't be chainable. private async performCreate( payload: CreateTemplateOptions, @@ -54,18 +54,7 @@ export class Templates { const body: CreateTemplateOptions = { ...payload }; if (payload.react) { - if (!this.renderAsync) { - try { - const { renderAsync } = await import('@react-email/render'); - this.renderAsync = renderAsync; - } catch { - throw new Error( - 'Failed to render React component. Make sure to install `@react-email/render`', - ); - } - } - - body.html = await this.renderAsync(payload.react as React.ReactElement); + body.html = await render(payload.react); } return this.resend.post(