npm - better-svelte-email - Versions diffs - 1.0.0-beta.2 → 1.0.1 - Mend

better-svelte-email 1.0.0-beta.2 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/README.md +24 -204
package/dist/components/index.js +1 -2
package/dist/index.d.ts +1 -4
package/dist/index.js +1 -5
package/dist/preview/EmailTreeNode.svelte +24 -9
package/package.json +7 -19
package/dist/preprocessor/head-injector.d.ts +0 -9
package/dist/preprocessor/head-injector.js +0 -57
package/dist/preprocessor/index.d.ts +0 -44
package/dist/preprocessor/index.js +0 -227
package/dist/preprocessor/parser.d.ts +0 -17
package/dist/preprocessor/parser.js +0 -315
package/dist/preprocessor/transformer.d.ts +0 -18
package/dist/preprocessor/transformer.js +0 -158
package/dist/preprocessor/types.d.ts +0 -125
package/dist/preprocessor/types.js +0 -1

package/README.md CHANGED Viewed

@@ -22,10 +22,13 @@
   </p>
 </p>
+## Usage
+See the [documentation](https://better-svelte-email.konixy.fr/docs) for a complete guide on how to use Better Svelte Email.
 ## Features
-- **Stable & Future-Proof** - Uses Svelte's public preprocessor API
-- **Tailwind CSS Support** - Transforms Tailwind classes to inline styles for email clients
+- **Tailwind v4 Support** - Transforms Tailwind classes to inline styles for email clients
 - **Built-in Email Preview** - Visual email preview and test sending
 - **TypeScript First** - Fully typed with comprehensive type definitions
 - **Well Tested** - Extensive test coverage with unit and integration tests
@@ -39,191 +42,7 @@ Existing Svelte email solutions have significant limitations:
 - **svelte-email** hasn't been updated in over 2 years
 - **svelte-email-tailwind** suffers from stability issues and maintaining it is not sustainable anymore
-Better Svelte Email is a complete rewrite built on Svelte's official preprocessor API, providing the rock-solid foundation your email infrastructure needs. It brings the simplicity, reliability, and feature richness of [React Email](https://react.email/) to the Svelte ecosystem.
-## Quick Start
-### 1. Install the package
-```bash
-npm i -D better-svelte-email
-# or
-bun add -D better-svelte-email
-# or
-pnpm add -D better-svelte-email
-```
-### 2. Configure the Preprocessor
-Add the preprocessor to your `svelte.config.js`:
-```javascript
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import { betterSvelteEmailPreprocessor } from 'better-svelte-email';
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	preprocess: [vitePreprocess(), betterSvelteEmailPreprocessor()],
-	kit: {
-		adapter: adapter()
-	}
-};
-export default config;
-```
-### 3. Create Email Components
-Create your email templates in `src/lib/emails/`:
-```svelte
-<!-- src/lib/emails/welcome.svelte -->
-<script>
-	import { Html, Head, Body, Preview, Container, Text, Button } from 'better-svelte-email';
-	let { name = 'User' } = $props();
-</script>
-<Html>
-	<Head />
-	<Body class="bg-gray-100">
-		<Preview preview="Welcome Email" />
-		<Container class="mx-auto p-8">
-			<Text class="mb-4 text-2xl font-bold">
-				Welcome, {name}!
-			</Text>
-			<Button
-				href="https://example.com"
-				class="rounded bg-orange-600 px-6 py-3 text-white sm:text-sm"
-			>
-				Get Started
-			</Button>
-		</Container>
-	</Body>
-</Html>
-```
-### 4. Render and Send
-```typescript
-// src/routes/api/send-email/+server.ts
-import { render } from 'svelte/server';
-import WelcomeEmail from '$lib/emails/welcome.svelte';
-export async function POST({ request }) {
-	const { name, email } = await request.json();
-	// Render email (preprocessor already ran at build time!)
-	const result = render(WelcomeEmail, { props: { name } });
-	// Send email using your preferred service (Resend, SendGrid, etc.)
-	// await resend.emails.send({
-	//   from: 'noreply@example.com',
-	//   to: email,
-	//   subject: 'Welcome!',
-	//   html: result.body
-	// });
-	return new Response('Sent');
-}
-```
-## Email Preview Component
-Better Svelte Email includes a built-in preview component for visually developing and testing your email templates during development.
-### Setup
-Create a preview route in your SvelteKit app:
-```svelte
-<!-- src/routes/preview/+page.svelte -->
-<script lang="ts">
-	import { EmailPreview } from 'better-svelte-email/preview';
-	let { data } = $props();
-</script>
-<EmailPreview emailList={data.emails} />
-```
-```typescript
-// src/routes/preview/+page.server.ts
-import { emailList, createEmail, sendEmail } from 'better-svelte-email/preview';
-import { env } from '$env/dynamic/private';
-export function load() {
-	const emails = emailList({
-		path: '/src/lib/emails' // optional, defaults to '/src/lib/emails'
-	});
-	return { emails };
-}
-export const actions = {
-	...createEmail,
-	...sendEmail({ resendApiKey: env.RESEND_API_KEY })
-};
-```
-### Features
-- **HTML Source View** - Inspect the generated HTML with syntax highlighting
-- **Copy to Clipboard** - Quickly copy the rendered HTML
-- **Test Email Sending** - Send test emails directly from the preview UI using Resend
-- **Template List** - Browse all your email templates in one place
-### Environment Variables
-To enable test email sending, add your Resend API key to your `.env` file:
-```env
-RESEND_API_KEY=re_your_api_key_here
-```
-Get your API key from [Resend](https://resend.com/).
-### Custom Email Provider
-If you prefer to use a different email provider, you can pass a custom send function:
-```typescript
-export const actions = {
-	...createEmail,
-	...sendEmail({
-		customSendEmailFunction: async ({ from, to, subject, html }) => {
-			// Use your preferred email service (SendGrid, Mailgun, etc.)
-			try {
-				await yourEmailService.send({ from, to, subject, html });
-				return { success: true };
-			} catch (error) {
-				return { success: false, error };
-			}
-		}
-	})
-};
-```
-## Configuration
-Here are the available options:
-```javascript
-betterSvelteEmailPreprocessor({
-	pathToEmailFolder: '/src/lib/emails',
-	debug: false,
-	tailwindConfig: {
-		theme: {
-			extend: {
-				colors: {
-					brand: '#FF3E00'
-				}
-			}
-		}
-	}
-});
-```
+Better Svelte Email is a complete rewrite of [svelte-email-tailwind](https://github.com/steveninety/svelte-email-tailwind) inspired by [React Email](https://react.email/), providing the rock-solid foundation your email infrastructure needs. It brings the simplicity, reliability, and feature richness of [React Email](https://react.email/) to the Svelte ecosystem.
 ## Minimum Svelte Version
@@ -234,28 +53,29 @@ For older versions, you can use [`svelte-email-tailwind`](https://github.com/ste
 ### ✅ Supported
-- ✅ Static Tailwind classes
-- ✅ Custom Tailwind classes (`bg-[#fff]`, `my:[40px]`, ...)
-- ✅ All standard Tailwind (v3) utilities (colors, spacing, typography, etc.)
-- ✅ Responsive breakpoints (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`)
-- ✅ HTML elements and Svelte components
-- ✅ Nested components
-- ✅ Conditional blocks (`{#if}`)
-- ✅ Each blocks (`{#each}`)
-- ✅ Custom Tailwind configurations
-### ❌ Not Supported (Yet) (See [Roadmap](./ROADMAP.md))
-- ❌ Tailwind v4
-- ❌ CSS Object (`style={{ color: 'red' }}`)
-- ❌ Dynamic class expressions (`class={someVar}`)
-- ❌ Arbitrary values in responsive classes (`sm:[color:red]`)
-- ❌ Container queries
+- All tailwindcss v4 utilities
+- Custom Tailwind classes (`bg-[#fff]`, `my:[40px]`, ...)
+- Dynamic Tailwind classes (`class={someVar}`)
+- Responsive breakpoints (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`)
+- HTML elements and Svelte components
+- Nested components
+- All svelte features such as each blocks (`{#each}`) and if blocks (`{#if}`), and more
+- Custom Tailwind configurations
 ## Author
 Anatole Dufour ([@Konixy](https://github.com/Konixy))
+### Author of `svelte-email-tailwind`
+Steven Polak ([@steveninety](https://github.com/steveninety))
+### Authors of `react-email`
+Bu Kinoshita ([@bukinoshita](https://github.com/bukinoshita))
+Zeno Rocha ([@zenorocha](https://github.com/zenorocha))
 ## Development
 ### Running Tests

package/dist/components/index.js CHANGED Viewed

@@ -1,5 +1,4 @@
-// Email Components for better-svelte-email
-// These components work with the preprocessor's styleString prop
+// Email components for better-svelte-email
 export { default as Body } from './Body.svelte';
 export { default as Button } from './Button.svelte';
 export { default as Column } from './Column.svelte';

package/dist/index.d.ts CHANGED Viewed

@@ -1,5 +1,2 @@
 export * from './components/index.js';
-export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
-export type { PreprocessorOptions, ComponentTransform } from './preprocessor/index.js';
-export { default as Renderer, type TailwindConfig, type RenderOptions } from './render/index.js';
-export * from './utils/index.js';
+export { default as Renderer, toPlainText, type TailwindConfig, type RenderOptions } from './render/index.js';

package/dist/index.js CHANGED Viewed

@@ -1,8 +1,4 @@
 // Export email components
 export * from './components/index.js';
-// Export the preprocessor
-export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
 // Export renderer
-export { default as Renderer } from './render/index.js';
-// Export utilities
-export * from './utils/index.js';
+export { default as Renderer, toPlainText } from './render/index.js';

package/dist/preview/EmailTreeNode.svelte CHANGED Viewed

@@ -142,26 +142,41 @@
 	.email-directory {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: 0.75rem;
 		width: 100%;
 		padding: 0.375rem 0.75rem;
 		padding-left: calc(0.75rem + var(--node-depth, 0) * 1rem);
 		border-radius: 0.5rem;
 		border: 0;
 		background-color: transparent;
-		font-size: 0.75rem;
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-		color: var(--muted-foreground);
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--secondary-foreground);
 		cursor: pointer;
 		transition: all 0.15s;
 		justify-content: flex-start;
 	}
+	.email-directory .email-icon.folder {
+		display: block;
+	}
+	.email-directory .email-icon.caret {
+		display: none;
+	}
 	.email-directory:hover {
 		background-color: var(--muted);
 	}
+	.email-directory:not(.active):hover .email-icon.folder {
+		display: none;
+	}
+	.email-directory:not(.active):hover .email-icon.caret {
+		display: block;
+	}
 	.email-button {
 		display: flex;
 		width: 100%;
@@ -206,13 +221,13 @@
 		background-color: color-mix(in srgb, var(--muted) 80%, transparent);
 	}
-	.email-directory.collapsed .folder {
+	/* .email-directory.collapsed .folder {
 		opacity: 0.7;
-	}
+	} */
-	.email-directory.collapsed .email-directory-name {
+	/* .email-directory.collapsed .email-directory-name {
 		color: var(--muted-foreground);
-	}
+	} */
 	.email-children {
 		margin: 0.125rem 0 0;

package/package.json CHANGED Viewed

@@ -1,6 +1,7 @@
 {
 	"name": "better-svelte-email",
-	"version": "1.0.0-beta.2",
+	"description": "Svelte email renderer with Tailwind support",
+	"version": "1.0.1",
 	"author": "Konixy",
 	"repository": {
 		"type": "git",
@@ -19,9 +20,7 @@
 	"dependencies": {
 		"css-tree": "^3.1.0",
 		"html-to-text": "^9.0.5",
-		"magic-string": "^0.30.21",
-		"parse5": "^8.0.0",
-		"tw-to-css": "^0.0.12"
+		"parse5": "^8.0.0"
 	},
 	"optionalDependencies": {
 		"prettier": "^3.6.2",
@@ -50,7 +49,7 @@
 		"publint": "^0.3.15",
 		"rehype-autolink-headings": "^7.1.0",
 		"rehype-slug": "^6.0.0",
-		"svelte": "5.43.9",
+		"svelte": "5.43.14",
 		"svelte-check": "^4.3.4",
 		"tailwindcss": "^4.1.17",
 		"tailwindcss-motion": "^1.1.1",
@@ -63,13 +62,8 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js",
-			"import": "./dist/preprocessor/index.js",
-			"default": "./dist/preprocessor/index.js"
-		},
-		"./preprocessor": {
-			"types": "./dist/preprocessor/index.d.ts",
-			"import": "./dist/preprocessor/index.js",
-			"default": "./dist/preprocessor/index.js"
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
 		},
 		"./components": {
 			"types": "./dist/components/index.d.ts",
@@ -89,9 +83,6 @@
 			"types": "./dist/preview/EmailPreview.svelte.d.ts",
 			"svelte": "./dist/preview/EmailPreview.svelte"
 		},
-		"./preview/theme.css": {
-			"default": "./dist/preview/theme.css"
-		},
 		"./utils": {
 			"types": "./dist/utils/index.d.ts",
 			"import": "./dist/utils/index.js",
@@ -104,7 +95,6 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"description": "Svelte email renderer with Tailwind support",
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
@@ -118,11 +108,9 @@
 		"email",
 		"tailwind",
 		"tailwindcss",
-		"preprocessor",
 		"inline-styles",
 		"responsive-email",
-		"email-templates",
-		"svelte-preprocessor"
+		"email-templates"
 	],
 	"license": "MIT",
 	"scripts": {

package/dist/preprocessor/head-injector.d.ts DELETED Viewed

@@ -1,9 +0,0 @@
-import type { MediaQueryStyle } from './types.js';
-/**
- * Inject media query styles into the <Head> component
- */
-export declare function injectMediaQueries(source: string, mediaQueries: MediaQueryStyle[]): {
-    code: string;
-    success: boolean;
-    error?: string;
-};

package/dist/preprocessor/head-injector.js DELETED Viewed

@@ -1,57 +0,0 @@
-import MagicString from 'magic-string';
-import { findHeadComponent } from './parser.js';
-/**
- * Inject media query styles into the <Head> component
- */
-export function injectMediaQueries(source, mediaQueries) {
-    if (mediaQueries.length === 0) {
-        // No media queries to inject
-        return { code: source, success: true };
-    }
-    // Find the Head component
-    const headInfo = findHeadComponent(source);
-    if (!headInfo.found || headInfo.insertPosition === null) {
-        return {
-            code: source,
-            success: false,
-            error: 'No <Head> component found. Media queries cannot be injected.'
-        };
-    }
-    // Generate the style tag content
-    const styleContent = generateStyleTag(mediaQueries);
-    // Use MagicString for surgical insertion
-    const s = new MagicString(source);
-    // Check if Head is self-closing and convert it
-    const headStart = source.lastIndexOf('<Head', headInfo.insertPosition);
-    const headSegment = source.substring(headStart, headInfo.insertPosition + 10);
-    if (headSegment.includes('/>')) {
-        // Self-closing: convert to non-self-closing
-        // Check if there's a space before />
-        const spaceBeforeSelfClose = source[headInfo.insertPosition - 1] === ' ';
-        const replaceStart = spaceBeforeSelfClose
-            ? headInfo.insertPosition - 1
-            : headInfo.insertPosition;
-        // Replace [space]?/> with >
-        s.overwrite(replaceStart, headInfo.insertPosition + 2, '>');
-        // Insert style content
-        s.appendLeft(headInfo.insertPosition + 2, styleContent);
-        // Add closing tag
-        s.appendLeft(headInfo.insertPosition + 2, '</Head>');
-    }
-    else {
-        // Already has closing tag, just insert content
-        s.appendLeft(headInfo.insertPosition, styleContent);
-    }
-    return {
-        code: s.toString(),
-        success: true
-    };
-}
-/**
- * Generate <style> tag with all media queries
- */
-function generateStyleTag(mediaQueries) {
-    // Combine all media queries
-    const allQueries = mediaQueries.map((mq) => mq.rules).join('\n');
-    return `\n\t<style>\n\t\t${allQueries}\n\t</style>\n`;
-}

package/dist/preprocessor/index.d.ts DELETED Viewed

@@ -1,44 +0,0 @@
-import type { PreprocessorGroup } from 'svelte/compiler';
-import type { PreprocessorOptions, ComponentTransform } from './types.js';
-/**
- * Svelte 5 preprocessor for transforming Tailwind classes in email components
- *
- * @deprecated The preprocessor approach is deprecated. Use the `Renderer` class instead for better performance and flexibility.
- *
- * @example
- * ```javascript
- * // Old (deprecated):
- * // svelte.config.js
- * import { betterSvelteEmailPreprocessor } from 'better-svelte-email/preprocessor';
- *
- * export default {
- *   preprocess: [
- *     vitePreprocess(),
- *     betterSvelteEmailPreprocessor({
- *       pathToEmailFolder: '/src/lib/emails',
- *       tailwindConfig: { ... }
- *     })
- *   ]
- * };
- *
- * // New (recommended):
- * import Renderer from 'better-svelte-email/renderer';
- * import EmailComponent from './email.svelte';
- *
- * const renderer = new Renderer({
- *   theme: {
- *     extend: {
- *       colors: { brand: '#FF3E00' }
- *     }
- *   }
- * });
- *
- * const html = await renderer.render(EmailComponent, {
- *   props: { name: 'John' }
- * });
- * ```
- *
- * Reference: https://svelte.dev/docs/svelte/svelte-compiler#preprocess
- */
-export declare function betterSvelteEmailPreprocessor(options?: PreprocessorOptions): PreprocessorGroup;
-export type { PreprocessorOptions, ComponentTransform };