Merge pull request #21 from steveninety/minor-issues

Minor issues (v2.1.0)

Author: steveninety

.gitignore

@@ -3,6 +3,7 @@ node_modules
 /build
 /.svelte-kit
 /package
+/dist
 .env
 .env.*
 !.env.example

CHANGELOG.md

@@ -1,3 +1,13 @@
+# 2.1.0 (2025-16-02)
+
+## Minor Issues
+
+-  chore: made function param of `svelteEmailTailwind` optional, since all keys of the object param are optional too ([[#16](https://github.com/steveninety/svelte-email-tailwind/issues/16)]).
+-fix: Removed 'pretty' dependency because it's no longer used in the render function since moving to Svelte's native `render`.
+- chore: deleted the html-to-text patch - no longer an issue in later version of Vite + documented the `renderAsPlainText` function ([#19](https://github.com/steveninety/svelte-email-tailwind/issues/19))
+- fix: renamed `Preview` to `PreviewInterface` in `/preview/PreviewInterface.svelte`, to distinguish the interface component from the email component that is also called 'Preview' ([#20](https://github.com/steveninety/svelte-email-tailwind/issues/20))
+- chore: updated the @sveltejs/package devDependency to V2 and adjusted the package.json accordingly. This should also fix some type issues around imports. ([#20](https://github.com/steveninety/svelte-email-tailwind/issues/20))
+
 # 2.0.1 (2024-11-10)
 
 ## Patch
@@ -31,10 +41,12 @@ Move tw-to-css from dev dep to normal dep
 # 1.0.0 (2024-03-14)
 
 ## Features
+
 - A Vite plugin to transform Tailwind classes on build-time.
 - Preview UI component has been added to the package (including corresponding server utility functions).
 
 ## BREAKING CHANGES
+
 - The renderTailwind() function is now obsolete and has been removed. Use the Vite plugin instead.
 - The renderSvelte() function is replaced by Svelte's native render() function. Use the renderAsPlainText() function to turn a rendered component's html to plain text.
 - The `<Custom />` component is required to use Tailwind classes on custom html.

README.md

@@ -118,6 +118,7 @@ This example uses [Resend](https://resend.com/docs/send-with-nodejs) to send the
 
 ```ts
 import { render } from 'svelte/server';
+// import { renderAsPlainText } from 'svelte-email-tailwind';
 import type { ComponentProps } from 'svelte';
 import type HelloProps from 'src/lib/emails/Hello.svelte';
 import Hello from 'src/lib/emails/Hello.svelte';
@@ -129,6 +130,8 @@ const componentProps: ComponentProps<HelloProps> = {
 };
 
 const { html } = render(Hello, { props: componentProps });
+// Alternatively, render your email as plain text:
+// const plainText = renderAsPlainText(html);
 
 const resend = new Resend(PRIVATE_RESEND_API_KEY);
 
@@ -138,6 +141,8 @@ resend.emails.send({
 	to: '[email protected]',
 	subject: 'Hello',
 	html: html
+	// Or send your plain text:
+	// html: plainText
 });
 ```
 
@@ -152,17 +157,17 @@ To get started...
 
 ## 1. Configure a route
 
-Import the Preview component and pass in the server data as a prop. Customize the email address.
+Import the PreviewInterface component and pass in the server data as a prop. Customize the email address.
 
 `src/routes/email-previews/+page.svelte`
 
 ```svelte
 <script lang="ts">
-	import Preview from 'svelte-email-tailwind/preview/preview.svelte';
+	import PreviewInterface from 'svelte-email-tailwind/preview/PreviewInterface.svelte';
 	export let data;
 </script>
 
-<Preview {data} email="[email protected]" />
+<PreviewInterface {data} email="[email protected]" />
 ```
 
 ## 2. Configure the server for this route

package.json

@@ -1,66 +1,98 @@
 {
-  "name": "svelte-email-tailwind",
-  "version": "2.0.1",
-  "description": "Build emails with Svelte 5 and Tailwind",
-  "author": {
-    "name": "Steven Polak"
-  },
-  "contributors": [
-    "Carsten Lebek"
-  ],
-  "keywords": [
-    "svelte",
-    "email",
-    "tailwind",
-    "sveltekit",
-    "resend"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/steveninety/svelte-email-tailwind.git",
-    "homepage": "https://github.com/steveninety/svelte-email-tailwind#readme"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "package": "svelte-kit sync && svelte-package",
-    "build": "vite build",
-    "prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write ."
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.1.1",
-    "@sveltejs/kit": "^1.27.4",
-    "@sveltejs/package": "^1.0.2",
-    "@types/html-to-text": "^9.0.4",
-    "@types/pretty": "^2.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "autoprefixer": "^10.4.16",
-    "clsx": "^1.2.1",
-    "csstype": "^3.1.2",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "^8.4.31",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
-    "svelte-check": "^3.6.0",
-    "tslib": "^2.6.2",
-    "typescript": "^4.9.5",
-    "vite": "^4.5.0",
-    "vite-plugin-inspect": "^0.8.3"
-  },
-  "type": "module",
-  "dependencies": {
-    "@steveninety/html-to-text": "^9.0.5",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "pretty": "^2.0.0",
-    "resend": "2.0.0",
-    "svelte": "^5",
-    "svelte-persisted-store": "^0.12.0",
-    "tw-to-css": "0.0.12"
-  }
+	"name": "svelte-email-tailwind",
+	"version": "2.1.0",
+	"description": "Build emails with Svelte 5 and Tailwind",
+	"author": {
+		"name": "Steven Polak"
+	},
+	"contributors": [
+		"Carsten Lebek"
+	],
+	"license": "MIT",
+	"keywords": [
+		"svelte",
+		"email",
+		"tailwind",
+		"sveltekit",
+		"resend"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/steveninety/svelte-email-tailwind.git",
+		"homepage": "https://github.com/steveninety/svelte-email-tailwind#readme"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"package": "svelte-kit sync && svelte-package",
+		"build": "vite build",
+		"prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.1.1",
+		"@sveltejs/package": "^2.3.10",
+		"@types/html-to-text": "^9.0.4",
+		"@typescript-eslint/eslint-plugin": "^5.62.0",
+		"@typescript-eslint/parser": "^5.62.0",
+		"autoprefixer": "^10.4.16",
+		"clsx": "^1.2.1",
+		"csstype": "^3.1.2",
+		"eslint": "^8.53.0",
+		"eslint-config-prettier": "^8.10.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.31",
+		"prettier": "^2.8.8",
+		"prettier-plugin-svelte": "^2.10.1",
+		"svelte-check": "^3.6.0",
+		"tslib": "^2.6.2",
+		"typescript": "^4.9.5",
+		"vite": "^4.5.0",
+		"vite-plugin-inspect": "^0.8.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"@sveltejs/kit": "^1.30.4",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"html-to-text": "^9.0.5",
+		"resend": "2.0.0",
+		"svelte": "^5",
+		"svelte-persisted-store": "^0.12.0",
+		"tw-to-css": "0.0.12"
+	},
+	"files": [
+		"dist"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./package.json": "./package.json",
+		"./components/Body.svelte": "./dist/components/Body.svelte",
+		"./components/Button.svelte": "./dist/components/Button.svelte",
+		"./components/Column.svelte": "./dist/components/Column.svelte",
+		"./components/Container.svelte": "./dist/components/Container.svelte",
+		"./components/Custom.svelte": "./dist/components/Custom.svelte",
+		"./components/Head.svelte": "./dist/components/Head.svelte",
+		"./components/Heading.svelte": "./dist/components/Heading.svelte",
+		"./components/Hr.svelte": "./dist/components/Hr.svelte",
+		"./components/Html.svelte": "./dist/components/Html.svelte",
+		"./components/Img.svelte": "./dist/components/Img.svelte",
+		"./components/Link.svelte": "./dist/components/Link.svelte",
+		"./components/Preview.svelte": "./dist/components/Preview.svelte",
+		"./components/Row.svelte": "./dist/components/Row.svelte",
+		"./components/Section.svelte": "./dist/components/Section.svelte",
+		"./components/Text.svelte": "./dist/components/Text.svelte",
+		"./preview": "./dist/preview/index.js",
+		"./preview/PreviewInterface.svelte": {
+			"types": "./dist/preview/PreviewInterface.svelte.d.ts",
+			"svelte": "./dist/preview/PreviewInterface.svelte"
+		},
+		"./utils": "./dist/utils/index.js",
+		"./vite": "./dist/vite/index.js"
+	}
 }