PR #21258 - hono examples fixes

Author: furrypet

src/content/docs/workers/examples/103-early-hints.mdx

@@ -139,7 +139,7 @@ def on_fetch(request):
 </TabItem> <TabItem label="Hono" icon="seti:typescript">
 
 ```ts
-import { Hono } from 'hono';
+import { Hono } from "hono";
 
 const app = new Hono();
 
@@ -159,22 +159,21 @@ const HTML = `
 `;
 
 // Serve CSS file
-app.get('/test.css', (c) => {
-  return c.body(CSS, {
-    headers: {
-      "content-type": "text/css",
-    },
-  });
+app.get("/test.css", (c) => {
+	return c.body(CSS, {
+		headers: {
+			"content-type": "text/css",
+		},
+	});
 });
 
 // Serve HTML with early hints
-app.get('*', (c) => {
-  return c.body(HTML, {
-    headers: {
-      "content-type": "text/html",
-      "link": "</test.css>; rel=preload; as=style",
-    },
-  });
+app.get("*", (c) => {
+	return c.html(HTML, {
+		headers: {
+			link: "</test.css>; rel=preload; as=style",
+		},
+	});
 });
 
 export default app;

src/content/docs/workers/examples/ab-testing.mdx

@@ -147,59 +147,44 @@ const app = new Hono();
 
 const NAME = "myExampleWorkersABTest";
 
+// Enable passthrough to allow direct access to control and test routes
+app.all("/control/*", (c) => fetch(c.req.raw));
+app.all("/test/*", (c) => fetch(c.req.raw));
+
 // Middleware to handle A/B testing logic
 app.use("*", async (c) => {
-	// Enable Passthrough to allow direct access to control and test routes
-	if (c.req.path.startsWith("/control") || c.req.path.startsWith("/test")) {
-		return fetch(c.req.raw);
-	}
+	const url = new URL(c.req.url);
 
 	// Determine which group this requester is in
 	const abTestCookie = getCookie(c, NAME);
 
 	if (abTestCookie === "control") {
 		// User is in control group
-		c.req.path = "/control" + c.req.path;
-		return fetch(url);
+		url.pathname = "/control" + c.req.path;
 	} else if (abTestCookie === "test") {
 		// User is in test group
-		url.pathname = "/test" + url.pathname;
-		return fetch(c.req.url);
+		url.pathname = "/test" + c.req.path;
 	} else {
 		// If there is no cookie, this is a new client
 		// Choose a group and set the cookie (50/50 split)
 		const group = Math.random() < 0.5 ? "test" : "control";
 
 		// Update URL path based on assigned group
 		if (group === "control") {
-			c.req.path = "/control" + c.req.path;
+			url.pathname = "/control" + c.req.path;
 		} else {
-			c.req.path = "/test" + c.req.path;
+			url.pathname = "/test" + c.req.path;
 		}
 
-		// Fetch from origin with modified path
-		const res = await fetch(c.req.url);
-
-		// Create a new response to avoid immutability issues
-		const newResponse = new Response(res.body, res);
-
 		// Set cookie to enable persistent A/B sessions
 		setCookie(c, NAME, group, {
 			path: "/",
-			// Add additional cookie options as needed:
-			// secure: true,
-			// httpOnly: true,
-			// sameSite: 'strict',
 		});
+	}
 
-		// Copy the Set-Cookie header to the response
-		newResponse.headers.set(
-			"Set-Cookie",
-			c.res.headers.get("Set-Cookie") || "",
-		);
+	const res = await fetch(url);
 
-		return newResponse;
-	}
+	return c.body(res.body, res);
 });
 
 export default app;

src/content/docs/workers/examples/accessing-the-cloudflare-object.mdx

@@ -61,9 +61,7 @@ export default {
 ```ts
 import { Hono } from "hono";
 
