Skip to content

Commit 5c51853

Browse files
steveninetysteveninety
committed
update readme and changelog
1 parent 3c11031 commit 5c51853

File tree

2 files changed

+113
-78
lines changed

2 files changed

+113
-78
lines changed

‎CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
#1.0.4 (2024-11-10)
2+
3+
## Patch
4+
5+
Svelte 5 compatibility without any feature changes or breaking changes.
6+
7+
#1.0.3 (2024-11-10)
8+
9+
## Patch
10+
11+
Update to the latest Svelte 4 version
12+
113
#1.0.2 (2024-03-30)
214

315
## Patch

‎README.md‎

Lines changed: 101 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@
77

88
# Introduction
99

10+
SVELTE 5 COMPATIBLE since version 2.0.0!
11+
1012
`svelte-email-tailwind` enables you to code, preview and test-send email templates with Svelte and Tailwind classes and render them to HTML or plain text.
1113

12-
- This package adds a Tailwind post-processor to the original [svelte-email](https://github.com/carstenlebek/svelte-email) package.
13-
- Tailwind classes are converted to inline styles on built-time using a Vite plugin.
14+
- This package adds a Tailwind post-processor to the original [svelte-email](https://github.com/carstenlebek/svelte-email) package.
15+
- Tailwind classes are converted to inline styles on built-time using a Vite plugin.
1416
- In earlier versions, this process took place every time an email was sent (not very efficient).
1517
- This package also provides a Svelte preview component, including utility functions for the server (SvelteKit only).
1618

@@ -33,22 +35,24 @@ pnpm install svelte-email-tailwind
3335
Import the svelteEmailTailwind Vite plugin, and pass it into the config's `plugins` array.
3436

3537
`vite.config.ts`
38+
3639
```ts
3740
import { sveltekit } from '@sveltejs/kit/vite';
3841
import type { UserConfig } from 'vite';
3942
import svelteEmailTailwind from 'svelte-email-tailwind/vite';
4043

4144
const config: UserConfig = {
42-
plugins: [
43-
sveltekit(),
44-
svelteEmailTailwind() // processes .svelte files inside the default '/src/lib/emails' folder
45-
],
45+
plugins: [
46+
sveltekit(),
47+
svelteEmailTailwind() // processes .svelte files inside the default '/src/lib/emails' folder
48+
]
4649
};
4750

4851
export default config;
4952
```
5053

51-
Optional configurations:
54+
Optional configurations:
55+
5256
- Provide a Tailwind config;
5357
- Provide a custom path to your email folder.
5458

@@ -59,27 +63,27 @@ import type { TailwindConfig } from 'tw-to-css';
5963
import svelteEmailTailwind from 'svelte-email-tailwind/vite';
6064

6165
const emailTwConfig: TailwindConfig = {
62-
theme: {
63-
screens: {
64-
md: { max: '767px' },
65-
sm: { max: '475px' }
66-
},
67-
extend: {
68-
colors: {
69-
brand: 'rgb(255, 62, 0)'
70-
}
71-
}
72-
}
73-
}
66+
theme: {
67+
screens: {
68+
md: { max: '767px' },
69+
sm: { max: '475px' }
70+
},
71+
extend: {
72+
colors: {
73+
brand: 'rgb(255, 62, 0)'
74+
}
75+
}
76+
}
77+
};
7478

7579
const config: UserConfig = {
76-
plugins: [
77-
sveltekit(),
78-
svelteEmailTailwind({
79-
tailwindConfig: emailTwConfig,
80-
pathToEmailFolder: '/src/lib/components/emails' // defaults to '/src/lib/emails'
81-
})
82-
],
80+
plugins: [
81+
sveltekit(),
82+
svelteEmailTailwind({
83+
tailwindConfig: emailTwConfig,
84+
pathToEmailFolder: '/src/lib/components/emails' // defaults to '/src/lib/emails'
85+
})
86+
]
8387
};
8488

8589
export default config;
@@ -97,7 +101,7 @@ export default config;
97101
</script>
98102
99103
<Html lang="en">
100-
<Head />
104+
<Head />
101105
<Text class="md:text-[18px] text-[24px]">
102106
Hello, {name}!
103107
</Text>
@@ -113,26 +117,27 @@ This example uses [Resend](https://resend.com/docs/send-with-nodejs) to send the
113117
`src/routes/emails/hello/+server.ts`
114118

115119
```ts
120+
import { render } from 'svelte/server';
116121
import type { ComponentProps } from 'svelte';
117122
import type HelloProps from 'src/lib/emails/Hello.svelte';
118123
import Hello from 'src/lib/emails/Hello.svelte';
119-
import { PRIVATE_RESEND_API_KEY } from '$env/static/private'
124+
import { PRIVATE_RESEND_API_KEY } from '$env/static/private';
120125
import { Resend } from 'resend';
121126

122127
const componentProps: ComponentProps<HelloProps> = {
123-
name: "Steven"
124-
}
128+
name: 'Steven'
129+
};
125130

126-
const emailHtml = Hello.render(componentProps)
131+
const { html } = render(Hello, { props: componentProps });
127132

128133
const resend = new Resend(PRIVATE_RESEND_API_KEY);
129134

130135
// Send the email using your provider of choice.
131136
resend.emails.send({
132-
from: '[email protected]',
133-
to: '[email protected]',
134-
subject: 'Hello',
135-
html: emailHtml
137+
from: '[email protected]',
138+
to: '[email protected]',
139+
subject: 'Hello',
140+
html: html
136141
});
137142
```
138143

@@ -145,12 +150,12 @@ This means you'll be able to preview your emails with the exact markup that even
145150

146151
To get started...
147152

148-
149-
## 1. Configure a route
153+
## 1. Configure a route
150154

151155
Import the Preview component and pass in the server data as a prop. Customize the email address.
152156

153157
`src/routes/email-previews/+page.svelte`
158+
154159
```svelte
155160
<script lang="ts">
156161
import Preview from 'svelte-email-tailwind/preview/preview.svelte';
@@ -166,61 +171,68 @@ Return the email component file list from SvelteKit's `load` function using the
166171
In SvelteKit's `form actions`, pass in `createEmail` (loads files from the server), and `sendEmail` (sends test-emails).
167172

168173
`src/routes/email-previews/+page.server.ts`
174+
169175
```ts
170176
import { createEmail, emailList, sendEmail } from 'svelte-email-tailwind/preview';
171-
import { PRIVATE_RESEND_API_KEY } from '$env/static/private'
177+
import { PRIVATE_RESEND_API_KEY } from '$env/static/private';
172178

173179
export async function load() {
174-
// return the list of email components
175-
return emailList({})
180+
// return the list of email components
181+
return emailList();
176182
}
177183

178184
export const actions = {
179-
// Pass in the two actions. Provide your Resend API key.
180-
...createEmail,
181-
...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY })
182-
}
185+
// Pass in the two actions. Provide your Resend API key.
186+
...createEmail,
187+
...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY })
188+
};
183189
```
184190

185-
Optional configurations:
191+
Optional configurations:
192+
186193
- Provide a custom path to your email components;
187-
- Provide a custom function to send the email using a different provider.
194+
- Provide a custom function to send the email using a different provider.
188195

189196
```ts
190-
import { createEmail, emailList, sendEmail, SendEmailFunction } from 'svelte-email-tailwind/preview';
197+
import {
198+
createEmail,
199+
emailList,
200+
sendEmail,
201+
SendEmailFunction
202+
} from 'svelte-email-tailwind/preview';
191203
import nodemailer from 'nodemailer';
192204

