fix: .image handler rendering image without context

As a consequence, `Divider` element and others did not receive `__context` which is injected in `parseImage`.
wevm · Jun 16, 2024 · 2f7d0bb · 2f7d0bb
1 parent 48dc453
commit 2f7d0bb
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 8 deletions.
diff --git 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: [
+        <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: (

diff --git 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<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