From ba644d4c0014071650bd808d8010f7945cb570b3 Mon Sep 17 00:00:00 2001
From: Arkadii Shvartsman <yukimurachris@gmail.com>
Date: Sun, 19 May 2024 06:41:04 +0200
Subject: [PATCH] fix(hono-jsx): make ref unrequried for forward ref (#2715)

* make ref unrequried for forward ref

* make ref unrequried for forward ref
---
 deno_dist/jsx/hooks/index.ts | 4 ++--
 src/jsx/hooks/dom.test.tsx   | 8 ++++++++
 src/jsx/hooks/index.ts       | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/deno_dist/jsx/hooks/index.ts b/deno_dist/jsx/hooks/index.ts
index 93e63b22e..59df5e344 100644
--- a/deno_dist/jsx/hooks/index.ts
+++ b/deno_dist/jsx/hooks/index.ts
@@ -370,8 +370,8 @@ export const createRef = <T>(): RefObject<T> => {
 }
 
 export const forwardRef = <T, P = {}>(
-  Component: (props: P, ref: RefObject<T>) => JSX.Element
-): ((props: P & { ref: RefObject<T> }) => JSX.Element) => {
+  Component: (props: P, ref?: RefObject<T>) => JSX.Element
+): ((props: P & { ref?: RefObject<T> }) => JSX.Element) => {
   return (props) => {
     const { ref, ...rest } = props
     return Component(rest as P, ref)
diff --git a/src/jsx/hooks/dom.test.tsx b/src/jsx/hooks/dom.test.tsx
index a824019a8..7ed3a57c8 100644
--- a/src/jsx/hooks/dom.test.tsx
+++ b/src/jsx/hooks/dom.test.tsx
@@ -497,6 +497,14 @@ describe('Hooks', () => {
       expect(root.innerHTML).toBe('<div></div>')
       expect(ref.current).toBeInstanceOf(HTMLElement)
     })
+
+    it('can run without ref', () => {
+      const App = forwardRef((props) => {
+        return <div {...props} />
+      })
+      render(<App />, root)
+      expect(root.innerHTML).toBe('<div></div>')
+    })
   })
 
   describe('useImperativeHandle()', () => {
diff --git a/src/jsx/hooks/index.ts b/src/jsx/hooks/index.ts
index d142d44af..ef51f2c65 100644
--- a/src/jsx/hooks/index.ts
+++ b/src/jsx/hooks/index.ts
@@ -370,8 +370,8 @@ export const createRef = <T>(): RefObject<T> => {
 }
 
 export const forwardRef = <T, P = {}>(
-  Component: (props: P, ref: RefObject<T>) => JSX.Element
-): ((props: P & { ref: RefObject<T> }) => JSX.Element) => {
+  Component: (props: P, ref?: RefObject<T>) => JSX.Element
+): ((props: P & { ref?: RefObject<T> }) => JSX.Element) => {
   return (props) => {
     const { ref, ...rest } = props
     return Component(rest as P, ref)