diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 352f51b3..0db7ee0b 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -24,7 +24,7 @@ export function ButtonRoot({
// @ts-ignore - private
index = 1,
value,
-}: ButtonRootProps) {
+}: ButtonRootProps): JSX.Element {
return [
}
diff --git a/src/frog-base.tsx b/src/frog-base.tsx
index 63a52c23..7ef01be3 100644
--- a/src/frog-base.tsx
+++ b/src/frog-base.tsx
@@ -384,6 +384,10 @@ export class FrogBase<
return c.redirect(location, 302)
}
+ const renderAsHTML =
+ c.req.header('Accept') === 'text/html' ||
+ c.req.query('accept') === 'text/html'
+
// If the user is coming from a browser, and a `browserLocation` is set,
// then we will redirect the user to that location.
const browser = detect(c.req.header('user-agent'))
@@ -392,7 +396,7 @@ export class FrogBase<
basePath: this.basePath,
path,
})
- if (browser?.name && browserLocation_)
+ if (!renderAsHTML && browser?.name && browserLocation_)
return c.redirect(
browserLocation_.startsWith('http')
? browserLocation_
@@ -502,9 +506,6 @@ export class FrogBase<
for (const [key, value] of Object.entries(headers ?? {}))
c.header(key, value)
- const renderAsHTML =
- c.req.header('Accept') === 'text/html' ||
- c.req.query('accept') === 'text/html'
if (renderAsHTML) {
const height = imageOptions?.height ?? 630
const width = imageOptions?.width ?? 1200
diff --git a/src/index.ts b/src/index.ts
index a536f4e0..dc8a3da8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -30,6 +30,7 @@ export type { Env } from './types/env.js'
export type {
FrameResponse,
FrameIntent,
+ /** @deprecated Use `FrameIntent[]` instead. */
FrameIntents,
} from './types/frame.js'
export type { HandlerResponse, TypedResponse } from './types/response.js'
diff --git a/src/types/frame.ts b/src/types/frame.ts
index 1015438f..4ae80e30 100644
--- a/src/types/frame.ts
+++ b/src/types/frame.ts
@@ -118,7 +118,7 @@ export type FrameResponse = {
* ,
* ]
*/
- intents?: FrameIntents | undefined
+ intents?: FrameIntent | FrameIntent[] | undefined
/**
* Title of the frame (added as `og:title`).
*
@@ -149,7 +149,8 @@ export type FrameImageAspectRatio = '1.91:1' | '1:1'
export type FrameVersion = 'vNext'
-export type FrameIntent = JSX.Element | false | null | undefined
+export type FrameIntent = JSX.Element | JSX.Element[] | false | null | undefined
+/** @deprecated */
export type FrameIntents = FrameIntent | FrameIntent[]
export type FrameButtonValue = string
diff --git a/src/ui/Box.tsx b/src/ui/Box.tsx
index 6894eb2e..1ddb0643 100644
--- a/src/ui/Box.tsx
+++ b/src/ui/Box.tsx
@@ -1,6 +1,9 @@
-import type { Child } from 'hono/jsx'
-
-import type { Direction, SatoriStyleProperties, ValueOf } from './types.js'
+import type {
+ Child,
+ Direction,
+ SatoriStyleProperties,
+ ValueOf,
+} from './types.js'
import { type DefaultVars, type Vars, defaultVars } from './vars.js'
export type VariableValue =
diff --git a/src/ui/Text.tsx b/src/ui/Text.tsx
index b2ec2c1a..40c721e3 100644
--- a/src/ui/Text.tsx
+++ b/src/ui/Text.tsx
@@ -1,10 +1,11 @@
-import type { Child } from 'hono/jsx'
import { Box, type BoxProps } from './Box.js'
+import type { Child } from './types.js'
import type { DefaultVars, Vars } from './vars.js'
export type TextProps = {
/** Sets the horizontal alignment of the text. */
align?: BoxProps['textAlign']
+ /** The text content. */
children: Child
/** Sets the color of the text. */
color?: BoxProps['color']
diff --git a/src/ui/types.ts b/src/ui/types.ts
index 29bf4c3b..a41b1924 100644
--- a/src/ui/types.ts
+++ b/src/ui/types.ts
@@ -1,5 +1,7 @@
import type { Properties } from 'csstype'
+export type Child = import('hono/jsx').Child | JSX.Element
+
export type SatoriStyleProperties = Pick<
Properties,
| 'alignContent'
diff --git a/src/utils/parseImage.ts b/src/utils/parseImage.ts
index 9147d276..451d7745 100644
--- a/src/utils/parseImage.ts
+++ b/src/utils/parseImage.ts
@@ -1,7 +1,7 @@
-import type { Child, JSXNode } from 'hono/jsx'
+import type { JSXNode } from 'hono/jsx'
import type { Frog } from '../frog.js'
-import type { Direction } from '../ui/types.js'
+import type { Child, Direction } from '../ui/types.js'
import { parsePath } from './parsePath.js'
export async function parseImage(
diff --git a/src/utils/parseIntents.ts b/src/utils/parseIntents.ts
index c43e7fb2..44ba374d 100644
--- a/src/utils/parseIntents.ts
+++ b/src/utils/parseIntents.ts
@@ -1,7 +1,7 @@
import { type JSXNode } from 'hono/jsx'
import { buttonPrefix } from '../components/Button.js'
-import { type FrameIntents } from '../types/frame.js'
+import { type FrameIntent } from '../types/frame.js'
import { parsePath } from './parsePath.js'
type Counter = { button: number }
@@ -12,7 +12,7 @@ type ParseIntentsOptions = {
}
export function parseIntents(
- intents_: FrameIntents | undefined,
+ intents_: FrameIntent | FrameIntent[] | undefined,
options: ParseIntentsOptions = {},
counter: Counter = { button: 1 },
): JSXNode[] {