diff --git a/deno_dist/jsx/index.test.tsx b/deno_dist/jsx/index.test.tsx
index e1847562c..225ac20d8 100644
--- a/deno_dist/jsx/index.test.tsx
+++ b/deno_dist/jsx/index.test.tsx
@@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { html } from '../helper/html/index.ts'
import { Hono } from '../hono.ts'
+import type { FC } from './index.ts'
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { jsx, memo, Fragment } from './index.ts'
@@ -271,6 +272,32 @@ describe('render to string', () => {
})
})
+ describe('FC', () => {
+ it('Should define the type correctly', () => {
+ const Layout: FC<{ title: string }> = (props) => {
+ return (
+
+
+ {props.title}
+
+ {props.children}
+
+ )
+ }
+
+ const Top = (
+
+ Hono
+ Hono is great
+
+ )
+
+ expect(Top.toString()).toBe(
+ 'Home pageHono
Hono is great
'
+ )
+ })
+ })
+
describe('style attribute', () => {
it('should convert the object to strings', () => {
const template = (
diff --git a/deno_dist/jsx/index.ts b/deno_dist/jsx/index.ts
index 68a150074..49691d4fe 100644
--- a/deno_dist/jsx/index.ts
+++ b/deno_dist/jsx/index.ts
@@ -198,7 +198,7 @@ const jsxFn = (
}
}
-type FC = (props: T) => HtmlEscapedString
+export type FC = (props: T & { children?: Child }) => HtmlEscapedString
const shallowEqual = (a: Props, b: Props): boolean => {
if (a === b) {
@@ -226,7 +226,7 @@ export const memo = (
): FC => {
let computed = undefined
let prevProps: T | undefined = undefined
- return ((props: T): HtmlEscapedString => {
+ return ((props: T & { children?: Child }): HtmlEscapedString => {
if (prevProps && !propsAreEqual(prevProps, props)) {
computed = undefined
}
diff --git a/src/jsx/index.test.tsx b/src/jsx/index.test.tsx
index 0b38539c3..498b4a8a2 100644
--- a/src/jsx/index.test.tsx
+++ b/src/jsx/index.test.tsx
@@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { html } from '../helper/html'
import { Hono } from '../hono'
+import type { FC } from './index'
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { jsx, memo, Fragment } from './index'
@@ -271,6 +272,32 @@ describe('render to string', () => {
})
})
+ describe('FC', () => {
+ it('Should define the type correctly', () => {
+ const Layout: FC<{ title: string }> = (props) => {
+ return (
+
+
+ {props.title}
+
+ {props.children}
+
+ )
+ }
+
+ const Top = (
+
+ Hono
+ Hono is great
+
+ )
+
+ expect(Top.toString()).toBe(
+ 'Home pageHono
Hono is great
'
+ )
+ })
+ })
+
describe('style attribute', () => {
it('should convert the object to strings', () => {
const template = (
diff --git a/src/jsx/index.ts b/src/jsx/index.ts
index 8a16b0664..8ac4642e1 100644
--- a/src/jsx/index.ts
+++ b/src/jsx/index.ts
@@ -198,7 +198,7 @@ const jsxFn = (
}
}
-type FC = (props: T) => HtmlEscapedString
+export type FC = (props: T & { children?: Child }) => HtmlEscapedString
const shallowEqual = (a: Props, b: Props): boolean => {
if (a === b) {
@@ -226,7 +226,7 @@ export const memo = (
): FC => {
let computed = undefined
let prevProps: T | undefined = undefined
- return ((props: T): HtmlEscapedString => {
+ return ((props: T & { children?: Child }): HtmlEscapedString => {
if (prevProps && !propsAreEqual(prevProps, props)) {
computed = undefined
}