Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(jsx-email,create-jsx-email): consolidate and fix TS types in template #242

Merged
merged 1 commit into from
Nov 15, 2024
Merged

fix(jsx-email,create-jsx-email): consolidate and fix TS types in template #242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions assets/templates/email.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const paragraph = {
color: '#777',
fontSize: '16px',
lineHeight: '24px',
textAlign: 'left' as const
textAlign: 'left'{{ asConst }}
};

const anchor = {
Expand All @@ -50,7 +50,7 @@ const button = {
textDecoration: 'none'
};

export const previewProps = {
export const previewProps{{ propsType }} = {
email: 'batman@example.com',
name: 'Bruce Wayne'
};
Expand Down
2 changes: 2 additions & 0 deletions packages/create-jsx-email/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const isEmpty = (path: string) => {
};
const { log } = console;
const normalizePath = (filename: string) => filename.split(win32.sep).join(posix.sep);
const asConst = ' as const';
const typeDep = ',\n"@types/react": "^18.2.0",\n"typescript": "^5.2.2"';
const typeProps = `\ninterface TemplateProps {
email: string;
Expand All @@ -57,6 +58,7 @@ const argTargetDir: string = argv._[0] as string;

export const createEmail = async ({ jsx, name, outputPath }: CreateEmailArgs) => {
const data = {
asConst: jsx ? '' : asConst,
name,
propsType: jsx ? '' : ': TemplateProps',
typeProps: jsx ? '' : typeProps
Expand Down
9 changes: 8 additions & 1 deletion packages/jsx-email/src/cli/commands/create.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ const CreateOptionsStruct = object({
jsx: optional(boolean()),
out: optional(string())
});
const asConst = ' as const';
const typeProps = `\ninterface TemplateProps {
email: string;
name: string;
}\n`;

type CreateOptions = Infer<typeof CreateOptionsStruct>;

Expand Down Expand Up @@ -45,8 +50,10 @@ export const command: CommandFn = async (argv: CreateOptions, input) => {
const { jsx, out } = argv;
const template = await readFile(join(__dirname, '../../../templates/email.mustache'), 'utf8');
const data = {
asConst: jsx ? '' : asConst,
name,
propsType: jsx ? '' : ': typeof previewProps'
propsType: jsx ? '' : ': TemplateProps',
typeProps: jsx ? '' : typeProps
};
const newContent = mustache.render(template, data);
const outPath = resolve(out || process.cwd());
Expand Down
2 changes: 1 addition & 1 deletion test/cli/.snapshots/create-jsx-email.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const button = {
textDecoration: 'none'
};

export const previewProps = {
export const previewProps: TemplateProps = {
email: 'batman@example.com',
name: 'Bruce Wayne'
};
Expand Down
102 changes: 101 additions & 1 deletion test/cli/.snapshots/create.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,103 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`cli > esbuild plugins 1`] = `Promise {}`;
exports[`cli > esbuild plugins 1`] = `
"import {
Body,
Button,
Container,
Head,
Hr,
Html,
Link,
Preview,
Section,
Text
} from 'jsx-email';

interface TemplateProps {
email: string;
name: string;
}

const main = {
backgroundColor: '#f6f9fc',
fontFamily:
'-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,\\"Helvetica Neue\\",Ubuntu,sans-serif'
};

const container = {
backgroundColor: '#ffffff',
margin: '0 auto',
marginBottom: '64px',
padding: '20px 0 48px'
};

const box = {
padding: '0 48px'
};

const hr = {
borderColor: '#e6ebf1',
margin: '20px 0'
};

const paragraph = {
color: '#777',
fontSize: '16px',
lineHeight: '24px',
textAlign: 'left' as const
};

const anchor = {
color: '#777'
};

const button = {
fontWeight: 'bold',
padding: '10px',
textDecoration: 'none'
};

export const previewProps: TemplateProps = {
email: 'batman@example.com',
name: 'Bruce Wayne'
};

export const templateName = 'BatmanEmail';

export const Template = ({ email, name }: TemplateProps) => (
<Html>
<Head />
<Preview>This is our email preview text for {name} &lt;{email}&gt;</Preview>
<Body style={main}>
<Container style={container}>
<Section style={box}>
<Text style={paragraph}>This is our email body text</Text>
<Button
align={'center'}
backgroundColor={'#777'}
borderRadius={5}
fontSize={16}
height={60}
href=\\"https://example.com\\"
style={button}
textColor={'#fff'}
width={160}
>
Action Button
</Button>
<Hr style={hr} />
<Text style={paragraph}>
This is text content with a{' '}
<Link style={anchor} href=\\"mailto:{email}\\">
link
</Link>
.
</Text>
</Section>
</Container>
</Body>
</Html>
);
"
`;
2 changes: 1 addition & 1 deletion test/cli/create.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ describe('cli', async () => {
expect(plain).toContain('Creating a new template at ');
expect(plain).toContain('Template BatmanEmail.tsx created');

const contents = readFile(join(__dirname, '.test/emails/BatmanEmail.tsx'), 'utf8');
const contents = await readFile(join(__dirname, '.test/emails/BatmanEmail.tsx'), 'utf8');
expect(contents).toMatchSnapshot();
});
});
Loading