From deeccd7e25fbbfed925b8241ac8cd7bf7c659929 Mon Sep 17 00:00:00 2001
From: Reed von Redwitz <reed+github@vonredwitz.com>
Date: Sun, 23 Jun 2024 22:46:04 +0200
Subject: [PATCH] feat: add example of define.middleware to init (#2534)

The documentation for `MiddlewareFn` is out of date, because it
references a nonexistent `defineMiddleware` function. It's been updated
to reference the correct `define.middleware` function.

Additionally, I included an example of using this in the init project. I
also complicated the usage of `app.get` so that the function actually
uses the context. To make it clear to users of fresh 1 that this can be
equivalent to a file-based-route, I've included such a route as well.

The two new examples in `maini.ts` should make it much more clear to
fresh 1 users how the new system can work.
---
 init/src/init.ts       | 29 +++++++++++++++++++++++++++--
 src/middlewares/mod.ts |  9 +++++----
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/init/src/init.ts b/init/src/init.ts
index 1c8c42d12e7..0be2f1b3519 100644
--- a/init/src/init.ts
+++ b/init/src/init.ts
@@ -367,12 +367,25 @@ ${GRADIENT_CSS}
   }
 
   const MAIN_TS = `import { App, fsRoutes, staticFiles } from "fresh";
-import type { State } from "./utils.ts";
+import { define, type State } from "./utils.ts";
 
 export const app = new App<State>();
 app.use(staticFiles());
 
-app.get("/api/:joke", () => new Response("Hello World"));
+// this is the same as the /api/:name route defined via a file. feel free to delete this!
+app.get("/api2/:name", (ctx) => {
+  const name = ctx.params.name;
+  return new Response(
+    \`Hello, \${name.charAt(0).toUpperCase() + name.slice(1)}!\`,
+  );
+});
+
+// this can also be defined via a file. feel free to delete this!
+const exampleLoggerMiddleware = define.middleware((ctx) => {
+  console.log(\`\${ctx.req.method} \${ctx.req.url}\`);
+  return ctx.next();
+});
+app.use(exampleLoggerMiddleware);
 
 await fsRoutes(app, {
   dir: "./",
@@ -460,6 +473,18 @@ export default function App({ Component }: PageProps) {
 }`;
   await writeFile("routes/_app.tsx", APP_WRAPPER);
 
+  const API_NAME = `import { define } from "../../utils.ts";
+
+export const handler = define.handlers({
+  GET(ctx) {
+    const name = ctx.params.name;
+    return new Response(
+      \`Hello, \${name.charAt(0).toUpperCase() + name.slice(1)}!\`,
+    );
+  },
+});`;
+  await writeFile("routes/api/[name].tsx", API_NAME);
+
   const ISLANDS_COUNTER_TSX = `import type { Signal } from "@preact/signals";
 import { Button } from "../components/Button.tsx";
 
diff --git a/src/middlewares/mod.ts b/src/middlewares/mod.ts
index 15d62ea2a04..e6ae6cefd1a 100644
--- a/src/middlewares/mod.ts
+++ b/src/middlewares/mod.ts
@@ -1,5 +1,6 @@
 import type { FreshContext, FreshReqContext } from "../context.ts";
 import type { App as _App } from "../app.ts";
+import type { Define as _Define } from "../define.ts";
 
 /**
  * A middleware function is the basic building block of Fresh. It allows you
@@ -23,7 +24,7 @@ import type { App as _App } from "../app.ts";
  * order they are defined.
  *
  * Middlewares can also be defined using the
- * {@linkcode _App.prototype.defineMiddleware|app.defineMiddleware} method. This
+ * {@linkcode _Define.middleware|define.middleware} method. This
  * method is optional, but it can be useful for type checking and code
  * completion. It does not register the middleware with the app.
  *
@@ -36,10 +37,10 @@ import type { App as _App } from "../app.ts";
  *
  * ```ts
  * // Define a middleware function that logs incoming requests. Using the
- * // `defineMiddleware` method is optional, but it can be useful for type
+ * // `define.middleware` method is optional, but it can be useful for type
  * // checking and code completion. It does not register the middleware with the
  * // app.
- * const loggerMiddleware = app.defineMiddleware((ctx) => {
+ * const loggerMiddleware = define.middleware((ctx) => {
  *   console.log(`${ctx.req.method} ${ctx.req.url}`);
  *   // Call the next middleware
  *   return ctx.next();
@@ -57,7 +58,7 @@ import type { App as _App } from "../app.ts";
  * ```ts
  * // Any request to a URL that starts with "/legacy/" will be redirected to
  * // "/modern".
- * const redirectMiddleware = app.defineMiddleware((ctx) => {
+ * const redirectMiddleware = define.middleware((ctx) => {
  *   if (ctx.url.pathname.startsWith("/legacy/")) {
  *     return ctx.redirect("/modern");
  *   }