docs: fix cloudflare workers guide

.changeset/silly-files-cheat.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+fix: add missing parts to cf workers guide

docs/pages/reference/core/cloudflare-workers/index.mdx

@@ -69,37 +69,46 @@ After you have overridden the `@vercel/og` package with `workers-og`, you can in
 :::code-group
 
 ```bash [npm]
-npm install frames.js
+npm install frames.js react
 ```
 
 ```bash [yarn]
-yarn add frames.js
+yarn add frames.js react
 ```
 
 ```bash [pnpm]
-pnpm add frames.js
+pnpm add frames.js react
 ```
 
 :::
 ::::
 
 ## Write your Frames handler
 
-Open the `src/index.ts` file and replace its content with the following code.
+::::steps
+
+### Delete generated file
+
+Delete the `src/index.ts` file that was generated by `wrangler`.
+
+### Create a file with your Frames app handler
+
+Create `src/index.tsx` file and paste the following code inside.
 
-```tsx
+```tsx [src/index.tsx]
 import { createFrames, Button } from "frames.js/cloudflare-workers";
 
 const frames = createFrames();
-const handleRequest = frames(async (ctx) => {
-  const hasClicked = !!(ctx.message && ctx.searchParams.clicked);
+
+const fetch = frames(async ({ message, searchParams }) => {
+  const hasClicked = !!(message && searchParams.clicked);
 
   return {
-    image: <span>Clicked: {hasClicked ? "Yes" : "No"}</span>,
-    buttons: hasClicked
+    image: <span>{hasClicked ? `Clicked ✅` : `Clicked ❌`}</span>,a
+    buttons: !hasClicked
       ? [
           <Button action="post" target={{ query: { clicked: true } }}>
-            Click me
+            Click Me
           </Button>,
         ]
       : [
@@ -111,10 +120,32 @@ const handleRequest = frames(async (ctx) => {
 });
 
 export default {
-  fetch: handleRequest,
-};
+  fetch,
+} satisfies ExportedHandler;
 ```
 
+### Configure Typescript to use React jsx runtime
+
+Open `tsconfig.json` and change the value of `compilerOptions.tsx` to `react-jsx`.
+
+```json [tsconfig.json]
+{
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}
+```
+
+### Change the entrypoint for your Frames handler
+
+Open `wrangler.toml` and change the value of `main` to `src/index.tsx`.
+
+```toml [wrangler.toml]
+main = "src/index.tsx"
+```
+
+::::
+
 ## Develop and test locally
 
 You can test your Cloudflare Worker locally using `wrangler dev` and our [debugger](/guides/debugger#local-debugger-cli). Follow these steps to start developing locally: