better-svelte-email 0.3.0 → 0.3.3

package/dist/preview/EmailPreview.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { HighlightAuto } from 'svelte-highlight';
-	import oneDark from 'svelte-highlight/styles/onedark';
 	import type { PreviewData } from './index.js';
 	import type { ActionResult } from '@sveltejs/kit';
-	import { applyAction, deserialize } from '$app/forms';
+	import { deserialize } from '$app/forms';
+	import { codeToHtml } from 'shiki';
 
 	let { emailList }: { emailList: PreviewData } = $props();
 
 	let selectedEmail = $state<string | null>(null);
 	let renderedHtml = $state<string>('');
+	let highlightedHtml = $state<string>('');
 	let iframeContent = $state<string>('');
 	let loading = $state(false);
 	let error = $state<string | null>(null);
@@ -84,6 +84,10 @@
 			if (result.type === 'success' && result.data?.body) {
 				renderedHtml = result.data.body;
 				iframeContent = withFontSans(result.data.body);
+				highlightedHtml = await codeToHtml(result.data.body, {
+					lang: 'html',
+					theme: 'github-dark-default'
+				});
 			} else if (result.type === 'error') {
 				error = result.error?.message || 'Failed to render email';
 			}
@@ -130,7 +134,8 @@
 				body: new URLSearchParams({
 					to: recipientEmail,
 					component: selectedEmail || 'Email Template',
-					html: renderedHtml
+					path: emailList.path || '/src/lib/emails',
+					file: selectedEmail as string
 				})
 			});
 
@@ -155,10 +160,6 @@
 	}
 </script>
 
-<svelte:head>
-	{@html oneDark}
-</svelte:head>
-
 <div class="container">
 	<div class="sidebar">
 		<div class="sidebar-header">
@@ -247,7 +248,7 @@
 			<details class="code-section">
 				<summary class="code-summary"> View HTML Source </summary>
 				<div class="code-content">
-					<HighlightAuto code={renderedHtml} />
+					{@html highlightedHtml}
 				</div>
 			</details>
 		{/if}
@@ -319,7 +320,8 @@
 		grid-template-columns: 280px 1fr;
 		height: 100vh;
 		width: 100vw;
-		background-color: #f9fafb;
+		max-width: none;
+		background-color: #fafaf9;
 		font-family:
 			ui-sans-serif,
 			system-ui,
@@ -343,7 +345,7 @@
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
-		border-right: 1px solid #e5e7eb;
+		border-right: 1px solid #e7e5e4;
 		background-color: white;
 	}
 
@@ -351,7 +353,7 @@
 		.sidebar {
 			max-height: 40vh;
 			border-right: 0;
-			border-bottom: 1px solid #e5e7eb;
+			border-bottom: 1px solid #e7e5e4;
 		}
 	}
 
@@ -360,7 +362,7 @@
 		align-items: center;
 		justify-content: space-between;
 		gap: 0.5rem;
-		border-bottom: 1px solid #e5e7eb;
+		border-bottom: 1px solid #e7e5e4;
 		padding: 1.5rem;
 		padding-bottom: 1rem;
 	}
@@ -369,13 +371,13 @@
 		margin: 0;
 		font-size: 1.125rem;
 		font-weight: 600;
