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 (