feat(jsx): export FC (#1420)

* feat(jsx): export `FC` * denoify
honojs · Sep 9, 2023 · 27d2620 · 27d2620
1 parent 665f456
commit 27d2620
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 4 deletions.
diff --git 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 (
+          <html>
+            <head>
+              <title>{props.title}</title>
+            </head>
+            <body>{props.children}</body>
+          </html>
+        )
+      }
+
+      const Top = (
+        <Layout title='Home page'>
+          <h1>Hono</h1>
+          <p>Hono is great</p>
+        </Layout>
+      )
+
+      expect(Top.toString()).toBe(
+        '<html><head><title>Home page</title></head><body><h1>Hono</h1><p>Hono is great</p></body></html>'
+      )
+    })
+  })
+
   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
@@ -198,7 +198,7 @@ const jsxFn = (
   }
 }
 
-type FC<T = Props> = (props: T) => HtmlEscapedString
+export type FC<T = Props> = (props: T & { children?: Child }) => HtmlEscapedString
 
 const shallowEqual = (a: Props, b: Props): boolean => {
   if (a === b) {
@@ -226,7 +226,7 @@ export const memo = <T>(
 ): FC<T> => {
   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
@@ -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 (
+          <html>
+            <head>
+              <title>{props.title}</title>
+            </head>
+            <body>{props.children}</body>
+          </html>
+        )
+      }
+
+      const Top = (
+        <Layout title='Home page'>
+          <h1>Hono</h1>
+          <p>Hono is great</p>
+        </Layout>
+      )
+
+      expect(Top.toString()).toBe(
+        '<html><head><title>Home page</title></head><body><h1>Hono</h1><p>Hono is great</p></body></html>'
+      )
+    })
+  })
+
   describe('style attribute', () => {
     it('should convert the object to strings', () => {
       const template = (

diff --git a/src/jsx/index.ts b/src/jsx/index.ts
@@ -198,7 +198,7 @@ const jsxFn = (
   }
 }
 
-type FC<T = Props> = (props: T) => HtmlEscapedString
+export type FC<T = Props> = (props: T & { children?: Child }) => HtmlEscapedString
 
 const shallowEqual = (a: Props, b: Props): boolean => {
   if (a === b) {
@@ -226,7 +226,7 @@ export const memo = <T>(
 ): FC<T> => {
   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
     }