better-svelte-email 0.2.0 → 0.3.0

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

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

package/dist/preview/index.d.ts

@@ -47,12 +47,16 @@ export declare const emailList: ({ path: emailPath, root }?: EmailListProps) =>
  * ```
  */
 export declare const createEmail: {
-    'create-email': (event: RequestEvent) => Promise<string | {
+    'create-email': (event: RequestEvent) => Promise<{
         status: number;
         body: {
             error: string;
         };
         error?: undefined;
+    } | {
+        body: string;
+        status?: undefined;
+        error?: undefined;
     } | {
         status: number;
         error: {
@@ -72,8 +76,22 @@ export declare const SendEmailFunction: ({ from, to, subject, html }: {
 }>;
 /**
  * Sends the email using the submitted form data.
+ *
+ * @param options.resendApiKey - Your Resend API key (keep this server-side only)
+ * @param options.customSendEmailFunction - Optional custom function to send emails
+ *
+ * @example
+ * ```ts
+ * // In +page.server.ts
+ * import { PRIVATE_RESEND_API_KEY } from '$env/static/private';
+ *
+ * export const actions = {
+ *   ...createEmail,
+ *   ...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY })
+ * };
+ * ```
  */
-export declare const sendEmail: ({ customSendEmailFunction, resendApiKey }: {
+export declare const sendEmail: ({ customSendEmailFunction, resendApiKey }?: {
     customSendEmailFunction?: typeof SendEmailFunction;
     resendApiKey?: string;
 }) => {
@@ -82,4 +100,4 @@ export declare const sendEmail: ({ customSendEmailFunction, resendApiKey }: {
         error: any;
     }>;
 };
-export { default as Preview } from './Preview.svelte';
+export { default as EmailPreview } from './EmailPreview.svelte';

package/dist/preview/index.js

@@ -85,7 +85,13 @@ export const createEmail = {
             const { body } = render(emailComponent);
             // Remove all HTML comments from the body before formatting
             const bodyWithoutComments = body.replace(/<!--[\s\S]*?-->/g, '');
-            return prettier.format(bodyWithoutComments, { parser: 'html', plugins: [parserHtml] });
+            const formattedBody = await prettier.format(bodyWithoutComments, {
+                parser: 'html',
+                plugins: [parserHtml]
+            });
+            return {
+                body: formattedBody
+            };
         }
         catch (error) {
             console.error('Error rendering email:', error);
@@ -112,8 +118,22 @@ const defaultSendEmailFunction = async ({ from, to, subject, html }, resendApiKe
 };
 /**
  * Sends the email using the submitted form data.
+ *
+ * @param options.resendApiKey - Your Resend API key (keep this server-side only)
+ * @param options.customSendEmailFunction - Optional custom function to send emails
+ *
+ * @example
+ * ```ts
+ * // In +page.server.ts
+ * import { PRIVATE_RESEND_API_KEY } from '$env/static/private';
+ *
+ * export const actions = {
+ *   ...createEmail,
+ *   ...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY })
+ * };
+ * ```
  */
-export const sendEmail = ({ customSendEmailFunction, resendApiKey }) => {
+export const sendEmail = ({ customSendEmailFunction, resendApiKey } = {}) => {
     return {
         'send-email': async (event) => {
             const data = await event.request.formData();
@@ -128,11 +148,11 @@ export const sendEmail = ({ customSendEmailFunction, resendApiKey }) => {
                 sent = await defaultSendEmailFunction(email, resendApiKey);
             }
             else if (customSendEmailFunction) {
-                sent = await customSendEmailFunction(email);
+                sent = await customSendEmailFunction(email, resendApiKey);
             }
             else if (!customSendEmailFunction && !resendApiKey) {
                 const error = {
-                    message: 'Please pass your Resend API key into the "sendEmail" form action, or provide a custom function.'
+                    message: 'Resend API key not configured. Please pass your API key to the sendEmail() function in your +page.server.ts file.'
                 };
                 return { success: false, error };
             }
@@ -180,4 +200,6 @@ function createEmailComponentList(root, paths) {
     return emailComponentList;
 }
 // Export the Preview component
-export { default as Preview } from './Preview.svelte';
+// Note: The component is available via: import EmailPreview from 'better-svelte-email/preview/EmailPreview.svelte'
+// or: import { EmailPreview } from 'better-svelte-email/preview'
+export { default as EmailPreview } from './EmailPreview.svelte';

package/dist/utils/index.d.ts

@@ -10,3 +10,30 @@ export declare function styleToString(style: Record<string, string | number | un
  * @returns Point value as string
  */
 export declare function pxToPt(px: string | number): string;
+export type Margin = {
+    m?: string;
+    mx?: string;
+    my?: string;
+    mt?: string;
+    mr?: string;
+    mb?: string;
+    ml?: string;
+};
+/**
+ * Convert margin props to a CSS style object
+ * @param props - Margin properties object with shorthand notation (m, mx, my, mt, mr, mb, ml)
+ * @returns Style object with margin properties in pixels
+ */
+export declare function withMargin(props: Margin): any;
+/**
+ * Combine multiple styles into a single string
+ * @param styles - Array of style strings
+ * @returns Combined style string
+ */
+export declare function combineStyles(...styles: (string | undefined | null)[]): string;
+/**
+ * Render HTML as plain text
+ * @param markup - HTML string
+ * @returns Plain text string
+ */
+export declare const renderAsPlainText: (markup: string) => string;

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+import { convert } from 'html-to-text';
 /**
  * Convert a style object to a CSS string
  * @param style - Object containing CSS properties
@@ -22,3 +23,49 @@ export function pxToPt(px) {
     const value = typeof px === 'string' ? parseFloat(px) : px;
     return `${Math.round(value * 0.75)}pt`;
 }
+/**
+ * Convert margin props to a CSS style object
+ * @param props - Margin properties object with shorthand notation (m, mx, my, mt, mr, mb, ml)
+ * @returns Style object with margin properties in pixels
+ */
+export function withMargin(props) {
+    const margins = [
+        withSpace(props.m, ['margin']),
+        withSpace(props.mx, ['marginLeft', 'marginRight']),
+        withSpace(props.my, ['marginTop', 'marginBottom']),
+        withSpace(props.mt, ['marginTop']),
+        withSpace(props.mr, ['marginRight']),
+        withSpace(props.mb, ['marginBottom']),
+        withSpace(props.ml, ['marginLeft'])
+    ];
+    return Object.assign({}, ...margins);
+}
+function withSpace(value, properties) {
+    return properties.reduce((styles, property) => {
+        if (value) {
+            return { ...styles, [property]: `${value}px` };
+        }
+        return styles;
+    }, {});
+}
+/**
+ * Combine multiple styles into a single string
+ * @param styles - Array of style strings
+ * @returns Combined style string
+ */
+export function combineStyles(...styles) {
+    return styles.filter((style) => style !== '' && style !== undefined && style !== null).join(';');
+}
+/**
+ * Render HTML as plain text
+ * @param markup - HTML string
+ * @returns Plain text string
+ */
+export const renderAsPlainText = (markup) => {
+    return convert(markup, {
+        selectors: [
+            { selector: 'img', format: 'skip' },
+            { selector: '#__better-svelte-email-preview', format: 'skip' }
+        ]
+    });
+};

package/package.json

@@ -1,27 +1,40 @@
 {
 	"name": "better-svelte-email",
-	"version": "0.2.0",
-	"author": "Anatole",
+	"version": "0.3.0",
+	"author": "Konixy",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Konixy/better-svelte-email.git"
 	},
 	"peerDependencies": {
-		"svelte": "^5.14.3"
+		"svelte": "^5.14.3",
+		"@sveltejs/kit": "^2.0.0"
+	},
+	"peerDependenciesMeta": {
+		"@sveltejs/kit": {
+			"optional": true
+		}
 	},
 	"dependencies": {
+		"html-to-text": "^9.0.5",
 		"magic-string": "^0.30.19",
 		"svelte-highlight": "^7.8.4",
 		"tw-to-css": "^0.0.12"
 	},
+	"optionalDependencies": {
+		"prettier": "^3.6.2",
+		"resend": "^6.1.2"
+	},
 	"devDependencies": {
 		"@eslint/compat": "^1.4.0",
 		"@eslint/js": "^9.37.0",
 		"@sveltejs/adapter-auto": "^6.1.1",
+		"@sveltejs/adapter-vercel": "^5.10.3",
 		"@sveltejs/kit": "^2.43.8",
 		"@sveltejs/package": "^2.5.4",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@tailwindcss/vite": "^4.1.14",
+		"@types/html-to-text": "^9.0.4",
 		"@types/node": "^24",
 		"@vitest/browser": "^3.2.4",
 		"eslint": "^9.37.0",
@@ -29,11 +42,9 @@
 		"eslint-plugin-svelte": "^3.12.4",
 		"globals": "^16.4.0",
 		"playwright": "^1.55.1",
-		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.14",
 		"publint": "^0.3.13",
-		"resend": "^6.1.2",
 		"svelte": "^5.39.8",
 		"svelte-check": "^4.3.2",
 		"tailwindcss": "^4.1.14",
@@ -59,9 +70,23 @@
 			"types": "./dist/components/*.svelte.d.ts",
 			"svelte": "./dist/components/*.svelte"
 		},
+		"./preview": {
+			"types": "./dist/preview/index.d.ts",
+			"import": "./dist/preview/index.js",
+			"default": "./dist/preview/index.js"
+		},
+		"./preview/EmailPreview.svelte": {
+			"types": "./dist/preview/EmailPreview.svelte.d.ts",
+			"svelte": "./dist/preview/EmailPreview.svelte"
+		},
+		"./utils": {
+			"types": "./dist/utils/index.d.ts",
+			"import": "./dist/utils/index.js",
+			"default": "./dist/utils/index.js"
+		},
 		"./package.json": "./package.json"
 	},
-	"description": "A Svelte 5 preprocessor that transforms Tailwind CSS classes in email components to inline styles with responsive media query support",
+	"description": "Svelte email renderer with Tailwind support",
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
@@ -82,7 +107,7 @@
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
+		"build": "bun run prepack && vite build",
 		"preview": "vite preview",
 		"package": "svelte-package",
 		"prepare": "svelte-kit sync || echo ''",

package/dist/components/__tests__/test-email.svelte

@@ -1,13 +0,0 @@
-<script>
-	import { Html, Head, Text, Button, Container } from '../index.js';
-</script>
-
-<Html>
-	<Head />
-	<Container class="bg-gray-100 p-8">
-		<Text class="text-lg font-bold text-blue-600">Hello World</Text>
-		<Button class="rounded bg-blue-500 px-4 py-2 text-white" href="https://example.com">
-			Click Me
-		</Button>
-	</Container>
-</Html>

package/dist/components/__tests__/test-email.svelte.d.ts

@@ -1,26 +0,0 @@
-export default TestEmail;
-type TestEmail = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const TestEmail: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/preview/Preview.svelte

@@ -1,231 +0,0 @@
-<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>