From 9f9d208f83ae9b1006604ccbc86f86250c7526b3 Mon Sep 17 00:00:00 2001 From: Andrew Powell Date: Wed, 10 Jan 2024 22:22:48 -0500 Subject: [PATCH] fix(jsx-email): properly handle different preview props. fixes #132 (#136) --- apps/preview/app/src/main.tsx | 3 ++- apps/test/fixtures/default-export-props-fn.tsx | 16 ++++++++++++++++ apps/test/fixtures/default-export.tsx | 14 ++++++++++++++ apps/test/fixtures/preview-props-fn.tsx | 13 +++++++++++++ apps/test/fixtures/preview-props-named.tsx | 11 +++++++++++ apps/test/fixtures/preview-props.tsx | 11 +++++++++++ ...ke.spec.ts-page-Default-Export-1-chromium.txt | 10 ++++++++++ ...s-page-Default-Export-Props-Fn-1-chromium.txt | 10 ++++++++++ ...oke.spec.ts-page-Preview-Props-1-chromium.txt | 10 ++++++++++ ....spec.ts-page-Preview-Props-Fn-1-chromium.txt | 10 ++++++++++ ...ec.ts-page-Preview-Props-Named-1-chromium.txt | 10 ++++++++++ apps/test/tests/smoke.spec.ts | 12 +++++++++++- 12 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 apps/test/fixtures/default-export-props-fn.tsx create mode 100644 apps/test/fixtures/default-export.tsx create mode 100644 apps/test/fixtures/preview-props-fn.tsx create mode 100644 apps/test/fixtures/preview-props-named.tsx create mode 100644 apps/test/fixtures/preview-props.tsx create mode 100644 apps/test/tests/.snapshots/smoke.spec.ts-page-Default-Export-1-chromium.txt create mode 100644 apps/test/tests/.snapshots/smoke.spec.ts-page-Default-Export-Props-Fn-1-chromium.txt create mode 100644 apps/test/tests/.snapshots/smoke.spec.ts-page-Preview-Props-1-chromium.txt create mode 100644 apps/test/tests/.snapshots/smoke.spec.ts-page-Preview-Props-Fn-1-chromium.txt create mode 100644 apps/test/tests/.snapshots/smoke.spec.ts-page-Preview-Props-Named-1-chromium.txt diff --git a/apps/preview/app/src/main.tsx b/apps/preview/app/src/main.tsx index 3612bd96..919d63a2 100644 --- 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 new file mode 100644 index 00000000..b86211da --- /dev/null +++ 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 }) => ( + + {test} + +); + +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 new file mode 100644 index 00000000..3984f684 --- /dev/null +++ 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 }) => ( + + {test} + +); + +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 new file mode 100644 index 00000000..e85003b6 --- /dev/null +++ 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 }) => ( + + {test} + +); + +Template.PreviewProps = () => { + return { test: 'batman' }; +}; diff --git a/apps/test/fixtures/preview-props-named.tsx b/apps/test/fixtures/preview-props-named.tsx new file mode 100644 index 00000000..378de9c0 --- /dev/null +++ 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 }) => ( + + {test} + +); + +export const PreviewProps = { test: 'batman' }; diff --git a/apps/test/fixtures/preview-props.tsx b/apps/test/fixtures/preview-props.tsx new file mode 100644 index 00000000..17f84711 --- /dev/null +++ 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 }) => ( + + {test} + +); + +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 new file mode 100644 index 00000000..2a696da9 --- /dev/null +++ b/apps/test/tests/.snapshots/smoke.spec.ts-page-Default-Export-1-chromium.txt @@ -0,0 +1,10 @@ + + + + + batman + + \ No newline at end of file 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 new file mode 100644 index 00000000..2a696da9 --- /dev/null +++ b/apps/test/tests/.snapshots/smoke.spec.ts-page-Default-Export-Props-Fn-1-chromium.txt @@ -0,0 +1,10 @@ + + + + + batman + + \ No newline at end of file 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 new file mode 100644 index 00000000..2a696da9 --- /dev/null +++ b/apps/test/tests/.snapshots/smoke.spec.ts-page-Preview-Props-1-chromium.txt @@ -0,0 +1,10 @@ + + + + + batman + + \ No newline at end of file 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 new file mode 100644 index 00000000..2a696da9 --- /dev/null +++ b/apps/test/tests/.snapshots/smoke.spec.ts-page-Preview-Props-Fn-1-chromium.txt @@ -0,0 +1,10 @@ + + + + + batman + + \ No newline at end of file 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 new file mode 100644 index 00000000..2a696da9 --- /dev/null +++ b/apps/test/tests/.snapshots/smoke.spec.ts-page-Preview-Props-Named-1-chromium.txt @@ -0,0 +1,10 @@ + + + + + batman + + \ No newline at end of file diff --git a/apps/test/tests/smoke.spec.ts b/apps/test/tests/smoke.spec.ts index 9c95e185..d88a1aef 100644 --- 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 }) => {