fix(jsx-email,create-jsx-email): consolidate and fix TS types in temp…

…late (#242)
shellscape · Nov 15, 2024 · 735061b · 735061b
1 parent 3b5eed8
commit 735061b
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 6 deletions.
diff --git a/assets/templates/email.mustache b/assets/templates/email.mustache
@@ -37,7 +37,7 @@ const paragraph = {
   color: '#777',
   fontSize: '16px',
   lineHeight: '24px',
-  textAlign: 'left' as const
+  textAlign: 'left'{{ asConst }}
 };
 
 const anchor = {
@@ -50,7 +50,7 @@ const button = {
   textDecoration: 'none'
 };
 
-export const previewProps = {
+export const previewProps{{ propsType }} = {
   email: 'batman@example.com',
   name: 'Bruce Wayne'
 };

diff --git a/packages/create-jsx-email/src/index.ts b/packages/create-jsx-email/src/index.ts
@@ -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;
@@ -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

diff --git a/packages/jsx-email/src/cli/commands/create.mts b/packages/jsx-email/src/cli/commands/create.mts
@@ -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>;
 
@@ -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());

diff --git a/test/cli/.snapshots/create-jsx-email.test.ts.snap b/test/cli/.snapshots/create-jsx-email.test.ts.snap
@@ -80,7 +80,7 @@ const button = {
   textDecoration: 'none'
 };
 
-export const previewProps = {
+export const previewProps: TemplateProps = {
   email: 'batman@example.com',
   name: 'Bruce Wayne'
 };

diff --git a/test/cli/.snapshots/create.test.ts.snap b/test/cli/.snapshots/create.test.ts.snap
@@ -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>
+);
+"
+`;
diff --git a/test/cli/create.test.ts b/test/cli/create.test.ts
@@ -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();
   });
 });