better-svelte-email 0.0.3 → 0.2.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.
- package/dist/components/Body.svelte +14 -5
- package/dist/components/Body.svelte.d.ts +6 -12
- package/dist/components/Button.svelte +11 -4
- package/dist/components/Button.svelte.d.ts +5 -15
- package/dist/components/Column.svelte +19 -0
- package/dist/components/Column.svelte.d.ts +10 -0
- package/dist/components/Container.svelte +10 -3
- package/dist/components/Container.svelte.d.ts +5 -11
- package/dist/components/Hr.svelte +14 -0
- package/dist/components/Hr.svelte.d.ts +4 -0
- package/dist/components/Html.svelte +3 -3
- package/dist/components/Html.svelte.d.ts +1 -1
- package/dist/components/Link.svelte +26 -0
- package/dist/components/Link.svelte.d.ts +9 -0
- package/dist/components/Row.svelte +30 -0
- package/dist/components/Row.svelte.d.ts +8 -0
- package/dist/components/Section.svelte +14 -5
- package/dist/components/Section.svelte.d.ts +5 -11
- package/dist/components/Text.svelte +13 -3
- package/dist/components/Text.svelte.d.ts +6 -12
- package/dist/components/index.d.ts +7 -3
- package/dist/components/index.js +7 -3
- package/dist/emails/apple-receipt.svelte +260 -0
- package/dist/emails/apple-receipt.svelte.d.ts +18 -0
- package/dist/emails/demo-email.svelte +31 -31
- package/dist/emails/test-email.svelte +7 -3
- package/dist/emails/vercel-invite-user.svelte +133 -0
- package/dist/emails/vercel-invite-user.svelte.d.ts +14 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +2 -2
- package/dist/preprocessor/index.js +27 -15
- package/dist/preprocessor/parser.d.ts +5 -2
- package/dist/preprocessor/parser.js +87 -21
- package/dist/preprocessor/transformer.js +3 -3
- package/dist/preprocessor/types.d.ts +21 -0
- package/dist/preview/Preview.svelte +231 -0
- package/dist/preview/Preview.svelte.d.ts +7 -0
- package/dist/preview/index.d.ts +85 -0
- package/dist/preview/index.js +183 -0
- package/package.json +3 -1
|
@@ -1,9 +1,18 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import {
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
3
|
|
|
4
|
-
let {
|
|
4
|
+
let { children, style, ...restProps }: { children?: any } & HTMLAttributes<HTMLBodyElement> =
|
|
5
|
+
$props();
|
|
5
6
|
</script>
|
|
6
7
|
|
|
7
|
-
<body {...restProps}
|
|
8
|
-
|
|
8
|
+
<body {...restProps}>
|
|
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>
|
|
@@ -1,13 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
type Body = {
|
|
3
|
-
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
-
$set?(props: Partial<$$ComponentProps>): void;
|
|
5
|
-
};
|
|
6
|
-
declare const Body: import("svelte").Component<{
|
|
7
|
-
styleString?: string;
|
|
8
|
-
children: any;
|
|
9
|
-
} & Record<string, any>, {}, "">;
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
10
2
|
type $$ComponentProps = {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
3
|
+
children?: any;
|
|
4
|
+
} & HTMLAttributes<HTMLBodyElement>;
|
|
5
|
+
declare const Body: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type Body = ReturnType<typeof Body>;
|
|
7
|
+
export default Body;
|
|
@@ -1,15 +1,22 @@
|
|
|
1
|
-
<script>
|
|
1
|
+
<script lang="ts">
|
|
2
2
|
import { styleToString, pxToPt } from '../utils/index.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
4
|
|
|
4
5
|
let {
|
|
5
6
|
href = '#',
|
|
6
7
|
target = '_blank',
|
|
7
|
-
|
|
8
|
+
style = '',
|
|
8
9
|
pX = 0,
|
|
9
10
|
pY = 0,
|
|
10
11
|
children,
|
|
11
12
|
...restProps
|
|
12
|
-
}
|
|
13
|
+
}: {
|
|
14
|
+
href?: string;
|
|
15
|
+
target?: string;
|
|
16
|
+
pX?: number;
|
|
17
|
+
pY?: number;
|
|
18
|
+
children: any;
|
|
19
|
+
} & HTMLAttributes<HTMLAnchorElement> = $props();
|
|
13
20
|
|
|
14
21
|
const y = pY * 2;
|
|
15
22
|
const textRaise = pxToPt(y.toString());
|
|
@@ -34,7 +41,7 @@
|
|
|
34
41
|
msoTextRaise: pY ? pxToPt(pY.toString()) : undefined
|
|
35
42
|
});
|
|
36
43
|
|
|
37
|
-
const finalStyle = buttonStyle + (
|
|
44
|
+
const finalStyle = buttonStyle + (style ? ';' + style : '');
|
|
38
45
|
</script>
|
|
39
46
|
|
|
40
47
|
<a {...restProps} {href} {target} style={finalStyle}>
|
|
@@ -1,21 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
type Button = {
|
|
3
|
-
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
-
$set?(props: Partial<$$ComponentProps>): void;
|
|
5
|
-
};
|
|
6
|
-
declare const Button: import("svelte").Component<{
|
|
7
|
-
href?: string;
|
|
8
|
-
target?: string;
|
|
9
|
-
styleString?: string;
|
|
10
|
-
pX?: number;
|
|
11
|
-
pY?: number;
|
|
12
|
-
children: any;
|
|
13
|
-
} & Record<string, any>, {}, "">;
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
14
2
|
type $$ComponentProps = {
|
|
15
3
|
href?: string;
|
|
16
4
|
target?: string;
|
|
17
|
-
styleString?: string;
|
|
18
5
|
pX?: number;
|
|
19
6
|
pY?: number;
|
|
20
7
|
children: any;
|
|
21
|
-
} &
|
|
8
|
+
} & HTMLAttributes<HTMLAnchorElement>;
|
|
9
|
+
declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
10
|
+
type Button = ReturnType<typeof Button>;
|
|
11
|
+
export default Button;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { styleToString } from '../utils/index.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
style,
|
|
7
|
+
children,
|
|
8
|
+
...restProps
|
|
9
|
+
}: {
|
|
10
|
+
style?: string;
|
|
11
|
+
children?: any;
|
|
12
|
+
colspan?: number;
|
|
13
|
+
align?: 'left' | 'center' | 'right' | 'justify' | 'char';
|
|
14
|
+
} & HTMLAttributes<HTMLTableCellElement> = $props();
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<td style={styleToString({ width: '100%' }) + (style ? ';' + style : '')} {...restProps}>
|
|
18
|
+
{@render children?.()}
|
|
19
|
+
</td>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
style?: string;
|
|
4
|
+
children?: any;
|
|
5
|
+
colspan?: number;
|
|
6
|
+
align?: 'left' | 'center' | 'right' | 'justify' | 'char';
|
|
7
|
+
} & HTMLAttributes<HTMLTableCellElement>;
|
|
8
|
+
declare const Column: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
9
|
+
type Column = ReturnType<typeof Column>;
|
|
10
|
+
export default Column;
|
|
@@ -1,11 +1,18 @@
|
|
|
1
|
-
<script>
|
|
1
|
+
<script lang="ts">
|
|
2
2
|
import { styleToString } from '../utils/index.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
4
|
|
|
4
|
-
let {
|
|
5
|
+
let {
|
|
6
|
+
children,
|
|
7
|
+
style,
|
|
8
|
+
...restProps
|
|
9
|
+
}: {
|
|
10
|
+
children: any;
|
|
11
|
+
} & HTMLAttributes<HTMLTableElement> = $props();
|
|
5
12
|
|
|
6
13
|
// Default max-width for email containers (600px = 37.5em)
|
|
7
14
|
const baseStyle = styleToString({ maxWidth: '37.5em' });
|
|
8
|
-
const finalStyle = baseStyle + (
|
|
15
|
+
const finalStyle = baseStyle + (style ? ';' + style : '');
|
|
9
16
|
</script>
|
|
10
17
|
|
|
11
18
|
<table
|
|
@@ -1,13 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
type Container = {
|
|
3
|
-
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
-
$set?(props: Partial<$$ComponentProps>): void;
|
|
5
|
-
};
|
|
6
|
-
declare const Container: import("svelte").Component<{
|
|
7
|
-
styleString?: string;
|
|
8
|
-
children: any;
|
|
9
|
-
} & Record<string, any>, {}, "">;
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
10
2
|
type $$ComponentProps = {
|
|
11
|
-
styleString?: string;
|
|
12
3
|
children: any;
|
|
13
|
-
} &
|
|
4
|
+
} & HTMLAttributes<HTMLTableElement>;
|
|
5
|
+
declare const Container: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type Container = ReturnType<typeof Container>;
|
|
7
|
+
export default Container;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { styleToString } from '../utils/index.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let props: HTMLAttributes<HTMLHRElement> = $props();
|
|
6
|
+
|
|
7
|
+
const style = styleToString({
|
|
8
|
+
width: '100%',
|
|
9
|
+
border: 'none',
|
|
10
|
+
borderTop: '1px solid #eaeaea'
|
|
11
|
+
});
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<hr {...props} style={style + (props.style ? ';' + props.style : '')} />
|
|
@@ -2,18 +2,18 @@
|
|
|
2
2
|
interface Props {
|
|
3
3
|
lang?: string;
|
|
4
4
|
dir?: 'ltr' | 'rtl' | 'auto' | null | undefined;
|
|
5
|
-
|
|
5
|
+
style?: string;
|
|
6
6
|
children?: any;
|
|
7
7
|
[key: string]: any;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
let { lang = 'en', dir = 'ltr',
|
|
10
|
+
let { lang = 'en', dir = 'ltr', children, ...restProps }: Props = $props();
|
|
11
11
|
|
|
12
12
|
const doctype =
|
|
13
13
|
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
|
|
14
14
|
</script>
|
|
15
15
|
|
|
16
16
|
{@html doctype}
|
|
17
|
-
<html {...restProps} id="
|
|
17
|
+
<html {...restProps} id="__better-svelte-email" {lang} {dir}>
|
|
18
18
|
{@render children?.()}
|
|
19
19
|
</html>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { styleToString } from '../utils/index.js';
|
|
3
|
+
import type { HTMLAttributes } 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
|
+
} & HTMLAttributes<HTMLAnchorElement> = $props();
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<a
|
|
19
|
+
{href}
|
|
20
|
+
{target}
|
|
21
|
+
{...restProps}
|
|
22
|
+
style={styleToString({ textDecorationLine: 'none', color: '#067df7' }) +
|
|
23
|
+
(style ? ';' + style : '')}
|
|
24
|
+
>
|
|
25
|
+
{@render children?.()}
|
|
26
|
+
</a>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
href: string;
|
|
4
|
+
target?: string;
|
|
5
|
+
children: any;
|
|
6
|
+
} & HTMLAttributes<HTMLAnchorElement>;
|
|
7
|
+
declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
8
|
+
type Link = ReturnType<typeof Link>;
|
|
9
|
+
export default Link;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { styleToString } from '../utils/index.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
style,
|
|
7
|
+
children,
|
|
8
|
+
...restProps
|
|
9
|
+
}: {
|
|
10
|
+
style?: string;
|
|
11
|
+
children: any;
|
|
12
|
+
} & HTMLAttributes<HTMLTableElement> = $props();
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<table
|
|
16
|
+
{style}
|
|
17
|
+
align="center"
|
|
18
|
+
width="100%"
|
|
19
|
+
border={0}
|
|
20
|
+
cellPadding={0}
|
|
21
|
+
cellSpacing={0}
|
|
22
|
+
role="presentation"
|
|
23
|
+
{...restProps}
|
|
24
|
+
>
|
|
25
|
+
<tbody style="width: 100%;">
|
|
26
|
+
<tr style="width: 100%;">
|
|
27
|
+
{@render children?.()}
|
|
28
|
+
</tr>
|
|
29
|
+
</tbody>
|
|
30
|
+
</table>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
style?: string;
|
|
4
|
+
children: any;
|
|
5
|
+
} & HTMLAttributes<HTMLTableElement>;
|
|
6
|
+
declare const Row: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
7
|
+
type Row = ReturnType<typeof Row>;
|
|
8
|
+
export default Row;
|
|
@@ -1,15 +1,24 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
children,
|
|
6
|
+
style,
|
|
7
|
+
...restProps
|
|
8
|
+
}: {
|
|
9
|
+
children: any;
|
|
10
|
+
} & HTMLAttributes<HTMLTableElement> = $props();
|
|
3
11
|
</script>
|
|
4
12
|
|
|
5
13
|
<table
|
|
14
|
+
align="center"
|
|
6
15
|
width="100%"
|
|
7
|
-
|
|
16
|
+
border="0"
|
|
8
17
|
cellspacing="0"
|
|
9
18
|
cellpadding="0"
|
|
10
|
-
|
|
19
|
+
role="presentation"
|
|
11
20
|
{...restProps}
|
|
12
|
-
style
|
|
21
|
+
{style}
|
|
13
22
|
>
|
|
14
23
|
<tbody>
|
|
15
24
|
<tr>
|
|
@@ -1,13 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
type Section = {
|
|
3
|
-
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
-
$set?(props: Partial<$$ComponentProps>): void;
|
|
5
|
-
};
|
|
6
|
-
declare const Section: import("svelte").Component<{
|
|
7
|
-
styleString?: string;
|
|
8
|
-
children: any;
|
|
9
|
-
} & Record<string, any>, {}, "">;
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
10
2
|
type $$ComponentProps = {
|
|
11
|
-
styleString?: string;
|
|
12
3
|
children: any;
|
|
13
|
-
} &
|
|
4
|
+
} & HTMLAttributes<HTMLTableElement>;
|
|
5
|
+
declare const Section: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type Section = ReturnType<typeof Section>;
|
|
7
|
+
export default Section;
|
|
@@ -1,7 +1,17 @@
|
|
|
1
|
-
<script>
|
|
1
|
+
<script lang="ts">
|
|
2
2
|
import { styleToString } from '../utils/index.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
4
|
|
|
4
|
-
let {
|
|
5
|
+
let {
|
|
6
|
+
as = 'p',
|
|
7
|
+
style = '',
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: {
|
|
11
|
+
as?: string;
|
|
12
|
+
style?: string;
|
|
13
|
+
children: any;
|
|
14
|
+
} & HTMLAttributes<HTMLParagraphElement> = $props();
|
|
5
15
|
|
|
6
16
|
// Default email-safe text styles
|
|
7
17
|
const baseStyle = styleToString({
|
|
@@ -9,7 +19,7 @@
|
|
|
9
19
|
lineHeight: '24px',
|
|
10
20
|
margin: '16px 0'
|
|
11
21
|
});
|
|
12
|
-
const finalStyle = baseStyle + (
|
|
22
|
+
const finalStyle = baseStyle + (style ? ';' + style : '');
|
|
13
23
|
</script>
|
|
14
24
|
|
|
15
25
|
<svelte:element this={as} {...restProps} style={finalStyle}>
|
|
@@ -1,15 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
type Text = {
|
|
3
|
-
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
-
$set?(props: Partial<$$ComponentProps>): void;
|
|
5
|
-
};
|
|
6
|
-
declare const Text: import("svelte").Component<{
|
|
7
|
-
as?: string;
|
|
8
|
-
styleString?: string;
|
|
9
|
-
children: any;
|
|
10
|
-
} & Record<string, any>, {}, "">;
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
11
2
|
type $$ComponentProps = {
|
|
12
3
|
as?: string;
|
|
13
|
-
|
|
4
|
+
style?: string;
|
|
14
5
|
children: any;
|
|
15
|
-
} &
|
|
6
|
+
} & HTMLAttributes<HTMLParagraphElement>;
|
|
7
|
+
declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
8
|
+
type Text = ReturnType<typeof Text>;
|
|
9
|
+
export default Text;
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
export { default as Html } from './Html.svelte';
|
|
2
|
-
export { default as Head } from './Head.svelte';
|
|
3
1
|
export { default as Body } from './Body.svelte';
|
|
2
|
+
export { default as Button } from './Button.svelte';
|
|
3
|
+
export { default as Column } from './Column.svelte';
|
|
4
4
|
export { default as Container } from './Container.svelte';
|
|
5
|
+
export { default as Head } from './Head.svelte';
|
|
6
|
+
export { default as Hr } from './Hr.svelte';
|
|
7
|
+
export { default as Html } from './Html.svelte';
|
|
8
|
+
export { default as Link } from './Link.svelte';
|
|
9
|
+
export { default as Row } from './Row.svelte';
|
|
5
10
|
export { default as Section } from './Section.svelte';
|
|
6
11
|
export { default as Text } from './Text.svelte';
|
|
7
|
-
export { default as Button } from './Button.svelte';
|
package/dist/components/index.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
// Email Components for better-svelte-email
|
|
2
2
|
// These components work with the preprocessor's styleString prop
|
|
3
|
-
export { default as Html } from './Html.svelte';
|
|
4
|
-
export { default as Head } from './Head.svelte';
|
|
5
3
|
export { default as Body } from './Body.svelte';
|
|
4
|
+
export { default as Button } from './Button.svelte';
|
|
5
|
+
export { default as Column } from './Column.svelte';
|
|
6
6
|
export { default as Container } from './Container.svelte';
|
|
7
|
+
export { default as Head } from './Head.svelte';
|
|
8
|
+
export { default as Hr } from './Hr.svelte';
|
|
9
|
+
export { default as Html } from './Html.svelte';
|
|
10
|
+
export { default as Link } from './Link.svelte';
|
|
11
|
+
export { default as Row } from './Row.svelte';
|
|
7
12
|
export { default as Section } from './Section.svelte';
|
|
8
13
|
export { default as Text } from './Text.svelte';
|
|
9
|
-
export { default as Button } from './Button.svelte';
|