From 6f59dc62989643677a1854839d9e48dbf41c0d32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kvasnic=CC=8Ca=CC=81k?=
 <michal.kvasnicak@gmail.com>
Date: Wed, 27 Mar 2024 15:41:15 +0100
Subject: [PATCH 1/2] docs: fix cloudflare workers guide

---
 .../core/cloudflare-workers/index.mdx         | 55 +++++++++++++++----
 1 file changed, 43 insertions(+), 12 deletions(-)

diff --git a/docs/pages/reference/core/cloudflare-workers/index.mdx b/docs/pages/reference/core/cloudflare-workers/index.mdx
index 3cec8f14f..6bda2347e 100644
--- a/docs/pages/reference/core/cloudflare-workers/index.mdx
+++ b/docs/pages/reference/core/cloudflare-workers/index.mdx
@@ -69,15 +69,15 @@ 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
 ```
 
 :::
@@ -85,21 +85,30 @@ pnpm add frames.js
 
 ## 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:

From f16561eb2e32e4024a041be4fdf73405e1281459 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kvasnic=CC=8Ca=CC=81k?=
 <michal.kvasnicak@gmail.com>
Date: Wed, 27 Mar 2024 15:42:18 +0100
Subject: [PATCH 2/2] chore: changset

---
 .changeset/silly-files-cheat.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/silly-files-cheat.md

diff --git a/.changeset/silly-files-cheat.md b/.changeset/silly-files-cheat.md
new file mode 100644
index 000000000..f46e9db5a
--- /dev/null
+++ b/.changeset/silly-files-cheat.md
@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+fix: add missing parts to cf workers guide