From c9d4fa4dc2c4474f97deac2331e9d9e5c4bb6b77 Mon Sep 17 00:00:00 2001 From: "moxey.eth" Date: Wed, 28 Feb 2024 09:19:58 +1100 Subject: [PATCH 1/3] docs: fix --- site/pages/concepts/images-intents.mdx | 1 + site/pages/concepts/overview.mdx | 2 ++ site/pages/getting-started.mdx | 3 ++- site/pages/platforms/bun.mdx | 1 + site/pages/platforms/cloudflare-workers.mdx | 3 +++ site/pages/platforms/next.mdx | 3 +++ site/pages/platforms/node.mdx | 1 + site/pages/platforms/vercel.mdx | 3 +++ site/pages/reference/frog-frame-context.mdx | 4 ++++ site/pages/reference/frog-frame-response.mdx | 1 + 10 files changed, 21 insertions(+), 1 deletion(-) diff --git a/site/pages/concepts/images-intents.mdx b/site/pages/concepts/images-intents.mdx index d9dd568d..65bdbd44 100644 --- a/site/pages/concepts/images-intents.mdx +++ b/site/pages/concepts/images-intents.mdx @@ -17,6 +17,7 @@ Check out Vercel's [Open Graph Image Generation page](https://vercel.com/docs/fu In **Frog**, an **Image** can be rendered via the `image` return property: ```tsx twoslash [src/index.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' diff --git a/site/pages/concepts/overview.mdx b/site/pages/concepts/overview.mdx index 109acb67..b8864768 100644 --- a/site/pages/concepts/overview.mdx +++ b/site/pages/concepts/overview.mdx @@ -9,6 +9,7 @@ then the **Frog** (and Hono) API should seem familiar to you. At a high-level, the most basic **Frog** application looks like this: ```tsx twoslash [src/index.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' @@ -184,6 +185,7 @@ Farcaster Frames have two main UI components: an **Image**, and a set of **Inten We can represent this in the **Frog** API via the `image` and `intents` properties of the frame route: ```tsx twoslash [src/index.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ import { Button, Frog } from 'frog' diff --git a/site/pages/getting-started.mdx b/site/pages/getting-started.mdx index f4c41ae8..3ef6687c 100644 --- a/site/pages/getting-started.mdx +++ b/site/pages/getting-started.mdx @@ -92,7 +92,8 @@ bun i frog ```tsx twoslash [src/index.tsx] -/** @jsxImportSource frog/jsx */ +// @noErrors +/** @jsxImportSource hono/jsx */ // ---cut--- import { Button, Frog } from 'frog' diff --git a/site/pages/platforms/bun.mdx b/site/pages/platforms/bun.mdx index d8dc5df9..d28e0ec2 100644 --- a/site/pages/platforms/bun.mdx +++ b/site/pages/platforms/bun.mdx @@ -43,6 +43,7 @@ curl -fsSL https://bun.sh/install | bash Next, scaffold your frame: ```tsx twoslash [src/index.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' diff --git a/site/pages/platforms/cloudflare-workers.mdx b/site/pages/platforms/cloudflare-workers.mdx index 9b8c3224..12db935a 100644 --- a/site/pages/platforms/cloudflare-workers.mdx +++ b/site/pages/platforms/cloudflare-workers.mdx @@ -41,6 +41,7 @@ npm install wrangler --save-dev Next, scaffold your frame: ```tsx twoslash [src/index.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' @@ -83,6 +84,7 @@ It is recommended to use your own Hub API URL in production. After that, we export our app via the `default` export. ```tsx twoslash [src/index.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' @@ -166,6 +168,7 @@ they will be redirected to the `/foo` path. [Read more on Browser Redirects](/concepts/browser-redirects) ```tsx twoslash [src/index.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' diff --git a/site/pages/platforms/next.mdx b/site/pages/platforms/next.mdx index d42c6413..70730053 100644 --- a/site/pages/platforms/next.mdx +++ b/site/pages/platforms/next.mdx @@ -41,6 +41,7 @@ npm install next@latest react@latest react-dom@latest vercel@latest Next, scaffold your frame: ```tsx twoslash [app/api/[[...routes]]/route.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog, TextInput } from 'frog' @@ -84,6 +85,7 @@ It is recommended to use your own Hub API URL in production. After that, we will add handlers to handle requests in the `api/` route: ```tsx twoslash [app/api/[[...routes]]/route.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog, TextInput } from 'frog' @@ -177,6 +179,7 @@ they will be redirected to the `/foo` path (ie. `/app/foo/page.tsx` in your Next [Read more on Browser Redirects](/concepts/browser-redirects) ```tsx twoslash [app/api/[[...routes]]/route.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog, TextInput } from 'frog' diff --git a/site/pages/platforms/node.mdx b/site/pages/platforms/node.mdx index a8a90a1e..81993689 100644 --- a/site/pages/platforms/node.mdx +++ b/site/pages/platforms/node.mdx @@ -33,6 +33,7 @@ bunx create-frog -t node Next, scaffold your frame: ```tsx twoslash [src/index.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' diff --git a/site/pages/platforms/vercel.mdx b/site/pages/platforms/vercel.mdx index aef8deaf..8d919e3b 100644 --- a/site/pages/platforms/vercel.mdx +++ b/site/pages/platforms/vercel.mdx @@ -39,6 +39,7 @@ npm install vercel --save-dev Next, scaffold your frame: ```tsx twoslash [src/index.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' @@ -87,6 +88,7 @@ It is recommended to use your own Hub API URL in production. After that, we will append Vercel handlers to the file. ```tsx twoslash [src/index.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' @@ -177,6 +179,7 @@ they will be redirected to the `/` path. [Read more on Browser Redirects](/concepts/browser-redirects) ```tsx twoslash [src/index.tsx] +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' diff --git a/site/pages/reference/frog-frame-context.mdx b/site/pages/reference/frog-frame-context.mdx index ba4a377b..d4956b78 100644 --- a/site/pages/reference/frog-frame-context.mdx +++ b/site/pages/reference/frog-frame-context.mdx @@ -86,6 +86,7 @@ Derives new state from the state of the previous frame. Internally uses [Immers's `produce` function](https://immerjs.github.io/immer/produce/) to create a draft of the state, and then applies the changes to the state. ```tsx twoslash +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' @@ -172,6 +173,7 @@ The value of the input that was previously interacted with. For example, if the user typed `"Banana"`, then `inputText` will be `"Banana"`. ```tsx twoslash +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog, TextInput } from 'frog' @@ -201,6 +203,7 @@ app.frame('/', (c) => { The data of the previous intents. ```tsx twoslash +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' @@ -247,6 +250,7 @@ app.frame('/result', (c) => { // [!code focus] The state of the previous frame. ```tsx twoslash +// @noErrors /** @jsxImportSource frog/jsx */ // ---cut--- import { Button, Frog } from 'frog' diff --git a/site/pages/reference/frog-frame-response.mdx b/site/pages/reference/frog-frame-response.mdx index 396621f3..e11389f6 100644 --- a/site/pages/reference/frog-frame-response.mdx +++ b/site/pages/reference/frog-frame-response.mdx @@ -274,6 +274,7 @@ Title of the frame (added as `og:title`). ```tsx twoslash /** @jsxImportSource frog/jsx */ +import { Button, Frog } from 'frog' // ---cut--- export const app = new Frog() From 9dbc60096d64e790fc95f01d4c2e371f6c0b971c Mon Sep 17 00:00:00 2001 From: "moxey.eth" Date: Wed, 28 Feb 2024 09:29:32 +1100 Subject: [PATCH 2/3] chore: versions --- .changeset/nice-apples-bake.md | 3 ++- src/package.json | 2 +- templates/next/package.json | 1 - 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/nice-apples-bake.md b/.changeset/nice-apples-bake.md index d95a541d..776193d4 100644 --- a/.changeset/nice-apples-bake.md +++ b/.changeset/nice-apples-bake.md @@ -1,5 +1,6 @@ --- -"frog": patch +"frog": minor +"create-frog": minor --- Initial release. diff --git a/src/package.json b/src/package.json index b2758e78..6cdfe07c 100644 --- a/src/package.json +++ b/src/package.json @@ -1,6 +1,6 @@ { "name": "frog", - "version": "1.0.0-alpha.0", + "version": "0.1.0", "type": "module", "module": "_lib/index.js", "types": "_lib/index.d.ts", diff --git a/templates/next/package.json b/templates/next/package.json index 232ac2e3..ac14e45c 100644 --- a/templates/next/package.json +++ b/templates/next/package.json @@ -1,6 +1,5 @@ { "name": "next", - "version": "0.1.0", "private": true, "type": "module", "scripts": { From 3443f8a4ad46a9d7280fa4e2dc849340a043706b Mon Sep 17 00:00:00 2001 From: "moxey.eth" Date: Wed, 28 Feb 2024 10:57:28 +1100 Subject: [PATCH 3/3] tweak: check if /dev exists in routes --- src/frog-base.tsx | 41 +++++++++++++++++++++++++---------------- 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/src/frog-base.tsx b/src/frog-base.tsx index 21292ba1..d69f4a06 100644 --- a/src/frog-base.tsx +++ b/src/frog-base.tsx @@ -328,11 +328,30 @@ export class FrogBase< for (const [key, value] of Object.entries(headers ?? {})) c.header(key, value) - const isDevEnabled = this.dev?.enabled ?? true - const content = isDevEnabled && ( - - open 𝒇𝒓𝒂𝒎𝒆 devtools - + const isDevEnabled = + // check if devtools are enabled on constructor. + (this.dev?.enabled ?? true) && + // check if route has `/dev` path. + this.hono.routes.some((r) => { + if (!r.path.startsWith(this.basePath + parsePath(path))) return false + if (!r.path.includes('/dev')) return false + return true + }) + + const body = isDevEnabled && ( + + + open 𝒇𝒓𝒂𝒎𝒆 devtools + + ) return c.render( @@ -364,17 +383,7 @@ export class FrogBase< content={serializeJson(baseContext)} /> - - {content} - + {body} , ) })