better-svelte-email 0.1.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 (43) hide show
  1. package/dist/components/Body.svelte +11 -2
  2. package/dist/components/Button.svelte +2 -4
  3. package/dist/components/Column.svelte +14 -0
  4. package/dist/components/Column.svelte.d.ts +7 -0
  5. package/dist/components/Container.svelte +5 -6
  6. package/dist/components/Container.svelte.d.ts +2 -2
  7. package/dist/components/Heading.svelte +34 -0
  8. package/dist/components/Heading.svelte.d.ts +15 -0
  9. package/dist/components/Hr.svelte +4 -4
  10. package/dist/components/Html.svelte +5 -4
  11. package/dist/components/Html.svelte.d.ts +3 -3
  12. package/dist/components/Img.svelte +27 -0
  13. package/dist/components/Img.svelte.d.ts +10 -0
  14. package/dist/components/Link.svelte +22 -0
  15. package/dist/components/Link.svelte.d.ts +9 -0
  16. package/dist/components/Preview.svelte +35 -0
  17. package/dist/components/Preview.svelte.d.ts +7 -0
  18. package/dist/components/Row.svelte +26 -0
  19. package/dist/components/Row.svelte.d.ts +7 -0
  20. package/dist/components/Section.svelte +11 -3
  21. package/dist/components/Section.svelte.d.ts +2 -2
  22. package/dist/components/Text.svelte +4 -6
  23. package/dist/components/Text.svelte.d.ts +0 -1
  24. package/dist/components/index.d.ts +6 -0
  25. package/dist/components/index.js +6 -0
  26. package/dist/emails/apple-receipt.svelte +387 -0
  27. package/dist/{components/__tests__/test-email.svelte.d.ts → emails/apple-receipt.svelte.d.ts} +6 -14
  28. package/dist/emails/demo-email.svelte +1 -1
  29. package/dist/emails/test-email.svelte +4 -2
  30. package/dist/emails/vercel-invite-user.svelte +136 -0
  31. package/dist/emails/vercel-invite-user.svelte.d.ts +14 -0
  32. package/dist/index.d.ts +2 -2
  33. package/dist/index.js +2 -2
  34. package/dist/preprocessor/index.js +3 -2
  35. package/dist/preprocessor/transformer.js +3 -3
  36. package/dist/preview/EmailPreview.svelte +773 -0
  37. package/dist/preview/EmailPreview.svelte.d.ts +7 -0
  38. package/dist/preview/index.d.ts +103 -0
  39. package/dist/preview/index.js +205 -0
  40. package/dist/utils/index.d.ts +27 -0
  41. package/dist/utils/index.js +47 -0
  42. package/package.json +34 -7
  43. package/dist/components/__tests__/test-email.svelte +0 -13
package/dist/components/Body.svelte CHANGED
@@ -1,9 +1,18 @@
1
1
  <script lang="ts">
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
3
 
4
- let { children, ...restProps }: { children?: any } & HTMLAttributes<HTMLBodyElement> = $props();
4
+ let { children, style, ...restProps }: { children?: any } & HTMLAttributes<HTMLBodyElement> =
5
+ $props();
5
6
  </script>
6
7
 
7
8
  <body {...restProps}>
8
- {@render children?.()}
9
+ <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
10
+ <tbody>
11
+ <tr>
12
+ <td {style}>
13
+ {@render children?.()}
14
+ </td>
15
+ </tr>
16
+ </tbody>
17
+ </table>
9
18
  </body>
package/dist/components/Button.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import { styleToString, pxToPt } from '../utils/index.js';
2
+ import { styleToString, pxToPt, combineStyles } from '../utils/index.js';
3
3
  import type { HTMLAttributes } from 'svelte/elements';
4
4
 
5
5
  let {
@@ -40,11 +40,9 @@
40
40
  msoPaddingAlt: '0px',
41
41
  msoTextRaise: pY ? pxToPt(pY.toString()) : undefined
42
42
  });
43
-
44
- const finalStyle = buttonStyle + (style ? ';' + style : '');
45
43
  </script>
46
44
 
