better-svelte-email 0.3.6 → 1.0.0-beta.1

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 (66) hide show
  1. package/README.md +1 -0
  2. package/dist/components/Body.svelte +7 -3
  3. package/dist/components/Button.svelte +10 -12
  4. package/dist/components/Button.svelte.d.ts +2 -2
  5. package/dist/index.d.ts +2 -6
  6. package/dist/index.js +3 -5
  7. package/dist/preprocessor/index.d.ts +19 -0
  8. package/dist/preprocessor/index.js +19 -0
  9. package/dist/preview/EmailPreview.svelte +539 -196
  10. package/dist/preview/EmailPreview.svelte.d.ts +11 -1
  11. package/dist/preview/EmailTreeNode.svelte +255 -0
  12. package/dist/preview/EmailTreeNode.svelte.d.ts +10 -0
  13. package/dist/preview/Favicon.svelte +106 -0
  14. package/dist/preview/Favicon.svelte.d.ts +5 -0
  15. package/dist/preview/email-tree.d.ts +13 -0
  16. package/dist/preview/email-tree.js +61 -0
  17. package/dist/preview/index.d.ts +35 -5
  18. package/dist/preview/index.js +87 -37
  19. package/dist/preview/theme.css +42 -0
  20. package/dist/render/index.d.ts +66 -0
  21. package/dist/render/index.js +138 -0
  22. package/dist/render/utils/compatibility/sanitize-class-name.d.ts +7 -0
  23. package/dist/render/utils/compatibility/sanitize-class-name.js +35 -0
  24. package/dist/render/utils/css/extract-rules-per-class.d.ts +5 -0
  25. package/dist/render/utils/css/extract-rules-per-class.js +37 -0
  26. package/dist/render/utils/css/get-custom-properties.d.ts +8 -0
  27. package/dist/render/utils/css/get-custom-properties.js +37 -0
  28. package/dist/render/utils/css/is-rule-inlinable.d.ts +2 -0
  29. package/dist/render/utils/css/is-rule-inlinable.js +6 -0
  30. package/dist/render/utils/css/make-inline-styles-for.d.ts +3 -0
  31. package/dist/render/utils/css/make-inline-styles-for.js +57 -0
  32. package/dist/render/utils/css/resolve-all-css-variables.d.ts +8 -0
  33. package/dist/render/utils/css/resolve-all-css-variables.js +123 -0
  34. package/dist/render/utils/css/resolve-calc-expressions.d.ts +5 -0
  35. package/dist/render/utils/css/resolve-calc-expressions.js +126 -0
  36. package/dist/render/utils/css/sanitize-declarations.d.ts +15 -0
  37. package/dist/render/utils/css/sanitize-declarations.js +354 -0
  38. package/dist/render/utils/css/sanitize-non-inlinable-rules.d.ts +11 -0
  39. package/dist/render/utils/css/sanitize-non-inlinable-rules.js +33 -0
  40. package/dist/render/utils/css/sanitize-stylesheet.d.ts +2 -0
  41. package/dist/render/utils/css/sanitize-stylesheet.js +8 -0
  42. package/dist/render/utils/css/unwrap-value.d.ts +2 -0
  43. package/dist/render/utils/css/unwrap-value.js +6 -0
  44. package/dist/render/utils/html/is-valid-node.d.ts +2 -0
  45. package/dist/render/utils/html/is-valid-node.js +3 -0
  46. package/dist/render/utils/html/remove-attributes-functions.d.ts +2 -0
  47. package/dist/render/utils/html/remove-attributes-functions.js +10 -0
  48. package/dist/render/utils/html/walk.d.ts +15 -0
  49. package/dist/render/utils/html/walk.js +36 -0
  50. package/dist/render/utils/tailwindcss/add-inlined-styles-to-element.d.ts +4 -0
  51. package/dist/render/utils/tailwindcss/add-inlined-styles-to-element.js +61 -0
  52. package/dist/render/utils/tailwindcss/pixel-based-preset.d.ts +2 -0
  53. package/dist/render/utils/tailwindcss/pixel-based-preset.js +58 -0
  54. package/dist/render/utils/tailwindcss/setup-tailwind.d.ts +7 -0
  55. package/dist/render/utils/tailwindcss/setup-tailwind.js +67 -0
  56. package/dist/render/utils/tailwindcss/tailwind-stylesheets/index.d.ts +2 -0
  57. package/dist/render/utils/tailwindcss/tailwind-stylesheets/index.js +899 -0
  58. package/dist/render/utils/tailwindcss/tailwind-stylesheets/preflight.d.ts +2 -0
  59. package/dist/render/utils/tailwindcss/tailwind-stylesheets/preflight.js +396 -0
  60. package/dist/render/utils/tailwindcss/tailwind-stylesheets/theme.d.ts +2 -0
  61. package/dist/render/utils/tailwindcss/tailwind-stylesheets/theme.js +465 -0
  62. package/dist/render/utils/tailwindcss/tailwind-stylesheets/utilities.d.ts +2 -0
  63. package/dist/render/utils/tailwindcss/tailwind-stylesheets/utilities.js +4 -0
  64. package/dist/utils/index.d.ts +2 -1
  65. package/dist/utils/index.js +13 -10
  66. package/package.json +39 -20
