V5 Upgrade

.vscode/extensions.json

@@ -1,4 +1,8 @@
 {
-	"recommendations": ["astro-build.astro-vscode", "biomejs.biome", "esbenp.prettier-vscode"],
+	"recommendations": [
+		"astro-build.astro-vscode",
+		"biomejs.biome",
+		"esbenp.prettier-vscode"
+	],
 	"unwantedRecommendations": []
 }

.vscode/settings.json

@@ -11,5 +11,8 @@
 	},
 	"typescript.tsdk": "node_modules\\typescript\\lib",
 	"javascript.preferences.importModuleSpecifierEnding": "js",
-	"typescript.preferences.importModuleSpecifierEnding": "js"
+	"typescript.preferences.importModuleSpecifierEnding": "js",
+	"[typescript]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	}
 }

astro.config.ts

@@ -1,96 +1,94 @@
-import netlify from '@astrojs/netlify';
-import solidJs from '@astrojs/solid-js';
-import tailwind from '@astrojs/tailwind';
-import icon from 'astro-icon';
-import { defineConfig, envField } from 'astro/config';
+import netlify from "@astrojs/netlify";
+import solidJs from "@astrojs/solid-js";
+import tailwind from "@astrojs/tailwind";
+import icon from "astro-icon";
+import { defineConfig, envField } from "astro/config";
 
 // https://astro.build/config
 export default defineConfig({
 	integrations: [tailwind({ applyBaseStyles: false }), icon(), solidJs()],
 	// Update to your storefront URL
-	site: 'https://shop.astro.build',
-	output: 'server',
+	site: "https://shop.astro.build",
+	output: "server",
 	adapter: netlify({ imageCDN: true }),
 	vite: {
 		build: {
 			assetsInlineLimit(filePath) {
-				return filePath.endsWith('css');
+				return filePath.endsWith("css");
 			},
 		},
 	},
 	image: {
 		// Update to your own image domains
 		domains: [
-			'localhost',
-			'shop-next.astro.build',
-			'shop.astro.build',
-			'main--astro-swag-shop.netlify.app',
+			"localhost",
+			"shop-next.astro.build",
+			"shop.astro.build",
+			"main--astro-swag-shop.netlify.app",
 		],
 	},
-	experimental: {
-		env: {
-			schema: {
-				STRIPE_SECRET_KEY: envField.string({
-					context: 'server',
-					access: 'secret',
-					// This is a random test key
-					default: 'sk_test_4eC39HqLyjWDarjtT1zdp7dc',
-				}),
-				FATHOM_SITE_ID: envField.string({
-					context: 'client',
-					access: 'public',
-					optional: true,
-				}),
-				GOOGLE_GEOLOCATION_SERVER_KEY: envField.string({
-					context: 'server',
-					access: 'secret',
-					optional: true,
-				}),
-				GOOGLE_MAPS_BROWSER_KEY: envField.string({
-					context: 'client',
-					access: 'public',
-					optional: true,
-				}),
-				LOOPS_API_KEY: envField.string({
-					context: 'server',
-					access: 'secret',
-					optional: true,
-				}),
-				LOOPS_SHOP_TRANSACTIONAL_ID: envField.string({
-					context: 'server',
-					access: 'public',
-					optional: true,
-				}),
-				LOOPS_FULFILLMENT_TRANSACTIONAL_ID: envField.string({
-					context: 'server',
-					access: 'public',
-					optional: true,
-				}),
-				LOOPS_FULFILLMENT_EMAIL: envField.string({
-					context: 'server',
-					access: 'public',
-					optional: true,
-				}),
-				// Used by the Astro team for our internal backend
-				SHOP_API_URL: envField.string({
-					context: 'server',
-					access: 'public',
-					optional: true,
-				}),
-				SHOP_API_KEY: envField.string({
-					context: 'server',
-					access: 'secret',
-					optional: true,
-				}),
-				US_SHIPPING_RATE_ID: envField.string({
-					context: 'server',
-					access: 'secret',
-				}),
-				INTERNATIONAL_SHIPPING_RATE_ID: envField.string({
-					context: 'server',
-					access: 'secret',
-				}),
-			},
+	env: {
+		schema: {
+			STRIPE_SECRET_KEY: envField.string({
+				context: "server",
+				access: "secret",
+				// This is a random test key
+				default: "sk_test_4eC39HqLyjWDarjtT1zdp7dc",
+			}),
+			FATHOM_SITE_ID: envField.string({
+				context: "client",
+				access: "public",
+				optional: true,
+			}),
+			GOOGLE_GEOLOCATION_SERVER_KEY: envField.string({
+				context: "server",
+				access: "secret",
+				optional: true,
+			}),
+			GOOGLE_MAPS_BROWSER_KEY: envField.string({
+				context: "client",
+				access: "public",
+				optional: true,
+			}),
+			LOOPS_API_KEY: envField.string({
+				context: "server",
+				access: "secret",
+				optional: true,
+			}),
+			LOOPS_SHOP_TRANSACTIONAL_ID: envField.string({
+				context: "server",
+				access: "public",
+				optional: true,
+			}),
+			LOOPS_FULFILLMENT_TRANSACTIONAL_ID: envField.string({
+				context: "server",
+				access: "public",
+				optional: true,
+			}),
+			LOOPS_FULFILLMENT_EMAIL: envField.string({
+				context: "server",
+				access: "public",
+				optional: true,
+			}),
+			// Used by the Astro team for our internal backend
+			SHOP_API_URL: envField.string({
+				context: "server",
+				access: "public",
+				optional: true,
+			}),
+			SHOP_API_KEY: envField.string({
+				context: "server",
+				access: "secret",
+				optional: true,
+			}),
+			US_SHIPPING_RATE_ID: envField.string({
+				context: "server",
+				access: "secret",
+			}),
+			INTERNATIONAL_SHIPPING_RATE_ID: envField.string({
+				context: "server",
+				access: "secret",
+			}),
 		},
 	},
 });

e2e/cart.spec.ts

@@ -1,55 +1,71 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from "@playwright/test";
 
 test.beforeEach(async ({ page }) => {
 	await page.context().clearCookies();
 });
 
-test('adding and deleting cart items', async ({ page }) => {
-	await page.goto('/lighthouse-100-sticker', { waitUntil: 'networkidle' });
-	await page.getByRole('button', { name: 'Add to cart' }).click();
+test("adding and deleting cart items", async ({ page }) => {
+	await page.goto("/lighthouse-100-sticker", { waitUntil: "networkidle" });
+	await page.getByRole("button", { name: "Add to cart" }).click();
 	await expect(
-		page.getByRole('dialog', { name: 'Cart' }).getByText('Lighthouse 100 Sticker'),
+		page
+			.getByRole("dialog", { name: "Cart" })
+			.getByText("Lighthouse 100 Sticker"),
 	).toBeVisible();
 
-	await page.goto('/astro-logo-curve-bill-snapback-cap', { waitUntil: 'networkidle' });
-	await page.getByRole('button', { name: 'Add to cart' }).click();
+	await page.goto("/astro-logo-curve-bill-snapback-cap", {
+		waitUntil: "networkidle",
+	});
+	await page.getByRole("button", { name: "Add to cart" }).click();
 	await expect(
-		page.getByRole('dialog', { name: 'Cart' }).getByText('Astro Logo Curve Bill Snapback Cap'),
+		page
+			.getByRole("dialog", { name: "Cart" })
+			.getByText("Astro Logo Curve Bill Snapback Cap"),
 	).toBeVisible();
 
-	await expect(page.getByRole('dialog', { name: 'Cart' }).getByTestId('cart-total')).toContainText(
-		'30.00',
-	);
+	await expect(
+		page.getByRole("dialog", { name: "Cart" }).getByTestId("cart-total"),
+	).toContainText("30.00");
 
 	await page
-		.getByRole('dialog', { name: 'Cart' })
-		.getByRole('button', { name: 'Remove item' })
+		.getByRole("dialog", { name: "Cart" })
+		.getByRole("button", { name: "Remove item" })
 		.first()
 		.click();
 
 	await expect(
-		page.getByRole('dialog', { name: 'Cart' }).getByText('Lighthouse 100 Sticker'),
+		page
+			.getByRole("dialog", { name: "Cart" })
+			.getByText("Lighthouse 100 Sticker"),
 	).not.toBeVisible();
 	await expect(
-		page.getByRole('dialog', { name: 'Cart' }).getByText('Astro Logo Curve Bill Snapback Cap'),
+		page
+			.getByRole("dialog", { name: "Cart" })
+			.getByText("Astro Logo Curve Bill Snapback Cap"),
 	).toBeVisible();
-	await expect(page.getByRole('dialog', { name: 'Cart' }).getByTestId('cart-total')).toContainText(
-		'25.00',
-	);
+	await expect(
+		page.getByRole("dialog", { name: "Cart" }).getByTestId("cart-total"),
+	).toContainText("25.00");
 
 	await new Promise((r) => setTimeout(r, 100));
 
 	await page
-		.getByRole('dialog', { name: 'Cart' })
-		.getByRole('button', { name: 'Remove item' })
+		.getByRole("dialog", { name: "Cart" })
+		.getByRole("button", { name: "Remove item" })
 		.first()
 		.click();
 
 	await expect(
-		page.getByRole('dialog', { name: 'Cart' }).getByText('Lighthouse 100 Sticker'),
+		page
+			.getByRole("dialog", { name: "Cart" })
+			.getByText("Lighthouse 100 Sticker"),
 	).not.toBeVisible();
 	await expect(
-		page.getByRole('dialog', { name: 'Cart' }).getByText('Astro Logo Curve Bill Snapback Cap'),
+		page
+			.getByRole("dialog", { name: "Cart" })
+			.getByText("Astro Logo Curve Bill Snapback Cap"),
 	).not.toBeVisible();
-	await expect(page.getByRole('dialog', { name: 'Cart' }).getByTestId('cart-empty')).toBeVisible();
+	await expect(
+		page.getByRole("dialog", { name: "Cart" }).getByTestId("cart-empty"),
+	).toBeVisible();
 });

openapi-ts.config.ts

@@ -1,13 +1,17 @@
-import { defineConfig } from '@hey-api/openapi-ts';
-import { loadEnv } from 'vite';
+import { defineConfig } from "@hey-api/openapi-ts";
+import { loadEnv } from "vite";
 
-const { SHOP_API_URL } = loadEnv(process.env.NODE_ENV ?? 'development', process.cwd(), '');
+const { SHOP_API_URL } = loadEnv(
+	process.env.NODE_ENV ?? "development",
+	process.cwd(),
+	"",
+);
 
 export default defineConfig({
-	client: '@hey-api/client-fetch',
-	input: new URL('/doc', SHOP_API_URL).href,
+	client: "@hey-api/client-fetch",
+	input: new URL("/doc", SHOP_API_URL).href,
 	output: {
-		format: 'prettier',
-		path: 'src/lib/.client',
+		format: "prettier",
+		path: "src/lib/.client",
 	},
 });

package.json

@@ -4,9 +4,9 @@
 	"version": "0.0.1",
 	"license": "MIT",
 	"engines": {
-		"node": "20.17.0"
+		"node": ">= 20"
 	},
-	"packageManager": "pnpm@9.10.0+sha512.73a29afa36a0d092ece5271de5177ecbf8318d454ecd701343131b8ebc0c1a91c487da46ab77c8e596d6acf1461e3594ced4becedf8921b074fbd8653ed7051c",
+	"packageManager": "pnpm@10.14.0",
 	"scripts": {
 		"dev:ci": "doppler run pnpm openapi-ts && doppler run astro dev",
 		"dev": "astro dev",
@@ -25,43 +25,43 @@
 		"format:prettier": "prettier . --cache --write --list-different"
 	},
 	"devDependencies": {
-		"@astrojs/check": "0.7.0",
-		"@biomejs/biome": "^1.4.1",
-		"@hey-api/openapi-ts": "^0.53.0",
-		"@types/node": "^20.10.4",
+		"@astrojs/check": "0.9.4",
+		"@biomejs/biome": "^2.1.4",
+		"@hey-api/openapi-ts": "^0.80.5",
+		"@types/node": "^24.2.0",
 		"npm-run-all": "^4.1.5",
-		"prettier": "^3.1.1",
-		"prettier-plugin-astro": "^0.12.2",
-		"prettier-plugin-jsdoc": "^1.1.1",
-		"prettier-plugin-tailwindcss": "^0.5.9",
-		"typescript": "^5.3.3",
-		"vite": "^5.4.5",
+		"prettier": "^3.6.2",
+		"prettier-plugin-astro": "^0.14.1",
+		"prettier-plugin-jsdoc": "^1.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.14",
+		"typescript": "^5.9.2",
+		"vite": "^6.3.5",
 		"vite-plugin-tsconfig-paths": "^1.4.1",
-		"vitest": "^2.1.1"
+		"vitest": "^3.2.4"
 	},
 	"dependencies": {
-		"@astrojs/netlify": "^5.5.0",
-		"@astrojs/solid-js": "^4.4.0",
-		"@astrojs/tailwind": "5.1.0",
-		"@fontsource-variable/inter": "5.0.18",
-		"@hey-api/client-fetch": "^0.2.4",
-		"@kobalte/core": "0.13.4",
+		"@astrojs/netlify": "^6.0.0",
+		"@astrojs/solid-js": "^5.0.0",
+		"@astrojs/tailwind": "6.0.2",
+		"@fontsource-variable/inter": "5.2.6",
+		"@hey-api/client-fetch": "^0.13.1",
+		"@kobalte/core": "0.13.11",
 		"@kobalte/tailwindcss": "0.9.0",
-		"@playwright/test": "^1.47.0",
-		"@sentry/astro": "^8.30.0",
-		"@tailwindcss/typography": "0.5.13",
-		"@tanstack/solid-query": "^5.52.2",
-		"@tanstack/solid-query-devtools": "^5.52.2",
+		"@playwright/test": "^1.54.2",
+		"@sentry/astro": "^10.2.0",
+		"@tailwindcss/typography": "0.5.16",
+		"@tanstack/solid-query": "^5.83.1",
+		"@tanstack/solid-query-devtools": "^5.84.0",
 		"@total-typescript/ts-reset": "^0.6.1",
-		"astro": "^4.12.2",
-		"astro-icon": "^1.1.1",
+		"astro": "^5.12.8",
+		"astro-icon": "^1.1.5",
 		"solid-icons": "^1.1.0",
-		"solid-js": "^1.8.19",
-		"stripe": "16.6.0",
-		"tailwind-merge": "2.4.0",
-		"tailwindcss": "^3.4.11",
+		"solid-js": "^1.9.8",
+		"stripe": "18.4.0",
+		"tailwind-merge": "3.3.1",
+		"tailwindcss": "^4.1.11",
 		"tailwindcss-animate": "^1.0.7",
-		"type-fest": "^4.26.1",
-		"zod": "3.23.8"
+		"type-fest": "^4.41.0",
+		"zod": "^3.25.76"
 	}
 }