docs: update Fresh 2 migration info (denoland#3161)

marvinhagemeister · web-flow · commit 62f8bb008e03 · 2025-07-31T10:46:44.000+02:00
diff --git a/docs/canary/examples/migration-guide.md b/docs/canary/examples/migration-guide.md
@@ -70,14 +70,16 @@ if (Deno.args.includes("build")) {
 }
 ```
 
+> [info]: Fresh 1.x used Tailwind CSS v3. To keep using v3 use the
+> `@fresh/plugin-tailwind-v3` instead.
+
 ### Updating `main.ts`
 
 Similarly, configuration related to running Fresh in production can be passed to
 `new App()`:
 
-```ts
-// main.ts
-import { App, fsRoutes, staticFiles } from "fresh";
+```ts main.ts
+import { App, staticFiles } from "fresh";
 
 export const app = new App()
   // Add static file serving middleware
@@ -102,7 +104,7 @@ Both the `_500.tsx` and `_404.tsx` template have been unified into a single
 Inside the `_error.tsx` template you can show different content based on errors
 or status codes with the following code:
 
-```tsx
+```tsx routes/_error.tsx
 export default function ErrorPage(props: PageProps) {
   const error = props.error; // Contains the thrown Error or HTTPError
   if (error instanceof HttpError) {
@@ -138,7 +140,7 @@ export const handler = {
 };
 
 // Render that in _app.tsx
-export default function AppWrapper(ctx: FreshContext) {
+export default function AppWrapper(ctx: Context) {
   return (
     <html lang="en">
       <head>
diff --git a/src/compat.ts b/src/compat.ts
@@ -1,30 +1,29 @@
 import type { ComponentChildren } from "preact";
-import type { FreshContext } from "./context.ts";
+import type { Context } from "./context.ts";
 import type { PageProps } from "./render.ts";
 import type { HandlerFn, RouteHandler } from "./handlers.ts";
 
 /**
  * @deprecated Use {@linkcode PageProps} instead.
  */
-export type AppProps<_Data = unknown, T = unknown> = FreshContext<T>;
+export type AppProps<_Data = unknown, T = unknown> = Context<T>;
 /**
  * @deprecated Use {@linkcode PageProps} instead.
  */
-export type LayoutProps<_Data = unknown, T = unknown> = FreshContext<T>;
+export type LayoutProps<_Data = unknown, T = unknown> = Context<T>;
 /**
  * @deprecated Use {@linkcode PageProps} instead.
  */
-export type UnknownPageProps<_Data = unknown, T = unknown> = FreshContext<T>;
+export type UnknownPageProps<_Data = unknown, T = unknown> = Context<T>;
 /**
  * @deprecated Use {@linkcode PageProps} instead.
  */
-export type ErrorPageProps<_Data = unknown, T = unknown> = FreshContext<T>;
+export type ErrorPageProps<_Data = unknown, T = unknown> = Context<T>;
 
 /**
  * @deprecated Use {@linkcode FreshContext} instead.
  */
-export type RouteContext<_T = never, S = Record<string, unknown>> =
-  FreshContext<S>;
+export type RouteContext<_T = never, S = Record<string, unknown>> = Context<S>;
 
 /**
  * @deprecated Use {@linkcode RouteHandler} instead.
diff --git a/src/define.ts b/src/define.ts
@@ -21,7 +21,7 @@ export interface Define<State> {
    * import { define } from "../utils.ts";
    *
    * export const handler = define.handlers((ctx) => {
-   *   ctx.url; // ctx is inferred to be a FreshContext object, so this is a URL
+   *   ctx.url; // ctx is inferred to be a Context object, so this is a URL
    *   return new Response("Hello, world!");
    * });
    * ```
@@ -70,7 +70,7 @@ export interface Define<State> {
    * import { define } from "../utils.ts";
    *
    * export default define.page((props) => {
-   *   const slug = props.params.slug; // Because props is inferred to be a FreshContext object, slug is inferred to be a string
+   *   const slug = props.params.slug; // Because props is inferred to be a Context object, slug is inferred to be a string
    *   return <h1>{slug}</h1>;
    * });
    * ```
@@ -124,7 +124,7 @@ export interface Define<State> {
    * import { define } from "../utils.ts";
    *
    * export const middleware = define.middleware((ctx) => {
-   *   ctx.url; // ctx is inferred to be a FreshContext object, so this is a URL
+   *   ctx.url; // ctx is inferred to be a Context object, so this is a URL
    *   return ctx.next();
    * });
    * ```
diff --git a/src/handlers.ts b/src/handlers.ts
@@ -1,4 +1,4 @@
-import type { FreshContext } from "./context.ts";
+import type { Context } from "./context.ts";
 import type { Method } from "./router.ts";
 
 export interface PageResponse<T> {
@@ -106,7 +106,7 @@ export function isHandlerByMethod<D, S>(
 
 /**
  * A handler function that is invoked when a request is made to a route. The
- * handler function is passed a {@link FreshContext} object that contains the
+ * handler function is passed a {@link Context} object that contains the
  * original request object, as well as any state related to the current request.
  *
  * The handler function can either return a {@link Response} object, which will
@@ -191,7 +191,7 @@ export function isHandlerByMethod<D, S>(
  * ```
  */
 export interface HandlerFn<Data, State> {
-  (ctx: FreshContext<State>):
+  (ctx: Context<State>):
     | Response
     | PageResponse<Data>
     | Promise<Response | PageResponse<Data>>;
diff --git a/src/middlewares/cors.ts b/src/middlewares/cors.ts
@@ -34,8 +34,8 @@ export type CORSOptions<State> = {
 /**
  * CORS Middleware to set [`Cross-Origin-Resource-Sharing`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS) headers.
  *
- * @param {CORSOptions} [options] - The options for the CORS middleware.
- * @returns {(req: Request, ctx: FreshContext) => Promise<Response>} The Fresh middleware handler function.
+ * @param [options] - The options for the CORS middleware.
+ * @returns The Fresh middleware handler function.
  *
  * @example
  * ```ts
diff --git a/www/routes/_middleware.ts b/www/routes/_middleware.ts
@@ -1,14 +1,14 @@
-import type { FreshContext } from "fresh";
+import type { Context } from "fresh";
 import type { Event } from "$ga4";
 import { GA4Report, isDocument, isServerError } from "$ga4";
 
 const GA4_MEASUREMENT_ID = Deno.env.get("GA4_MEASUREMENT_ID");
 
 let showedMissingEnvWarning = false;
 
-function ga4(
+function ga4<T>(
   request: Request,
-  conn: FreshContext,
+  conn: Context<T>,
   response: Response,
   _start: number,
   error?: unknown,
@@ -87,8 +87,8 @@ function ga4(
   });
 }
 
-export async function handler(
-  ctx: FreshContext,
+export async function handler<T>(
+  ctx: Context<T>,
 ): Promise<Response> {
   let err;
   let res: Response;
diff --git a/www/routes/docs/_middleware.ts b/www/routes/docs/_middleware.ts
@@ -1,13 +1,11 @@
-import type { FreshContext } from "fresh";
+import type { Context } from "fresh";
 
 const REDIRECTS: Record<string, string> = {
   "/docs/getting-started/fetching-data":
     "/docs/getting-started/custom-handlers",
 };
 
-export async function handler(
-  ctx: FreshContext,
-) {
+export async function handler<T>(ctx: Context<T>) {
   // Redirect from old doc URLs to new ones
   const redirect = REDIRECTS[ctx.url.pathname];
   if (redirect) {

Original file line number	Diff line number	Diff line change
`@@ -34,8 +34,8 @@ export type CORSOptions<State> = {`
`34`	`34`	`/**`
`35`	`35`	* CORS Middleware to set [`Cross-Origin-Resource-Sharing`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS) headers.
`36`	`36`	`*`
`37`		`- * @param {CORSOptions} [options] - The options for the CORS middleware.`
`38`		`- * @returns {(req: Request, ctx: FreshContext) => Promise<Response>} The Fresh middleware handler function.`
	`37`	`+ * @param [options] - The options for the CORS middleware.`
	`38`	`+ * @returns The Fresh middleware handler function.`
`39`	`39`	`*`
`40`	`40`	`* @example`
`41`	`41`	* ```ts