Skip to content

Commit a5205b2

Browse files
knotbinknotbin
authored
docs: add correct ctx.state example to init and docs (#3147)
- Correct outdated, non-functional and confusing "Removal of <Head> component" section of migration guide in the docs to be real functional code that uses Fresh 2 and define helpers correctly - Added example of ctx.state being used for a head component (title) because it's something almost every single project will need to know how to do. - Small change to define docs use of define.page to be more in line with its use commonly - Removed mention of deno-puppeteer - a non-official repository that hasn't been updated in three years - needing to be installed from `CONTRIBUTING.md`
1 parent b7f1abb commit a5205b2

3 files changed

Lines changed: 39 additions & 26 deletions

File tree

‎.github/CONTRIBUTING.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,4 @@
22

33
## Submitting a pull request
44

5-
First, please be sure to
6-
[install Puppeteer](https://github.com/lucacasonato/deno-puppeteer#installation).
7-
Then, please ensure `deno task ok` is run and successfully passes.
5+
First, please be sure to ensure `deno task ok` is run and successfully passes.

‎docs/canary/examples/migration-guide.md‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -128,33 +128,44 @@ The `<Head>` component was used in Fresh 1.x to add additional tags to the
128128
removed in preparation and due to performance concerns as it required a complex
129129
machinery in the background to work.
130130

131-
Instead, passing head-related data is best done via `ctx.state`
132-
133-
```tsx routes/about.tsx
134-
export const handler = {
135-
GET(ctx) {
136-
// Set a route specific data in a handler
137-
ctx.state.title = "About Me";
138-
return page();
139-
},
140-
};
141-
```
131+
Instead, passing head-related data is best done via `ctx.state`, which can be
132+
easily set through the [define helper](/docs/canary/advanced/define).
133+
134+
```tsx
135+
// utils.ts
136+
export interface State {
137+
title?: string;
138+
}
139+
export const define = createDefine<State>();
140+
141+
// routes/about.tsx
142+
import { define } from "../utils.ts";
143+
144+
export default define.page(function AboutPage(ctx) {
145+
// Set a route specific data in a handler
146+
ctx.state.title = "About Me";
147+
return (
148+
<div>
149+
<h1>About Me</h1>
150+
</div>
151+
);
152+
});
142153

143-
```tsx routes/_app.tsx
144-
export default function AppWrapper(ctx: Context) {
154+
// Render that in _app.tsx
155+
export default define.page(function App({ Component, state }) {
145156
return (
146157
<html lang="en">
147158
<head>
148159
<meta charset="utf-8" />
149160
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
150-
{ctx.state.title ? <title>{ctx.state.title}</title> : null}
161+
{state.title ? <title>{state.title}</title> : null}
151162
</head>
152163
<body>
153-
<ctx.Component />
164+
<Component />
154165
</body>
155166
</html>
156167
);
157-
}
168+
});
158169
```
159170

160171
## Update deployment settings

‎init/src/init.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -400,8 +400,9 @@ export function Button(props: ButtonProps) {
400400

401401
const UTILS_TS = `import { createDefine } from "fresh";
402402
403-
// deno-lint-ignore no-empty-interface
404-
export interface State {}
403+
export interface State {
404+
title: string;
405+
}
405406
406407
export const define = createDefine<State>();`;
407408
await writeFile("utils.ts", UTILS_TS);
@@ -410,9 +411,12 @@ export const define = createDefine<State>();`;
410411
import { define } from "../utils.ts";
411412
import Counter from "../islands/Counter.tsx";
412413
413-
export default define.page(function Home() {
414+
export default define.page(function Home(ctx) {
414415
const count = useSignal(3);
415416
417+
ctx.state.title = count.value + " Fresh Counter" +
418+
(Math.abs(count.value) === 1 ? "" : "s");
419+
416420
return (
417421
<div class="px-4 py-8 mx-auto fresh-gradient min-h-screen">
418422
<div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
@@ -435,23 +439,23 @@ export default define.page(function Home() {
435439
});`;
436440
await writeFile("routes/index.tsx", ROUTES_HOME);
437441

438-
const APP_WRAPPER = `import type { PageProps } from "fresh";
442+
const APP_WRAPPER = `import { define } from "../utils.ts";
439443
440-
export default function App({ Component }: PageProps) {
444+
export default define.page(function App({ Component, state }) {
441445
return (
442446
<html>
443447
<head>
444448
<meta charset="utf-8" />
445449
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
446-
<title>${path.basename(projectDir)}</title>
450+
<title>{state.title ?? "${path.basename(projectDir)}"}</title>
447451
<link rel="stylesheet" href="/styles.css" />
448452
</head>
449453
<body>
450454
<Component />
451455
</body>
452456
</html>
453457
);
454-
}`;
458+
});`;
455459
await writeFile("routes/_app.tsx", APP_WRAPPER);
456460

457461
const API_NAME = `import { define } from "../../utils.ts";

0 commit comments

Comments
 (0)