refactor: drop dinero.js — native money formatting

Author: Nic-Polumeyv

package.json

@@ -338,7 +338,6 @@
 		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.2.2",
 		"vaul-svelte": "1.0.0-next.7",
-		"dinero.js": "^2.0.2",
 		"@stripe/stripe-js": "^9.8.0"
 	},
 	"devDependencies": {

src/lib/blocks/alert-modal/AlertModal.svelte

@@ -53,7 +53,6 @@
 					}}
 				>
 					{#if alertModal.loading}<Spinner />{/if}
-					{alertModal.loading ? 'Please wait...' : alertModal.actionLabel}
 				</AlertDialog.Action>
 			</AlertDialog.Footer>
 		{/if}

src/lib/format/money.ts

@@ -1,6 +1,2 @@
-import { dinero, toDecimal } from 'dinero.js';
-import { USD } from 'dinero.js/currencies';
-
 export const formatUSD = (cents: number): string =>
-	toDecimal(dinero({ amount: cents, currency: USD }), ({ value }) =>
-		new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(Number(value)));
+	new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(cents / 100);

src/lib/stripe/StripePaymentField.svelte

@@ -37,48 +37,6 @@
 	let submitting = $state(false);
 	let loading = $state(true);
 
-	// untrack pins the setup to once-per-mount: the callback props are usually inline arrows,
-	// so their identity changes on every parent render and must not re-create the setup intent.
-	const mountPayment: Attachment<HTMLDivElement> = (node) => {
-		let paymentEl: { unmount(): void } | null = null;
-		untrack(() =>
-			Promise.all([createSetupIntent(), loadStripe(stripeKey)])
-				.then(([{ clientSecret, customerSessionClientSecret }, s]) => {
-					if (!s || !clientSecret) throw new Error('Failed to initialize payment');
-					const isDark = document.documentElement.classList.contains('dark');
-					stripe = s;
-					elements = s.elements({
-						clientSecret,
-						customerSessionClientSecret,
-						appearance: {
-							theme: isDark ? 'night' : 'stripe',
-							variables: {
-								colorPrimary: isDark ? 'hsl(41, 69%, 62%)' : 'hsl(40, 91%, 45%)',
-								tabIconColor: isDark ? '#a3a3a3' : '#737373',
-								tabIconHoverColor: isDark ? '#ffffff' : '#000000',
-								tabIconSelectedColor: '#1f1f1f',
-								colorBackground: isDark ? 'hsl(80 2.1% 12.4%)' : '#ffffff',
-								logoColor: isDark ? 'light' : 'dark',
-							},
-						},
-					});
-					const el = elements.create('payment', {
-						defaultValues: {
-							billingDetails: {
-								name: billingName || undefined,
-								email: email || undefined,
-							},
-						},
-					});
-					el.mount(node);
-					el.on('ready', () => (loading = false));
-					paymentEl = el;
-				})
-				.catch(() => (loading = false)),
-		);
-		return () => paymentEl?.unmount();
-	};
-
 	const submit = () => {
 		if (!stripe || !elements) return;
 		submitting = true;
@@ -104,7 +62,50 @@
 		{#if title}
 			<h3 class="text-base font-medium mb-4">{title}</h3>
 		{/if}
-		<div {@attach mountPayment} class="w-full"></div>
+		<div
+			{@attach (node) => {
+				// untrack pins the setup to once-per-mount: the callback props are usually inline arrows,
+				// so their identity changes on every parent render and must not re-create the setup intent.
+				let paymentEl: { unmount(): void } | null = null;
+				untrack(() =>
+					Promise.all([createSetupIntent(), loadStripe(stripeKey)])
+						.then(([{ clientSecret, customerSessionClientSecret }, s]) => {
+							if (!s || !clientSecret) throw new Error('Failed to initialize payment');
+							const isDark = document.documentElement.classList.contains('dark');
+							stripe = s;
+							elements = s.elements({
+								clientSecret,
+								customerSessionClientSecret,
+								appearance: {
+									theme: isDark ? 'night' : 'stripe',
+									variables: {
+										colorPrimary: isDark ? 'hsl(41, 69%, 62%)' : 'hsl(40, 91%, 45%)',
+										tabIconColor: isDark ? '#a3a3a3' : '#737373',
+										tabIconHoverColor: isDark ? '#ffffff' : '#000000',
+										tabIconSelectedColor: '#1f1f1f',
+										colorBackground: isDark ? 'hsl(80 2.1% 12.4%)' : '#ffffff',
+										logoColor: isDark ? 'light' : 'dark',
+									},
+								},
+							});
+							const el = elements.create('payment', {
+								defaultValues: {
+									billingDetails: {
+										name: billingName || undefined,
+										email: email || undefined,
+									},
+								},
+							});
+							el.mount(node);
+							el.on('ready', () => (loading = false));
+							paymentEl = el;
+						})
+						.catch(() => (loading = false)),
+				);
+				return () => paymentEl?.unmount();
+			}}
+			class="w-full">
+		</div>
 		<div class="flex justify-end gap-2 mt-4">
 			{#if oncancel}
 				<Button variant="outline" disabled={submitting} onclick={oncancel}>Cancel</Button>

tsconfig.json

@@ -13,8 +13,7 @@
 		"strict": true,
 		// Inherit base's plugins/options, but keep this component lib's prior strictness profile:
 		// base enables noUncheckedIndexedAccess, which the vendored UI components aren't written for.
-		"noUncheckedIndexedAccess": false,
-		"declarationMap": true
+		"noUncheckedIndexedAccess": false
 	},
 	"include": ["src/lib"],
 	"exclude": ["dist"]

vite.config.ts

@@ -14,13 +14,12 @@ export default defineConfig({
 			// Path is relative to the generated .svelte-kit/tsconfig.json.
 			typescript: {
 				config: (c) => {
-					c.extends = '../../../../tsconfig.base.json';
+					c.extends = '../../../../tsconfig.json';
 				},
 			},
 			// Force runes mode for the project, except for libraries. Can be removed in svelte 6.
 			vitePlugin: {
-				dynamicCompileOptions: ({ filename }) =>
-					filename.split(/[/\\]/).includes('node_modules') ? undefined : { runes: true },
+				dynamicCompileOptions: ({ filename }) => (filename.split(/[/\\]/).includes('node_modules') ? undefined : { runes: true }),
 			},
 		}),
 	],