better-svelte-email 1.4.0 → 2.0.0-beta.0

package/package.json

@@ -1,101 +1,28 @@
 {
 	"name": "better-svelte-email",
-	"description": "Svelte email renderer with Tailwind support",
-	"version": "1.4.0",
+	"version": "2.0.0-beta.0",
 	"author": "Konixy",
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/Konixy/better-svelte-email.git"
-	},
-	"homepage": "https://better-svelte-email.konixy.fr",
-	"peerDependencies": {
-		"svelte": ">=5.14.3",
-		"@sveltejs/kit": ">=2"
-	},
-	"peerDependenciesMeta": {
-		"@sveltejs/kit": {
-			"optional": true
-		}
+		"url": "git+https://github.com/Konixy/better-svelte-email.git",
+		"directory": "packages/better-svelte-email"
 	},
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.mjs",
 	"dependencies": {
-		"html-to-text": "^9.0.5",
-		"parse5": "^8.0.0",
-		"postcss": "^8.5.6",
-		"postcss-value-parser": "^4.2.0",
-		"tailwindcss": "^4.1.18"
-	},
-	"optionalDependencies": {
-		"prettier": "^3.8.1",
-		"resend": "^6.8.0",
-		"shiki": "^3.21.0"
-	},
-	"devDependencies": {
-		"@eslint/compat": "^2.0.1",
-		"@eslint/js": "^9.39.2",
-		"@sveltejs/adapter-vercel": "^6.3.0",
-		"@sveltejs/kit": "^2.50.0",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@tailwindcss/vite": "^4.1.18",
-		"@types/html-to-text": "^9.0.4",
-		"@types/node": "24.10.9",
-		"@vitest/coverage-v8": "^4.0.18",
-		"eslint": "^9.39.2",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.14.0",
-		"globals": "^17.0.0",
-		"mdsvex": "^0.12.6",
-		"mode-watcher": "^1.1.0",
-		"prettier-plugin-svelte": "^3.4.1",
-		"prettier-plugin-tailwindcss": "^0.7.2",
-		"publint": "^0.3.17",
-		"rehype-autolink-headings": "^7.1.0",
-		"rehype-slug": "^6.0.0",
-		"svelte": "5.48.0",
-		"svelte-check": "^4.3.5",
-		"tailwindcss-motion": "^1.1.1",
-		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.53.1",
-		"vite": "^7.3.1",
-		"vitest": "^4.0.18"
+		"@better-svelte-email/components": "workspace:*",
+		"@better-svelte-email/preview": "workspace:*",
+		"@better-svelte-email/server": "workspace:*"
 	},
 	"exports": {
 		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js",
-			"import": "./dist/index.js",
-			"default": "./dist/index.js"
-		},
-		"./components": {
-			"types": "./dist/components/index.d.ts",
-			"import": "./dist/components/index.js",
-			"default": "./dist/components/index.js"
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.cjs"
 		},
-		"./components/*": {
-			"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"
-		},
-		"./render": {
-			"types": "./dist/render/index.d.ts",
-			"import": "./dist/render/index.js",
-			"default": "./dist/render/index.js"
-		},
-		"./package.json": "./package.json"
+		"./chunk-D1SwGrFN": "./dist/chunk-D1SwGrFN.mjs",
+		"./*": "./*"
 	},
+	"description": "Svelte email renderer with Tailwind support",
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
@@ -103,6 +30,7 @@
 		"!dist/**/__fixtures__",
 		"!dist/emails"
 	],