47
- <a {...restProps} {href} {target} style={finalStyle}>
45
+ <a {...restProps} {href} {target} style={combineStyles(buttonStyle, style)}>
48
46
  {#if pX}
49
47
  <span>
50
48
  {@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`}
package/dist/components/Column.svelte ADDED
@@ -0,0 +1,14 @@
1
+ <script lang="ts">
2
+ import type { HTMLTdAttributes } from 'svelte/elements';
3
+
4
+ let {
5
+ children,
6
+ ...restProps
7
+ }: {
8
+ children?: any;
9
+ } & HTMLTdAttributes = $props();
10
+ </script>
11
+
12
+ <td {...restProps}>
13
+ {@render children?.()}
14
+ </td>
package/dist/components/Column.svelte.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type { HTMLTdAttributes } from 'svelte/elements';
2
+ type $$ComponentProps = {
3
+ children?: any;
4
+ } & HTMLTdAttributes;
5
+ declare const Column: import("svelte").Component<$$ComponentProps, {}, "">;
6
+ type Column = ReturnType<typeof Column>;
7
+ export default Column;
package/dist/components/Container.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
- import { styleToString } from '../utils/index.js';
3
- import type { HTMLAttributes } from 'svelte/elements';
2
+ import { combineStyles, styleToString } from '../utils/index.js';
3
+ import type { HTMLTableAttributes } from 'svelte/elements';
4
4
 
5
5
  let {
6
6
  children,
@@ -8,11 +8,10 @@
8
8
  ...restProps
9
9
  }: {
10
10
  children: any;
11
- } & HTMLAttributes<HTMLTableElement> = $props();
11
+ } & HTMLTableAttributes = $props();
12
12
 
13
13
  // Default max-width for email containers (600px = 37.5em)
14
- const baseStyle = styleToString({ maxWidth: '37.5em' });
15
- const finalStyle = baseStyle + (style ? ';' + style : '');
14
+ const defaultStyles = styleToString({ maxWidth: '37.5em' });
16
15
  </script>
17
16
 
18
17
  <table
@@ -22,8 +21,8 @@
22
21
  cellspacing="0"
23
22
  cellpadding="0"
24
23
  border="0"
24
+ style={combineStyles(defaultStyles, style)}
25
25
  {...restProps}
26
- style={finalStyle}
27
26
  >
28
27
  <tbody>
29
28
  <tr style="width: 100%;">
package/dist/components/Container.svelte.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import type { HTMLAttributes } from 'svelte/elements';
1
+ import type { HTMLTableAttributes } from 'svelte/elements';
2
2
  type $$ComponentProps = {
3
3
  children: any;
4
- } & HTMLAttributes<HTMLTableElement>;
4
+ } & HTMLTableAttributes;
5
5
  declare const Container: import("svelte").Component<$$ComponentProps, {}, "">;
6
6
  type Container = ReturnType<typeof Container>;
7
7
  export default Container;
package/dist/components/Heading.svelte ADDED
@@ -0,0 +1,34 @@
1
+ <script lang="ts">
2
+ import { combineStyles, styleToString, withMargin } from '../utils/index.js';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+
5
+ type Props = HTMLAttributes<HTMLHeadingElement> & {
6
+ children: any;
7
+ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
8
+ m?: string;
9
+ mx?: string;
10
+ my?: string;
11
+ mt?: string;
12
+ mr?: string;
13
+ mb?: string;
14
+ ml?: string;
15
+ };
16
+
17
+ let { style, as, children, ...restProps }: Props = $props();
18
+
19
+ const defaultStyles = styleToString({
20
+ ...withMargin({
21
+ m: restProps.m,
22
+ mx: restProps.mx,
23
+ my: restProps.my,
24
+ mt: restProps.mt,
25
+ mr: restProps.mr,
26
+ mb: restProps.mb,
27
+ ml: restProps.ml
28
+ })
29
+ });
30
+ </script>
31
+
32
+ <svelte:element this={as} style={combineStyles(defaultStyles, style)} {...restProps}>
33
+ {@render children?.()}
34
+ </svelte:element>
package/dist/components/Heading.svelte.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { HTMLAttributes } from 'svelte/elements';
2
+ type Props = HTMLAttributes<HTMLHeadingElement> & {
3
+ children: any;
4
+ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
5
+ m?: string;
6
+ mx?: string;
7
+ my?: string;
8
+ mt?: string;
9
+ mr?: string;
10
+ mb?: string;
11
+ ml?: string;
12
+ };
13
+ declare const Heading: import("svelte").Component<Props, {}, "">;
14
+ type Heading = ReturnType<typeof Heading>;
15
+ export default Heading;
package/dist/components/Hr.svelte CHANGED
@@ -1,14 +1,14 @@
1
1
  <script lang="ts">
2
- import { styleToString } from '../utils/index.js';
2
+ import { combineStyles, styleToString } from '../utils/index.js';
3
3
  import type { HTMLAttributes } from 'svelte/elements';
4
4
 
5
- let props: HTMLAttributes<HTMLHRElement> = $props();
5
+ let { style, ...restProps }: HTMLAttributes<HTMLHRElement> = $props();
6
6
 
7
- const style = styleToString({
7
+ const defaultStyles = styleToString({
8
8
  width: '100%',
9
9
  border: 'none',
10
10
  borderTop: '1px solid #eaeaea'
11
11
  });
12
12
  </script>
13
13
 
14
- <hr {...props} style={style + (props.style ? ';' + props.style : '')} />
14
+ <hr style={combineStyles(defaultStyles, style)} {...restProps} />
package/dist/components/Html.svelte CHANGED
@@ -1,11 +1,12 @@
1
1
  <script lang="ts">
2
- interface Props {
2
+ import type { HTMLHtmlAttributes } from 'svelte/elements';
3
+
4
+ type Props = HTMLHtmlAttributes & {
3
5
  lang?: string;
4
6
  dir?: 'ltr' | 'rtl' | 'auto' | null | undefined;
5
7
  style?: string;
6
8
  children?: any;
7
- [key: string]: any;
8
- }
9
+ };
9
10
 
10
11
  let { lang = 'en', dir = 'ltr', children, ...restProps }: Props = $props();
11
12
 
@@ -14,6 +15,6 @@
14
15
  </script>
15
16
 
16
17
  {@html doctype}
17
- <html {...restProps} id="__svelte-email" {lang} {dir}>
18
+ <html {...restProps} id="__better-svelte-email" {lang} {dir}>
18
19
  {@render children?.()}
19
20
  </html>
package/dist/components/Html.svelte.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- interface Props {
1
+ import type { HTMLHtmlAttributes } from 'svelte/elements';
2
+ type Props = HTMLHtmlAttributes & {
2
3
  lang?: string;
3
4
  dir?: 'ltr' | 'rtl' | 'auto' | null | undefined;
4
5
  style?: string;
5
6
  children?: any;
6
- [key: string]: any;
7
- }
7
+ };
8
8
  declare const Html: import("svelte").Component<Props, {}, "">;
9
9
  type Html = ReturnType<typeof Html>;
10
10
  export default Html;
package/dist/components/Img.svelte ADDED
@@ -0,0 +1,27 @@
1
+ <script lang="ts">
2
+ import { combineStyles, styleToString } from '../utils/index.js';
3
+ import type { HTMLImgAttributes } from 'svelte/elements';
4
+
5
+ let {
6
+ style,
7
+ alt,
8
+ src,
9
+ width,
10
+ height,
11
+ ...restProps
12
+ }: HTMLImgAttributes & {
13
+ alt: string;
14
+ src: string;
15
+ width: string;
16
+ height: string;
17
+ } = $props();
18
+
19
+ const defaultStyles = styleToString({
20
+ display: 'block',
21
+ outline: 'none',
22
+ border: 'none',
23
+ textDecoration: 'none'
24
+ });
25
+ </script>
26
+
27
+ <img {alt} {src} {width} {height} style={combineStyles(defaultStyles, style)} {...restProps} />
package/dist/components/Img.svelte.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import type { HTMLImgAttributes } from 'svelte/elements';
2
+ type $$ComponentProps = HTMLImgAttributes & {
3
+ alt: string;
4
+ src: string;
5
+ width: string;
6
+ height: string;
7
+ };
8
+ declare const Img: import("svelte").Component<$$ComponentProps, {}, "">;
9
+ type Img = ReturnType<typeof Img>;
10
+ export default Img;
package/dist/components/Link.svelte ADDED
@@ -0,0 +1,22 @@
1
+ <script lang="ts">
2
+ import { combineStyles, styleToString } from '../utils/index.js';
3
+ import type { HTMLAnchorAttributes } from 'svelte/elements';
4
+
5
+ let {
6
+ children,
7
+ href,
8
+ target = '_blank',
9
+ style,
10
+ ...restProps
11
+ }: {
12
+ href: string;
13
+ target?: string;
14
+ children: any;
15
+ } & HTMLAnchorAttributes = $props();
16
+
17
+ const defaultStyles = styleToString({ textDecorationLine: 'none', color: '#067df7' });
18
+ </script>
19
+
20
+ <a {href} {target} {...restProps} style={combineStyles(defaultStyles, style)}>
21
+ {@render children?.()}
22
+ </a>
package/dist/components/Link.svelte.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import type { HTMLAnchorAttributes } from 'svelte/elements';
2
+ type $$ComponentProps = {
3
+ href: string;
4
+ target?: string;
5
+ children: any;
6
+ } & HTMLAnchorAttributes;
7
+ declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
8
+ type Link = ReturnType<typeof Link>;
9
+ export default Link;
package/dist/components/Preview.svelte ADDED
@@ -0,0 +1,35 @@
1
+ <script lang="ts">
2
+ import { styleToString } from '../utils/index.js';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+
5
+ const PREVIEW_MAX_LENGTH = 150;
6
+
7
+ let { preview, ...restProps }: { preview: string } & HTMLAttributes<HTMLDivElement> = $props();
8
+
9
+ let text = $derived(preview.substring(0, PREVIEW_MAX_LENGTH));
10
+
11
+ const renderWhiteSpace = (text: string) => {
12
+ if (text.length >= PREVIEW_MAX_LENGTH) return '';
13
+ const whiteSpaceCodes = '\xa0\u200C\u200B\u200D\u200E\u200F\uFEFF';
14
+ return whiteSpaceCodes.repeat(PREVIEW_MAX_LENGTH - text.length);
15
+ };
16
+ </script>
17
+
18
+ <div
19
+ id="__better-svelte-email-preview"
20
+ style={styleToString({
21
+ display: 'none',
22
+ overflow: 'hidden',
23
+ lineHeight: '1px',
24
+ opacity: 0,
25
+ maxHeight: 0,
26
+ maxWidth: 0
27
+ })}
28
+ data-skip-in-text={true}
29
+ {...restProps}
30
+ >
31
+ {text}
32
+ <div>
33
+ {renderWhiteSpace(text)}
34
+ </div>
35
+ </div>
package/dist/components/Preview.svelte.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type { HTMLAttributes } from 'svelte/elements';
2
+ type $$ComponentProps = {
3
+ preview: string;
4
+ } & HTMLAttributes<HTMLDivElement>;
5
+ declare const Preview: import("svelte").Component<$$ComponentProps, {}, "">;
6
+ type Preview = ReturnType<typeof Preview>;
7
+ export default Preview;
package/dist/components/Row.svelte ADDED
@@ -0,0 +1,26 @@
1
+ <script lang="ts">
2
+ import type { HTMLTableAttributes } from 'svelte/elements';
3
+
4
+ let {
5
+ children,
6
+ ...restProps
7
+ }: {
8
+ children: any;
9
+ } & HTMLTableAttributes = $props();
10
+ </script>
11
+
12
+ <table
13
+ align="center"
14
+ width="100%"
15
+ border={0}
16
+ cellPadding={0}
17
+ cellSpacing={0}
18
+ role="presentation"
19
+ {...restProps}
20
+ >
21
+ <tbody style="width: 100%;">
22
+ <tr style="width: 100%;">
23
+ {@render children?.()}
24
+ </tr>
25
+ </tbody>
26
+ </table>
package/dist/components/Row.svelte.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type { HTMLTableAttributes } from 'svelte/elements';
2
+ type $$ComponentProps = {
3
+ children: any;
4
+ } & HTMLTableAttributes;
5
+ declare const Row: import("svelte").Component<$$ComponentProps, {}, "">;
6
+ type Row = ReturnType<typeof Row>;
7
+ export default Row;
package/dist/components/Section.svelte CHANGED
@@ -1,15 +1,23 @@
1
1
  <script lang="ts">
2
- import type { HTMLAttributes } from 'svelte/elements';
2
+ import type { HTMLTableAttributes } from 'svelte/elements';
3
3
 
4
4
  let {
5
5
  children,
6
6
  ...restProps
7
7
  }: {
8
8
  children: any;
9
- } & HTMLAttributes<HTMLTableElement> = $props();
9
+ } & HTMLTableAttributes = $props();
10
10
  </script>
11
11
 
12
- <table width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0" {...restProps}>
12
+ <table
13
+ align="center"
14
+ width="100%"
15
+ border="0"
16
+ cellspacing="0"
17
+ cellpadding="0"
18
+ role="presentation"
19
+ {...restProps}
20
+ >
13
21
  <tbody>
14
22
  <tr>
15
23
  <td>
package/dist/components/Section.svelte.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import type { HTMLAttributes } from 'svelte/elements';
1
+ import type { HTMLTableAttributes } from 'svelte/elements';
2
2
  type $$ComponentProps = {
3
3
  children: any;
4
- } & HTMLAttributes<HTMLTableElement>;
4
+ } & HTMLTableAttributes;
5
5
  declare const Section: import("svelte").Component<$$ComponentProps, {}, "">;
6
6
  type Section = ReturnType<typeof Section>;
7
7
  export default Section;
package/dist/components/Text.svelte CHANGED
@@ -1,27 +1,25 @@
1
1
  <script lang="ts">
2
- import { styleToString } from '../utils/index.js';
2
+ import { combineStyles, styleToString } from '../utils/index.js';
3
3
  import type { HTMLAttributes } from 'svelte/elements';
4
4
 
5
5
  let {
6
6
  as = 'p',
7
- style = '',
7
+ style,
8
8
  children,
9
9
  ...restProps
10
10
  }: {
11
11
  as?: string;
12
- style?: string;
13
12
  children: any;
14
13
  } & HTMLAttributes<HTMLParagraphElement> = $props();
15
14
 
16
15
  // Default email-safe text styles
17
- const baseStyle = styleToString({
16
+ const defaultStyles = styleToString({
18
17
  fontSize: '14px',
19
18
  lineHeight: '24px',
20
19
  margin: '16px 0'
21
20
  });
22
- const finalStyle = baseStyle + (style ? ';' + style : '');
23
21
  </script>
24
22
 
25
- <svelte:element this={as} {...restProps} style={finalStyle}>
23
+ <svelte:element this={as} style={combineStyles(defaultStyles, style)} {...restProps}>
26
24
  {@render children?.()}
27
25
  </svelte:element>
package/dist/components/Text.svelte.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import type { HTMLAttributes } from 'svelte/elements';
2
2
  type $$ComponentProps = {
3
3
  as?: string;
4
- style?: string;
5
4
  children: any;
6
5
  } & HTMLAttributes<HTMLParagraphElement>;
7
6
  declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
package/dist/components/index.d.ts CHANGED
@@ -1,8 +1,14 @@
1
1
  export { default as Body } from './Body.svelte';
2
2
  export { default as Button } from './Button.svelte';
3
+ export { default as Column } from './Column.svelte';
3
4
  export { default as Container } from './Container.svelte';
4
5
  export { default as Head } from './Head.svelte';
6
+ export { default as Heading } from './Heading.svelte';
5
7
  export { default as Hr } from './Hr.svelte';
6
8
  export { default as Html } from './Html.svelte';
9
+ export { default as Img } from './Img.svelte';
10
+ export { default as Link } from './Link.svelte';
11
+ export { default as Preview } from './Preview.svelte';
12
+ export { default as Row } from './Row.svelte';
7
13
  export { default as Section } from './Section.svelte';
8
14
  export { default as Text } from './Text.svelte';
package/dist/components/index.js CHANGED
@@ -2,9 +2,15 @@
2
2
  // These components work with the preprocessor's styleString prop
3
3
  export { default as Body } from './Body.svelte';
4
4
  export { default as Button } from './Button.svelte';
5
+ export { default as Column } from './Column.svelte';
5
6
  export { default as Container } from './Container.svelte';
6
7
  export { default as Head } from './Head.svelte';
8
+ export { default as Heading } from './Heading.svelte';
7
9
  export { default as Hr } from './Hr.svelte';
8
10
  export { default as Html } from './Html.svelte';
11
+ export { default as Img } from './Img.svelte';
12
+ export { default as Link } from './Link.svelte';
13
+ export { default as Preview } from './Preview.svelte';
14
+ export { default as Row } from './Row.svelte';
9
15
  export { default as Section } from './Section.svelte';
10
16
  export { default as Text } from './Text.svelte';