diff --git a/.changeset/soft-pandas-deliver.md b/.changeset/soft-pandas-deliver.md new file mode 100644 index 00000000..2ad26662 --- /dev/null +++ b/.changeset/soft-pandas-deliver.md @@ -0,0 +1,5 @@ +--- +"frog": patch +--- + +Fixed an issue with `.image` handler not recieving correct `__context` which is normally injected in `parseImage` function that wasn't previously used in Image rendering. As a consequence, https://github.com/wevm/frog/commit/c2f4d563b4633b0ef87a3132db571659700ce84d as an attempt to fix `__context` not being passed to components is no longer relevant, thus reverted. diff --git a/playground/src/ui-system.tsx b/playground/src/ui-system.tsx index c6b75aa5..e48a1534 100644 --- a/playground/src/ui-system.tsx +++ b/playground/src/ui-system.tsx @@ -114,6 +114,45 @@ export const app = new Frog({ ], }) }) + .frame('/divider-with-image-handler', (c) => { + return c.res({ + image: '/divider-with-image-handler/img', + intents: [ + , + , + ], + }) + }) + .image('/divider-with-image-handler/img', (c) => { + return c.res({ + image: ( + + + {''} + + + + + + + + + + + + + + + + + + + + + + ), + }) + }) .frame('/heading', (c) => { return c.res({ image: ( diff --git a/src/frog-base.tsx b/src/frog-base.tsx index baf9f287..34a53a64 100644 --- a/src/frog-base.tsx +++ b/src/frog-base.tsx @@ -879,6 +879,10 @@ export class FrogBase< ) this.hono.get(path, ...middlewares, async (c) => { + const url = getRequestUrl(c.req) + const origin = this.origin ?? url.origin + const assetsUrl = origin + parsePath(this.assetsPath) + const { context } = getImageContext({ context: c, }) @@ -909,14 +913,41 @@ export class FrogBase< image, imageOptions = defaultImageOptions, } = response.data - return new ImageResponse(image, { - width: 1200, - height: 630, - ...imageOptions, - format: imageOptions?.format ?? 'png', - fonts: await parseFonts(fonts), - headers: imageOptions?.headers ?? headers, - }) + return new ImageResponse( + (await parseImage( +
+ {await image} +
, + { + assetsUrl, + ui: { + ...this.ui, + vars: { + ...this.ui?.vars, + frame: { + height: imageOptions?.height!, + width: imageOptions?.width!, + }, + }, + }, + }, + )) as any, + { + width: 1200, + height: 630, + ...imageOptions, + format: imageOptions?.format ?? 'png', + fonts: await parseFonts(fonts), + headers: imageOptions?.headers ?? headers, + }, + ) }) return this diff --git a/src/ui/Divider.tsx b/src/ui/Divider.tsx index 5822b413..9e8b962f 100644 --- a/src/ui/Divider.tsx +++ b/src/ui/Divider.tsx @@ -27,7 +27,6 @@ export function Divider( resolvedDirection === 'horizontal' ? horizontalProps : verticalProps return ( diff --git a/src/ui/Image.tsx b/src/ui/Image.tsx index 21aabd28..bba7a597 100644 --- a/src/ui/Image.tsx +++ b/src/ui/Image.tsx @@ -24,8 +24,6 @@ export type ImageProps = { export function Image(props: ImageProps) { const { - // @ts-ignore - private - __context, borderRadius, borderBottomLeftRadius, borderBottomRightRadius, @@ -38,7 +36,6 @@ export function Image(props: ImageProps) { } = props return ( = { size?: VariableValue<'width', keyof vars['units']> } -export function Spacer({ - // @ts-ignore - private - __context, - size, -}: SpacerProps) { - return ( - - ) +export function Spacer({ size }: SpacerProps) { + return } diff --git a/src/ui/Text.tsx b/src/ui/Text.tsx index 5f2f334c..5329c3d3 100644 --- a/src/ui/Text.tsx +++ b/src/ui/Text.tsx @@ -39,8 +39,6 @@ const alignToAlignItems = { } as const export function Text({ - // @ts-ignore - private - __context, align, children, color, @@ -57,7 +55,6 @@ export function Text({ }: TextProps) { return (