+	"homepage": "https://better-svelte-email.konixy.dev",
 	"keywords": [
 		"svelte",
 		"svelte5",
@@ -115,26 +43,13 @@
 	],
 	"license": "MIT",
 	"scripts": {
-		"dev": "vite dev",
-		"build": "bun run prepack && vite build",
-		"preview": "vite preview",
-		"package": "svelte-package",
-		"package:watch": "svelte-package --watch",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"test": "vitest run",
-		"test:watch": "vitest",
-		"test:ui": "vitest --ui",
-		"test:coverage": "vitest run --coverage"
+		"build": "tsdown src/index.ts",
+		"lint": "prettier --check . --ignore-path ../../.prettierignore && eslint src",
+		"test": "vitest run"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"svelte": "./dist/index.js",
 	"type": "module",
-	"types": "./dist/index.d.ts"
+	"types": "./dist/index.d.cts"
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Anatole Dufour
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,117 +0,0 @@
-<p align="center">
-	<img src="static/favicon.svg" alt="Better Svelte Email" width="128" height="128">
-  <h3 align="center">Better Svelte Email</h3>
-	<p align="center">
-		Create beautiful emails in Svelte with first-class Tailwind support
-	</p>
-	<p align="center">
-		<a href="https://better-svelte-email.konixy.fr">Website</a>
-		 · 
-		<a href="https://github.com/Konixy/better-svelte-email">GitHub</a>
-	</p>
-  <p align="center">
-    <a href="https://github.com/Konixy/better-svelte-email/actions/workflows/release.yml">
-      <img src="https://github.com/Konixy/better-svelte-email/actions/workflows/release.yml/badge.svg" alt="Tests">
-    </a>
-    <a href="https://www.npmjs.com/package/better-svelte-email">
-      <img src="https://img.shields.io/npm/v/better-svelte-email.svg?logo=npm" alt="npm version">
-    </a>
-    <a href="https://github.com/Konixy/better-svelte-email/stargazers">
-      <img src="https://img.shields.io/github/stars/Konixy/better-svelte-email?style=default&logo=github" alt="GitHub stars">
-    </a>
-  </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
-
-- **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** - >90% test coverage with unit and integration tests
-
-_See [Roadmap](./ROADMAP.md) for future features and planned improvements._
-
-## Why?
-
-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 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
-
-The minimum supported Svelte version is 5.14.3.
-For older versions, you can use [`svelte-email-tailwind`](https://github.com/steveninety/svelte-email-tailwind).
-
-## Supported Features
-
-### ✅ Supported
-
-- 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
-- Custom CSS injection (for app theme integration)
-
-## 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
-
-```bash
-bun run test
-```
-
-All tests must pass before pushing to main. The CI/CD pipeline will automatically run tests on every push and pull request.
-
-### Building
-
-```bash
-bun run build
-```
-
-### Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
-To do so, you'll need to:
-
-1. Fork the repository
-2. Create a feature branch (`git checkout -b feat/amazing-feature`)
-3. Make your changes
-4. Run tests (`bun run test`)
-5. Commit your changes using [conventional commits](https://www.conventionalcommits.org/):
-   - `feat:` - New features
-   - `fix:` - Bug fixes
-   - `docs:` - Documentation changes
-   - `test:` - Test additions/changes
-   - `chore:` - Maintenance tasks
-6. Push to your branch (`git push origin feat/amazing-feature`)
-7. Open a Pull Request
-
-## Acknowledgements
-
-Many components and logic were inspired by or adapted from [svelte-email-tailwind](https://github.com/steveninety/svelte-email-tailwind) and [react-email](https://react.email/). Huge thanks to the authors and contributors of these projects for their excellent work.

package/dist/components/Body.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		children,
-		style,
-		class: className,
-		...restProps
-	}: { children?: any } & HTMLAttributes<HTMLBodyElement> = $props();
-</script>
-
-<body {...restProps}>
-	<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
-		<tbody>
-			<tr>
-				<td {style} class={className}>
-					{@render children?.()}
-				</td>
-			</tr>
-		</tbody>
-	</table>
-</body>

package/dist/components/Body.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type $$ComponentProps = {
-    children?: any;
-} & HTMLAttributes<HTMLBodyElement>;
-declare const Body: import("svelte").Component<$$ComponentProps, {}, "">;
-type Body = ReturnType<typeof Body>;
-export default Body;

package/dist/components/Button.svelte

@@ -1,58 +0,0 @@
-<!-- svelte-ignore state_referenced_locally -->
-<script lang="ts">
-	import { styleToString, pxToPt, combineStyles } from '../utils/index.js';
-	import type { HTMLAnchorAttributes } from 'svelte/elements';
-
-	let {
-		href = '#',
-		target = '_blank',
-		style = '',
-		pX = 0,
-		pY = 0,
-		children,
-		...restProps
-	}: {
-		href?: string;
-		target?: string;
-		pX?: number;
-		pY?: number;
-		children: any;
-	} & HTMLAnchorAttributes = $props();
-
-	const y = pY * 2;
-	const textRaise = pxToPt(y.toString());
-
-	// Button link styles
-	const buttonStyle = styleToString({
-		lineHeight: '100%',
-		textDecoration: 'none',
-		display: 'inline-block',
-		maxWidth: '100%',
-		padding: pY || pX ? `${pY}px ${pX}px` : undefined
-	});
-
-	// Button text styles with MSO support
-	const buttonTextStyle = styleToString({
-		maxWidth: '100%',
-		display: 'inline-block',
-		lineHeight: '120%',
-		textDecoration: 'none',
-		textTransform: 'none',
-		msoPaddingAlt: '0px',
-		msoTextRaise: pY ? pxToPt(pY.toString()) : undefined
-	});
-</script>
-
-<a {...restProps} {href} {target} style={combineStyles(buttonStyle, style)}>
-	<span>
-		{@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`}
-	</span>
-
-	<span style={buttonTextStyle}>
-		{@render children?.()}
-	</span>
-
-	<span style="display: none;">
-		{@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`}
-	</span>
-</a>

package/dist/components/Button.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { HTMLAnchorAttributes } from 'svelte/elements';
-type $$ComponentProps = {
-    href?: string;
-    target?: string;
-    pX?: number;
-    pY?: number;
-    children: any;
-} & HTMLAnchorAttributes;
-declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
-type Button = ReturnType<typeof Button>;
-export default Button;

package/dist/components/Column.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-	import type { HTMLTdAttributes } from 'svelte/elements';
-
-	let {
-		children,
-		...restProps
-	}: {
-		children?: any;
-	} & HTMLTdAttributes = $props();
-</script>
-
-<td {...restProps}>
-	{@render children?.()}
-</td>

package/dist/components/Column.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { HTMLTdAttributes } from 'svelte/elements';
-type $$ComponentProps = {
-    children?: any;
-} & HTMLTdAttributes;
-declare const Column: import("svelte").Component<$$ComponentProps, {}, "">;
-type Column = ReturnType<typeof Column>;
-export default Column;

package/dist/components/Container.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import { combineStyles, styleToString } from '../utils/index.js';
-	import type { HTMLTableAttributes } from 'svelte/elements';
-
-	let {
-		children,
-		style,
-		...restProps
-	}: {
-		children: any;
-	} & HTMLTableAttributes = $props();
-
-	// Default max-width for email containers (600px = 37.5em)
-	const defaultStyles = styleToString({ maxWidth: '37.5em' });
-</script>
-
-<table
-	align="center"
-	width="100%"
-	role="presentation"
-	cellspacing="0"
-	cellpadding="0"
-	border="0"
-	style={combineStyles(defaultStyles, style)}
-	{...restProps}
->
-	<tbody>
-		<tr style="width: 100%;">
-			<td>
-				{@render children?.()}
-			</td>
-		</tr>
-	</tbody>
-</table>

package/dist/components/Container.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { HTMLTableAttributes } from 'svelte/elements';
-type $$ComponentProps = {
-    children: any;
-} & HTMLTableAttributes;
-declare const Container: import("svelte").Component<$$ComponentProps, {}, "">;
-type Container = ReturnType<typeof Container>;
-export default Container;

package/dist/components/Head.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-	let { children }: { children?: any } = $props();
-</script>
-
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<meta name="x-apple-disable-message-reformatting" />
-	<!--[if !mso]><!-->
-	<meta http-equiv="x-ua-compatible" content="IE=edge" />
-	<!--<![endif]-->
-	{@render children?.()}
-</head>

package/dist/components/Head.svelte.d.ts

@@ -1,6 +0,0 @@
-type $$ComponentProps = {
-    children?: any;
-};
-declare const Head: import("svelte").Component<$$ComponentProps, {}, "">;
-type Head = ReturnType<typeof Head>;
-export default Head;

package/dist/components/Heading.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import { combineStyles, styleToString, withMargin } from '../utils/index.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	type Props = HTMLAttributes<HTMLHeadingElement> & {
-		children: any;
-		as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-		m?: string;
-		mx?: string;
-		my?: string;
-		mt?: string;
-		mr?: string;
-		mb?: string;
-		ml?: string;
-	};
-
-	let { style, as, children, ...restProps }: Props = $props();
-
-	const defaultStyles = styleToString({
-		...withMargin({
-			m: restProps.m,
-			mx: restProps.mx,
-			my: restProps.my,
-			mt: restProps.mt,
-			mr: restProps.mr,
-			mb: restProps.mb,
-			ml: restProps.ml
-		})
-	});
-</script>
-
-<svelte:element this={as} style={combineStyles(defaultStyles, style)} {...restProps}>
-	{@render children?.()}
-</svelte:element>

package/dist/components/Heading.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLHeadingElement> & {
-    children: any;
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    m?: string;
-    mx?: string;
-    my?: string;
-    mt?: string;
-    mr?: string;
-    mb?: string;
-    ml?: string;
-};
-declare const Heading: import("svelte").Component<Props, {}, "">;
-type Heading = ReturnType<typeof Heading>;
-export default Heading;

package/dist/components/Hr.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { combineStyles, styleToString } from '../utils/index.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let { style, ...restProps }: HTMLAttributes<HTMLHRElement> = $props();
-
-	const defaultStyles = styleToString({
-		width: '100%',
-		border: 'none',
-		borderTopWidth: '1px',
-		borderTopStyle: 'solid',
-		borderColor: '#eaeaea'
-	});
-</script>
-
-<hr style={combineStyles(defaultStyles, style)} {...restProps} />

package/dist/components/Hr.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-declare const Hr: import("svelte").Component<HTMLAttributes<HTMLHRElement>, {}, "">;
-type Hr = ReturnType<typeof Hr>;
-export default Hr;

package/dist/components/Html.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import type { HTMLHtmlAttributes } from 'svelte/elements';
-
-	type Props = HTMLHtmlAttributes & {
-		lang?: string;
-		dir?: 'ltr' | 'rtl' | 'auto' | null | undefined;
-		style?: string;
-		children?: any;
-	};
-
-	let { lang = 'en', dir = 'ltr', children, ...restProps }: Props = $props();
-
-	const doctype =
-		'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
-</script>
-
-{@html doctype}
-<html {...restProps} id="__better-svelte-email" {lang} {dir}>
-	{@render children?.()}
-</html>

package/dist/components/Html.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { HTMLHtmlAttributes } from 'svelte/elements';
-type Props = HTMLHtmlAttributes & {
-    lang?: string;
-    dir?: 'ltr' | 'rtl' | 'auto' | null | undefined;
-    style?: string;
-    children?: any;
-};
-declare const Html: import("svelte").Component<Props, {}, "">;
-type Html = ReturnType<typeof Html>;
-export default Html;

package/dist/components/Img.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { combineStyles, styleToString } from '../utils/index.js';
-	import type { HTMLImgAttributes } from 'svelte/elements';
-
-	let {
-		style,
-		alt,
-		src,
-		width,
-		height,
-		...restProps
-	}: HTMLImgAttributes & {
-		alt: string;
-		src: string;
-		width: string;
-		height: string;
-	} = $props();
-
-	const defaultStyles = styleToString({
-		display: 'block',
-		outline: 'none',
-		border: 'none',
-		textDecoration: 'none'
-	});
-</script>
-
-<img {alt} {src} {width} {height} style={combineStyles(defaultStyles, style)} {...restProps} />

package/dist/components/Img.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { HTMLImgAttributes } from 'svelte/elements';
-type $$ComponentProps = HTMLImgAttributes & {
-    alt: string;
-    src: string;
-    width: string;
-    height: string;
-};
-declare const Img: import("svelte").Component<$$ComponentProps, {}, "">;
-type Img = ReturnType<typeof Img>;
-export default Img;

package/dist/components/Link.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { combineStyles, styleToString } from '../utils/index.js';
-	import type { HTMLAnchorAttributes } from 'svelte/elements';
-
-	let {
-		children,
-		href,
-		target = '_blank',
-		style,
-		...restProps
-	}: {
-		href: string;
-		target?: string;
-		children: any;
-	} & HTMLAnchorAttributes = $props();
-
-	const defaultStyles = styleToString({ textDecorationLine: 'none', color: '#067df7' });
-</script>
-
-<a {href} {target} {...restProps} style={combineStyles(defaultStyles, style)}>
-	{@render children?.()}
-</a>

package/dist/components/Link.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { HTMLAnchorAttributes } from 'svelte/elements';
-type $$ComponentProps = {
-    href: string;
-    target?: string;
-    children: any;
-} & HTMLAnchorAttributes;
-declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
-type Link = ReturnType<typeof Link>;
-export default Link;