193205
export async function load() {
194-
// Customize the path to your email components.
195-
return emailList({ path: '/src/lib/components/emails' })
206+
// Customize the path to your email components.
207+
return emailList({ path: '/src/lib/components/emails' });
196208
}
197209

198-
// Make sure your custom 'send email' function follows the type of 'SendEmailFunction'.
210+
// Make sure your custom 'send email' function is of type 'SendEmailFunction'.
199211
const sendUsingNodemailer: typeof SendEmailFunction = async ({ from, to, subject, html }) => {
200-
const transporter = nodemailer.createTransport({
201-
host: 'smtp.ethereal.email',
202-
port: 587,
203-
secure: false,
204-
auth: {
205-
user: 'my_user',
206-
pass: 'my_password'
207-
}
208-
});
209-
210-
const sent = await transporter.sendMail({ from, to, subject, html });
211-
212-
if (sent.error) {
213-
return { success: false, error: sent.error }
214-
} else {
215-
return { success: true }
216-
}
217-
}
212+
const transporter = nodemailer.createTransport({
213+
host: 'smtp.ethereal.email',
214+
port: 587,
215+
secure: false,
216+
auth: {
217+
user: 'my_user',
218+
pass: 'my_password'
219+
}
220+
});
221+
222+
const sent = await transporter.sendMail({ from, to, subject, html });
223+
224+
if (sent.error) {
225+
return { success: false, error: sent.error };
226+
} else {
227+
return { success: true };
228+
}
229+
};
218230

