better-svelte-email 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/components/Button.svelte +2 -4
  2. package/dist/components/Column.svelte +3 -8
  3. package/dist/components/Column.svelte.d.ts +2 -5
  4. package/dist/components/Container.svelte +5 -6
  5. package/dist/components/Container.svelte.d.ts +2 -2
  6. package/dist/components/Heading.svelte +34 -0
  7. package/dist/components/Heading.svelte.d.ts +15 -0
  8. package/dist/components/Hr.svelte +4 -4
  9. package/dist/components/Html.svelte +4 -3
  10. package/dist/components/Html.svelte.d.ts +3 -3
  11. package/dist/components/Img.svelte +27 -0
  12. package/dist/components/Img.svelte.d.ts +10 -0
  13. package/dist/components/Link.svelte +6 -10
  14. package/dist/components/Link.svelte.d.ts +2 -2
  15. package/dist/components/Preview.svelte +35 -0
  16. package/dist/{preview → components}/Preview.svelte.d.ts +3 -3
  17. package/dist/components/Row.svelte +2 -6
  18. package/dist/components/Row.svelte.d.ts +2 -3
  19. package/dist/components/Section.svelte +2 -4
  20. package/dist/components/Section.svelte.d.ts +2 -2
  21. package/dist/components/Text.svelte +4 -6
  22. package/dist/components/Text.svelte.d.ts +0 -1
  23. package/dist/components/index.d.ts +3 -0
  24. package/dist/components/index.js +3 -0
  25. package/dist/emails/apple-receipt.svelte +222 -95
  26. package/dist/emails/demo-email.svelte +1 -1
  27. package/dist/emails/test-email.svelte +4 -2
  28. package/dist/emails/vercel-invite-user.svelte +53 -50
  29. package/dist/emails/vercel-invite-user.svelte.d.ts +3 -3
  30. package/dist/index.d.ts +1 -1
  31. package/dist/index.js +1 -1
  32. package/dist/preview/EmailPreview.svelte +773 -0
  33. package/dist/preview/EmailPreview.svelte.d.ts +7 -0
  34. package/dist/preview/index.d.ts +21 -3
  35. package/dist/preview/index.js +27 -5
  36. package/dist/utils/index.d.ts +27 -0
  37. package/dist/utils/index.js +47 -0
  38. package/package.json +32 -7
  39. package/dist/components/__tests__/test-email.svelte +0 -13
  40. package/dist/components/__tests__/test-email.svelte.d.ts +0 -26
  41. package/dist/preview/Preview.svelte +0 -231
package/dist/emails/vercel-invite-user.svelte CHANGED
@@ -5,25 +5,18 @@
5
5
  Column,
6
6
  Container,
7
7
  Head,
8
+ Heading,
8
9
  Hr,
9
10
  Html,
11
+ Img,
12
+ Link,
13
+ Preview,
10
14
  Row,
11
15
  Section,
12
16
  Text
13
17
  } from '../components/index.js';
14
18
 
