better-svelte-email 0.1.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

@@ -0,0 +1,103 @@
+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<{
+        status: number;
+        body: {
+            error: string;
+        };
+        error?: undefined;
+    } | {
+        body: string;
+        status?: undefined;
+        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.
+ *
+ * @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 }?: {
+    customSendEmailFunction?: typeof SendEmailFunction;
+    resendApiKey?: string;
+}) => {
+    'send-email': (event: RequestEvent) => Promise<{
+        success: boolean;
+        error: any;
+    }>;
+};
+export { default as EmailPreview } from './EmailPreview.svelte';

package/dist/preview/index.js

@@ -0,0 +1,205 @@
+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';
+/**
+ * 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 const emailList = ({ path: emailPath = '/src/lib/emails', root } = {}) => {
+    // If root is not provided, try to use process.cwd()
+    if (!root) {
+        try {
+            root = process.cwd();
+        }
+        catch {
+            throw new Error('Could not determine the root path of your project. Please pass in the root param manually using process.cwd() or an absolute path');
+        }
+    }
+    const fullPath = path.join(root, emailPath);
+    // Check if directory exists
+    if (!fs.existsSync(fullPath)) {
+        console.warn(`Email directory not found: ${fullPath}`);
+        return { files: null, path: emailPath };
+    }
+    const files = createEmailComponentList(emailPath, getFiles(fullPath));
+    if (!files.length) {
+        return { files: null, path: emailPath };
+    }
+    return { files, path: emailPath };
+};
+/**
+ * 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 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) {
+                return {
+                    status: 400,
+                    body: { error: 'Missing file or path parameter' }
+                };
+            }
+            const getEmailComponent = async () => {
+                try {
+                    // Import the email component dynamically
+                    return (await import(/* @vite-ignore */ `${emailPath}/${file}.svelte`)).default;
+                }
+                catch {
+                    throw new Error(`Failed to import email component '${file}'. Make sure the file exists and includes the <Head /> component.`);
+                }
+            };
+            const emailComponent = await getEmailComponent();
+            // 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
+    const resend = new Resend(resendApiKey);
+    const email = { from, to, subject, html };
+    const resendReq = await resend.emails.send(email);
+    if (resendReq.error) {
+        return { success: false, error: resendReq.error };
+    }
+    else {
+        return { success: true, error: null };
+    }
+};
+/**
+ * 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 } = {}) => {
+    return {
+        'send-email': async (event) => {
+            const data = await event.request.formData();
+            const email = {
+                from: 'svelte-email-tailwind <onboarding@resend.dev>',
+                to: `${data.get('to')}`,
+                subject: `${data.get('component')} ${data.get('note') ? '| ' + data.get('note') : ''}`,
+                html: `${data.get('html')}`
+            };
+            let sent = { success: false, error: null };
+            if (!customSendEmailFunction && resendApiKey) {
+                sent = await defaultSendEmailFunction(email, resendApiKey);
+            }
+            else if (customSendEmailFunction) {
+                sent = await customSendEmailFunction(email, resendApiKey);
+            }
+            else if (!customSendEmailFunction && !resendApiKey) {
+                const error = {
+                    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 };
+            }
+            if (sent && sent.error) {
+                console.log('Error:', sent.error);
+                return { success: false, error: sent.error };
+            }
+            else {
+                console.log('Email was sent successfully.');
+                return { success: true, error: null };
+            }
+        }
+    };
+};
+// Recursive function to get files
+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
+    for (const file of fileList) {
+        const name = `${dir}/${file}`;
+        // Check if the current file/directory is a directory using fs.statSync
+        if (fs.statSync(name).isDirectory()) {
+            // If it is a directory, recursively call the getFiles function with the directory path and the files array
+            getFiles(name, files);
+        }
+        else {
+            // If it is a file, push the full path to the files array
+            files.push(name);
+        }
+    }
+    return files;
+}
+/**
+ * Creates an array of names from the record of svelte email component file paths
+ */
+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);
+        }
+    });
+    return emailComponentList;
+}
+// Export the Preview component
+// 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,26 +1,40 @@
 {
 	"name": "better-svelte-email",
-	"version": "0.1.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",
@@ -28,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",
@@ -58,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.*",
@@ -81,8 +107,9 @@
 	"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 ''",
 		"prepack": "svelte-kit sync && svelte-package && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

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>