feat(render): pass options to rendered component

Author: emiliosheinz

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

@@ -4,6 +4,7 @@
 
 import { createElement } from 'react';
 import usePromise from 'react-promise-suspense';
+import type { Options } from '../shared/options';
 import { Preview } from '../shared/utils/preview';
 import { Template } from '../shared/utils/template';
 import { render } from './render';
@@ -146,4 +147,22 @@ describe('render on the browser environment', () => {
     const element = createElement(undefined);
     await expect(render(element)).rejects.toThrowErrorMatchingSnapshot();
   });
+
+
+  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 />, {
+      plainText: true,
+    });
+
+    expect(actualOutput).toMatchInlineSnapshot('"{"plainText":true}"');
+  });
 });

packages/render/src/browser/render.tsx

@@ -4,6 +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';
 
 const decoder = new TextDecoder('utf-8');
 
@@ -39,7 +40,8 @@ const readStream = async (stream: ReactDOMServerReadableStream) => {
 };
 
 export const render = async (node: React.ReactNode, options?: Options) => {
-  const suspendedElement = <Suspense>{node}</Suspense>;
+  const nodeWithAdditionalProps = withAdditionalProps(node, options);
+  const suspendedElement = <Suspense>{nodeWithAdditionalProps}</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/render-edge.spec.tsx

@@ -1,3 +1,4 @@
+import type { Options } from '../shared/options';
 import { Preview } from '../shared/utils/preview';
 import { Template } from '../shared/utils/template';
 import { render } from './render';
@@ -107,4 +108,22 @@ describe('render on the edge', () => {
       `"THIS SHOULD BE RENDERED IN PLAIN TEXT"`,
     );
   });
+
+
+  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 />, {
+      plainText: true,
+    });
+
+    expect(actualOutput).toMatchInlineSnapshot('"{"plainText":true}"');
+  });
 });

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

@@ -4,6 +4,7 @@
 
 import { Suspense } from 'react';
 import usePromise from 'react-promise-suspense';
+import type { Options } from '../shared/options';
 import { Preview } from '../shared/utils/preview';
 import { Template } from '../shared/utils/template';
 import { render } from './render';
@@ -133,4 +134,21 @@ describe('render on node environments', () => {
       `"THIS SHOULD BE RENDERED IN PLAIN TEXT"`,
     );
   });
+
+  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 />, {
+      plainText: true,
+    });
+
+    expect(actualOutput).toMatchInlineSnapshot('"{"plainText":true}"');
+  });
 });

packages/render/src/node/render.tsx

@@ -3,10 +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 { readStream } from './read-stream';
 
 export const render = async (node: React.ReactNode, options?: Options) => {
-  const suspendedElement = <Suspense>{node}</Suspense>;
+  const nodeWithAdditionalProps = withAdditionalProps(node, options);
+  const suspendedElement = <Suspense>{nodeWithAdditionalProps}</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,11 @@
+import { cloneElement, isValidElement } from 'react';
+import type { Options } from './options';
+
+export const withAdditionalProps = (
+  node: React.ReactNode,
+  options?: Options,
+): React.ReactNode => {
+  if (!isValidElement(node)) return node;
+  const additionalProps = { reactEmailRenderOptions: options };
+  return cloneElement(node, additionalProps);
+};