feat: hono bff supports return custom res

.changeset/flat-years-thank.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/create-request': patch
+'@modern-js/plugin-bff': patch
+---
+
+feat: hono bff supports return custom res
+feat: hono bff 支持返回自定义响应

packages/cli/plugin-bff/src/utils/createHonoRoutes.ts

@@ -67,6 +67,9 @@ export const createHonoHandler = (handler: Handler) => {
           if (c.finalized) return;
 
           const result = await handler(input);
+          if (result instanceof Response) {
+            return result;
+          }
           return result && typeof result === 'object'
             ? c.json(result)
             : c.body(result);
@@ -95,6 +98,9 @@ export const createHonoHandler = (handler: Handler) => {
           }
 
           if (typeof body !== 'undefined') {
+            if (body instanceof Response) {
+              return body;
+            }
             return c.json(body);
           }
         } catch {

packages/server/create-request/src/handleRes.ts

@@ -36,6 +36,10 @@ const handleRes = async (res: Response | NodeResponse) => {
     return res.arrayBuffer();
   }
 
+  if (contentType?.includes('image/png')) {
+    return res;
+  }
+
   return res.text();
 };
 

tests/integration/bff-hono/api/index.ts

@@ -11,7 +11,6 @@ import {
   useHonoContext,
 } from '@modern-js/plugin-bff/hono';
 import { z } from 'zod';
-
 export default async () => {
   return {
     message: 'Hello Modern.js',
@@ -93,3 +92,23 @@ export const getHello = Api(
     };
   },
 );
+
+export const getImage = Api(Get('/hello/image'), async () => {
+  const validBase64 =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
+  const base64Data = validBase64.split(',')[1];
+  const binaryString = atob(base64Data);
+  const uint8Array = new Uint8Array(binaryString.length);
+
+  for (let i = 0; i < binaryString.length; i++) {
+    uint8Array[i] = binaryString.charCodeAt(i);
+  }
+
+  return new Response(uint8Array.buffer, {
+    status: 200,
+    headers: {
+      'Content-Type': 'image/png',
+      'Cache-Control': 'no-store',
+    },
+  });
+});

tests/integration/bff-hono/src/routes/base/page.tsx

@@ -1,24 +1,21 @@
-import hello, { post, postHello, getHello } from '@api/index';
-import { configure } from '@modern-js/runtime/bff';
+import hello, { post, postHello, getHello, getImage } from '@api/index';
 import { useEffect, useState } from 'react';
 
-configure({
-  interceptor(request) {
-    return async (url, params) => {
-      const res = await request(url, params);
-      return res.json();
-    };
-  },
-});
-
 const Page = () => {
   const [message, setMessage] = useState('bff-hono');
   const [username, setUsername] = useState('username');
+  const [imageUrl, setImageUrl] = useState('');
+
+  const fetchImage = async () => {
+    const response = await getImage();
+    const blob = await (response as any).blob();
+    const url = URL.createObjectURL(blob);
+    setImageUrl(url);
+  };
 
   useEffect(() => {
     const fetchData = async () => {
       const res = await hello();
-      // 加一个延时，帮助集测取第一次的 message 值
       await new Promise(resolve => setTimeout(resolve, 50));
       setMessage(res.message);
     };
@@ -44,6 +41,7 @@ const Page = () => {
         user: 'modern@email.com',
       },
     });
+    fetchImage();
   }, []);
 
   useEffect(() => {
@@ -65,6 +63,14 @@ const Page = () => {
     <div>
       <div className="hello">{message}</div>
       <div className="username">{username}</div>
+      <img
+        src={imageUrl}
+        alt=""
+        className="captcha-img"
+        onError={e => {
+          console.error('error', e);
+        }}
+      />
     </div>
   );
 };

tests/integration/bff-hono/tests/index.test.ts

@@ -75,6 +75,21 @@ describe('bff hono in dev', () => {
     expect(text).toBe('mock_image.png');
   });
 
+  test('custom res', async () => {
+    await page.goto(`${host}:${port}/${BASE_PAGE}`);
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    const imgElement = await page.$('.captcha-img');
+    expect(imgElement).not.toBeNull();
+
+    const isLoaded = await imgElement!.evaluate(
+      img =>
+        (img as HTMLImageElement).complete &&
+        (img as HTMLImageElement).naturalWidth > 0,
+    );
+    expect(isLoaded).toBe(true);
+  });
+
   afterAll(async () => {
     await killApp(app);
     await page.close();
@@ -141,6 +156,21 @@ describe('bff hono in prod', () => {
     expect(text).toBe('mock_image.png');
   });
 
+  test('custom res', async () => {
+    await page.goto(`${host}:${port}/${BASE_PAGE}`);
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    const imgElement = await page.$('.captcha-img');
+    expect(imgElement).not.toBeNull();
+
+    const isLoaded = await imgElement!.evaluate(
+      img =>
+        (img as HTMLImageElement).complete &&
+        (img as HTMLImageElement).naturalWidth > 0,
+    );
+    expect(isLoaded).toBe(true);
+  });
+
   afterAll(async () => {
     await killApp(app);
     await page.close();