Skip to content

Commit 735061b

Browse files
shellscapeshellscape
authored
fix(jsx-email,create-jsx-email): consolidate and fix TS types in template (#242)
1 parent 3b5eed8 commit 735061b

File tree

6 files changed

+115
-6
lines changed

6 files changed

+115
-6
lines changed

‎assets/templates/email.mustache

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const paragraph = {
3737
color: '#777',
3838
fontSize: '16px',
3939
lineHeight: '24px',
40-
textAlign: 'left' as const
40+
textAlign: 'left'{{ asConst }}
4141
};
4242

4343
const anchor = {
@@ -50,7 +50,7 @@ const button = {
5050
textDecoration: 'none'
5151
};
5252

53-
export const previewProps = {
53+
export const previewProps{{ propsType }} = {
5454
email: '[email protected]',
5555
name: 'Bruce Wayne'
5656
};

‎packages/create-jsx-email/src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ const isEmpty = (path: string) => {
4747
};
4848
const { log } = console;
4949
const normalizePath = (filename: string) => filename.split(win32.sep).join(posix.sep);
50+
const asConst = ' as const';
5051
const typeDep = ',\n"@types/react": "^18.2.0",\n"typescript": "^5.2.2"';
5152
const typeProps = `\ninterface TemplateProps {
5253
email: string;
@@ -57,6 +58,7 @@ const argTargetDir: string = argv._[0] as string;
5758

5859
export const createEmail = async ({ jsx, name, outputPath }: CreateEmailArgs) => {
5960
const data = {
61+
asConst: jsx ? '' : asConst,
6062
name,
6163
propsType: jsx ? '' : ': TemplateProps',
6264
typeProps: jsx ? '' : typeProps

‎packages/jsx-email/src/cli/commands/create.mts

+8-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ const CreateOptionsStruct = object({
1616
jsx: optional(boolean()),
1717
out: optional(string())
1818
});
19+
const asConst = ' as const';
20+
const typeProps = `\ninterface TemplateProps {
21+
email: string;
22+
name: string;
23+
}\n`;
1924

2025
type CreateOptions = Infer<typeof CreateOptionsStruct>;
2126

@@ -45,8 +50,10 @@ export const command: CommandFn = async (argv: CreateOptions, input) => {
4550
const { jsx, out } = argv;
4651
const template = await readFile(join(__dirname, '../../../templates/email.mustache'), 'utf8');
4752
const data = {
53+
asConst: jsx ? '' : asConst,
4854
name,
49-
propsType: jsx ? '' : ': typeof previewProps'
55+
propsType: jsx ? '' : ': TemplateProps',
56+
typeProps: jsx ? '' : typeProps
5057
};
5158
const newContent = mustache.render(template, data);
5259
const outPath = resolve(out || process.cwd());

‎test/cli/.snapshots/create-jsx-email.test.ts.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const button = {
8080
textDecoration: 'none'
8181
};
8282
83-
export const previewProps = {
83+
export const previewProps: TemplateProps = {
8484
email: '[email protected]',
8585
name: 'Bruce Wayne'
8686
};

‎test/cli/.snapshots/create.test.ts.snap

+101-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,103 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`cli > esbuild plugins 1`] = `Promise {}`;
3+
exports[`cli > esbuild plugins 1`] = `
4+
"import {
5+
Body,
6+
Button,
7+
Container,
8+
Head,
9+
Hr,
10+
Html,
11+
Link,
12+
Preview,
13+
Section,
14+
Text
15+
} from 'jsx-email';
16+
17+
interface TemplateProps {
18+
email: string;
19+
name: string;
20+
}
21+
22+
const main = {
23+
backgroundColor: '#f6f9fc',
24+
fontFamily:
25+
'-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,\\"Helvetica Neue\\",Ubuntu,sans-serif'
26+
};
27+
28+
const container = {
29+
backgroundColor: '#ffffff',
30+
margin: '0 auto',
31+
marginBottom: '64px',
32+
padding: '20px 0 48px'
33+
};
34+
35+
const box = {
36+
padding: '0 48px'
37+
};
38+
39+
const hr = {
40+
borderColor: '#e6ebf1',
41+
margin: '20px 0'
42+
};
43+
44+
const paragraph = {
45+
color: '#777',
46+
fontSize: '16px',
47+
lineHeight: '24px',
48+
textAlign: 'left' as const
49+
};
50+
51+
const anchor = {
52+
color: '#777'
53+
};
54+
55+
const button = {
56+
fontWeight: 'bold',
57+
padding: '10px',
58+
textDecoration: 'none'
59+
};
60+
61+
export const previewProps: TemplateProps = {
62+
email: '[email protected]',
63+
name: 'Bruce Wayne'
64+
};
65+
66+
export const templateName = 'BatmanEmail';
67+
68+
export const Template = ({ email, name }: TemplateProps) => (
69+
<Html>
70+
<Head />
71+
<Preview>This is our email preview text for {name} &lt;{email}&gt;</Preview>
72+
<Body style={main}>
73+
<Container style={container}>
74+
<Section style={box}>
75+
<Text style={paragraph}>This is our email body text</Text>
76+
<Button
77+
align={'center'}
78+
backgroundColor={'#777'}
79+
borderRadius={5}
80+
fontSize={16}
81+
height={60}
82+
href=\\"https://example.com\\"
83+
style={button}
84+
textColor={'#fff'}
85+
width={160}
86+
>
87+
Action Button
88+
</Button>
89+
<Hr style={hr} />
90+
<Text style={paragraph}>
91+
This is text content with a{' '}
92+
<Link style={anchor} href=\\"mailto:{email}\\">
93+
link
94+
</Link>
95+
.
96+
</Text>
97+
</Section>
98+
</Container>
99+
</Body>
100+
</Html>
101+
);
102+
"
103+
`;

‎test/cli/create.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ describe('cli', async () => {
2121
expect(plain).toContain('Creating a new template at ');
2222
expect(plain).toContain('Template BatmanEmail.tsx created');
2323

24-
const contents = readFile(join(__dirname, '.test/emails/BatmanEmail.tsx'), 'utf8');
24+
const contents = await readFile(join(__dirname, '.test/emails/BatmanEmail.tsx'), 'utf8');
2525
expect(contents).toMatchSnapshot();
2626
});
2727
});

0 commit comments

Comments
 (0)