fix: .image handler rendering image without context (#364)

* fix: `.image` handler rendering image without context

As a consequence, `Divider` element and others did not receive
`__context` which is injected in `parseImage`.

* revert: "fix: `__context` not passed to some components (#345)"

This reverts commit c2f4d56.

* chore: changesets

.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.

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: [
+        <Button action="/columns">←</Button>,
+        <Button action="/hstack">→</Button>,
+      ],
+    })
+  })
+  .image('/divider-with-image-handler/img', (c) => {
+    return c.res({
+      image: (
+        <Box backgroundColor="background" grow padding="24">
+          <VStack gap="4" grow>
+            <Heading>{'<Divider>'}</Heading>
+            <Spacer size="16" />
+            <Box backgroundColor="background200" grow padding="16">
+              <Box backgroundColor="red" />
+              <Columns gap="8" grow>
+                <Column backgroundColor="red" width="1/2" />
+                <Divider />
+                <Rows gap="8" grow>
+                  <Row backgroundColor="red" height="1/3" />
+                  <Divider />
+                  <Row backgroundColor="red" height="2/3" padding="16">
+                    <VStack height="100%" gap="16">
+                      <Box backgroundColor="blue" width="100%" height="18" />
+                      <Divider />
+                      <Box backgroundColor="blue" width="100%" height="18" />
+                    </VStack>
+                  </Row>
+                </Rows>
+              </Columns>
+            </Box>
+          </VStack>
+        </Box>
+      ),
+    })
+  })
   .frame('/heading', (c) => {
     return c.res({
       image: (

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<env, string>({
         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(
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%',
+              width: '100%',
+            }}
+          >
+            {await image}
+          </div>,
+          {
+            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

src/ui/Divider.tsx

@@ -27,7 +27,6 @@ export function Divider<vars extends Vars = DefaultVars>(
     resolvedDirection === 'horizontal' ? horizontalProps : verticalProps
   return (
     <Box
-      __context={__context}
       backgroundColor={color ?? { custom: 'rgba(255,255,255,0.5)' }}
       {...resolvedProps}
     />

src/ui/Image.tsx

@@ -24,8 +24,6 @@ export type ImageProps<vars extends Vars = DefaultVars> = {
 
 export function Image<vars extends Vars>(props: ImageProps<vars>) {
   const {
-    // @ts-ignore - private
-    __context,
     borderRadius,
     borderBottomLeftRadius,
     borderBottomRightRadius,
@@ -38,7 +36,6 @@ export function Image<vars extends Vars>(props: ImageProps<vars>) {
   } = props
   return (
     <Box
-      __context={__context}
       borderRadius={borderRadius}
       borderBottomLeftRadius={borderBottomLeftRadius}
       borderBottomRightRadius={borderBottomRightRadius}

src/ui/Spacer.tsx

@@ -6,17 +6,6 @@ export type SpacerProps<vars extends Vars = DefaultVars> = {
   size?: VariableValue<'width', keyof vars['units']>
 }
 
-export function Spacer<vars extends Vars>({
-  // @ts-ignore - private
-  __context,
-  size,
-}: SpacerProps<vars>) {
-  return (
-    <Box
-      __context={__context}
-      grow={size ? undefined : true}
-      height={size}
-      width={size}
-    />
-  )
+export function Spacer<vars extends Vars>({ size }: SpacerProps<vars>) {
+  return <Box grow={size ? undefined : true} height={size} width={size} />
 }

src/ui/Text.tsx

@@ -39,8 +39,6 @@ const alignToAlignItems = {
 } as const
 
 export function Text<vars extends Vars>({
-  // @ts-ignore - private
-  __context,
   align,
   children,
   color,
@@ -57,7 +55,6 @@ export function Text<vars extends Vars>({
 }: TextProps<vars>) {
   return (
     <Box
-      __context={__context}
       alignItems={align ? (alignToAlignItems as any)[align] : undefined}
       color={color}
       fontFamily={font}