Merge branch 'main' of https://github.com/wevm/framework

.changeset/nice-apples-bake.md

@@ -1,5 +1,6 @@
 ---
-"frog": patch
+"frog": minor
+"create-frog": minor
 ---
 
 Initial release.

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'

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'
 

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'
 

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'

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'

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'

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'

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'

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'

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()
 

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 && (
-        <a style={{ textDecoration: 'none' }} href={`${context.url}/dev`}>
-          open 𝒇𝒓𝒂𝒎𝒆 devtools
-        </a>
+      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 && (
+        <body
+          style={{
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'center',
+            minHeight: '100vh',
+            overflow: 'hidden',
+          }}
+        >
+          <a style={{ textDecoration: 'none' }} href={`${context.url}/dev`}>
+            open 𝒇𝒓𝒂𝒎𝒆 devtools
+          </a>
+        </body>
       )
 
       return c.render(
@@ -364,17 +383,7 @@ export class FrogBase<
               content={serializeJson(baseContext)}
             />
           </head>
-          <body
-            style={{
-              alignItems: 'center',
-              display: 'flex',
-              justifyContent: 'center',
-              minHeight: '100vh',
-              overflow: 'hidden',
-            }}
-          >
-            {content}
-          </body>
+          {body}
         </html>,
       )
     })

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",

templates/next/package.json

@@ -1,6 +1,5 @@
 {
   "name": "next",
-  "version": "0.1.0",
   "private": true,
   "type": "module",
   "scripts": {