package/README.md CHANGED
@@ -1,4 +1,5 @@
1
1
  <p align="center">
2
+ <img src="static/favicon.svg" alt="Better Svelte Email" width="128" height="128">
2
3
  <h3 align="center">Better Svelte Email</h3>
3
4
  <p align="center">
4
5
  Create beautiful emails in Svelte with first-class Tailwind support
package/dist/components/Body.svelte CHANGED
@@ -1,15 +1,19 @@
1
1
  <script lang="ts">
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
3
 
4
- let { children, style, ...restProps }: { children?: any } & HTMLAttributes<HTMLBodyElement> =
5
- $props();
4
+ let {
5
+ children,
6
+ style,
7
+ class: className,
8
+ ...restProps
9
+ }: { children?: any } & HTMLAttributes<HTMLBodyElement> = $props();
6
10
  </script>
7
11
 
8
12
  <body {...restProps}>
9
13
  <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
10
14
  <tbody>
11
15
  <tr>
12
- <td {style}>
16
+ <td {style} class={className}>
13
17
  {@render children?.()}
14
18
  </td>
15
19
  </tr>
package/dist/components/Button.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
2
  import { styleToString, pxToPt, combineStyles } from '../utils/index.js';
3
- import type { HTMLAttributes } from 'svelte/elements';
3
+ import type { HTMLAnchorAttributes } from 'svelte/elements';
4
4
 
5
5
  let {
6
6
  href = '#',
@@ -16,7 +16,7 @@
16
16
  pX?: number;
17
17
  pY?: number;
18
18
  children: any;
19
- } & HTMLAttributes<HTMLAnchorElement> = $props();
19
+ } & HTMLAnchorAttributes = $props();
20
20
 
21
21
  const y = pY * 2;
22
22
  const textRaise = pxToPt(y.toString());
@@ -43,17 +43,15 @@
43
43
  </script>
44
44
 
45
45
  <a {...restProps} {href} {target} style={combineStyles(buttonStyle, style)}>