-		color: #111827;
+		color: #1c1917;
 	}
 
 	.badge {
 		min-width: 1.5rem;
 		border-radius: 9999px;
-		background-color: #3b82f6;
+		background-color: #ea580c;
 		padding: 0.125rem 0.5rem;
 		text-align: center;
 		font-size: 0.75rem;
@@ -386,7 +388,7 @@
 	.empty-state {
 		padding: 2rem 1rem;
 		text-align: center;
-		color: #6b7280;
+		color: #78716c;
 	}
 
 	.empty-state p {
@@ -396,12 +398,12 @@
 
 	.empty-state p:last-child {
 		font-size: 0.75rem;
-		color: #9ca3af;
+		color: #a8a29e;
 	}
 
 	.empty-state code {
-		border-radius: 0.25rem;
-		background-color: #f3f4f6;
+		border-radius: 0.375rem;
+		background-color: #f5f5f4;
 		padding: 0.125rem 0.375rem;
 		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 		font-size: 0.75rem;
@@ -425,23 +427,23 @@
 		cursor: pointer;
 		align-items: center;
 		gap: 0.75rem;
-		border-radius: 0.5rem;
+		border-radius: 0.75rem;
 		border: 0;
 		background-color: transparent;
 		padding: 0.75rem;
 		text-align: left;
 		font-size: 0.875rem;
-		color: #374151;
+		color: #57534e;
 		transition: all 0.15s;
 	}
 
 	.email-button:hover {
-		background-color: #f3f4f6;
+		background-color: #f5f5f4;
 	}
 
 	.email-button.active {
-		background-color: #eff6ff;
-		color: #1e3a8a;
+		background-color: #fff7ed;
+		color: #c2410c;
 		font-weight: 500;
 	}
 
@@ -462,6 +464,8 @@
 		flex-direction: column;
 		overflow: hidden;
 		background-color: white;
+		width: 100%;
+		min-width: 0;
 	}
 
 	.centered-state {
@@ -469,7 +473,7 @@
 		flex: 1;
 		align-items: center;
 		justify-content: center;
-		background-color: #f9fafb;
+		background-color: #fafaf9;
 	}
 
 	.centered-content {
@@ -493,8 +497,8 @@
 		height: 3rem;
 		width: 3rem;
 		border-radius: 9999px;
-		border: 4px solid #e5e7eb;
-		border-top-color: #3b82f6;
+		border: 4px solid #e7e5e4;
+		border-top-color: #ea580c;
 		animation: spin 1s linear infinite;
 	}
 
@@ -508,20 +512,20 @@
 		margin-bottom: 0.5rem;
 		font-size: 1.5rem;
 		font-weight: 600;
-		color: #111827;
+		color: #1c1917;
 	}
 
 	.text-gray {
 		margin: 0;
-		color: #6b7280;
+		color: #78716c;
 	}
 
 	.btn {
 		margin-top: 1rem;
 		cursor: pointer;
-		border-radius: 0.375rem;
+		border-radius: 0.75rem;
 		border: 0;
-		background-color: #3b82f6;
+		background-color: #ea580c;
 		padding: 0.5rem 1rem;
 		font-weight: 500;
 		color: white;
@@ -529,14 +533,14 @@
 	}
 
 	.btn:hover {
-		background-color: #2563eb;
+		background-color: #c2410c;
 	}
 
 	.preview-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		border-bottom: 1px solid #e5e7eb;
+		border-bottom: 1px solid #e7e5e4;
 		background-color: white;
 		padding: 1rem 1.5rem;
 	}
@@ -545,7 +549,7 @@
 		margin: 0;
 		font-size: 1.125rem;
 		font-weight: 600;