15
- // Props with default values
16
- let {
17
- username = 'alanturing',
18
- userImage = '/vercel-user.png',
19
- invitedByUsername = 'Alan',
20
- invitedByEmail = 'alan.turing@example.com',
21
- teamName = 'Enigma',
22
- teamImage = '/vercel-team.png',
23
- inviteLink = 'https://vercel.com/teams/invite/foo',
24
- inviteFromIp = '204.13.186.218',
25
- inviteFromLocation = 'São Paulo, Brazil'
26
- }: {
19
+ interface Props {
27
20
  username?: string;
28
21
  userImage?: string;
29
22
  invitedByUsername?: string;
@@ -33,93 +26,103 @@
33
26
  inviteLink?: string;
34
27
  inviteFromIp?: string;
35
28
  inviteFromLocation?: string;
36
- } = $props();
29
+ }
30
+
31
+ let {
32
+ username = 'alanturing',
33
+ userImage = '/vercel-user.png',
34
+ invitedByUsername = 'Alan',
35
+ invitedByEmail = 'alan.turing@example.com',
36
+ teamName = 'Enigma',
37
+ teamImage = '/vercel-team.png',
38
+ inviteLink = 'https://vercel.com',
39
+ inviteFromIp = '204.13.186.218',
40
+ inviteFromLocation = 'São Paulo, Brazil'
41
+ }: Props = $props();
42
+
43
+ const baseUrl =
44
+ process.env.VERCEL === '1' ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}/` : '/';
37
45
 
38
46
  const previewText = `Join ${invitedByUsername} on Vercel`;
39
- const baseUrl = '/';
40
47
  </script>
41
48
 
42
49
  <Html>
43
50
  <Head />
44
51
  <Body style="margin-left:auto;margin-right:auto; margin-top:auto;margin-bottom:auto; background-color:rgb(255,255,255); padding-left:0.5rem;padding-right:0.5rem; font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;">
45
- <!-- Preview text -->
46
- <span style="display:none;">{previewText}</span>
47
-
52
+ <Preview preview={previewText} />
48
53
  <Container
49
- data-testid="container"
50
- style="margin-left:auto;margin-right:auto; margin-top:2.5rem;margin-bottom:2.5rem; max-width:465px; border-radius:0.25rem; border-width:1px; border-style:solid; border-color:rgb(234,234,234); padding:1.25rem;"
54
+ style="margin-left:auto;margin-right:auto; margin-top:40px;margin-bottom:40px; max-width:465px; border-radius:0.25rem; border-width:1px; border-style:solid; border-color:rgb(234,234,234); padding:20px;"
51
55
  >
52
- <Section style="margin-top:2rem;">
53
- <img
56
+ <Section style="margin-top:32px;">
57
+ <Img
54
58
  src="{baseUrl}vercel-logo.png"
55
59
  width="40"
56
60
  height="37"
57
- alt="Vercel"
61
+ alt="Vercel Logo"
58
62
  style="margin-left:auto;margin-right:auto; margin-top:0px;margin-bottom:0px;"
59
63
  />
60
64
  </Section>
61
-
62
- <Text as="h1" style="margin-left:0px;margin-right:0px; margin-top:30px;margin-bottom:30px; padding:0px; text-align:center; font-size:1.5rem;line-height:2rem; font-weight:400; color:rgb(0,0,0);">
65
+ <Heading as="h1" style="margin-left:0px;margin-right:0px; margin-top:30px;margin-bottom:30px; padding:0px; text-align:center; font-size:24px; font-weight:400; color:rgb(0,0,0);">
63
66
  Join <strong>{teamName}</strong> on <strong>Vercel</strong>
64
- </Text>
65
-
66
- <Text style="font-size:0.875rem;line-height:1.25rem; line-height:1.5rem; color:rgb(0,0,0);">
67
+ </Heading>
68
+ <Text style="font-size:14px; line-height:24px; color:rgb(0,0,0);">
67
69
  Hello {username},
68
70
  </Text>
69
-
70
- <Text style="font-size:0.875rem;line-height:1.25rem; line-height:1.5rem; color:rgb(0,0,0);">
71
- <strong>{invitedByUsername}</strong>
72
- (<a href="mailto:{invitedByEmail}" style="color:rgb(37,99,235); text-decoration-line:none;">
71
+ <Text style="font-size:14px; line-height:24px; color:rgb(0,0,0);">
72
+ <strong>{invitedByUsername}</strong> (<Link
73
+ href={`mailto:${invitedByEmail}`}
74
+ style="color:rgb(37,99,235); text-decoration-line:none;"
75
+ >
73
76
  {invitedByEmail}
74
- </a>) has invited you to the <strong>{teamName}</strong> team on
77
+ </Link>) has invited you to the <strong>{teamName}</strong> team on
75
78
  <strong>Vercel</strong>.
76
79
  </Text>
77
-
78
80
  <Section>
79
81
  <Row>
80
82
  <Column align="right">
81
- <img
83
+ <Img
82
84
  style="border-radius:9999px;"
83
- src={userImage}
85
+ src="{baseUrl}{userImage}"
84
86
  width="64"
85
87
  height="64"
86
- alt="{username}'s profile picture"
88
+ alt={`${username}'s profile picture`}
87
89
  />
88
90
  </Column>
89
91
  <Column align="center">
90
- <img src="{baseUrl}vercel-arrow.png" width="12" height="9" alt="invited you to" />
92
+ <Img
93
+ src="{baseUrl}vercel-arrow.png"
94
+ width="12"
95
+ height="9"
96
+ alt="Arrow indicating invitation"
97
+ />
91
98
  </Column>
92
99
  <Column align="left">
93
- <img
100
+ <Img
94
101
  style="border-radius:9999px;"
