@better-svelte-email/preview 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/index.js

@@ -0,0 +1,168 @@
+import { Resend } from 'resend';
+import prettier from 'prettier/standalone';
+import parserHtml from 'prettier/parser-html';
+import { Renderer } from '@better-svelte-email/server';
+import { getEmailComponent, getEmailSource } from './preview-fs';
+export { default as EmailPreview } from './EmailPreview.svelte';
+/**
+ * Import all Svelte email components file paths.
+ * Create a list containing all Svelte email component file names.
+ * Return this list to the client.
+ */
+export { emailList, getEmailComponent, getFiles } from './preview-fs';
+/**
+ * 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({
+ *   tailwindConfig: {
+ *     theme: {
+ *       extend: {
+ *         colors: {
+ *           brand: '#FF3E00'
+ *         }
+ *       }
+ *     }
+ *   }
+ * });
+ *
+ * export const actions = createEmail({ renderer });
+ * ```
+ */
+export const createEmail = (options = {}) => {
+    const { renderer = new Renderer() } = options;
+    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);
+                const source = await getEmailSource(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 {
+                    body: formattedHtml,
+                    source
+                };
+            }
+            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
+ * @param options.renderer - Optional renderer to use for rendering the email component (use this if you want to use a custom tailwind config)
+ * @param options.from - Optional sender email address (defaults to 'better-svelte-email <onboarding@resend.dev>')
+ *
+ * @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({
+ *   tailwindConfig: {
+ *     theme: {
+ *       extend: {
+ *         colors: {
+ *           brand: '#FF3E00'
+ *         }
+ *       }
+ *     }
+ *   }
+ * });
+ *
+ * export const actions = {
+ *   ...createEmail({ renderer }),
+ *   ...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY, renderer })
+ * };
+ * ```
+ */
+export const sendEmail = ({ customSendEmailFunction, resendApiKey, renderer = new Renderer(), from = 'better-svelte-email <onboarding@resend.dev>' } = {}) => {
+    return {
+        'send-email': async (event) => {
+            const data = await event.request.formData();
+            const emailPath = data.get('path');
+            const file = data.get('file');
+            if (!file || !emailPath) {
+                return {
+                    success: false,
+                    error: { message: 'Missing file or path parameter' }
+                };
+            }
+            const emailComponent = await getEmailComponent(emailPath, file);
+            const email = {
+                from,
+                to: `${data.get('to')}`,
+                subject: `${data.get('component')} ${data.get('note') ? '| ' + data.get('note') : ''}`,
+                html: await renderer.render(emailComponent)
+            };
+            let sent = { success: false, error: null };
+            if (!customSendEmailFunction && resendApiKey) {
+                sent = await defaultSendEmailFunction(email, resendApiKey);
+            }
+            else if (customSendEmailFunction) {
+                sent = await customSendEmailFunction(email);
+            }
+            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 };
+            }
+        }
+    };
+};
+// EmailPreview is exported through the dedicated package subpath:
+// import EmailPreview from '@better-svelte-email/preview/EmailPreview.svelte'

package/dist/preview-fs.d.ts

@@ -0,0 +1,34 @@
+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;
+export declare const getEmailComponent: (emailPath: string, file: string) => Promise<any>;
+export declare const getEmailSource: (emailPath: string, file: string) => Promise<string | null>;
+export declare function getFiles(dir: string, files?: string[]): string[];
+export {};

package/dist/preview-fs.js

@@ -0,0 +1,130 @@
+import fs from 'fs';
+import path from 'path';
+/**
+ * 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 (err) {
+            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.', { cause: err });
+        }
+    }
+    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 };
+    }
+    // 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 };
+};
+export const getEmailComponent = async (emailPath, file) => {
+    const fileName = `${file}.svelte`;
+    try {
+        // Import the email component dynamically
+        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.`, { cause: err });
+    }
+};
+export const getEmailSource = async (emailPath, file) => {
+    const normalizedEmailPath = emailPath.replace(/\\/g, '/').replace(/\/+$/, '');
+    const normalizedFile = file.replace(/\\/g, '/').replace(/^\/+/, '');
+    const candidates = new Set();
+    const relativeEmailPath = normalizedEmailPath.replace(/^\/+/, '');
+    if (normalizedEmailPath) {
+        candidates.add(path.resolve(process.cwd(), relativeEmailPath, `${normalizedFile}.svelte`));
+        candidates.add(path.resolve(process.cwd(), normalizedEmailPath, `${normalizedFile}.svelte`));
+        candidates.add(path.resolve(normalizedEmailPath, `${normalizedFile}.svelte`));
+    }
+    candidates.add(path.resolve(process.cwd(), `${normalizedFile}.svelte`));
+    for (const candidate of candidates) {
+        try {
+            return await fs.promises.readFile(candidate, 'utf8');
+        }
+        catch {
+            // continue to next candidate
+        }
+    }
+    console.warn(`Source file not found for ${normalizedFile} in ${normalizedEmailPath}`);
+    return null;
+};
+// Recursive function to get 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
+    for (const file of fileList) {
+        const name = path.join(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.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/theme.css

@@ -0,0 +1,42 @@
+:root {
+	--background: oklch(98.5% 0.001 106.423);
+	--foreground: oklch(21.6% 0.006 56.043);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.147 0.004 49.25);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.147 0.004 49.25);
+	--primary: oklch(0.216 0.006 56.043);
+	--primary-foreground: oklch(0.985 0.001 106.423);
+	--secondary: oklch(0.958 0.003 48.717);
+	--secondary-foreground: oklch(0.454 0.01 67.558);
+	--muted: oklch(0.9483 0.0061 67.75);
+	--muted-foreground: oklch(0.4761 0.021783 55.8952);
+	--accent: oklch(0.97 0.001 106.424);
+	--accent-foreground: oklch(0.216 0.006 56.043);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.923 0.003 48.717);
+	--input: oklch(0.923 0.003 48.717);
+	--ring: oklch(0.709 0.01 56.259);
+	--svelte: #f73b01;
+}
+
+.dark {
+	--background: oklch(14.7% 0.004 49.25);
+	--foreground: oklch(97% 0.001 106.424);
+	--card: oklch(0.216 0.006 56.043);
+	--card-foreground: oklch(0.985 0.001 106.423);
+	--popover: oklch(0.216 0.006 56.043);
+	--popover-foreground: oklch(0.985 0.001 106.423);
+	--primary: oklch(0.923 0.003 48.717);
+	--primary-foreground: oklch(0.216 0.006 56.043);
+	--secondary: oklch(0.216 0.006 56.043);
+	--secondary-foreground: oklch(0.709 0.01 56.259);
+	--muted: oklch(0.268 0.007 34.298);
+	--muted-foreground: oklch(0.7348 0.0326 67.28);
+	--accent: oklch(0.268 0.007 34.298);
+	--accent-foreground: oklch(0.985 0.001 106.423);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.553 0.013 58.071);
+}

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "@better-svelte-email/preview",
-	"version": "2.0.0-beta.0",
+	"version": "2.0.0-beta.2",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
 	"dependencies": {
-		"@better-svelte-email/server": "workspace:*",
+		"@better-svelte-email/server": "2.0.0-beta.2",
 		"prettier": "^3.8.1",
 		"resend": "^6.8.0"
 	},