docs(jsdoc): JSX Renderer Middleware (#2710)

honojs · May 24, 2024 · 84af493 · 84af493
1 parent 084f0ed
commit 84af493
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 0 deletions.
diff --git a/deno_dist/middleware/jsx-renderer/index.ts b/deno_dist/middleware/jsx-renderer/index.ts
@@ -67,6 +67,40 @@ const createRenderer =
     }
   }
 
+/**
+ * JSX renderer middleware for hono.
+ *
+ * @see {@link{https://hono.dev/middleware/builtin/jsx-renderer}}
+ *
+ * @param {ComponentWithChildren} [component] - The component to render, which can accept children and props.
+ * @param {RendererOptions} [options] - The options for the JSX renderer middleware.
+ * @param {boolean | string} [options.docType=true] - The DOCTYPE to be added at the beginning of the HTML. If set to false, no DOCTYPE will be added.
+ * @param {boolean | Record<string, string>} [options.stream=false] - If set to true, enables streaming response with default headers. If a record is provided, custom headers will be used.
+ * @returns {MiddlewareHandler} The middleware handler function.
+ *
+ * @example
+ * ```ts
+ * const app = new Hono()
+ *
+ * app.get(
+ *   '/page/*',
+ *   jsxRenderer(({ children }) => {
+ *     return (
+ *       <html>
+ *         <body>
+ *           <header>Menu</header>
+ *           <div>{children}</div>
+ *         </body>
+ *       </html>
+ *     )
+ *   })
+ * )
+ *
+ * app.get('/page/about', (c) => {
+ *   return c.render(<h1>About me!</h1>)
+ * })
+ * ```
+ */
 export const jsxRenderer = (
   component?: ComponentWithChildren,
   options?: RendererOptions
@@ -82,6 +116,30 @@ export const jsxRenderer = (
     return next()
   }
 
+/**
+ * useRequestContext for Hono.
+ *
+ * @template E - The environment type.
+ * @template P - The parameter type.
+ * @template I - The input type.
+ * @returns {Context<E, P, I>} An instance of Context.
+ *
+ * @example
+ * ```ts
+ * const RequestUrlBadge: FC = () => {
+ *   const c = useRequestContext()
+ *   return <b>{c.req.url}</b>
+ * }
+ *
+ * app.get('/page/info', (c) => {
+ *   return c.render(
+ *     <div>
+ *       You are accessing: <RequestUrlBadge />
+ *     </div>
+ *   )
+ * })
+ * ```
+ */
 export const useRequestContext = <
   E extends Env = any,
   P extends string = any,

diff --git a/src/middleware/jsx-renderer/index.ts b/src/middleware/jsx-renderer/index.ts
@@ -67,6 +67,40 @@ const createRenderer =
     }
   }
 
+/**
+ * JSX renderer middleware for hono.
+ *
+ * @see {@link{https://hono.dev/middleware/builtin/jsx-renderer}}
+ *
+ * @param {ComponentWithChildren} [component] - The component to render, which can accept children and props.
+ * @param {RendererOptions} [options] - The options for the JSX renderer middleware.
+ * @param {boolean | string} [options.docType=true] - The DOCTYPE to be added at the beginning of the HTML. If set to false, no DOCTYPE will be added.
+ * @param {boolean | Record<string, string>} [options.stream=false] - If set to true, enables streaming response with default headers. If a record is provided, custom headers will be used.
+ * @returns {MiddlewareHandler} The middleware handler function.
+ *
+ * @example
+ * ```ts
+ * const app = new Hono()
+ *
+ * app.get(
+ *   '/page/*',
+ *   jsxRenderer(({ children }) => {
+ *     return (
+ *       <html>
+ *         <body>
+ *           <header>Menu</header>
+ *           <div>{children}</div>
+ *         </body>
+ *       </html>
+ *     )
+ *   })
+ * )
+ *
+ * app.get('/page/about', (c) => {
+ *   return c.render(<h1>About me!</h1>)
+ * })
+ * ```
+ */
 export const jsxRenderer = (
   component?: ComponentWithChildren,
   options?: RendererOptions
@@ -82,6 +116,30 @@ export const jsxRenderer = (
     return next()
   }
 
+/**
+ * useRequestContext for Hono.
+ *
+ * @template E - The environment type.
+ * @template P - The parameter type.
+ * @template I - The input type.
+ * @returns {Context<E, P, I>} An instance of Context.
+ *
+ * @example
+ * ```ts
+ * const RequestUrlBadge: FC = () => {
+ *   const c = useRequestContext()
+ *   return <b>{c.req.url}</b>
+ * }
+ *
+ * app.get('/page/info', (c) => {
+ *   return c.render(
+ *     <div>
+ *       You are accessing: <RequestUrlBadge />
+ *     </div>
+ *   )
+ * })
+ * ```
+ */
 export const useRequestContext = <
   E extends Env = any,
   P extends string = any,