feat(web): add email

eXodes · eXodes · commit 4e8b7c4875f6 · 2025-05-04T03:34:52.000+08:00
diff --git a/.github/workflows/preview.yaml b/.github/workflows/preview.yaml
@@ -19,6 +19,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Create .env
+        run: |
+          cp ./apps/web/.env.example ./apps/web/.env
+          cp ./apps/docs/.env.example ./apps/docs/.env
+
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
diff --git a/.github/workflows/staging.yaml b/.github/workflows/staging.yaml
@@ -17,6 +17,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Create .env
+        run: |
+          cp ./apps/web/.env.example ./apps/web/.env
+          cp ./apps/docs/.env.example ./apps/docs/.env
+
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
diff --git a/README.md b/README.md
@@ -32,9 +32,11 @@ A Turbo monorepo repository with Sveltekit.
 | `eslint`                  | ![v9.25.1](https://img.shields.io/badge/npm-v9.25.1-blue) |
 | `husky`                   | ![v9.1.7](https://img.shields.io/badge/npm-v9.1.7-blue)   |
 | `js-cookie`               | ![v3.0.5](https://img.shields.io/badge/npm-v3.0.5-blue)   |
+| `nodemailer`              | ![v6.10.1](https://img.shields.io/badge/npm-v6.10.1-blue) |
 | `prettier`                | ![v3.5.3](https://img.shields.io/badge/npm-v3.5.3-blue)   |
 | `storybook`               | ![v8.6.12](https://img.shields.io/badge/npm-v8.6.12-blue) |
 | `svelte`                  | ![v5.28.2](https://img.shields.io/badge/npm-v5.28.2-blue) |
+| `svelte-email-tailwind`   | ![v2.1.1](https://img.shields.io/badge/npm-v2.1.1-blue)   |
 | `tailwindcss`             | ![v4.1.4](https://img.shields.io/badge/npm-v4.1.4-blue)   |
 | `turbo`                   | ![v2.5.2](https://img.shields.io/badge/npm-v2.5.2-blue)   |
 | `typesafe-i18n`           | ![v5.26.2](https://img.shields.io/badge/npm-v5.26.2-blue) |
diff --git a/apps/web/.env.example b/apps/web/.env.example
@@ -1 +1,4 @@
 PUBLIC_DEPLOY_ENV=""
+MAIL_HOST=""
+MAIL_USERNAME=""
+MAIL_PASSWORD=""
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -24,6 +24,8 @@
     "assets": "*",
     "bits-ui": "^1.3.19",
     "locale": "*",
+    "nodemailer": "^6.10.1",
+    "svelte-email-tailwind": "^2.1.1",
     "typesafe-i18n": "^5.26.2",
     "ui": "*",
     "utils": "*",
@@ -40,6 +42,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.7",
     "@testing-library/user-event": "^14.6.1",
+    "@types/nodemailer": "^6.4.17",
     "@vitest/ui": "^3.1.2",
     "concurrently": "^9.1.2",
     "eslint": "^9.25.1",
diff --git a/apps/web/src/lib/emails/hello.svelte b/apps/web/src/lib/emails/hello.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Body, Button, Custom, Head, Hr, Html, Preview, Text } from "svelte-email-tailwind";
+
+  interface Props {
+    name: string;
+  }
+
+  let { name = "World" }: Props = $props();
+</script>
+
+<Html lang="en">
+  <Head />
+  <Preview preview="Hello, {name}!" />
+
+  <Body>
+    <Custom class="px-3 py-1 text-center font-sans">
+      <Text class="m-0 mb-2 text-lg font-semibold">
+        Hello, {name}!
+      </Text>
+      <Hr />
+      <Button
+        class="rounded-lg bg-orange-600 px-2 py-1 text-sm font-semibold text-orange-50"
+        href="https://svelte.dev"
+      >
+        Visit Svelte
+      </Button>
+    </Custom>
+  </Body>
+</Html>
diff --git a/apps/web/src/lib/server/index.ts b/apps/web/src/lib/server/index.ts
@@ -1,3 +1,4 @@
 /* Functions */
+export { renderEmail } from "./render-email/render-email";
 
 /* Classes */
diff --git a/apps/web/src/lib/server/render-email/render-email.ts b/apps/web/src/lib/server/render-email/render-email.ts
@@ -0,0 +1,28 @@
+import type { Component, ComponentProps } from "svelte";
+import { renderAsPlainText } from "svelte-email-tailwind";
+import { render } from "svelte/server";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface RenderEmailParams<ComponentType extends Component<any, any, string>> {
+  component: Component<ComponentProps<ComponentType>>;
+  props: ComponentProps<ComponentType>;
+}
+
+interface RenderEmailReturn {
+  html: string;
+  plainText: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function renderEmail<ComponentType extends Component<any, any, string>>({
+  component,
+  props,
+}: RenderEmailParams<ComponentType>): RenderEmailReturn {
+  const { html } = render(component, {
+    props: props satisfies ComponentProps<typeof component>,
+  });
+
+  const plainText = renderAsPlainText(html);
+
+  return { html, plainText };
+}
diff --git a/apps/web/src/routes/(development)/+layout.server.ts b/apps/web/src/routes/(development)/+layout.server.ts
@@ -0,0 +1,9 @@
+import { dev } from "$app/environment";
+import type { LayoutServerLoad } from "./$types";
+import { error } from "@sveltejs/kit";
+
+export const load: LayoutServerLoad = async () => {
+  if (!dev) return error(404, { message: "Not found" });
+
+  return {};
+};
diff --git a/apps/web/src/routes/(development)/email-previews/+page.server.ts b/apps/web/src/routes/(development)/email-previews/+page.server.ts
@@ -0,0 +1,37 @@
+import { MAIL_HOST, MAIL_PASSWORD, MAIL_USERNAME } from "$env/static/private";
+import type { Actions, PageServerLoad } from "./$types";
+import nodemailer from "nodemailer";
+import { createEmail, emailList, sendEmail } from "svelte-email-tailwind/preview";
+
+export const load: PageServerLoad = async () => {
+  const previewData = emailList();
+
+  return {
+    previewData,
+  };
+};
+
+export const actions: Actions = {
+  ...createEmail,
+  ...sendEmail({
+    customSendEmailFunction: async ({ from, to, subject, html }) => {
+      const transporter = nodemailer.createTransport({
+        host: MAIL_HOST,
+        port: 2525,
+        secure: false,
+        auth: {
+          user: MAIL_USERNAME,
+          pass: MAIL_PASSWORD,
+        },
+      });
+
+      try {
+        await transporter.sendMail({ from, to, subject, html });
+
+        return { success: true };
+      } catch (err) {
+        return { success: false, error: err };
+      }
+    },
+  }),
+};
diff --git a/apps/web/src/routes/(development)/email-previews/+page.svelte b/apps/web/src/routes/(development)/email-previews/+page.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { PageData } from "./$types";
+  import PreviewInterface from "svelte-email-tailwind/preview/PreviewInterface.svelte";
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
+</script>
+
+<svelte:head>
+  <title>Email Previews</title>
+</svelte:head>
+
+<PreviewInterface
+  data={data.previewData}
+  email=""
+/>
diff --git a/apps/web/tests/(development)/+layout.spec.ts b/apps/web/tests/(development)/+layout.spec.ts
@@ -0,0 +1,7 @@
+import { expect, test } from "@playwright/test";
+
+test("has expected not found page", async ({ page }) => {
+  await page.goto("/email-previews");
+
+  await expect(page).toHaveTitle(/404/);
+});
diff --git a/apps/web/tests/(development)/email-previews/+page.spec.ts b/apps/web/tests/(development)/email-previews/+page.spec.ts
@@ -0,0 +1,7 @@
+import { expect, test } from "@playwright/test";
+
+test("has expected title", async ({ page }) => {
+  await page.goto("/email-previews");
+
+  await expect(page).toHaveTitle(/404/);
+});
diff --git a/apps/web/turbo/generators/config.ts b/apps/web/turbo/generators/config.ts
@@ -3,6 +3,7 @@ import {
   getApiConfig,
   getClassConfig,
   getComponentConfig,
+  getEmailConfig,
   getFunctionConfig,
   getLayoutConfig,
   getPageConfig,
@@ -12,6 +13,7 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void {
   plop.setGenerator("web:api", getApiConfig());
   plop.setGenerator("web:class", getClassConfig("apps"));
   plop.setGenerator("web:component", getComponentConfig("apps", "web"));
+  plop.setGenerator("web:email", getEmailConfig("apps"));
   plop.setGenerator("web:function", getFunctionConfig("apps"));
   plop.setGenerator("web:layout", getLayoutConfig());
   plop.setGenerator("web:page", getPageConfig());
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
@@ -2,10 +2,28 @@ import { enhancedImages } from "@sveltejs/enhanced-img";
 import { sveltekit } from "@sveltejs/kit/vite";
 import tailwindcss from "@tailwindcss/vite";
 import { svelteTesting } from "@testing-library/svelte/vite";
+import svelteEmailTailwind from "svelte-email-tailwind/vite";
+import type { TailwindConfig } from "tw-to-css";
 import { defineConfig } from "vitest/config";
 
+export const emailTailwindConfig: TailwindConfig = {
+  theme: {
+    screens: {
+      md: { max: "767px" },
+      sm: { max: "475px" },
+    },
+    extend: {},
+  },
+};
+
 export default defineConfig({
-  plugins: [tailwindcss(), enhancedImages(), sveltekit(), svelteTesting()],
+  plugins: [
+    tailwindcss(),
+    enhancedImages(),
+    sveltekit(),
+    svelteTesting(),
+    svelteEmailTailwind({ tailwindConfig: emailTailwindConfig }),
+  ],
   resolve: process.env.VITEST ? { conditions: ["browser"] } : undefined,
   test: {
     environment: "jsdom",
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/turbo/utils/src/generators/email/config.ts b/packages/turbo/utils/src/generators/email/config.ts
diff --git a/packages/turbo/utils/src/generators/email/templates/filename.svelte.hbs b/packages/turbo/utils/src/generators/email/templates/filename.svelte.hbs

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`/* Functions */`
	`2`	`+export { renderEmail } from "./render-email/render-email";`
`2`	`3`
`3`	`4`	`/* Classes */`