-type Bindings = {};
-
-const app = new Hono<{ Bindings: Bindings }>();
+const app = new Hono();
 
 app.get("*", async (c) => {
 	// Access the raw request to get the cf object

src/content/docs/workers/examples/aggregate-requests.mdx

@@ -61,26 +61,24 @@ export default {
 </TabItem> <TabItem label="Hono" icon="seti:typescript">
 
 ```ts
-import { Hono } from 'hono';
-
-type Bindings = {};
-
-const app = new Hono<{ Bindings: Bindings }>();
-
-app.get('*', async (c) => {
-  // someHost is set up to return JSON responses
-  const someHost = "https://jsonplaceholder.typicode.com";
-  const url1 = someHost + "/todos/1";
-  const url2 = someHost + "/todos/2";
-
-  // Fetch both URLs concurrently
-  const responses = await Promise.all([fetch(url1), fetch(url2)]);
-  
-  // Parse JSON responses concurrently
-  const results = await Promise.all(responses.map(r => r.json()));
-  
-  // Return aggregated results
-  return c.json(results);
+import { Hono } from "hono";
+
+const app = new Hono();
+
+app.get("*", async (c) => {
+	// someHost is set up to return JSON responses
+	const someHost = "https://jsonplaceholder.typicode.com";
+	const url1 = someHost + "/todos/1";
+	const url2 = someHost + "/todos/2";
+
+	// Fetch both URLs concurrently
+	const responses = await Promise.all([fetch(url1), fetch(url2)]);
+
+	// Parse JSON responses concurrently
+	const results = await Promise.all(responses.map((r) => r.json()));
+
+	// Return aggregated results
+	return c.json(results);
 });
 
 export default app;

src/content/docs/workers/examples/basic-auth.mdx

@@ -347,6 +347,7 @@ import { auth } from 'hono/basic-auth';
 // Define environment interface
 interface Env {
   Bindings: {
+		USERNAME: string;
     PASSWORD: string;
   };
 }
@@ -358,20 +359,23 @@ app.get('/', (c) => {
   return c.text("Anyone can access the homepage.");
 });
 
-// Logout route
-app.get('/logout', (c) => {
-  return c.text("Logged out.", 401);
-});
-
 // Admin route - protected with Basic Auth
-app.get('/admin', async (c, next) => {
-	return basicAuth({ username: c.env.USERNAME, password: c.env.PASSWORD })(c, next);
-});
+app.get(
+	"/admin",
+	async (c, next) => {
+		const auth = basicAuth({
+			username: c.env.USERNAME,
+			password: c.env.PASSWORD
+		})
+
+		return await auth(c, next);
+	},
+	(c) => {
+		return c.text("🎉 You have private access!", 200, {
+			"Cache-Control": "no-store",
+		});
+	}
 
-// Handle 404 for any other routes
-app.notFound((c) => {
-  return c.text("Not Found.", 404);
-});
 
 export default app;
 ````

src/content/docs/workers/examples/block-on-tls.mdx

@@ -74,31 +74,28 @@ export default {
 ```ts
 import { Hono } from "hono";
 
-type Bindings = {};
-
-const app = new Hono<{ Bindings: Bindings }>();
+const app = new Hono();
 
 // Middleware to check TLS version
 app.use("*", async (c, next) => {
-	try {
-		// Access the raw request to get the cf object with TLS info
-		const request = c.req.raw;
-		const tlsVersion = request.cf?.tlsVersion;
-
-		// Allow only TLS versions 1.2 and 1.3
-		if (tlsVersion !== "TLSv1.2" && tlsVersion !== "TLSv1.3") {
-			return c.text("Please use TLS version 1.2 or higher.", 403);
-		}
+	// Access the raw request to get the cf object with TLS info
+	const request = c.req.raw;
+	const tlsVersion = request.cf?.tlsVersion;
+
+	// Allow only TLS versions 1.2 and 1.3
+	if (tlsVersion !== "TLSv1.2" && tlsVersion !== "TLSv1.3") {
+		return c.text("Please use TLS version 1.2 or higher.", 403);
+	}
 
-		// Continue to the next handler if TLS version is acceptable
-		return next();
-	} catch (err: any) {
-		// Handle errors (especially in preview mode where request.cf might not exist)
+	await next();
+
+});
+
+app.onError((err, c) => {
 		console.error(
 			"request.cf does not exist in the previewer, only in production",
 		);
 		return c.text(`Error in workers script: ${err.message}`, 500);
-	}
 });
 
 app.get("/", async (c) => {

src/content/docs/workers/examples/bulk-origin-proxy.mdx

@@ -101,7 +101,7 @@ app.all("*", async (c) => {
 	}
 
 	// Otherwise, process request as normal
-	return fetch(c.req.raw);
+	return proxy(c.req.raw);
 });
 
 export default app;

src/content/docs/workers/examples/bulk-redirects.mdx

@@ -102,38 +102,38 @@ async def on_fetch(request):
 </TabItem> <TabItem label="Hono" icon="seti:typescript">
 
 ```ts
-import { Hono } from 'hono';
+import { Hono } from "hono";
 
 const app = new Hono();
 
 // Configure your redirects
 const externalHostname = "examples.cloudflareworkers.com";
 
 const redirectMap = new Map([
-  ["/bulk1", `https://${externalHostname}/redirect2`],
-  ["/bulk2", `https://${externalHostname}/redirect3`],
-  ["/bulk3", `https://${externalHostname}/redirect4`],
-  ["/bulk4", "https://google.com"],
+	["/bulk1", `https://${externalHostname}/redirect2`],
+	["/bulk2", `https://${externalHostname}/redirect3`],
+	["/bulk3", `https://${externalHostname}/redirect4`],
+	["/bulk4", "https://google.com"],
 ]);
 
 // Middleware to handle redirects
-app.use('*', async (c, next) => {
-  const path = new URL(c.req.url).pathname;
-  const location = redirectMap.get(path);
+app.use("*", async (c, next) => {
+	const path = c.req.path;
+	const location = redirectMap.get(path);
 
-  if (location) {
-    // If path is in our redirect map, perform the redirect
-    return c.redirect(location, 301);
-  }
+	if (location) {
+		// If path is in our redirect map, perform the redirect
+		return c.redirect(location, 301);
+	}
 
-  // Otherwise, continue to the next handler
-  await next();
+	// Otherwise, continue to the next handler
+	await next();
 });
 
 // Default handler for requests that don't match any redirects
-app.all('*', async (c) => {
-  // Pass through to origin
-  return fetch(c.req.raw);
+app.all("*", async (c) => {
+	// Pass through to origin
+	return fetch(c.req.raw);
 });
 
 export default app;

src/content/docs/workers/examples/cache-api.mdx

@@ -136,13 +136,8 @@ async def on_fetch(request, _env, ctx):
 
 ```ts
 import { Hono } from "hono";
-import type { Context } from "hono";
 import { cache } from "hono/cache";
 
-type Env = {
-	// Cloudflare Worker environment
-};
-
 const app = new Hono();
 
 // We leverage hono built-in cache helper here

src/content/docs/workers/examples/geolocation-hello-world.mdx

@@ -166,7 +166,7 @@ const app = new Hono();
 
 app.get("*", (c) => {
 	// Cast the raw request to include Cloudflare-specific properties
-	const request = c.req.raw as RequestWithCf;
+	const request = c.req.raw;
 
 	// Define styles
 	const html_style =