chore: misc cleanup

app/root.tsx

@@ -23,11 +23,9 @@ import { RemixLogo } from './components';
 
 export const meta: MetaFunction = () => {
 	return [
-		{
-			charset: 'utf-8',
-			title: 'remix-cloudlfare-template',
-			viewport: 'width=device-width,initial-scale=1',
-		},
+		{ charset: 'utf-8' },
+		{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
+		{ title: 'remix-cloudlfare-template' },
 	];
 };
 
@@ -99,13 +97,15 @@ function Layout({
 					className={`relative flex-1 ${children ? 'border-t lg:border-t-0' : ''}`.trim()}
 				>
 					<div className="sticky top-0">
-						<div className="flex flex-col px-5 py-5 lg:min-h-screen lg:py-10">
+						<div
+							className={`flex flex-col px-5 py-5 lg:px-10 lg:py-10 ${children ? 'lg:min-h-screen' : 'min-h-screen'}`.trim()}
+						>
 							<header className="py-4">
 								<Link to="/" title="Remix">
 									<RemixLogo />
 								</Link>
 							</header>
-							<div className="flex-1 py-5 lg:py-20">
+							<div className="flex-1 py-10 lg:py-20">
 								<h2 className="text-xl">{title}</h2>
 								<p className="py-2">{description}</p>
 								{actionText ? (
@@ -126,9 +126,11 @@ function Layout({
 						</div>
 					</div>
 				</section>
-				<main className="flex-1">
-					<div className="px-5 py-5 lg:py-10">{children}</div>
-				</main>
+				{children ? (
+					<main className="flex-1">
+						<div className="px-5 py-5 lg:py-10">{children}</div>
+					</main>
+				) : null}
 			</div>
 		</div>
 	);
@@ -154,7 +156,8 @@ export function ErrorBoundary() {
 					'Oops! Looks like you tried to visit a page that does not exist.';
 				break;
 			default:
-				throw new Error(error.data || error.statusText);
+				message = JSON.stringify(error.data, null, 2);
+				break;
 		}
 
 		return (

env.d.ts

@@ -11,6 +11,5 @@ interface Env {
 declare module '@remix-run/cloudflare' {
 	export interface AppLoadContext {
 		env: Env;
-		waitUntil(promise: Promise<void>): void;
 	}
 }

package.json

@@ -38,7 +38,6 @@
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.10",
     "lint-staged": "^15.2.2",
-    "miniflare": "^3.20240129.1",
     "msw": "^2.1.7",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",

tests/playwright.ts

@@ -13,6 +13,12 @@ interface WorkerFixtures {
 	msw: SetupServer;
 }
 
+export async function clearKV(namespace: KVNamespace): Promise<void> {
+	const result = await namespace.list();
+
+	await Promise.all(result.keys.map(key => namespace.delete(key.name)));
+}
+
 export const expect = baseExpect.extend({});
 
 export const test = baseTest.extend<TestFixtures, WorkerFixtures>({
@@ -65,12 +71,15 @@ export const test = baseTest.extend<TestFixtures, WorkerFixtures>({
 	wrangler: [
 		// eslint-disable-next-line no-empty-pattern
 		async ({}, use) => {
-			const bindings = await getBindingsProxy<Env>();
+			const wrangler = await getBindingsProxy<Env>();
 
 			// To access bindings in the tests.
-			await use(bindings);
+			await use(wrangler);
+
+			// Ensure all cachees are cleaned up
+			await clearKV(wrangler.bindings.cache);
 
-			await bindings.dispose();
+			await wrangler.dispose();
 		},
 		{ scope: 'worker', auto: true },
 	],