feat: modernize email templates with Svelte 5 + Tailwind + Storybook by niemyjski · Pull Request #2258 · exceptionless/Exceptionless

niemyjski · 2026-05-27T14:07:35Z

Summary

Modernizes the 8 Exceptionless email templates from a decade-old Foundation for Emails / Gulp / Inky / Panini / SCSS toolchain to Svelte 5 + @better-svelte-email + Tailwind CSS, with zero visual regressions, Storybook for live preview, and a comprehensive security audit.

What Changed

Architecture

Replaced: Gulp + Inky + Panini + SCSS + Foundation for Emails → produces static HTML
New: Vite + Svelte 5 SSR + @better-svelte-email/server + Tailwind CSS (inlined)
Build output: npm run build in src/Exceptionless.EmailTemplates renders all 8 templates to src/Exceptionless.Core/Mail/Templates/*.html
C# backend unchanged: Mailer.cs and HandlebarsDotNet rendering pipeline untouched

Security Fixes

CVE	Severity	Fix
GHSA-crpf-4hrx-3jrp	High	Svelte 5.34.7 → 5.55.9
GHSA-m56q-vw4c-c2cp	High	Svelte 5.34.7 → 5.55.9
GHSA-f7gr-6p89-r883	High	Svelte 5.34.7 → 5.55.9
GHSA-phwv-c562-gvmh	High	Svelte 5.34.7 → 5.55.9
GHSA-pr6f-5x2q-rwfp	High	Svelte 5.34.7 → 5.55.9
GHSA-rcqx-6q8c-2c42	Moderate	Svelte 5.34.7 → 5.55.9
XSS via preheader	High	`{@html preheader}` → `{preheader}` text binding

Security audit result for @better-svelte-email: SAFE TO ADOPT. Clean dependency tree (parse5, postcss, tailwindcss). SLSA provenance verified. Single-maintainer bus factor noted; versions pinned exactly.

Code Quality (Staff Engineer Review Fixes)

Removed all @ts-nocheck from components — proper TypeScript throughout
Typed all Snippet props: import type { Snippet } from 'svelte'
Replaced all hardcoded hex colors with named Tailwind theme tokens (see src/theme.ts)
Fixed parseInt calls to include radix argument
Stripped HTML comments from build output (were leaking internal markup)
Consolidated fragile split-table {@html} in SocialFooter into single block
Removed compilerOptions.generate from vite.config.ts (dropped in Svelte 5)

Bug Fixes

1. `IsRegressed` badge silently broken (fixed in this PR)

GetStackTemplateData in Mailer.cs never included IsRegressed in the data dictionary, so {{#if IsRegressed}}[REGRESSED]{{/if}} in templates always evaluated false — the badge never appeared for regressed stacks. This PR adds IsRegressed = s.Status == StackStatus.Regressed to fix it.

2. Zero body assertions in mailer tests (coverage gap fixed)

RunMailJobAsync() only logged the rendered body — zero assertions. Broken template rendering would pass silently. Fixed by:

RunMailJobAsync() now returns the rendered HTML body
Universal guards on every test: body not empty, contains <!DOCTYPE html, no unrendered {{ tokens
Each test asserts template-specific phrases (button text, headings, key copy)
New SendProjectDailySummaryWithRegressedStackAsync test verifies [REGRESSED] appears for regressed stacks

3. JSON-LD whitespace collapse bug

cleanHtml's whitespace collapsing would turn JSON-LD }\n} → }}, which HandlebarsDotNet parsed as a Handlebars closing token. Fix: extract <script type="application/ld+json"> blocks before whitespace collapse, restore with newlines after.

New Tooling

Storybook 10 with stories for all 8 templates (runs at npm run storybook)
ESLint (flat config), Prettier, svelte-check — 0 errors, 0 warnings
src/theme.ts: centralized design tokens (primary, dark, alert, muted colors)
Scripts: build, dev, check, lint, format, storybook, build-storybook

Visual Parity

All 8 templates verified via Mailpit SMTP delivery + browser screenshots. HTML Check scores: 87–94%.

See PR comment below for Mailpit screenshots of all 8 rendered emails.

How to Run

cd src/Exceptionless.EmailTemplates
npm ci
npm run build          # regenerate .html files
npm run storybook      # visual preview at http://localhost:6006
npm run check          # svelte-check: 0 errors
npm run lint           # eslint + prettier: 0 errors

Tests

All 26 mailer tests pass (25 existing + 1 new IsRegressed test):

dotnet test --project tests/Exceptionless.Tests -- --filter-class Exceptionless.Tests.Mail.MailerTests
# total: 26 | failed: 0 | succeeded: 26

Breaking Changes

None. C# Mailer.cs and all Handlebars templates are fully backward-compatible. The compiled .html output format is identical to the old toolchain.

Replace the legacy Foundation for Emails (Gulp/Inky/Panini/SCSS) toolchain with Svelte 5 + @better-svelte-email + Tailwind CSS. - Migrate all 8 email templates to Svelte components - Add shared EmailLayout, ActionsFooter, SocialFooter components - New build system: Vite SSR + @better-svelte-email/server renderer - Output maintains identical visual appearance and Handlebars tokens - All 25 mailer tests pass with new template output - Remove old build tooling (Gulp, Babel, SCSS, Panini, Inky) The compiled HTML templates preserve Handlebars syntax for runtime rendering by HandlebarsDotNet in the .NET backend (unchanged). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

@html

- Migrate 8 email templates from Foundation for Emails / Gulp / Inky / Panini / SCSS to @better-svelte-email/server 2.1.1 + Tailwind CSS - Security audit: Svelte upgraded 5.34.7 → 5.55.9 (patched 6 XSS SSR CVEs) - Pixel-perfect visual parity: all 8 templates verified with before/after screenshots - Centralized design tokens in src/theme.ts (named Tailwind colors: text-primary, bg-dark, text-alert, etc.) — no more hardcoded hex in .svelte sources - Fixed XSS: preheader was {@html preheader}, now plain {preheader} text binding - Add Storybook 10 with stories for all 8 templates + sample data with fillTokens() - Add ESLint (flat config), Prettier, svelte-check — 0 errors, 25/25 tests pass - Add @types/node, vite/client types, skipLibCheck for clean type checking - Fix build script: typed Component, parseInt radix, HTML comment stripping - Fix JSON-LD '}\n}' → '}}' Handlebars parse collision in cleanHtml - Remove compilerOptions.generate from vite.config.ts (Svelte 5 no longer supports it) - Remove old Gulp/Babel/SCSS/Panini/Inky/Foundation toolchain entirely Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

- Rewrite fillTokens in sample-data.ts as a proper Handlebars evaluator supporting if/else/each blocks, nested depth tracking, @index and {{../parent}} scope resolution — fixes token concatenation bug where all {{#if}} branches were showing simultaneously - Fix cleanHtml() to replace newlines in text nodes with a space instead of removing them (was causing 'fromwhich', 'yourapplication', etc.) - Fix text typos in organization-notice.svelte: 'to to continue' → 'to continue', 'to to see' → 'to see', 'being counting' → 'counting' - Add Storybook (port 6006) and EmailStorybook (port 6008) as AddJavaScriptApp resources in Aspire AppHost for integrated development dashboard - Change email Storybook port to 6008 to avoid conflict with Svelte app (6006) - Rebuild all 8 generated HTML templates with whitespace fixes applied - 25/25 mailer tests pass Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

niemyjski · 2026-05-27T15:47:23Z

✅ Rendering Bug Fixes — Verified

Latest commit (b5cd6e6) fixes all rendering/formatting issues found in review:

Fixed Issues

Issue	Root Cause	Fix
All `{{#if}}` branches showing simultaneously	`fillTokens` used regex (couldn't track nesting)	Rewrote as character-by-character evaluator with depth tracking
Extra `<hr>` before first error field	`{{#if @index}}` — was always truthy with naive regex	`isTruthy('0')` returns false; first item correctly skips divider
"fromwhich" word concatenation	`cleanHtml` removed all newlines incl. text node linebreaks	Replace `\n` → `' '` (space) not `''`
"to to continue/see" double word	Typo in template source	Fixed in `organization-notice.svelte`
"?Exceptionless" missing space	Same whitespace collapse issue	Fixed by cleanHtml fix + single-line in template

Screenshots (after fixes, with realistic sample data)

Event Notice — single clean message, no branch concatenation, no extra HR before first field
Password Reset — "from which" correct spacing
Organization Notice — "to continue", "to see" correct
Organization Invited — "? Exceptionless" with proper space
Daily Summary — MostFrequent + Newest lists, [REGRESSED] badge

Tests

Lint/Type Check

Copilot

Pull request overview

This PR replaces the legacy Foundation/Gulp email-template pipeline with a Svelte 5 + Vite + Tailwind-based renderer that generates the static Handlebars HTML consumed by Exceptionless.Core mail delivery.

Changes:

Adds a new Svelte email-template project with build, lint, check, Storybook preview, and template-rendering scripts.
Recreates the email templates as Svelte components and checks in regenerated HTML outputs for the .NET mailer.
Adds AppHost registration for the email Storybook and removes the legacy Foundation/Gulp source structure.

Reviewed changes

Copilot reviewed 66 out of 68 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`.gitignore`	Adds `.gstack/` ignore entry.
`src/Exceptionless.AppHost/Program.cs`	Registers component and email Storybook JavaScript apps.
`src/Exceptionless.Core/Mail/Templates/event-notice.html`	Regenerated event notice email output.
`src/Exceptionless.Core/Mail/Templates/organization-added.html`	Regenerated organization added email output.
`src/Exceptionless.Core/Mail/Templates/organization-invited.html`	Regenerated organization invitation email output.
`src/Exceptionless.Core/Mail/Templates/organization-notice.html`	Regenerated organization limit/throttle notice output.
`src/Exceptionless.Core/Mail/Templates/organization-payment-failed.html`	Regenerated payment failed email output.
`src/Exceptionless.Core/Mail/Templates/user-email-verify.html`	Regenerated email verification output.
`src/Exceptionless.Core/Mail/Templates/user-password-reset.html`	Regenerated password reset output.
`src/Exceptionless.EmailTemplates/.babelrc`	Removes legacy Babel config.
`src/Exceptionless.EmailTemplates/.gitignore`	Updates ignores for the new Svelte/Vite project.
`src/Exceptionless.EmailTemplates/.npmrc`	Removes legacy npm release-age config.
`src/Exceptionless.EmailTemplates/.prettierignore`	Adds formatting ignore paths.
`src/Exceptionless.EmailTemplates/.prettierrc`	Adds Prettier configuration.
`src/Exceptionless.EmailTemplates/.storybook/main.ts`	Configures Storybook for email previews.
`src/Exceptionless.EmailTemplates/.storybook/preview.ts`	Adds Storybook preview parameters.
`src/Exceptionless.EmailTemplates/LICENSE`	Removes legacy ZURB license file.
`src/Exceptionless.EmailTemplates/README.md`	Rewrites documentation for the new Svelte email workflow.
`src/Exceptionless.EmailTemplates/eslint.config.js`	Adds ESLint flat config.
`src/Exceptionless.EmailTemplates/example.config.json`	Removes legacy mail/Litmus example config.
`src/Exceptionless.EmailTemplates/gulpfile.babel.js`	Removes legacy Gulp build pipeline.
`src/Exceptionless.EmailTemplates/package.json`	Replaces legacy Foundation dependencies/scripts with Svelte/Vite/Storybook tooling.
`src/Exceptionless.EmailTemplates/src/assets/img/.gitkeep`	Removes unused legacy asset placeholder.
`src/Exceptionless.EmailTemplates/src/assets/scss/_settings.scss`	Removes legacy Foundation email settings.
`src/Exceptionless.EmailTemplates/src/assets/scss/app.scss`	Removes legacy SCSS entrypoint.
`src/Exceptionless.EmailTemplates/src/assets/scss/template/_template.scss`	Removes legacy email template styling.
`src/Exceptionless.EmailTemplates/src/build-emails.ts`	Adds renderer/cleaner/validator that writes generated HTML templates.
`src/Exceptionless.EmailTemplates/src/components/ActionsFooter.svelte`	Adds shared actions footer component.
`src/Exceptionless.EmailTemplates/src/components/EmailLayout.svelte`	Adds shared email layout/header wrapper.
`src/Exceptionless.EmailTemplates/src/components/SocialFooter.svelte`	Adds shared social/contact footer.
`src/Exceptionless.EmailTemplates/src/helpers/raw.js`	Removes legacy Handlebars raw helper.
`src/Exceptionless.EmailTemplates/src/layouts/default.html`	Removes legacy default layout.
`src/Exceptionless.EmailTemplates/src/layouts/index-layout.html`	Removes legacy index layout.
`src/Exceptionless.EmailTemplates/src/pages/event-notice.html`	Removes legacy event notice source template.
`src/Exceptionless.EmailTemplates/src/pages/index.html`	Removes legacy preview index page.
`src/Exceptionless.EmailTemplates/src/pages/organization-added.html`	Removes legacy organization added source template.
`src/Exceptionless.EmailTemplates/src/pages/organization-invited.html`	Removes legacy organization invited source template.
`src/Exceptionless.EmailTemplates/src/pages/organization-notice.html`	Removes legacy organization notice source template.
`src/Exceptionless.EmailTemplates/src/pages/organization-payment-failed.html`	Removes legacy payment failed source template.
`src/Exceptionless.EmailTemplates/src/pages/project-daily-summary.html`	Removes legacy daily summary source template.
`src/Exceptionless.EmailTemplates/src/pages/user-email-verify.html`	Removes legacy email verify source template.
`src/Exceptionless.EmailTemplates/src/pages/user-password-reset.html`	Removes legacy password reset source template.
`src/Exceptionless.EmailTemplates/src/partials/social.html`	Removes legacy social partial.
`src/Exceptionless.EmailTemplates/src/stories/EmailPreview.svelte`	Adds iframe-based email preview component.
`src/Exceptionless.EmailTemplates/src/stories/event-notice.stories.svelte`	Adds Storybook story for event notice.
`src/Exceptionless.EmailTemplates/src/stories/organization-added.stories.svelte`	Adds Storybook story for organization added.
`src/Exceptionless.EmailTemplates/src/stories/organization-invited.stories.svelte`	Adds Storybook story for organization invited.
`src/Exceptionless.EmailTemplates/src/stories/organization-notice.stories.svelte`	Adds Storybook story for organization notice.
`src/Exceptionless.EmailTemplates/src/stories/organization-payment-failed.stories.svelte`	Adds Storybook story for payment failed.
`src/Exceptionless.EmailTemplates/src/stories/project-daily-summary.stories.svelte`	Adds Storybook story for daily summary.
`src/Exceptionless.EmailTemplates/src/stories/sample-data.ts`	Adds sample token evaluator/data for email previews.
`src/Exceptionless.EmailTemplates/src/stories/user-email-verify.stories.svelte`	Adds Storybook story for email verification.
`src/Exceptionless.EmailTemplates/src/stories/user-password-reset.stories.svelte`	Adds Storybook story for password reset.
`src/Exceptionless.EmailTemplates/src/templates/event-notice.svelte`	Adds Svelte source for event notice email.
`src/Exceptionless.EmailTemplates/src/templates/organization-added.svelte`	Adds Svelte source for organization added email.
`src/Exceptionless.EmailTemplates/src/templates/organization-invited.svelte`	Adds Svelte source for organization invitation email.
`src/Exceptionless.EmailTemplates/src/templates/organization-notice.svelte`	Adds Svelte source for organization notice email.
`src/Exceptionless.EmailTemplates/src/templates/organization-payment-failed.svelte`	Adds Svelte source for payment failed email.
`src/Exceptionless.EmailTemplates/src/templates/project-daily-summary.svelte`	Adds Svelte source for daily summary email.
`src/Exceptionless.EmailTemplates/src/templates/user-email-verify.svelte`	Adds Svelte source for email verification email.
`src/Exceptionless.EmailTemplates/src/templates/user-password-reset.svelte`	Adds Svelte source for password reset email.
`src/Exceptionless.EmailTemplates/src/theme.ts`	Adds centralized email color/theme tokens.
`src/Exceptionless.EmailTemplates/svelte.config.js`	Adds Svelte preprocessing config.
`src/Exceptionless.EmailTemplates/tsconfig.json`	Adds TypeScript config for the email-template project.
`src/Exceptionless.EmailTemplates/vite.config.ts`	Adds Vite SSR build config.
`src/Exceptionless.Web/ClientApp/package.json`	Prevents ClientApp Storybook from auto-opening a browser.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…ates-modernization

- vite.config.ts: add closeBundle plugin so 'dev' (--watch) regenerates HTML templates on every source change; simplify 'build' script to 'vite build' (plugin handles node dist/build.js). Remove try/catch so renderer failures propagate and fail the build. - sample-data.ts: fix isTruthy to match Handlebars semantics exactly — store @index as a real number so {{#if @index}} is falsy at index 0 (matches HandlebarsDotNet integer semantics); strings 'false'/'null'/ 'undefined'/'' are falsy, all other strings truthy (matching Handlebars.js, not JS). Change BASE_URL to http://localhost:7110. - dependabot.yml: add npm entry for /src/Exceptionless.EmailTemplates - build.yaml: add test-email-templates CI job that runs lint, check, build, and verifies generated HTML is committed and up-to-date Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 68 out of 70 changed files in this pull request and generated 5 comments.

@html

- Add IsRegressed to GetStackTemplateData in Mailer.cs - Fix project-daily-summary: wrap all MostFrequent/Newest items in single <ul> - Refactor SocialFooter to use Row+Column components (remove {#@html} hack) - Use Preview component in EmailLayout; remove unconditional spacer div - Replace 200-line custom Handlebars evaluator with handlebars npm package - Move JSON-LD to wrapJsonLd() helper in src/lib/json-ld.ts (avoids Svelte parser treating <script> in template literals as real script elements) - Include src/templates/** in ESLint with no-at-html-tags rule disabled - Remove .gstack/ from repo-root .gitignore - Remove obvious code comments from build-emails.ts - Fix no-unused-vars: remove Link import from user-email-verify.svelte - Regenerate all 8 HTML templates Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

@key

Fields is iterated with {{#each Fields}} where @key = property name and this = value. Using a plain object (not array of objects) matches HandlebarsDotNet's Dictionary<string,string> iteration semantics and produces correct key/value pairs in the Storybook preview. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

…ressed badge - RunMailJobAsync() now returns string body for assertions - All 25 tests assert template-specific content (buttons, headings, key phrases) - New test SendProjectDailySummaryWithRegressedStackAsync verifies [REGRESSED] badge appears when StackStatus.Regressed - this was the bug: IsRegressed was missing from GetStackTemplateData so the badge never rendered - Total: 26 tests passing Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

niemyjski · 2026-05-30T12:27:55Z

Dogfood Evidence — Mailpit Email Renders

All 8 templates sent to Mailpit via SMTP and visually verified. HTML Check scores range 87–94%.

Bug Found & Fixed: `IsRegressed` badge was never rendering

Root cause: GetStackTemplateData() in Mailer.cs returned the stack data without IsRegressed, so {{#if IsRegressed}}[REGRESSED]{{/if}} always evaluated false. The badge silently never appeared for regressed stacks — in main or in this PR until caught.

Fix: Added IsRegressed = s.Status == StackStatus.Regressed to GetStackTemplateData().

Proof it works (visible in daily summary email — see screenshot): the [REGRESSED] prefix appears on ArgumentNullException in the Most Frequent list.

Coverage Gap Fixed

RunMailJobAsync() in MailerTests.cs only logged the rendered body — zero assertions. All 25 tests would pass even if templates rendered empty HTML or left {{token}} placeholders unsubstituted.

Fix:

RunMailJobAsync() now returns string body
Each of the 26 tests (25 existing + 1 new) asserts template-specific content
New SendProjectDailySummaryWithRegressedStackAsync verifies [REGRESSED] badge

dotnet test -- --filter-class Exceptionless.Tests.Mail.MailerTests
# total: 26 | failed: 0 | succeeded: 26

Email Renders (new Svelte 5 + Tailwind templates)

Verified via Mailpit at http://localhost:8025 after npm run build in src/Exceptionless.EmailTemplates:

Template	Result
Event Notice	✅ Error details table, View Event Details CTA, User Info, structured data
Daily Summary	✅ Stats grid (Count/Unique/New), View Timeline, Most Frequent with [REGRESSED] badge
Organization Invite	✅ Join Organization CTA, Connect/Contact footer
Organization Added	✅ View Organization CTA
Organization Notice (monthly)	✅ Monthly plan limit message
Payment Failed	✅ Update Billing Information CTA
Account Confirmation	✅ Verify Address CTA, personalized greeting
Password Reset	✅ Reset Password CTA

…lpit Side-by-side comparisons of all 8 email templates rendered in Mailpit. BEFORE = main branch Foundation/Inky HTML, AFTER = PR Svelte 5 + Tailwind. Both rendered with identical sample data to verify pixel-accurate parity. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

niemyjski · 2026-05-30T14:47:58Z

📸 Visual Comparison: All 8 Templates (Before → After)

All templates rendered in Mailpit with identical sample data. Left = main branch (Foundation/Inky), Right = PR (Svelte 5 + Tailwind).

Email Verify

Password Reset

Event Notice

Daily Summary

Note: Both templates show the [REGRESSED] badge because the bug fix in this PR now passes IsRegressed correctly from Mailer.cs. Before this PR, the badge was silently suppressed on main branch despite the template supporting it.

Organization Added

Organization Invited

Organization Notice (Throttled)

Payment Failed

Verification: All 16 emails (8 OLD + 8 NEW) successfully delivered to Mailpit SMTP. All 26 mailer tests pass. 🟢

@html

…daily summary Use @better-svelte-email/components Row and Column instead of raw HTML strings for the 3-column and 4-column stats tables in project-daily-summary.svelte. Also refactor the throttling text to use a single @html block instead of mixing @html with Svelte Link components. All 26 mailer tests pass. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

nodemailer was installed locally for email-to-Mailpit testing only. It's not needed as a production dependency. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions · 2026-05-30T15:02:02Z

Package	Line Rate	Branch Rate	Complexity	Health
Exceptionless.Insulation	25%	23%	203	❌
Exceptionless.Web	73%	62%	3922	➖
Exceptionless.AppHost	16%	9%	86	❌
Exceptionless.Core	69%	63%	7888	➖
Summary	68% (13601 / 19949)	62% (7175 / 11644)	12099	➖

niemyjski and others added 3 commits May 26, 2026 23:25

niemyjski requested a review from Copilot May 28, 2026 11:45

niemyjski self-assigned this May 28, 2026

Copilot started reviewing on behalf of niemyjski May 28, 2026 11:45 View session

Copilot AI reviewed May 28, 2026

View reviewed changes

Comment thread src/Exceptionless.EmailTemplates/package.json

Comment thread src/Exceptionless.EmailTemplates/package.json Outdated

Comment thread src/Exceptionless.EmailTemplates/package.json Outdated

Comment thread src/Exceptionless.EmailTemplates/src/stories/sample-data.ts Outdated

niemyjski and others added 2 commits May 28, 2026 06:52

Merge remote-tracking branch 'origin/main' into niemyjski/email-templ…

a41329a

…ates-modernization

niemyjski requested a review from Copilot May 28, 2026 13:29

Copilot started reviewing on behalf of niemyjski May 28, 2026 13:29 View session

Copilot AI reviewed May 28, 2026

View reviewed changes