219231
export const actions = {
220-
...createEmail,
221-
// Pass in your custom 'send email' function.
222-
...sendEmail({ customSendEmailFunction: sendUsingNodemailer })
223-
}
232+
...createEmail,
233+
// Pass in your custom 'send email' function.
234+
...sendEmail({ customSendEmailFunction: sendUsingNodemailer })
235+
};
224236
```
225237

226238
## 3. Start developing your emails via the route you've chosen.
@@ -247,22 +259,33 @@ A set of standard components to help you build amazing emails without having to
247259
- Row
248260
- Custom
249261

250-
# HEADS UP!
262+
# HEADS UP! (Limitations & Syntax requirements)
263+
264+
## Limitations & Syntax requirements
251265

252266
- Always include the `<Head />` component.
253267
- For now, class attribute/prop interpolation/variable references will not work (this won't work: `class={someTwClassName}`, `class={`${someTwClassName} w-full`}`, this will work: `class="w-full"`).
254-
- When using arbitrary Tailwind classes that use multiple values, separate them using underscores (example: p-[0_30px_12px_5px]).
268+
- When using arbitrary Tailwind classes that use multiple values, separate them using underscores (example: p-[0_30px_12px_5px]).
255269
- In Svelte email components, stick to the designated components if you use Tailwind classes. If you need custom HTML, use the `<Custom />` component and the "as" property to define the tag. This component defaults to a `<div/>`. Tailwind classes on regular html nodes will not be processed.
270+
- There are ultra-rare cases where the text inside your email component results in syntax errors under the hood. This could happen when you're using code characters such as brackets, or certain strings that break the Vite script. This would require you to change up your text content.
271+
272+
## Ignore "node_invalid_placement_ssr" warnings
273+
274+
`node_invalid_placement_ssr: `<html>` (src/lib/components/Html.svelte:12:0) needs a valid parent element
275+
276+
This can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.`
277+
278+
You can ignore these warnings, because Svelte thinks you're building for the web and doesn't know you're building emails - so the warnings are not applicable.
256279

257-
## Author
280+
# Author
258281

259-
- Steven Polak
282+
- Steven Polak
260283

261-
### Author of the original Svelte Email package
284+
## Author of the original Svelte Email package
262285

263286
- Carsten Lebek ([@carstenlebek](https://twitter.com/carstenlebek1))
264287

265-
#### Authors of the original project [react-email](https://github.com/resendlabs/react-email)
288+
### Authors of the original project [react-email](https://github.com/resendlabs/react-email)
266289

267290
- Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita))
268291
- Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha))

0 commit comments

Comments
 (0)