-		color: #111827;
+		color: #1c1917;
 	}
 
 	.button-group {
@@ -558,19 +562,19 @@
 		cursor: pointer;
 		align-items: center;
 		gap: 0.375rem;
-		border-radius: 0.375rem;
-		border: 1px solid #d1d5db;
+		border-radius: 0.75rem;
+		border: 1px solid #d6d3d1;
 		background-color: white;
 		padding: 0.5rem 0.875rem;
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: #374151;
+		color: #57534e;
 		transition: all 0.15s;
 	}
 
 	.btn-secondary:hover {
-		border-color: #9ca3af;
-		background-color: #f9fafb;
+		border-color: #a8a29e;
+		background-color: #fafaf9;
 	}
 
 	.btn-primary {
@@ -578,9 +582,9 @@
 		cursor: pointer;
 		align-items: center;
 		gap: 0.375rem;
-		border-radius: 0.375rem;
+		border-radius: 0.75rem;
 		border: 0;
-		background-color: #3b82f6;
+		background-color: #ea580c;
 		padding: 0.5rem 0.875rem;
 		font-size: 0.875rem;
 		font-weight: 500;
@@ -589,7 +593,7 @@
 	}
 
 	.btn-primary:hover {
-		background-color: #2563eb;
+		background-color: #c2410c;
 	}
 
 	.btn-icon {
@@ -599,40 +603,42 @@
 	.preview-container {
 		flex: 1;
 		overflow: hidden;
-		background-color: #f9fafb;
+		background-color: #fafaf9;
 		padding: 1rem;
 	}
 
 	.preview-iframe {
 		height: 100%;
 		width: 100%;
-		border-radius: 0.5rem;
-		border: 1px solid #e5e7eb;
+		border-radius: 0.75rem;
+		border: 1px solid #e7e5e4;
 		background-color: white;
 	}
 
 	.code-section {
 		overflow: auto;
-		border-top: 1px solid #e5e7eb;
-		background-color: #f9fafb;
+		border-top: 1px solid #e7e5e4;
+		background-color: #fafaf9;
 	}
 
 	.code-summary {
 		cursor: pointer;
 		padding: 0.75rem 1.5rem;
 		font-weight: 500;
-		color: #374151;
+		color: #57534e;
 		user-select: none;
 	}
 
 	.code-summary:hover {
-		background-color: #f3f4f6;
+		background-color: #f5f5f4;
 	}
 
 	.code-content {
 		height: 100%;
 		overflow-y: scroll;
 		font-size: 0.75rem;
+		padding: 1rem;
+		background-color: #0d1117;
 	}
 
 	.modal-overlay {
@@ -648,7 +654,7 @@
 	.modal {
 		width: 100%;
 		max-width: 28rem;
-		border-radius: 0.5rem;
+		border-radius: 0.75rem;
 		background-color: white;
 		padding: 1.5rem;
 		box-shadow:
@@ -660,12 +666,12 @@
 		margin-bottom: 1rem;
 		font-size: 1.25rem;
 		font-weight: 600;
-		color: #111827;
+		color: #1c1917;
 	}
 
 	.success-message {
 		margin-bottom: 1rem;
-		border-radius: 0.375rem;
+		border-radius: 0.75rem;
 		background-color: #f0fdf4;
 		padding: 1rem;
 		text-align: center;
@@ -691,32 +697,32 @@
 		margin-bottom: 0.25rem;
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: #374151;
+		color: #57534e;
 	}
 
 	.form-input {
 		width: 100%;
-		border-radius: 0.375rem;
-		border: 1px solid #d1d5db;
+		border-radius: 0.75rem;
+		border: 1px solid #d6d3d1;
 		padding: 0.5rem 0.75rem;
 		font-size: 0.875rem;
 	}
 
 	.form-input:focus {
 		outline: none;
-		border-color: #3b82f6;
-		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+		border-color: #ea580c;
+		box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.2);
 	}
 
 	.form-help {
 		margin-top: 0.25rem;
 		font-size: 0.75rem;
-		color: #6b7280;
+		color: #78716c;
 	}
 
 	.error-message {
 		margin-bottom: 1rem;
-		border-radius: 0.375rem;
+		border-radius: 0.75rem;
 		background-color: #fef2f2;
 		padding: 0.75rem;
 		font-size: 0.875rem;
@@ -731,18 +737,18 @@
 
 	.btn-cancel {
 		cursor: pointer;
-		border-radius: 0.375rem;
-		border: 1px solid #d1d5db;
+		border-radius: 0.75rem;
+		border: 1px solid #d6d3d1;
 		background-color: white;
 		padding: 0.5rem 1rem;
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: #374151;
+		color: #57534e;
 		transition: all 0.15s;
 	}
 
 	.btn-cancel:hover {
-		background-color: #f9fafb;
+		background-color: #fafaf9;
 	}
 
 	.btn-cancel:disabled {
@@ -752,9 +758,9 @@
 
 	.btn-submit {
 		cursor: pointer;
-		border-radius: 0.375rem;
+		border-radius: 0.75rem;
 		border: 0;
-		background-color: #3b82f6;
+		background-color: #ea580c;
 		padding: 0.5rem 1rem;
 		font-size: 0.875rem;
 		font-weight: 500;
@@ -763,7 +769,7 @@
 	}
 
 	.btn-submit:hover {
-		background-color: #2563eb;
+		background-color: #c2410c;
 	}
 
 	.btn-submit:disabled {

package/dist/preview/index.js

@@ -47,6 +47,15 @@ export const emailList = ({ path: emailPath = '/src/lib/emails', root } = {}) =>
     }
     return { files, path: emailPath };
 };
+const getEmailComponent = async (emailPath, file) => {
+    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.`);
+    }
+};
 /**
  * SvelteKit form action to render an email component.
  * Use this with the Preview component to render email templates on demand.
@@ -71,16 +80,7 @@ export const createEmail = {
                     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();
+            const emailComponent = await getEmailComponent(emailPath, file);
             // Render the component to HTML
             const { body } = render(emailComponent);
             // Remove all HTML comments from the body before formatting
@@ -137,11 +137,20 @@ export const sendEmail = ({ customSendEmailFunction, resendApiKey } = {}) => {
     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: 'svelte-email-tailwind <onboarding@resend.dev>',
                 to: `${data.get('to')}`,
                 subject: `${data.get('component')} ${data.get('note') ? '| ' + data.get('note') : ''}`,
-                html: `${data.get('html')}`
+                html: (await render(emailComponent)).body
             };
             let sent = { success: false, error: null };
             if (!customSendEmailFunction && resendApiKey) {

package/package.json

@@ -1,14 +1,14 @@
 {
 	"name": "better-svelte-email",
-	"version": "0.3.0",
+	"version": "0.3.3",
 	"author": "Konixy",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Konixy/better-svelte-email.git"
 	},
 	"peerDependencies": {
-		"svelte": "^5.14.3",
-		"@sveltejs/kit": "^2.0.0"
+		"svelte": ">5.14.3",
+		"@sveltejs/kit": ">=2"
 	},
 	"peerDependenciesMeta": {
 		"@sveltejs/kit": {
@@ -17,42 +17,42 @@
 	},
 	"dependencies": {
 		"html-to-text": "^9.0.5",
-		"magic-string": "^0.30.19",
-		"svelte-highlight": "^7.8.4",
+		"magic-string": "^0.30.21",
 		"tw-to-css": "^0.0.12"
 	},
 	"optionalDependencies": {
 		"prettier": "^3.6.2",
-		"resend": "^6.1.2"
+		"resend": "^6.2.2",
+		"shiki": "^3.14.0"
 	},
 	"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",
+		"@eslint/js": "^9.38.0",
+		"@sveltejs/adapter-vercel": "^6.0.0",
+		"@sveltejs/kit": "^2.47.3",
 		"@sveltejs/package": "^2.5.4",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
-		"@tailwindcss/vite": "^4.1.14",
+		"@tailwindcss/vite": "^4.1.16",
 		"@types/html-to-text": "^9.0.4",
-		"@types/node": "^24",
-		"@vitest/browser": "^3.2.4",
-		"eslint": "^9.37.0",
+		"@types/node": "^24.9.1",
+		"eslint": "^9.38.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.12.4",
+		"eslint-plugin-svelte": "^3.12.5",
 		"globals": "^16.4.0",
-		"playwright": "^1.55.1",
+		"gsap": "^3.13.0",
+		"mdsvex": "^0.12.6",
 		"prettier-plugin-svelte": "^3.4.0",
-		"prettier-plugin-tailwindcss": "^0.6.14",
-		"publint": "^0.3.13",
-		"svelte": "^5.39.8",
-		"svelte-check": "^4.3.2",
-		"tailwindcss": "^4.1.14",
+		"prettier-plugin-tailwindcss": "^0.7.1",
+		"publint": "^0.3.15",
+		"rehype-autolink-headings": "^7.1.0",
+		"rehype-slug": "^6.0.0",
+		"svelte": "5.42.2",
+		"svelte-check": "^4.3.3",
+		"tailwindcss": "^4.1.16",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.45.0",
-		"vite": "^7.1.9",
-		"vitest": "^3.2.4",
-		"vitest-browser-svelte": "^1.1.0"
+		"typescript-eslint": "^8.46.2",
+		"vite": "^7.1.12",
+		"vitest": "^4.0.3"
 	},
 	"exports": {
 		".": {
@@ -90,7 +90,8 @@
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
+		"!dist/**/*.spec.*",
+		"!dist/emails"
 	],
 	"keywords": [
 		"svelte",