feat(render): with render options function

Author: emiliosheinz

packages/render/src/browser/index.ts

@@ -11,4 +11,5 @@ export const renderAsync = (element: React.ReactElement, options?: Options) => {
 export * from '../shared/options';
 export * from '../shared/plain-text-selectors';
 export * from '../shared/utils/pretty';
+export { type PropsWithRenderOptions, withRenderOptions } from '../shared/with-render-options';
 export * from './render';

packages/render/src/browser/render-web.spec.tsx

@@ -8,6 +8,7 @@ import type { Options } from '../shared/options';
 import { Preview } from '../shared/utils/preview';
 import { Template } from '../shared/utils/template';
 import { render } from './render';
+import { withRenderOptions } from '../shared/with-render-options';
 
 type Import = typeof import('react-dom/server') & {
   default: typeof import('react-dom/server');
@@ -148,21 +149,36 @@ describe('render on the browser environment', () => {
     await expect(render(element)).rejects.toThrowErrorMatchingSnapshot();
   });
 
+  it('passes render options to components wrapped with withRenderOptions', async () => {
+    type TemplateWithOptionsProps = { id: string };
+    const TemplateWithOptions = withRenderOptions<TemplateWithOptionsProps>(
+      (props) => {
+        return JSON.stringify(props);
+      },
+    );
 
-  it('passes render options to the rendered component', async () => {
-    type TemplateWithOptionsProps = {
-      reactEmailRenderOptions?: Options;
-    };
-    const TemplateWithOptions = ({
-      reactEmailRenderOptions,
-    }: TemplateWithOptionsProps) => {
-      return JSON.stringify(reactEmailRenderOptions);
+    const actualOutput = await render(
+      <TemplateWithOptions id="acbb4738-5a5e-4243-9b29-02cee9b8db57" />,
+      { plainText: true },
+    );
+
+    const expectedOutput =
+      '"{"id":"acbb4738-5a5e-4243-9b29-02cee9b8db57","renderOptions":{"plainText":true}}"';
+    expect(actualOutput).toMatchInlineSnapshot(expectedOutput);
+  });
+
+  it('does not pass render options to components not wrapped with withRenderOptions', async () => {
+    type TemplateWithOptionsProps = { id: string };
+    const TemplateWithOptions = (props: TemplateWithOptionsProps) => {
+      return JSON.stringify(props);
     };
 
-    const actualOutput = await render(<TemplateWithOptions />, {
-      plainText: true,
-    });
+    const actualOutput = await render(
+      <TemplateWithOptions id="acbb4738-5a5e-4243-9b29-02cee9b8db57" />,
+      { plainText: true },
+    );
 
-    expect(actualOutput).toMatchInlineSnapshot('"{"plainText":true}"');
+    const expectedOutput = '"{"id":"acbb4738-5a5e-4243-9b29-02cee9b8db57"}"';
+    expect(actualOutput).toMatchInlineSnapshot(expectedOutput);
   });
 });

packages/render/src/browser/render.tsx

@@ -4,7 +4,7 @@ import type { ReactDOMServerReadableStream } from 'react-dom/server';
 import { pretty } from '../node';
 import type { Options } from '../shared/options';
 import { plainTextSelectors } from '../shared/plain-text-selectors';
-import { withAdditionalProps } from '../shared/with-additional-props';
+import { injectRenderOptions } from '../shared/with-render-options';
 
 const decoder = new TextDecoder('utf-8');
 
@@ -40,8 +40,8 @@ const readStream = async (stream: ReactDOMServerReadableStream) => {
 };
 
 export const render = async (node: React.ReactNode, options?: Options) => {
-  const nodeWithAdditionalProps = withAdditionalProps(node, options);
-  const suspendedElement = <Suspense>{nodeWithAdditionalProps}</Suspense>;
+  const nodeWithRenderOptionsProps = injectRenderOptions(node, options);
+  const suspendedElement = <Suspense>{nodeWithRenderOptionsProps}</Suspense>;
   const reactDOMServer = await import('react-dom/server.browser').then(
     // This is beacuse react-dom/server is CJS
     (m) => m.default,

packages/render/src/node/index.ts

@@ -11,4 +11,5 @@ export const renderAsync = (element: React.ReactElement, options?: Options) => {
 export * from '../shared/options';
 export * from '../shared/plain-text-selectors';
 export * from '../shared/utils/pretty';
+export { type PropsWithRenderOptions, withRenderOptions } from '../shared/with-render-options';
 export * from './render';

packages/render/src/node/render-edge.spec.tsx

@@ -1,6 +1,7 @@
 import type { Options } from '../shared/options';
 import { Preview } from '../shared/utils/preview';
 import { Template } from '../shared/utils/template';
+import { withRenderOptions } from '../shared/with-render-options';
 import { render } from './render';
 
 type Import = typeof import('react-dom/server') & {
@@ -110,20 +111,35 @@ describe('render on the edge', () => {
   });
 
 
-  it('passes render options to the rendered component', async () => {
-    type TemplateWithOptionsProps = {
-      reactEmailRenderOptions?: Options;
-    };
-    const TemplateWithOptions = ({
-      reactEmailRenderOptions,
-    }: TemplateWithOptionsProps) => {
-      return JSON.stringify(reactEmailRenderOptions);
+  it('passes render options to components wrapped with withRenderOptions', async () => {
+    type TemplateWithOptionsProps = { id: string };
+    const TemplateWithOptions = withRenderOptions<TemplateWithOptionsProps>(
+      (props) => {
+        return JSON.stringify(props);
+      },
+    );
+
+    const actualOutput = await render(
+      <TemplateWithOptions id="acbb4738-5a5e-4243-9b29-02cee9b8db57" />,
+      { plainText: true },
+    );
+
+    const expectedOutput = '"{"id":"acbb4738-5a5e-4243-9b29-02cee9b8db57","renderOptions":{"plainText":true}}"'
+    expect(actualOutput).toMatchInlineSnapshot(expectedOutput);
+  });
+
+  it('does not pass render options to components not wrapped with withRenderOptions', async () => {
+    type TemplateWithOptionsProps = { id: string };
+    const TemplateWithOptions = (props: TemplateWithOptionsProps) => {
+      return JSON.stringify(props);
     };
 
-    const actualOutput = await render(<TemplateWithOptions />, {
-      plainText: true,
-    });
+    const actualOutput = await render(
+      <TemplateWithOptions id="acbb4738-5a5e-4243-9b29-02cee9b8db57" />,
+      { plainText: true },
+    );
 
-    expect(actualOutput).toMatchInlineSnapshot('"{"plainText":true}"');
+    const expectedOutput = '"{"id":"acbb4738-5a5e-4243-9b29-02cee9b8db57"}"'
+    expect(actualOutput).toMatchInlineSnapshot(expectedOutput);
   });
 });

packages/render/src/node/render-node.spec.tsx

@@ -8,6 +8,7 @@ import type { Options } from '../shared/options';
 import { Preview } from '../shared/utils/preview';
 import { Template } from '../shared/utils/template';
 import { render } from './render';
+import { withRenderOptions } from '../browser';
 
 type Import = typeof import('react-dom/server') & {
   default: typeof import('react-dom/server');
@@ -135,20 +136,36 @@ describe('render on node environments', () => {
     );
   });
 
-  it('passes render options to the rendered component', async () => {
-    type TemplateWithOptionsProps = {
-      reactEmailRenderOptions?: Options;
-    };
-    const TemplateWithOptions = ({
-      reactEmailRenderOptions,
-    }: TemplateWithOptionsProps) => {
-      return JSON.stringify(reactEmailRenderOptions);
+  it('passes render options to components wrapped with withRenderOptions', async () => {
+    type TemplateWithOptionsProps = { id: string };
+    const TemplateWithOptions = withRenderOptions<TemplateWithOptionsProps>(
+      (props) => {
+        return JSON.stringify(props);
+      },
+    );
+
+    const actualOutput = await render(
+      <TemplateWithOptions id="acbb4738-5a5e-4243-9b29-02cee9b8db57" />,
+      { plainText: true },
+    );
+
+    const expectedOutput =
+      '"{"id":"acbb4738-5a5e-4243-9b29-02cee9b8db57","renderOptions":{"plainText":true}}"';
+    expect(actualOutput).toMatchInlineSnapshot(expectedOutput);
+  });
+
+  it('does not pass render options to components not wrapped with withRenderOptions', async () => {
+    type TemplateWithOptionsProps = { id: string };
+    const TemplateWithOptions = (props: TemplateWithOptionsProps) => {
+      return JSON.stringify(props);
     };
 
-    const actualOutput = await render(<TemplateWithOptions />, {
-      plainText: true,
-    });
+    const actualOutput = await render(
+      <TemplateWithOptions id="acbb4738-5a5e-4243-9b29-02cee9b8db57" />,
+      { plainText: true },
+    );
 
-    expect(actualOutput).toMatchInlineSnapshot('"{"plainText":true}"');
+    const expectedOutput = '"{"id":"acbb4738-5a5e-4243-9b29-02cee9b8db57"}"';
+    expect(actualOutput).toMatchInlineSnapshot(expectedOutput);
   });
 });

packages/render/src/node/render.tsx

@@ -3,12 +3,12 @@ import { Suspense } from 'react';
 import type { Options } from '../shared/options';
 import { plainTextSelectors } from '../shared/plain-text-selectors';
 import { pretty } from '../shared/utils/pretty';
-import { withAdditionalProps } from '../shared/with-additional-props';
+import { injectRenderOptions } from '../shared/with-render-options';
 import { readStream } from './read-stream';
 
 export const render = async (node: React.ReactNode, options?: Options) => {
-  const nodeWithAdditionalProps = withAdditionalProps(node, options);
-  const suspendedElement = <Suspense>{nodeWithAdditionalProps}</Suspense>;
+  const nodeWithRenderOptionsProps = injectRenderOptions(node, options);
+  const suspendedElement = <Suspense>{nodeWithRenderOptionsProps}</Suspense>;
   const reactDOMServer = await import('react-dom/server').then(
     // This is beacuse react-dom/server is CJS
     (m) => m.default,

packages/render/src/shared/with-additional-props.ts

@@ -0,0 +1,76 @@
+import {
+  type ComponentType,
+  cloneElement,
+  isValidElement,
+  type ReactNode,
+} from 'react';
+import type { Options } from './options';
+
+const RENDER_OPTIONS_SYMBOL = Symbol.for('react-email.withRenderOptions');
+
+/** Extends component props with optional render options. */
+export type PropsWithRenderOptions<P = unknown> = P & {
+  renderOptions?: Options;
+};
+
+/** Component wrapped with withRenderOptions, marked with a symbol. */
+type ComponentWithRenderOptions<P = unknown> = ComponentType<
+  PropsWithRenderOptions<P>
+> & {
+  [RENDER_OPTIONS_SYMBOL]: true;
+};
+
+/**
+ * Wraps a component to receive render options as props.
+ *
+ * @param Component - The component to wrap.
+ * @return A component that accepts `renderOptions` prop.
+ *
+ * @example
+ * ```tsx
+ * export const EmailTemplate = withRenderOptions(({ renderOptions }) => {
+ *   if (renderOptions?.plainText) {
+ *     return 'Plain text version';
+ *   }
+ *   return <div><h1>HTML version</h1></div>;
+ * });
+ * ```
+ */
+export function withRenderOptions<P = unknown>(
+  Component: ComponentType<PropsWithRenderOptions<P>>,
+): ComponentWithRenderOptions<P> {
+  const WrappedComponent = Component as ComponentWithRenderOptions<P>;
+  WrappedComponent[RENDER_OPTIONS_SYMBOL] = true;
+  WrappedComponent.displayName = `withRenderOptions(${Component.displayName || Component.name || 'Component'})`;
+  return WrappedComponent;
+}
+
+/** @internal */
+function isWithRenderOptionsComponent(
+  component: unknown,
+): component is ComponentWithRenderOptions {
+  return (
+    !!component &&
+    typeof component === 'function' &&
+    RENDER_OPTIONS_SYMBOL in component &&
+    component[RENDER_OPTIONS_SYMBOL] === true
+  );
+}
+
+/**
+ * Injects render options into components wrapped with `withRenderOptions`.
+ * Returns node unchanged if not wrapped or not a valid element.
+ *
+ * @param node - The React node to inject options into.
+ * @param options - The render options to inject.
+ * @returns The node with injected options if applicable, otherwise the original node.
+ */
+export function injectRenderOptions(
+  node: ReactNode,
+  options?: Options,
+): ReactNode {
+  if (!isValidElement(node)) return node;
+  if (!isWithRenderOptionsComponent(node.type)) return node;
+  const renderOptionsProps = { renderOptions: options };
+  return cloneElement(node, renderOptionsProps);
+}