Build donate button v4 with Vite

packages/donate-button-v4/src/public/index.html → packages/donate-button-v4/index.html

@@ -6,6 +6,7 @@
 		<meta name="theme-color" content="#000000" />
 		<meta name="description" content="Example beta donate buttons" />
 		<title>v4 Donate Button</title>
+		<script type="module" src="/src/index.tsx"></script>
 	</head>
 
 	<body style="height: 200vh">

packages/donate-button-v4/package.json

@@ -9,11 +9,9 @@
 	"scripts": {
 		"tsc": "tsc",
 		"test": "echo 'no tests'",
-		"postinstall": "node ../../node_modules/patch-package",
-		"build": "preact build --no-prerender --no-sw && yarn postbuild",
+		"build": "NODE_OPTIONS=--openssl-legacy-provider vite build && yarn postbuild",
 		"postbuild": "cp dist/donate-button/0.4/index.js dist/donate-button/0.4/button.js",
-		"serve": "preact serve",
-		"dev": "preact watch -c ./preact.config.js --no-prerender --no-sw",
+		"dev": "vite",
 		"lint": "eslint src --ext .ts,.tsx && prettier --check .",
 		"lint:fix": "eslint src --ext .ts,.tsx --fix && prettier --write ."
 	},
@@ -32,6 +30,7 @@
 		"@babel/preset-env": "^7.12.1",
 		"@babel/preset-stage-1": "^7.8.3",
 		"@babel/preset-typescript": "^7.13.0",
+		"@preact/preset-vite": "^2.10.6",
 		"@testing-library/react": "^11.2.5",
 		"@types/big.js": "^6.2.2",
 		"@typescript-eslint/eslint-plugin": "^5",
@@ -46,16 +45,16 @@
 		"eslint-plugin-react": "^7.22.0",
 		"eslint-plugin-react-hooks": "^4.2.0",
 		"identity-obj-proxy": "^3.0.0",
-		"preact-cli": "^3.5.0",
 		"preact-render-to-string": "^5.1.12",
 		"prettier": "^2.2.1",
 		"sass-loader": "^6.0.6",
+		"semver": "^6.3.1",
 		"style-loader": "^2.0.0",
 		"to-string-loader": "^1.1.6",
 		"ts-node": "^9.1.1",
 		"tsconfig-paths": "^3.9.0",
-		"tsconfig-paths-webpack-plugin": "^4.1.0",
-		"typescript": "^4.1.3"
+		"typescript": "^4.1.3",
+		"vite": "^8.3.1"
 	},
 	"dependencies": {
 		"@stripe/stripe-js": "^1.53.0",

packages/donate-button-v4/vite.config.mjs

@@ -0,0 +1,50 @@
+import crypto from 'node:crypto';
+import {createRequire} from 'node:module';
+
+import preact from '@preact/preset-vite';
+import semver from 'semver';
+import {defineConfig} from 'vite';
+
+const packageJson = createRequire(import.meta.url)('./package.json');
+
+const VERSION = semver.parse(packageJson.version);
+const VERSION_SLUG =
+	VERSION.major === 0 ? `${VERSION.major}.${VERSION.minor}` : VERSION.major;
+
+/**
+ * The bundle runs on third-party pages, so built icon URLs must be absolute.
+ * Vercel sets VERCEL_URL; other builds are checked into docs/ and served by
+ * assets.every.org.
+ * @see ../../README.md#demo-site-hosting-details
+ */
+function getBase(command) {
+	if (command !== 'build') return '/';
+	return process.env.VERCEL_URL
+		? `https://${process.env.VERCEL_URL}/${VERSION_SLUG}/`
+		: `https://assets.every.org/dist/donate-button/${VERSION_SLUG}/`;
+}
+
+export default defineConfig(({command}) => ({
+	base: getBase(command),
+	plugins: [preact()],
+	resolve: {
+		tsconfigPaths: true
+	},
+	build: {
+		outDir: `dist/donate-button/${VERSION_SLUG}`,
+		sourcemap: true,
+		target: 'es2015',
+		// Keep icons as separate files served from `base`, as preact-cli did.
+		assetsInlineLimit: 0,
+		rolldownOptions: {
+			output: {
+				format: 'iife',
+				entryFileNames: 'index.js',
+				// Keep the names preact-cli's file-loader gave: the MD4 digest of
+				// the contents. Node only provides MD4 with --openssl-legacy-provider.
+				assetFileNames: ({source}) =>
+					`${crypto.createHash('md4').update(source).digest('hex')}[extname]`
+			}
+		}
+	}
+}));