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 }) => {