fix(jsx-email): properly handle different preview props. fixes #132 (#…

…136)
shellscape · Jan 11, 2024 · 9f9d208 · 9f9d208
1 parent a8dd381
commit 9f9d208
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 2 deletions.
diff --git a/apps/preview/app/src/main.tsx b/apps/preview/app/src/main.tsx
@@ -70,7 +70,8 @@ const templateRoutes = templates.map(async (template) => {
   let props: any;
 
   if (TemplateStruct) props = create({}, TemplateStruct);
-  else if (PreviewProps) props = PreviewProps();
+  else if (typeof PreviewProps === 'function') props = PreviewProps();
+  else if (PreviewProps) props = PreviewProps;
   else if ((Template as any).PreviewProps) {
     warn(
       `jsx-email: ${Name} → PreviewProps as a property of a component is deprecated. Please used a named export.`

diff --git a/apps/test/fixtures/default-export-props-fn.tsx b/apps/test/fixtures/default-export-props-fn.tsx
@@ -0,0 +1,16 @@
+import { Body, Html } from 'jsx-email';
+
+export const TemplateName = 'default-export-props-fn';
+
+const Template = ({ test }: { test: string }) => (
+  <Html>
+    <Body>{test}</Body>
+  </Html>
+);
+
+Template.PreviewProps = () => {
+  return { test: 'batman' };
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Template;
diff --git a/apps/test/fixtures/default-export.tsx b/apps/test/fixtures/default-export.tsx
@@ -0,0 +1,14 @@
+import { Body, Html } from 'jsx-email';
+
+export const TemplateName = 'default-export';
+
+const Template = ({ test }: { test: string }) => (
+  <Html>
+    <Body>{test}</Body>
+  </Html>
+);
+
+Template.PreviewProps = { test: 'batman' };
+
+// eslint-disable-next-line import/no-default-export
+export default Template;
diff --git a/apps/test/fixtures/preview-props-fn.tsx b/apps/test/fixtures/preview-props-fn.tsx
@@ -0,0 +1,13 @@
+import { Body, Html } from 'jsx-email';
+
+export const TemplateName = 'preview-props-fn';
+
+export const Template = ({ test }: { test: string }) => (
+  <Html>
+    <Body>{test}</Body>
+  </Html>
+);
+
+Template.PreviewProps = () => {
+  return { test: 'batman' };
+};
diff --git a/apps/test/fixtures/preview-props-named.tsx b/apps/test/fixtures/preview-props-named.tsx
@@ -0,0 +1,11 @@
+import { Body, Html } from 'jsx-email';
+
+export const TemplateName = 'preview-props';
+
+export const Template = ({ test }: { test: string }) => (
+  <Html>
+    <Body>{test}</Body>
+  </Html>
+);
+
+export const PreviewProps = { test: 'batman' };
diff --git a/apps/test/fixtures/preview-props.tsx b/apps/test/fixtures/preview-props.tsx
@@ -0,0 +1,11 @@
+import { Body, Html } from 'jsx-email';
+
+export const TemplateName = 'preview-props';
+
+export const Template = ({ test }: { test: string }) => (
+  <Html>
+    <Body>{test}</Body>
+  </Html>
+);
+
+Template.PreviewProps = { test: 'batman' };
diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-page-Default-Export-1-chromium.txt b/apps/test/tests/.snapshots/smoke.spec.ts-page-Default-Export-1-chromium.txt
@@ -0,0 +1,10 @@
+<html
+  lang="en"
+  dir="ltr"
+>
+  <head>
+  </head>
+  <body>
+    batman
+  </body>
+</html>
diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-page-Default-Export-Props-Fn-1-chromium.txt b/apps/test/tests/.snapshots/smoke.spec.ts-page-Default-Export-Props-Fn-1-chromium.txt
@@ -0,0 +1,10 @@
+<html
+  lang="en"
+  dir="ltr"
+>
+  <head>
+  </head>
+  <body>
+    batman
+  </body>
+</html>
diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-page-Preview-Props-1-chromium.txt b/apps/test/tests/.snapshots/smoke.spec.ts-page-Preview-Props-1-chromium.txt
@@ -0,0 +1,10 @@
+<html
+  lang="en"
+  dir="ltr"
+>
+  <head>
+  </head>
+  <body>
+    batman
+  </body>
+</html>
diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-page-Preview-Props-Fn-1-chromium.txt b/apps/test/tests/.snapshots/smoke.spec.ts-page-Preview-Props-Fn-1-chromium.txt
@@ -0,0 +1,10 @@
+<html
+  lang="en"
+  dir="ltr"
+>
+  <head>
+  </head>
+  <body>
+    batman
+  </body>
+</html>
diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-page-Preview-Props-Named-1-chromium.txt b/apps/test/tests/.snapshots/smoke.spec.ts-page-Preview-Props-Named-1-chromium.txt
@@ -0,0 +1,10 @@
+<html
+  lang="en"
+  dir="ltr"
+>
+  <head>
+  </head>
+  <body>
+    batman
+  </body>
+</html>
diff --git a/apps/test/tests/smoke.spec.ts b/apps/test/tests/smoke.spec.ts
@@ -19,7 +19,17 @@ test('landing', async ({ page }) => {
   await expect(page.locator('#link-Base')).toBeVisible();
 });
 
-const pages = ['Base', 'Code', 'Local-Assets', 'Tailwind'];
+const pages = [
+  'Base',
+  'Code',
+  'Default-Export',
+  'Default-Export-Props-Fn',
+  'Local-Assets',
+  'Preview-Props',
+  'Preview-Props-Fn',
+  'Preview-Props-Named',
+  'Tailwind'
+];
 
 pages.forEach((name) => {
   test(`page: ${name}`, async ({ page }) => {