feat: cross-frames

wevm · Feb 9, 2024 · 802326c · 802326c
1 parent b5f2a94
commit 802326c
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 12 deletions.
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -10,6 +10,7 @@ app.frame('/', (context) => {
   const { buttonValue, inputText, status } = context
   const fruit = inputText || buttonValue
   return {
+    action: '/action',
     image: (
       <div
         style={{
@@ -56,6 +57,34 @@ app.frame('/', (context) => {
   }
 })
 
+app.frame('/action', ({ buttonValue, inputText }) => {
+  const fruit = inputText || buttonValue || ''
+  return {
+    action: '/',
+    image: (
+      <div
+        style={{
+          backgroundColor: 'red',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 60,
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        Yuck! {fruit}! Enter another one.
+      </div>
+    ),
+    intents: [
+      <Button value="watermelon">Watermelon</Button>,
+      <Button value="mango">Mango</Button>,
+      <Button value="pear">Pear</Button>,
+      <Button.Reset>Reset</Button.Reset>,
+    ],
+  }
+})
+
 app.frame('/buttons', ({ buttonValue }) => {
   return {
     image: (

diff --git a/src/farc.tsx b/src/farc.tsx
@@ -22,10 +22,12 @@ import {
 import { deserializeJson } from './utils/deserializeJson.js'
 import { getFrameContext } from './utils/getFrameContext.js'
 import { parseIntents } from './utils/parseIntents.js'
+import { parsePath } from './utils/parsePath.js'
 import { serializeJson } from './utils/serializeJson.js'
 import { toBaseUrl } from './utils/toBaseUrl.js'
 
 export type FrameHandlerReturnType = {
+  action?: string
   image: JSX.Element
   imageAspectRatio?: FrameImageAspectRatio | undefined
   intents?: FrameIntents | undefined
@@ -51,7 +53,7 @@ export class Farc<
         : undefined
       const context = await getFrameContext(c, previousContext)
 
-      const { imageAspectRatio, intents } = await handler(
+      const { action, imageAspectRatio, intents } = await handler(
         context,
         previousContext,
       )
@@ -72,25 +74,28 @@ export class Farc<
       if (serializedPreviousContext)
         postSearch.set('previousContext', serializedPreviousContext)
 
+      if (context.url !== parsePath(c.req.url)) return c.redirect(context.url)
       return c.render(
         <html lang="en">
           <head>
             <meta property="fc:frame" content="vNext" />
             <meta
               property="fc:frame:image"
-              content={`${toBaseUrl(context.url)}/image?${ogSearch.toString()}`}
+              content={`${parsePath(context.url)}/image?${ogSearch.toString()}`}
             />
             <meta
               property="fc:frame:image:aspect_ratio"
               content={imageAspectRatio ?? '1.91:1'}
             />
             <meta
               property="og:image"
-              content={`${toBaseUrl(context.url)}/image?${ogSearch.toString()}`}
+              content={`${parsePath(context.url)}/image?${ogSearch.toString()}`}
             />
             <meta
               property="fc:frame:post_url"
-              content={`${toBaseUrl(context.url)}?${postSearch}`}
+              content={`${
+                action ? toBaseUrl(c.req.url) + (action || '') : context.url
+              }?${postSearch}`}
             />
             {parsedIntents}
 
@@ -107,7 +112,7 @@ export class Farc<
     })
 
     // OG Image Route
-    this.get(`${toBaseUrl(path)}/image`, async (c) => {
+    this.get(`${parsePath(path)}/image`, async (c) => {
       const query = c.req.query()
       const parsedContext = deserializeJson<FrameContext>(query.context)
       const parsedPreviousContext = query.previousContext
@@ -122,7 +127,7 @@ export class Farc<
 
     // Frame Preview Routes
     this.use(
-      `${toBaseUrl(path)}/preview`,
+      `${parsePath(path)}/preview`,
       jsxRenderer(
         (props) => {
           const { children } = props

diff --git a/src/types.ts b/src/types.ts
@@ -6,6 +6,7 @@ import { type JSXNode } from 'hono/jsx'
 export type FrameContext<P extends string = string> = {
   buttonIndex?: number
   buttonValue?: string
+  initialUrl: string
   inputText?: string
   request: Context<Env, P>['req']
   /**

diff --git a/src/utils/getFrameContext.ts b/src/utils/getFrameContext.ts
@@ -2,7 +2,7 @@ import { type Context } from 'hono'
 
 import { type FrameContext, type PreviousFrameContext } from '../types.js'
 import { getIntentState } from './getIntentState.js'
-import { toBaseUrl } from './toBaseUrl.js'
+import { parsePath } from './parsePath.js'
 
 export async function getFrameContext(
   ctx: Context,
@@ -24,14 +24,24 @@ export async function getFrameContext(
     return 'initial'
   })()
 
+  // If there are no previous contexts, the initial URL is the current URL.
+  const initialUrl = !previousFrameContext
+    ? parsePath(req.url)
+    : previousFrameContext.initialUrl
+
+  // If the user has clicked a reset button, we want to set the URL back to the
+  // initial URL.
+  const url = reset ? initialUrl : parsePath(req.url)
+
   return {
     buttonIndex,
     buttonValue,
+    initialUrl,
     inputText,
     request: req,
     status,
     trustedData,
     untrustedData,
-    url: toBaseUrl(req.url),
+    url,
   }
 }
diff --git a/src/utils/parsePath.ts b/src/utils/parsePath.ts
@@ -0,0 +1,5 @@
+export function parsePath(path_: string) {
+  let path = path_.split('?')[0]
+  if (path.endsWith('/')) path = path.slice(0, -1)
+  return path
+}
diff --git a/src/utils/toBaseUrl.ts b/src/utils/toBaseUrl.ts
@@ -1,5 +1,3 @@
-export function toBaseUrl(path_: string) {
-  let path = path_.split('?')[0]
-  if (path.endsWith('/')) path = path.slice(0, -1)
-  return path
+export function toBaseUrl(url: string) {
+  return new URL(url).origin
 }