95
- src={teamImage}
102
+ src="{baseUrl}{teamImage}"
96
103
  width="64"
97
104
  height="64"
98
- alt="{teamName}'s logo"
105
+ alt={`${teamName} team logo`}
99
106
  />
100
107
  </Column>
101
108
  </Row>
102
109
  </Section>
103
-
104
- <Section style="margin-top:2rem; margin-bottom:2rem; text-align:center;">
110
+ <Section style="margin-top:32px; margin-bottom:32px; text-align:center;">
105
111
  <Button
106
- style="border-radius:0.25rem; background-color:rgb(0,0,0); padding-left:1.25rem;padding-right:1.25rem; padding-top:0.75rem;padding-bottom:0.75rem; text-align:center; font-size:0.75rem;line-height:1rem; font-weight:600; color:rgb(255,255,255); text-decoration-line:none;"
112
+ style="border-radius:0.25rem; background-color:rgb(0,0,0); padding-left:1.25rem;padding-right:1.25rem; padding-top:0.75rem;padding-bottom:0.75rem; text-align:center; font-size:12px; font-weight:600; color:rgb(255,255,255); text-decoration-line:none;"
107
113
  href={inviteLink}
108
114
  >
109
115
  Join the team
110
116
  </Button>
111
117
  </Section>
112
-
113
- <Text style="font-size:0.875rem;line-height:1.25rem; line-height:1.5rem; color:rgb(0,0,0);">
118
+ <Text style="font-size:14px; line-height:24px; color:rgb(0,0,0);">
114
119
  or copy and paste this URL into your browser:
115
- <a href={inviteLink} style="color:rgb(37,99,235); text-decoration-line:none;">
120
+ <Link href={inviteLink} style="color:rgb(37,99,235); text-decoration-line:none;">
116
121
  {inviteLink}
117
- </a>
122
+ </Link>
118
123
  </Text>
119
-
120
124
  <Hr style="margin-left:0px;margin-right:0px; margin-top:26px;margin-bottom:26px; width:100%; border-width:1px; border-style:solid; border-color:rgb(234,234,234);" />
121
-
122
- <Text style="font-size:0.75rem;line-height:1rem; line-height:1.5rem; color:rgb(102,102,102);">
125
+ <Text style="font-size:12px; line-height:24px; color:rgb(102,102,102);">
123
126
  This invitation was intended for
124
127
  <span style="color:rgb(0,0,0);">{username}</span>. This invite was sent from
125
128
  <span style="color:rgb(0,0,0);">{inviteFromIp}</span>
package/dist/emails/vercel-invite-user.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- type $$ComponentProps = {
1
+ interface Props {
2
2
  username?: string;
3
3
  userImage?: string;
4
4
  invitedByUsername?: string;
@@ -8,7 +8,7 @@ type $$ComponentProps = {
8
8
  inviteLink?: string;
9
9
  inviteFromIp?: string;
10
10
  inviteFromLocation?: string;
11
- };
12
- declare const VercelInviteUser: import("svelte").Component<$$ComponentProps, {}, "">;
11
+ }
12
+ declare const VercelInviteUser: import("svelte").Component<Props, {}, "">;
13
13
  type VercelInviteUser = ReturnType<typeof VercelInviteUser>;
14
14
  export default VercelInviteUser;
package/dist/index.d.ts CHANGED
@@ -6,4 +6,4 @@ export type { TailwindConfig } from 'tw-to-css';
6
6
  export { parseAttributes as parseClassAttributes, findHeadComponent } from './preprocessor/parser.js';
7
7
  export { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './preprocessor/transformer.js';
8
8
  export { injectMediaQueries } from './preprocessor/head-injector.js';
9
- export { styleToString, pxToPt } from './utils/index.js';
9
+ export { styleToString, pxToPt, combineStyles, withMargin, renderAsPlainText } from './utils/index.js';
package/dist/index.js CHANGED
@@ -7,4 +7,4 @@ export { parseAttributes as parseClassAttributes, findHeadComponent } from './pr
7
7
  export { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './preprocessor/transformer.js';
8
8
  export { injectMediaQueries } from './preprocessor/head-injector.js';
9
9
  // Export utilities
10
- export { styleToString, pxToPt } from './utils/index.js';
10
+ export { styleToString, pxToPt, combineStyles, withMargin, renderAsPlainText } from './utils/index.js';