46
- {#if pX}
47
- <span>
48
- {@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`}
49
- </span>
50
- {/if}
46
+ <span>
47
+ {@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`}
48
+ </span>
49
+
51
50
  <span style={buttonTextStyle}>
52
51
  {@render children?.()}
53
52
  </span>
54
- {#if pX}
55
- <span>
56
- {@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`}
57
- </span>
58
- {/if}
53
+
54
+ <span style="display: none;">
55
+ {@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`}
56
+ </span>
59
57
  </a>
package/dist/components/Button.svelte.d.ts CHANGED
@@ -1,11 +1,11 @@
1
- import type { HTMLAttributes } from 'svelte/elements';
1
+ import type { HTMLAnchorAttributes } from 'svelte/elements';
2
2
  type $$ComponentProps = {
3
3
  href?: string;
4
4
  target?: string;
5
5
  pX?: number;
6
6
  pY?: number;
7
7
  children: any;
8
- } & HTMLAttributes<HTMLAnchorElement>;
8
+ } & HTMLAnchorAttributes;
9
9
  declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
10
10
  type Button = ReturnType<typeof Button>;
11
11
  export default Button;
package/dist/index.d.ts CHANGED
@@ -1,9 +1,5 @@
1
1
  export * from './components/index.js';
2
2
  export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
3
3
  export type { PreprocessorOptions, ComponentTransform } from './preprocessor/index.js';
4
- export type { ClassAttribute, TransformResult, MediaQueryStyle } from './preprocessor/types.js';
5
- export type { TailwindConfig } from 'tw-to-css';
6
- export { parseAttributes as parseClassAttributes, findHeadComponent } from './preprocessor/parser.js';
7
- export { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './preprocessor/transformer.js';
8
- export { injectMediaQueries } from './preprocessor/head-injector.js';
9
- export { styleToString, pxToPt, combineStyles, withMargin, renderAsPlainText } from './utils/index.js';
4
+ export { default as Renderer, type TailwindConfig, type RenderOptions } from './render/index.js';
5
+ export * from './utils/index.js';
package/dist/index.js CHANGED
@@ -2,9 +2,7 @@
2
2
  export * from './components/index.js';
3
3
  // Export the preprocessor
4
4
  export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
5
- // Export individual functions for advanced usage
6
- export { parseAttributes as parseClassAttributes, findHeadComponent } from './preprocessor/parser.js';
7
- export { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './preprocessor/transformer.js';
8
- export { injectMediaQueries } from './preprocessor/head-injector.js';
5
+ // Export renderer
6
+ export { default as Renderer } from './render/index.js';
9
7
  // Export utilities
10
- export { styleToString, pxToPt, combineStyles, withMargin, renderAsPlainText } from './utils/index.js';
8
+ export * from './utils/index.js';
package/dist/preprocessor/index.d.ts CHANGED
@@ -3,8 +3,11 @@ import type { PreprocessorOptions, ComponentTransform } from './types.js';
3
3
  /**
4
4
  * Svelte 5 preprocessor for transforming Tailwind classes in email components
5
5
  *
6
+ * @deprecated The preprocessor approach is deprecated. Use the `Renderer` class instead for better performance and flexibility.
7
+ *
6
8
  * @example
7
9
  * ```javascript
10
+ * // Old (deprecated):
8
11
  * // svelte.config.js
9
12
  * import { betterSvelteEmailPreprocessor } from 'better-svelte-email/preprocessor';
10
13
  *
@@ -17,6 +20,22 @@ import type { PreprocessorOptions, ComponentTransform } from './types.js';
17
20
  * })
18
21
  * ]
19
22
  * };
23
+ *
24
+ * // New (recommended):
25
+ * import Renderer from 'better-svelte-email/renderer';
26
+ * import EmailComponent from './email.svelte';
27
+ *
28
+ * const renderer = new Renderer({
29
+ * theme: {
30
+ * extend: {
31
+ * colors: { brand: '#FF3E00' }
32
+ * }
33
+ * }
34
+ * });
35
+ *
36
+ * const html = await renderer.render(EmailComponent, {
37
+ * props: { name: 'John' }
38
+ * });
20
39
  * ```
21
40
  *
22
41
  * Reference: https://svelte.dev/docs/svelte/svelte-compiler#preprocess
package/dist/preprocessor/index.js CHANGED
@@ -6,8 +6,11 @@ import path from 'path';
6
6
  /**
7
7
  * Svelte 5 preprocessor for transforming Tailwind classes in email components
8
8
  *
9
+ * @deprecated The preprocessor approach is deprecated. Use the `Renderer` class instead for better performance and flexibility.
10
+ *
9
11
  * @example
10
12
  * ```javascript
13
+ * // Old (deprecated):
11
14
  * // svelte.config.js
12
15
  * import { betterSvelteEmailPreprocessor } from 'better-svelte-email/preprocessor';
13
16
  *
@@ -20,6 +23,22 @@ import path from 'path';
20
23
  * })
21
24
  * ]
22
25
  * };
26
+ *
27
+ * // New (recommended):
28
+ * import Renderer from 'better-svelte-email/renderer';
29
+ * import EmailComponent from './email.svelte';
30
+ *
31
+ * const renderer = new Renderer({
32
+ * theme: {
33
+ * extend: {
34
+ * colors: { brand: '#FF3E00' }
35
+ * }
36
+ * }
37
+ * });
38
+ *
39
+ * const html = await renderer.render(EmailComponent, {
40
+ * props: { name: 'John' }
41
+ * });
23
42
  * ```
24
43
  *
25
44
  * Reference: https://svelte.dev/docs/svelte/svelte-compiler#preprocess