better-svelte-email 0.0.3 → 0.2.0

package/dist/preprocessor/index.js

@@ -1,7 +1,8 @@
 import MagicString from 'magic-string';
-import { parseClassAttributes } from './parser.js';
+import { parseAttributes } from './parser.js';
 import { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './transformer.js';
 import { injectMediaQueries } from './head-injector.js';
+import path from 'path';
 /**
  * Svelte 5 preprocessor for transforming Tailwind classes in email components
  *
@@ -24,7 +25,7 @@ import { injectMediaQueries } from './head-injector.js';
  * Reference: https://svelte.dev/docs/svelte/svelte-compiler#preprocess
  */
 export function betterSvelteEmailPreprocessor(options = {}) {
-    const { tailwindConfig, pathToEmailFolder = '/src/lib/emails', debug = false } = options;
+    const { tailwindConfig, pathToEmailFolder = '/src/lib/emails', debug = true } = options;
     // Initialize Tailwind converter once (performance optimization)
     const tailwindConverter = createTailwindConverter(tailwindConfig);
     // Return a Svelte 5 PreprocessorGroup
@@ -49,7 +50,7 @@ export function betterSvelteEmailPreprocessor(options = {}) {
                 // Log warnings if debug mode is enabled
                 if (result.warnings.length > 0) {
                     if (debug) {
-                        console.warn(`[better-svelte-email] Warnings for ${filename}:`, result.warnings);
+                        console.warn(`[better-svelte-email] Warnings for ${path.relative(process.cwd(), filename)}:\n`, result.warnings.join('\n'));
                     }
                 }
                 // Return the transformed code
@@ -76,8 +77,8 @@ function processEmailComponent(source, _filename, tailwindConverter, tailwindCon
     let transformedCode = source;
     const allMediaQueries = [];
     // Step 1: Parse and find all class attributes
-    const classAttributes = parseClassAttributes(source);
-    if (classAttributes.length === 0) {
+    const attributes = parseAttributes(source);
+    if (attributes.length === 0) {
         // No classes to transform
         return {
             originalCode: source,
@@ -90,19 +91,19 @@ function processEmailComponent(source, _filename, tailwindConverter, tailwindCon
     // Step 2: Transform each class attribute
     const s = new MagicString(transformedCode);
     // Process in reverse order to maintain correct positions
-    const sortedAttributes = [...classAttributes].sort((a, b) => b.start - a.start);
-    for (const classAttr of sortedAttributes) {
-        if (!classAttr.isStatic) {
+    const sortedAttributes = [...attributes].sort((a, b) => b.class.start - a.class.start);
+    for (const attr of sortedAttributes) {
+        if (!attr.class.isStatic) {
             // Skip dynamic classes for now
-            warnings.push(`Dynamic class expression detected in ${classAttr.elementName}. ` +
+            warnings.push(`Dynamic class expression detected in ${attr.class.elementName}. ` +
                 `Only static classes can be transformed at build time.`);
             continue;
         }
         // Transform the classes
-        const transformed = transformTailwindClasses(classAttr.raw, tailwindConverter);
+        const transformed = transformTailwindClasses(attr.class.raw, tailwindConverter);
         // Collect warnings about invalid classes
         if (transformed.invalidClasses.length > 0) {
-            warnings.push(`Invalid Tailwind classes in ${classAttr.elementName}: ${transformed.invalidClasses.join(', ')}`);
+            warnings.push(`Invalid Tailwind classes in ${attr.class.elementName}: ${transformed.invalidClasses.join(', ')}`);
         }
         // Generate media queries for responsive classes
         if (transformed.responsiveClasses.length > 0) {
@@ -110,9 +111,13 @@ function processEmailComponent(source, _filename, tailwindConverter, tailwindCon
             allMediaQueries.push(...mediaQueries);
         }
         // Build the new attribute value
-        const newAttributes = buildNewAttributes(transformed.inlineStyles, transformed.responsiveClasses);
+        const newAttributes = buildNewAttributes(transformed.inlineStyles, transformed.responsiveClasses, attr.style?.raw);
+        // Remove the already existing style attribute if it exists
+        if (attr.style) {
+            removeStyleAttribute(s, attr.style);
+        }
         // Replace the class attribute with new attributes
-        replaceClassAttribute(s, classAttr, newAttributes);
+        replaceClassAttribute(s, attr.class, newAttributes);
     }
     transformedCode = s.toString();
     // Step 3: Inject media queries into <Head>
@@ -136,7 +141,7 @@ function processEmailComponent(source, _filename, tailwindConverter, tailwindCon
 /**
  * Build new attribute string from transformation result
  */
-function buildNewAttributes(inlineStyles, responsiveClasses) {
+function buildNewAttributes(inlineStyles, responsiveClasses, existingStyles) {
     const parts = [];
     // Add responsive classes if any
     if (responsiveClasses.length > 0) {
@@ -147,7 +152,8 @@ function buildNewAttributes(inlineStyles, responsiveClasses) {
     if (inlineStyles) {
         // Escape quotes in styles
         const escapedStyles = inlineStyles.replace(/"/g, '&quot;');
-        parts.push(`styleString="${escapedStyles}"`);
+        const withExisting = escapedStyles + (existingStyles ? existingStyles : '');
+        parts.push(`style="${withExisting}"`);
     }
     return parts.join(' ');
 }
@@ -194,3 +200,9 @@ function replaceClassAttribute(s, classAttr, newAttributes) {
         s.remove(removeStart, removeEnd);
     }
 }
+/**
+ * Remove style attribute with MagicString
+ */
+function removeStyleAttribute(s, styleAttr) {
+    s.remove(styleAttr.start, styleAttr.end);
+}

package/dist/preprocessor/parser.d.ts

@@ -1,9 +1,12 @@
-import type { ClassAttribute } from './types.js';
+import type { ClassAttribute, StyleAttribute } from './types.js';
 /**
  * Parse Svelte 5 source code and extract all class attributes
  * Reference: https://svelte.dev/docs/svelte/svelte-compiler#parse
  */
-export declare function parseClassAttributes(source: string): ClassAttribute[];
+export declare function parseAttributes(source: string): {
+    class: ClassAttribute;
+    style?: StyleAttribute;
+}[];
 /**
  * Find the <Head> component in Svelte 5 AST
  * Returns the position where we should inject styles

package/dist/preprocessor/parser.js

@@ -3,8 +3,8 @@ import { parse } from 'svelte/compiler';
  * Parse Svelte 5 source code and extract all class attributes
  * Reference: https://svelte.dev/docs/svelte/svelte-compiler#parse
  */
-export function parseClassAttributes(source) {
-    const classAttributes = [];
+export function parseAttributes(source) {
+    const attributes = [];
     try {
         // Parse the Svelte file into an AST
         // Svelte 5 parse returns a Root node with modern AST structure
@@ -12,7 +12,7 @@ export function parseClassAttributes(source) {
         // Walk the html fragment (template portion) of the AST
         if (ast.html && ast.html.children) {
             for (const child of ast.html.children) {
-                walkNode(child, classAttributes, source);
+                walkNode(child, attributes, source);
             }
         }
     }
@@ -20,12 +20,12 @@ export function parseClassAttributes(source) {
         console.error('Failed to parse Svelte file:', error);
         throw error;
     }
-    return classAttributes;
+    return attributes;
 }
 /**
  * Recursively walk Svelte 5 AST nodes to find class attributes
  */
-function walkNode(node, classAttributes, source) {
+function walkNode(node, attributes, source) {
     if (!node)
         return;
     // Svelte 5 AST structure:
@@ -37,18 +37,33 @@ function walkNode(node, classAttributes, source) {
         node.type === 'SlotElement' ||
         node.type === 'Component') {
         const elementName = node.name || 'unknown';
-        // Look for class attribute in Svelte 5 AST
+        // Look for class and style attribute in Svelte 5 AST
         const classAttr = node.attributes?.find((attr) => attr.type === 'Attribute' && attr.name === 'class');
+        const styleAttr = node.attributes?.find((attr) => attr.type === 'Attribute' && attr.name === 'style');
         if (classAttr && classAttr.value) {
             // Extract class value
-            const extracted = extractClassValue(classAttr, source);
-            if (extracted) {
-                classAttributes.push({
-                    raw: extracted.value,
-                    start: extracted.start,
-                    end: extracted.end,
-                    elementName,
-                    isStatic: extracted.isStatic
+            const extractedClass = extractClassValue(classAttr, source);
+            let extractedStyle = null;
+            if (styleAttr && styleAttr.value) {
+                extractedStyle = extractStyleValue(styleAttr, source);
+            }
+            if (extractedClass) {
+                attributes.push({
+                    class: {
+                        raw: extractedClass.value,
+                        start: extractedClass.start,
+                        end: extractedClass.end,
+                        elementName,
+                        isStatic: extractedClass.isStatic
+                    },
+                    style: extractedStyle
+                        ? {
+                            raw: extractedStyle.value,
+                            start: extractedStyle.start,
+                            end: extractedStyle.end,
+                            elementName
+                        }
+                        : undefined
                 });
             }
         }
@@ -56,21 +71,21 @@ function walkNode(node, classAttributes, source) {
     // Recursively process children
     if (node.children) {
         for (const child of node.children) {
-            walkNode(child, classAttributes, source);
+            walkNode(child, attributes, source);
         }
     }
     // Handle conditional blocks (#if, #each, etc.)
     if (node.consequent) {
         if (node.consequent.children) {
             for (const child of node.consequent.children) {
-                walkNode(child, classAttributes, source);
+                walkNode(child, attributes, source);
             }
         }
     }
     if (node.alternate) {
         if (node.alternate.children) {
             for (const child of node.alternate.children) {
-                walkNode(child, classAttributes, source);
+                walkNode(child, attributes, source);
             }
         }
     }
@@ -78,7 +93,7 @@ function walkNode(node, classAttributes, source) {
     if (node.body) {
         if (node.body.children) {
             for (const child of node.body.children) {
-                walkNode(child, classAttributes, source);
+                walkNode(child, attributes, source);
             }
         }
     }
@@ -130,8 +145,8 @@ function extractClassValue(classAttr, source) {
     // Mixed content (both Text and ExpressionTag)
     // Extract only the static Text portions for partial transformation
     let combinedValue = '';
-    let start = classAttr.value[0].start;
-    let end = classAttr.value[classAttr.value.length - 1].end;
+    const start = classAttr.value[0].start;
+    const end = classAttr.value[classAttr.value.length - 1].end;
     let hasStaticContent = false;
     for (const part of classAttr.value) {
         if (part.type === 'Text' && part.data) {
@@ -150,6 +165,57 @@ function extractClassValue(classAttr, source) {
     }
     return null;
 }
+/**
+ * Extract the actual style value from a Svelte 5 attribute node
+ */
+function extractStyleValue(styleAttr, source) {
+    // Svelte 5 attribute value formats:
+    // 1. Static string: style="color: red;"
+    //    → value: [{ type: 'Text', data: 'color: red;' }]
+    //
+    // 2. Expression: style={someVar}
+    //    → value: [{ type: 'ExpressionTag', expression: {...} }]
+    //
+    // 3. Mixed: style="color: red; {dynamicStyle}"
+    //    → value: [{ type: 'Text' }, { type: 'ExpressionTag' }]
+    if (!styleAttr.value || styleAttr.value.length === 0) {
+        return null;
+    }
+    // Check if entirely static (only Text nodes)
+    const hasOnlyText = styleAttr.value.every((v) => v.type === 'Text');
+    if (hasOnlyText) {
+        // Fully static - we can extract this
+        const textContent = styleAttr.value.map((v) => v.data || '').join('');
+        return {
+            value: textContent,
+            start: styleAttr.start,
+            end: styleAttr.end
+        };
+    }
+    // Check if entirely dynamic (only ExpressionTag or MustacheTag)
+    const hasOnlyExpression = styleAttr.value.length === 1 &&
+        (styleAttr.value[0].type === 'ExpressionTag' || styleAttr.value[0].type === 'MustacheTag');
+    if (hasOnlyExpression) {
+        // Fully dynamic - extract the expression code
+        const exprNode = styleAttr.value[0];
+        const expressionCode = source.substring(exprNode.start, exprNode.end);
+        return {
+            value: expressionCode,
+            start: exprNode.start,
+            end: exprNode.end
+        };
+    }
+    // Mixed content (both Text and ExpressionTag)
+    // Extract the full content including dynamic parts
+    const start = styleAttr.value[0].start;
+    const end = styleAttr.value[styleAttr.value.length - 1].end;
+    const fullContent = source.substring(start, end);
+    return {
+        value: fullContent,
+        start: styleAttr.start,
+        end: styleAttr.end
+    };
+}
 /**
  * Find the <Head> component in Svelte 5 AST
  * Returns the position where we should inject styles
@@ -167,7 +233,7 @@ export function findHeadComponent(source) {
         }
         return { found: false, insertPosition: null };
     }
-    catch (error) {
+    catch {
         return { found: false, insertPosition: null };
     }
 }

package/dist/preprocessor/transformer.js

@@ -66,15 +66,15 @@ function extractStylesFromCSS(css, originalClasses) {
     let match;
     while ((match = classRegex.exec(cssWithoutMedia)) !== null) {
         const className = match[1];
-        const rules = match[2].trim();
+        const rules = match[2].replace(/\\/g, '').trim();
         // Normalize class name (tw-to-css might transform special chars)
-        const normalizedClass = className.replace(/[:#\-[\]/.%!_]+/g, '_');
+        const normalizedClass = className.replace(/\\/g, '').replace(/[:#\-[\]/.%!_]+/g, '_');
         classMap.set(normalizedClass, rules);
     }
     // For each original class, try to find its CSS
     for (const originalClass of originalClasses) {
         // Normalize the original class name to match what tw-to-css produces
-        const normalized = originalClass.replace(/[:#\-[\]/.%!]+/g, '_');
+        const normalized = originalClass.replace(/[:#\-[\]/.%!_]+/g, '_');
         if (classMap.has(normalized)) {
             const rules = classMap.get(normalized);
             // Ensure rules end with semicolon for proper concatenation

package/dist/preprocessor/types.d.ts

@@ -43,6 +43,27 @@ export interface ClassAttribute {
      */
     isStatic: boolean;
 }
+/**
+ * Represents a style attribute found in the AST
+ */
+export interface StyleAttribute {
+    /**
+     * Raw style string (e.g., "background-color: red;")
+     */
+    raw: string;
+    /**
+     * Start position in source code
+     */
+    start: number;
+    /**
+     * End position in source code
+     */
+    end: number;
+    /**
+     * Parent element/component name
+     */
+    elementName: string;
+}
 /**
  * Result of transforming Tailwind classes
  */

package/dist/preview/Preview.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+	import { HighlightAuto } from 'svelte-highlight';
+	import oneDark from 'svelte-highlight/styles/onedark';
+	import type { PreviewData } from './index.js';
+
+	let { emailList }: { emailList: PreviewData } = $props();
+
+	let selectedEmail = $state<string | null>(null);
+	let renderedHtml = $state<string>('');
+	let iframeContent = $state<string>('');
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	const FONT_SANS_STYLE = `<style>
+		body {
+			font-family:
+				ui-sans-serif,
+				system-ui,
+				-apple-system,
+				BlinkMacSystemFont,
+				'Segoe UI',
+				Helvetica,
+				Arial,
+				'Noto Sans',
+				sans-serif;
+			margin: 0;
+		}
+	</style>`;
+
+	function withFontSans(html: string) {
+		if (!html) return '';
+
+		if (html.includes('<head')) {
+			return html.replace('<head>', `<head>${FONT_SANS_STYLE}`);
+		}
+
+		if (html.includes('<html')) {
+			const htmlTagEnd = html.indexOf('>', html.indexOf('<html'));
+			if (htmlTagEnd !== -1) {
+				const before = html.slice(0, htmlTagEnd + 1);
+				const after = html.slice(htmlTagEnd + 1);
+				return `${before}<head>${FONT_SANS_STYLE}</head>${after}`;
+			}
+		}
+
+		if (html.includes('<body')) {
+			const bodyTagEnd = html.indexOf('>', html.indexOf('<body'));
+			if (bodyTagEnd !== -1) {
+				const before = html.slice(0, bodyTagEnd + 1);
+				const after = html.slice(bodyTagEnd + 1);
+				return `${before}${FONT_SANS_STYLE}${after}`;
+			}
+		}
+
+		return `${FONT_SANS_STYLE}${html}`;
+	}
+
+	async function previewEmail(fileName: string) {
+		selectedEmail = fileName;
+		loading = true;
+		error = null;
+		renderedHtml = '';
+		iframeContent = '';
+
+		try {
+			const response = await fetch('?/create-email', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+				body: new URLSearchParams({
+					file: fileName,
+					path: emailList.path || '/src/lib/emails'
+				})
+			});
+
+			const result = await response.json();
+
+			if (result.type === 'success' && result.data) {
+				let htmlOutput = '';
+				try {
+					const parsed = JSON.parse(result.data);
+					if (Array.isArray(parsed) && typeof parsed[0] === 'string') {
+						htmlOutput = parsed[0];
+					} else if (typeof parsed === 'string') {
+						htmlOutput = parsed;
+					}
+				} catch (parseError) {
+					htmlOutput = typeof result.data === 'string' ? result.data : '';
+				}
+
+				if (!htmlOutput) {
+					throw new Error('Failed to parse rendered HTML response');
+				}
+
+				renderedHtml = htmlOutput;
+				iframeContent = withFontSans(htmlOutput);
+			} else if (result.type === 'error') {
+				error = result.error?.message || 'Failed to render email';
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to preview email';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function copyHtml() {
+		if (renderedHtml) {
+			navigator.clipboard.writeText(renderedHtml);
+		}
+	}
+</script>
+
+<svelte:head>
+	{@html oneDark}
+</svelte:head>
+
+<div
+	class="grid h-screen grid-cols-[280px_1fr] bg-gray-50 font-sans max-md:grid-cols-1 max-md:grid-rows-[auto_1fr]"
+>
+	<div
+		class="flex flex-col overflow-hidden border-r border-gray-200 bg-white max-md:max-h-[40vh] max-md:border-r-0 max-md:border-b"
+	>
+		<div class="flex items-center justify-between gap-2 border-b border-gray-200 p-6 pb-4">
+			<h2 class="m-0 text-lg font-semibold text-gray-900">Email Templates</h2>
+			{#if emailList.files}
+				<span
+					class="min-w-6 rounded-full bg-blue-500 px-2 py-0.5 text-center text-xs font-semibold text-white"
+				>
+					{emailList.files.length}
+				</span>
+			{/if}
+		</div>
+
+		{#if !emailList.files || emailList.files.length === 0}
+			<div class="px-4 py-8 text-center text-gray-500">
+				<p class="my-2 text-sm">No email templates found</p>
+				<p class="my-2 text-xs text-gray-400">
+					Create email components in <code
+						class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs"
+						>{emailList.path || '/src/lib/emails'}</code
+					>
+				</p>
+			</div>
+		{:else}
+			<ul class="m-0 flex-1 list-none overflow-y-auto p-2">
+				{#each emailList.files as file}
+					<li>
+						<button
+							class="flex w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent p-3 text-left text-sm text-gray-700 transition-all duration-150 hover:bg-gray-100"
+							class:bg-blue-50={selectedEmail === file}
+							class:text-blue-900={selectedEmail === file}
+							class:font-medium={selectedEmail === file}
+							onclick={() => previewEmail(file)}
+						>
+							<span class="flex-shrink-0 text-xl">📧</span>
+							<span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{file}</span>
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+
+	<div class="flex flex-col overflow-hidden bg-white">
+		{#if !selectedEmail}
+			<div class="flex flex-1 items-center justify-center bg-gray-50">
+				<div class="max-w-md p-8 text-center">
+					<div class="mb-4 text-6xl">✨</div>
+					<h3 class="mb-2 text-2xl font-semibold text-gray-900">Select an Email Template</h3>
+					<p class="text-gray-500">
+						Choose a template from the sidebar to preview its rendered HTML
+					</p>
+				</div>
+			</div>
+		{:else if loading}
+			<div class="flex flex-1 items-center justify-center bg-gray-50">
+				<div class="max-w-md p-8 text-center">
+					<div
+						class="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500"
+					></div>
+					<p class="text-gray-500">Rendering email...</p>
+				</div>
+			</div>
+		{:else if error}
+			<div class="flex flex-1 items-center justify-center bg-gray-50">
+				<div class="max-w-md p-8 text-center">
+					<div class="mb-4 text-5xl">⚠️</div>
+					<h3 class="mb-2 text-2xl font-semibold text-gray-900">Error Rendering Email</h3>
+					<p class="mb-0 text-gray-500">{error}</p>
+					<button
+						class="mt-4 cursor-pointer rounded-md border-0 bg-blue-500 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-600"
+						onclick={() => selectedEmail && previewEmail(selectedEmail)}
+					>
+						Try Again
+					</button>
+				</div>
+			</div>
+		{:else if renderedHtml}
+			<div class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4">
+				<h3 class="m-0 text-lg font-semibold text-gray-900">{selectedEmail}</h3>
+				<div class="flex gap-2">
+					<button
+						class="flex cursor-pointer items-center gap-1.5 rounded-md border border-gray-300 bg-white px-3.5 py-2 text-sm font-medium text-gray-700 transition-all duration-150 hover:border-gray-400 hover:bg-gray-50"
+						onclick={copyHtml}
+						title="Copy HTML"
+					>
+						<span class="text-base">📋</span> Copy HTML
+					</button>
+				</div>
+			</div>
+
+			<div class="flex-1 overflow-hidden bg-gray-50 p-4">
+				<iframe
+					title="Email Preview"
+					srcdoc={iframeContent}
+					class="h-full w-full rounded-lg border border-gray-200 bg-white"
+					sandbox="allow-same-origin allow-scripts"
+				></iframe>
+			</div>
+
+			<details class="overflow-auto border-t border-gray-200 bg-gray-50">
+				<summary
+					class="cursor-pointer px-6 py-3 font-medium text-gray-700 select-none hover:bg-gray-100"
+				>
+					View HTML Source
+				</summary>
+				<HighlightAuto class="h-full overflow-y-scroll text-xs" code={renderedHtml} />
+			</details>
+		{/if}
+	</div>
+</div>

package/dist/preview/Preview.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PreviewData } from './index.js';
+type $$ComponentProps = {
+    emailList: PreviewData;
+};
+declare const Preview: import("svelte").Component<$$ComponentProps, {}, "">;
+type Preview = ReturnType<typeof Preview>;
+export default Preview;

package/dist/preview/index.d.ts

@@ -0,0 +1,85 @@
+import type { RequestEvent } from '@sveltejs/kit';
+/**
+ * Import all Svelte email components file paths.
+ * Create a list containing all Svelte email component file names.
+ * Return this list to the client.
+ */
+export type PreviewData = {
+    files: string[] | null;
+    path: string | null;
+};
+type EmailListProps = {
+    path?: string;
+    root?: string;
+};
+/**
+ * Get a list of all email component files in the specified directory.
+ *
+ * @param options.path - Relative path from root to emails folder (default: '/src/lib/emails')
+ * @param options.root - Absolute path to project root (auto-detected if not provided)
+ * @returns PreviewData object with list of email files and the path
+ *
+ * @example
+ * ```ts
+ * // In a +page.server.ts file
+ * import { emailList } from 'better-svelte-email/preview';
+ *
+ * export function load() {
+ *   const emails = emailList({
+ *     root: process.cwd(),
+ *     path: '/src/lib/emails'
+ *   });
+ *   return { emails };
+ * }
+ * ```
+ */
+export declare const emailList: ({ path: emailPath, root }?: EmailListProps) => PreviewData;
+/**
+ * SvelteKit form action to render an email component.
+ * Use this with the Preview component to render email templates on demand.
+ *
+ * @example
+ * ```ts
+ * // +page.server.ts
+ * import { createEmail } from 'better-svelte-email/preview';
+ *
+ * export const actions = createEmail;
+ * ```
+ */
+export declare const createEmail: {
+    'create-email': (event: RequestEvent) => Promise<string | {
+        status: number;
+        body: {
+            error: string;
+        };
+        error?: undefined;
+    } | {
+        status: number;
+        error: {
+            message: string;
+        };
+        body?: undefined;
+    }>;
+};
+export declare const SendEmailFunction: ({ from, to, subject, html }: {
+    from: string;
+    to: string;
+    subject: string;
+    html: string;
+}, resendApiKey?: string) => Promise<{
+    success: boolean;
+    error?: any;
+}>;
+/**
+ * Sends the email using the submitted form data.
+ */
+export declare const sendEmail: ({ customSendEmailFunction, resendApiKey }: {
+    customSendEmailFunction?: typeof SendEmailFunction;
+    resendApiKey?: string;
+}) => {
+    'send-email': (event: RequestEvent) => Promise<{
+        success: boolean;
+        error: any;
+    }>;
+};
+export { default as Preview } from './Preview.svelte';