Build donate button v4 with Vite by johnemau · Pull Request #468 · everydotorg/donate-button

johnemau · 2026-10-08T14:28:10Z

Move donate-button-v4 to Vite 8 so we can drop preact-cli

Replaces

Build donate button v4 with Vite and move to Node 24 #462

Problem

yarn build fails on Node 22 and 24: Can't resolve 'src/autoPlayMode'.
Node 21+ breaks cloudflare-worker tests: Cannot set property navigator of #<Object> which has only a getter.

Root Cause

preact-cli's archived esm loader fails on Node 22+, dropping the src/ alias.
preact-cli#1821 reports the same Function.prototype.apply error.

Solution

Build v4 with Vite 8 and @preact/preset-vite; see docs: Add notice for creact-preact preactjs/preact-cli#1808.
Move assets to root and public/assets to match Vite defaults.
Use the Vercel deployment URL (VERCEL_URL) as the asset base for production builds and / otherwise.
Preserve MD4 icon names with --openssl-legacy-provider and retain the ES2015 target.
Delete the getter-only global navigator before worker tests assign service-worker-mock globals.
Set engines.node, .tool-versions, and CI to Node 24.

Visual check

Before: https://embeds.every.org/0.4
After: yarn dev

Both screenshots were captured at 1280×800 after clicking "Donate".
They are byte-identical, so both columns use the same hosted image.

View	Before	After
Demo page widget

Build output

`button.js` (Vercel, gzip)	Before (bytes)	After (bytes)	Change (bytes)
Live → PR preview	53,648	49,920	−3,728

~3K savings by moving from babel to rollup bundlers (preact-cli -> vite)

🤖 Generated with Claude Code

vercel · 2026-10-08T14:28:17Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
donate-button	Ready	Preview	Oct 16, 2026 10:38pm UTC

socket-security · 2026-10-08T14:28:48Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	vite@8.3.4
	@preact/preset-vite@2.10.6

View full report

johnemau · 2026-10-08T16:36:05Z

 import makeServiceWorkerEnv = require('service-worker-mock');
 declare const global: WorkerGlobalScope;
+// Node 21+ defines a getter-only `navigator` that Object.assign cannot overwrite.
+Reflect.deleteProperty(global, 'navigator');


This is removed in

[Testing][Chore] Remove unmaintained service-worker-mock dev dependency #464

Copilot

🟡 Changes recommended

The non-Vercel production asset base generates broken URLs for assets published through assets.every.org.

1 open finding

Crypto icon URLs break in assets-hosted production builds · New

What changed in this PR

Migrates donate-button v4 from Preact CLI to Vite 8 and standardizes the repository on Node 24.

Changes:

Adds Vite-based v4 builds with legacy-compatible output and asset hashing.
Updates assets and dependencies for Vite.
Updates Node tooling, CI, and worker-test compatibility.

File	Description
`.github/workflows/ci.yml`	Runs CI with Node 24.
`.tool-versions`	Selects Node 24.16.0.
`package.json`	Requires Node 24.
`packages/cloudflare-worker/test/_setup.ts`	Removes Node’s getter-only navigator before mocking.
`packages/donate-button-v4/index.html`	Adds the Vite module entry.
`packages/donate-button-v4/package.json`	Replaces Preact CLI scripts and dependencies with Vite.
`packages/donate-button-v4/preact.config.js`	Removes the obsolete Webpack configuration.
`packages/donate-button-v4/public/assets/close.svg`	Moves the close icon into Vite’s public tree.
`packages/donate-button-v4/public/assets/logo.svg`	Moves the logo into Vite’s public tree.
`packages/donate-button-v4/vite.config.mjs`	Configures output layout, target, base URL, and asset hashing.
`yarn.lock`	Records the Vite dependency graph and removes Preact CLI packages.

🧠 Review effort: Balanced

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

santiher · 2026-10-09T13:39:20Z

+	base: process.env.VERCEL_URL
+		? `https://${process.env.VERCEL_URL}/${VERSION_SLUG}/`
+		: '/',


This sounds real?

preact-cli 3.5.0 is archived and only builds on Node 24 through a patch that bypasses its `esm` config loader. Vite builds the same IIFE bundle to dist/donate-button/0.4 with the VERCEL_URL asset base, so the preact-cli patch, its postinstall, and preact.config.js are removed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Problem: Without VERCEL_URL, `yarn build` emitted icon URLs as `/<hash>.svg`. The bundle checked into docs/ runs on third-party pages, so those URLs resolve against the host page and the crypto icons break. Root Cause: The Vite `base` fallback was `/`, while preact.config.js used `https://assets.every.org/dist/donate-button/0.4/` for non-Vercel production builds. Solution: Restore the assets.every.org base for non-Vercel builds and keep `/` for the dev server. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

johnemau added this pull request to stack #469 October 8, 2026 14:28

vercel Bot deployed to Preview October 8, 2026 14:28

View deployment

johnemau mentioned this pull request Oct 8, 2026

[Testing][Chore] Remove unmaintained service-worker-mock dev dependency #464

Open

johnemau commented Oct 8, 2026

View reviewed changes

johnemau marked this pull request as ready for review October 8, 2026 16:39

Copilot AI balanced review requested due to automatic review settings October 8, 2026 16:39

Copilot started reviewing on behalf of johnemau October 8, 2026 16:40

View session

Copilot AI reviewed Oct 8, 2026

View reviewed changes

johnemau requested review from Exploding, Fishbakh-N, jiwon85 and santiher October 8, 2026 18:10

johnemau mentioned this pull request Oct 8, 2026

Upgrade to Node 24 (minimal) #470

Merged

johnemau changed the title ~~Build donate button v4 with Vite and move to Node 24~~ Build donate button v4 with Vite Oct 16, 2026

johnemau force-pushed the john-with-claude/node-24-donate-testing-80be4e branch from 6e6f03b to 1431928 Compare October 16, 2026 17:03

vercel Bot deployed to Preview October 16, 2026 17:04

View deployment

vercel Bot deployed to Preview October 16, 2026 17:05

View deployment

johnemau and others added 2 commits October 16, 2026 15:35

johnemau force-pushed the john-with-claude/node-24-donate-testing-80be4e branch from 7c561c0 to d47a729 Compare October 16, 2026 22:36

vercel Bot deployed to Preview October 16, 2026 22:38

View deployment

Fishbakh-N approved these changes Oct 27, 2026

View reviewed changes

Navigation Menu

Repository navigation

Build donate button v4 with Vite - #468

Build donate button v4 with Vite#468
johnemau wants to merge 2 commits into
mainfrom
john-with-claude/node-24-donate-testing-80be4e

johnemau commented Oct 8, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Oct 8, 2026 •

edited

Loading

Uh oh!

socket-security Bot commented Oct 8, 2026 •

edited

Loading

Uh oh!

johnemau Oct 8, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

santiher Oct 9, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

johnemau commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security Bot commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

johnemau Oct 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

santiher Oct 9, 2026

Choose a reason for hiding this comment

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

johnemau commented Oct 8, 2026 •

edited

Loading

vercel Bot commented Oct 8, 2026 •

edited

Loading

socket-security Bot commented Oct 8, 2026 •

edited

Loading