npm - better-svelte-email - Versions diffs - 0.3.5 → 1.0.0-beta.0 - Mend

better-svelte-email 0.3.5 → 1.0.0-beta.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 (56) hide show

package/dist/components/Body.svelte CHANGED Viewed

@@ -1,15 +1,19 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	let { children, style, ...restProps }: { children?: any } & HTMLAttributes<HTMLBodyElement> =
-		$props();
+	let {
+		children,
+		style,
+		class: className,
+		...restProps
+	}: { children?: any } & HTMLAttributes<HTMLBodyElement> = $props();
 </script>
 <body {...restProps}>
 	<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
 		<tbody>
 			<tr>
-				<td {style}>
+				<td {style} class={className}>
 					{@render children?.()}
 				</td>
 			</tr>

package/dist/components/Button.svelte CHANGED Viewed

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { styleToString, pxToPt, combineStyles } from '../utils/index.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
 	let {
 		href = '#',
@@ -16,7 +16,7 @@
 		pX?: number;
 		pY?: number;
 		children: any;
-	} & HTMLAttributes<HTMLAnchorElement> = $props();
+	} & HTMLAnchorAttributes = $props();
 	const y = pY * 2;
 	const textRaise = pxToPt(y.toString());
@@ -43,17 +43,15 @@
 </script>
 <a {...restProps} {href} {target} style={combineStyles(buttonStyle, style)}>
-	{#if pX}
-		<span>
-			{@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`}
-		</span>
-	{/if}
+	<span>
+		{@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`}
+	</span>
 	<span style={buttonTextStyle}>
 		{@render children?.()}
 	</span>
-	{#if pX}
-		<span>
-			{@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`}
-		</span>
-	{/if}
+	<span style="display: none;">
+		{@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`}
+	</span>
 </a>

package/dist/components/Button.svelte.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
 type $$ComponentProps = {
     href?: string;
     target?: string;
     pX?: number;
     pY?: number;
     children: any;
-} & HTMLAttributes<HTMLAnchorElement>;
+} & HTMLAnchorAttributes;
 declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/index.d.ts CHANGED Viewed

@@ -1,9 +1,5 @@
 export * from './components/index.js';
 export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
 export type { PreprocessorOptions, ComponentTransform } from './preprocessor/index.js';
-export type { ClassAttribute, TransformResult, MediaQueryStyle } from './preprocessor/types.js';
-export type { TailwindConfig } from 'tw-to-css';
-export { parseAttributes as parseClassAttributes, findHeadComponent } from './preprocessor/parser.js';
-export { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './preprocessor/transformer.js';
-export { injectMediaQueries } from './preprocessor/head-injector.js';
-export { styleToString, pxToPt, combineStyles, withMargin, renderAsPlainText } from './utils/index.js';
+export { default as Renderer, type TailwindConfig, type RenderOptions } from './render/index.js';
+export * from './utils/index.js';

package/dist/index.js CHANGED Viewed

@@ -2,9 +2,7 @@
 export * from './components/index.js';
 // Export the preprocessor
 export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
-// Export individual functions for advanced usage
-export { parseAttributes as parseClassAttributes, findHeadComponent } from './preprocessor/parser.js';
-export { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './preprocessor/transformer.js';
-export { injectMediaQueries } from './preprocessor/head-injector.js';
+// Export renderer
+export { default as Renderer } from './render/index.js';
 // Export utilities
-export { styleToString, pxToPt, combineStyles, withMargin, renderAsPlainText } from './utils/index.js';
+export * from './utils/index.js';

package/dist/preprocessor/index.d.ts CHANGED Viewed

@@ -3,8 +3,11 @@ import type { PreprocessorOptions, ComponentTransform } from './types.js';
 /**
  * Svelte 5 preprocessor for transforming Tailwind classes in email components
  *
+ * @deprecated The preprocessor approach is deprecated. Use the `Renderer` class instead for better performance and flexibility.
+ *
  * @example
  * ```javascript
+ * // Old (deprecated):
  * // svelte.config.js
  * import { betterSvelteEmailPreprocessor } from 'better-svelte-email/preprocessor';
  *
@@ -17,6 +20,22 @@ import type { PreprocessorOptions, ComponentTransform } from './types.js';
  *     })
  *   ]
  * };
+ *
+ * // New (recommended):
+ * import Renderer from 'better-svelte-email/renderer';
+ * import EmailComponent from './email.svelte';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: { brand: '#FF3E00' }
+ *     }
+ *   }
+ * });
+ *
+ * const html = await renderer.render(EmailComponent, {
+ *   props: { name: 'John' }
+ * });
  * ```
  *
  * Reference: https://svelte.dev/docs/svelte/svelte-compiler#preprocess

package/dist/preprocessor/index.js CHANGED Viewed

@@ -6,8 +6,11 @@ import path from 'path';
 /**
  * Svelte 5 preprocessor for transforming Tailwind classes in email components
  *
+ * @deprecated The preprocessor approach is deprecated. Use the `Renderer` class instead for better performance and flexibility.
+ *
  * @example
  * ```javascript
+ * // Old (deprecated):
  * // svelte.config.js
  * import { betterSvelteEmailPreprocessor } from 'better-svelte-email/preprocessor';
  *
@@ -20,6 +23,22 @@ import path from 'path';
  *     })
  *   ]
  * };
+ *
+ * // New (recommended):
+ * import Renderer from 'better-svelte-email/renderer';
+ * import EmailComponent from './email.svelte';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: { brand: '#FF3E00' }
+ *     }
+ *   }
+ * });
+ *
+ * const html = await renderer.render(EmailComponent, {
+ *   props: { name: 'John' }
+ * });
  * ```
  *
  * Reference: https://svelte.dev/docs/svelte/svelte-compiler#preprocess

package/dist/preview/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import type { RequestEvent } from '@sveltejs/kit';
+import Renderer from '../render/index.js';
 /**
  * Import all Svelte email components file paths.
  * Create a list containing all Svelte email component file names.
@@ -34,19 +35,33 @@ type EmailListProps = {
  * ```
  */
 export declare const emailList: ({ path: emailPath, root }?: EmailListProps) => PreviewData;
+export declare const getEmailComponent: (emailPath: string, file: string) => Promise<any>;
 /**
  * SvelteKit form action to render an email component.
  * Use this with the Preview component to render email templates on demand.
  *
+ * @param options.renderer - Optional renderer to use for rendering the email component (use this if you want to use a custom tailwind config)
+ *
  * @example
  * ```ts
  * // +page.server.ts
  * import { createEmail } from 'better-svelte-email/preview';
+ * import Renderer from 'better-svelte-email/render';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: '#FF3E00'
+ *       }
+ *     }
+ *   }
+ * });
  *
- * export const actions = createEmail;
+ * export const actions = createEmail(renderer);
  * ```
  */
-export declare const createEmail: {
+export declare const createEmail: (renderer?: Renderer) => {
     'create-email': (event: RequestEvent) => Promise<{
         status: number;
         body: {
@@ -79,20 +94,33 @@ export declare const SendEmailFunction: ({ from, to, subject, html }: {
  *
  * @param options.resendApiKey - Your Resend API key (keep this server-side only)
  * @param options.customSendEmailFunction - Optional custom function to send emails
+ * @param options.renderer - Optional renderer to use for rendering the email component (use this if you want to use a custom tailwind config)
  *
  * @example
  * ```ts
  * // In +page.server.ts
  * import { PRIVATE_RESEND_API_KEY } from '$env/static/private';
+ * import Renderer from 'better-svelte-email/render';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: '#FF3E00'
+ *       }
+ *     }
+ *   }
+ * });
  *
  * export const actions = {
- *   ...createEmail,
- *   ...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY })
+ *   ...createEmail(renderer),
+ *   ...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY, renderer })
  * };
  * ```
  */
-export declare const sendEmail: ({ customSendEmailFunction, resendApiKey }?: {
+export declare const sendEmail: ({ customSendEmailFunction, resendApiKey, renderer }?: {
     customSendEmailFunction?: typeof SendEmailFunction;
+    renderer?: Renderer;
     resendApiKey?: string;
 }) => {
     'send-email': (event: RequestEvent) => Promise<{
@@ -100,4 +128,5 @@ export declare const sendEmail: ({ customSendEmailFunction, resendApiKey }?: {
         error: any;
     }>;
 };
+export declare function getFiles(dir: string, files?: string[]): string[];
 export { default as EmailPreview } from './EmailPreview.svelte';

package/dist/preview/index.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { Resend } from 'resend';
 import fs from 'fs';
-import { render } from 'svelte/server';
 import path from 'path';
 import prettier from 'prettier/standalone';
 import parserHtml from 'prettier/parser-html';
+import Renderer from '../render/index.js';
 /**
  * Get a list of all email component files in the specified directory.
  *
@@ -42,17 +42,22 @@ export const emailList = ({ path: emailPath = '/src/lib/emails', root } = {}) =>
         console.warn(`Email directory not found: ${fullPath}`);
         return { files: null, path: emailPath };
     }
-    const files = createEmailComponentList(emailPath, getFiles(fullPath));
+    // Use the absolute folder path as the root when creating the component list so
+    // we can compute correct relative paths on all platforms.
+    const files = createEmailComponentList(fullPath, getFiles(fullPath));
     if (!files.length) {
         return { files: null, path: emailPath };
     }
     return { files, path: emailPath };
 };
-const getEmailComponent = async (emailPath, file) => {
+export const getEmailComponent = async (emailPath, file) => {
     const fileName = `${file}.svelte`;
     try {
         // Import the email component dynamically
-        return (await import(/* @vite-ignore */ path.join(emailPath, fileName))).default;
+        const normalizedEmailPath = emailPath.replace(/\\/g, '/').replace(/\/+$/, '');
+        const normalizedFile = file.replace(/\\/g, '/').replace(/^\/+/, '');
+        const importPath = `${normalizedEmailPath}/${normalizedFile}.svelte`;
+        return (await import(/* @vite-ignore */ importPath)).default;
     }
     catch (err) {
         throw new Error(`Failed to import email component '${fileName}'. Make sure the file exists and includes the <Head /> component.\nOriginal error: ${err}`);
@@ -62,49 +67,63 @@ const getEmailComponent = async (emailPath, file) => {
  * SvelteKit form action to render an email component.
  * Use this with the Preview component to render email templates on demand.
  *
+ * @param options.renderer - Optional renderer to use for rendering the email component (use this if you want to use a custom tailwind config)
+ *
  * @example
  * ```ts
  * // +page.server.ts
  * import { createEmail } from 'better-svelte-email/preview';
+ * import Renderer from 'better-svelte-email/render';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: '#FF3E00'
+ *       }
+ *     }
+ *   }
+ * });
  *
- * export const actions = createEmail;
+ * export const actions = createEmail(renderer);
  * ```
  */
-export const createEmail = {
-    'create-email': async (event) => {
-        try {
-            const data = await event.request.formData();
-            const file = data.get('file');
-            const emailPath = data.get('path');
-            if (!file || !emailPath) {
+export const createEmail = (renderer = new Renderer()) => {
+    return {
+        'create-email': async (event) => {
+            try {
+                const data = await event.request.formData();
+                const file = data.get('file');
+                const emailPath = data.get('path');
+                if (!file || !emailPath) {
+                    return {
+                        status: 400,
+                        body: { error: 'Missing file or path parameter' }
+                    };
+                }
+                const emailComponent = await getEmailComponent(emailPath, file);
+                // Render the component to HTML
+                const html = await renderer.render(emailComponent);
+                // Remove all HTML comments from the body before formatting
+                const formattedHtml = await prettier.format(html, {
+                    parser: 'html',
+                    plugins: [parserHtml]
+                });
                 return {
-                    status: 400,
-                    body: { error: 'Missing file or path parameter' }
+                    body: formattedHtml
+                };
+            }
+            catch (error) {
+                console.error('Error rendering email:', error);
+                return {
+                    status: 500,
+                    error: {
+                        message: error instanceof Error ? error.message : 'Failed to render email'
+                    }
                 };
             }
-            const emailComponent = await getEmailComponent(emailPath, file);
-            // Render the component to HTML
-            const { body } = render(emailComponent);
-            // Remove all HTML comments from the body before formatting
-            const bodyWithoutComments = body.replace(/<!--[\s\S]*?-->/g, '');
-            const formattedBody = await prettier.format(bodyWithoutComments, {
-                parser: 'html',
-                plugins: [parserHtml]
-            });
-            return {
-                body: formattedBody
-            };
-        }
-        catch (error) {
-            console.error('Error rendering email:', error);
-            return {
-                status: 500,
-                error: {
-                    message: error instanceof Error ? error.message : 'Failed to render email'
-                }
-            };
         }
-    }
+    };
 };
 const defaultSendEmailFunction = async ({ from, to, subject, html }, resendApiKey) => {
     // stringify api key to comment out temp
@@ -123,19 +142,31 @@ const defaultSendEmailFunction = async ({ from, to, subject, html }, resendApiKe
  *
  * @param options.resendApiKey - Your Resend API key (keep this server-side only)
  * @param options.customSendEmailFunction - Optional custom function to send emails
+ * @param options.renderer - Optional renderer to use for rendering the email component (use this if you want to use a custom tailwind config)
  *
  * @example
  * ```ts
  * // In +page.server.ts
  * import { PRIVATE_RESEND_API_KEY } from '$env/static/private';
+ * import Renderer from 'better-svelte-email/render';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: '#FF3E00'
+ *       }
+ *     }
+ *   }
+ * });
  *
  * export const actions = {
- *   ...createEmail,
- *   ...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY })
+ *   ...createEmail(renderer),
+ *   ...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY, renderer })
  * };
  * ```
  */
-export const sendEmail = ({ customSendEmailFunction, resendApiKey } = {}) => {
+export const sendEmail = ({ customSendEmailFunction, resendApiKey, renderer = new Renderer() } = {}) => {
     return {
         'send-email': async (event) => {
             const data = await event.request.formData();
@@ -152,7 +183,7 @@ export const sendEmail = ({ customSendEmailFunction, resendApiKey } = {}) => {
                 from: 'svelte-email-tailwind <onboarding@resend.dev>',
                 to: `${data.get('to')}`,
                 subject: `${data.get('component')} ${data.get('note') ? '| ' + data.get('note') : ''}`,
-                html: (await render(emailComponent)).body
+                html: await renderer.render(emailComponent)
             };
             let sent = { success: false, error: null };
             if (!customSendEmailFunction && resendApiKey) {
@@ -179,7 +210,7 @@ export const sendEmail = ({ customSendEmailFunction, resendApiKey } = {}) => {
     };
 };
 // Recursive function to get files
-function getFiles(dir, files = []) {
+export function getFiles(dir, files = []) {
     // Get an array of all files and directories in the passed directory using fs.readdirSync
     const fileList = fs.readdirSync(dir);
     // Create the full path of the file/directory by concatenating the passed directory and file/directory name
@@ -203,9 +234,25 @@ function getFiles(dir, files = []) {
 function createEmailComponentList(root, paths) {
     const emailComponentList = [];
     paths.forEach((filePath) => {
-        if (filePath.includes(`.svelte`)) {
-            const fileName = filePath.substring(filePath.indexOf(root) + root.length + 1, filePath.indexOf('.svelte'));
-            emailComponentList.push(fileName);
+        if (filePath.endsWith('.svelte')) {
+            // Get the directory name from the full path
+            const fileDir = path.dirname(filePath);
+            // Get the base name without extension
+            const baseName = path.basename(filePath, '.svelte');
+            // Normalize paths for cross-platform comparison
+            const rootNormalized = path.normalize(root);
+            const fileDirNormalized = path.normalize(fileDir);
+            // Find where root appears in the full directory path
+            const rootIndex = fileDirNormalized.indexOf(rootNormalized);
+            if (rootIndex !== -1) {
+                // Get everything after the root path
+                const afterRoot = fileDirNormalized.substring(rootIndex + rootNormalized.length);
+                // Combine with the base name using path.join for proper separators
+                const relativePath = afterRoot ? path.join(afterRoot, baseName) : baseName;
+                // Remove leading path separators
+                const cleanPath = relativePath.replace(/^[/\\]+/, '');
+                emailComponentList.push(cleanPath);
+            }
         }
     });
     return emailComponentList;

package/dist/render/index.d.ts ADDED Viewed

@@ -0,0 +1,66 @@
+import { type DefaultTreeAdapterTypes } from 'parse5';
+import type { Config } from 'tailwindcss';
+export type TailwindConfig = Omit<Config, 'content'>;
+export type { DefaultTreeAdapterTypes as AST };
+/**
+ * Options for rendering a Svelte component
+ */
+export type RenderOptions = {
+    props?: Omit<Record<string, any>, '$$slots' | '$$events'> | undefined;
+    context?: Map<any, any>;
+    idPrefix?: string;
+};
+/**
+ * Email renderer that converts Svelte components to email-safe HTML with inlined Tailwind styles.
+ *
+ * @example
+ * ```ts
+ * import Renderer from 'better-svelte-email/renderer';
+ * import EmailComponent from './email.svelte';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: '#FF3E00'
+ *       }
+ *     }
+ *   }
+ * });
+ *
+ * const html = await renderer.render(EmailComponent, {
+ *   props: { name: 'John' }
+ * });
+ * ```
+ */
+export default class Renderer {
+    private tailwindConfig;
+    constructor(tailwindConfig?: TailwindConfig);
+    /**
+     * Renders a Svelte component to email-safe HTML with inlined Tailwind CSS.
+     *
+     * Automatically:
+     * - Converts Tailwind classes to inline styles
+     * - Injects media queries into `<head>` for responsive classes
+     * - Replaces DOCTYPE with XHTML 1.0 Transitional
+     * - Removes comments and Svelte artifacts
+     *
+     * @param component - The Svelte component to render
+     * @param options - Render options including props, context, and idPrefix
+     * @returns Email-safe HTML string
+     *
+     * @example
+     * ```ts
+     * const html = await renderer.render(EmailComponent, {
+     *   props: { username: 'john_doe', resetUrl: 'https://...' }
+     * });
+     * ```
+     */
+    render: (component: any, options?: RenderOptions | undefined) => Promise<string>;
+}
+/**
+ * Render HTML as plain text
+ * @param markup - HTML string
+ * @returns Plain text string
+ */
+export declare const toPlainText: (markup: string) => string;