From 7cd14d8544ddb63e0c10e7b7cff93d49171bdad3 Mon Sep 17 00:00:00 2001
From: Karl Horky <karl.horky@gmail.com>
Date: Mon, 16 Dec 2024 17:27:56 +0100
Subject: [PATCH 1/2] docs: add type assertion to React.JSX.Element type

Ref: https://github.com/syntax-tree/hast-util-to-jsx-runtime/issues/10#issuecomment-2523396087
---
 docs/packages/next.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/packages/next.md b/docs/packages/next.md
index 7ccd7450..2d3af251 100644
--- a/docs/packages/next.md
+++ b/docs/packages/next.md
@@ -51,6 +51,7 @@ You can also call `codeToHast` to get the HTML abstract syntax tree, and render
 ```tsx
 import type { BundledLanguage } from 'shiki'
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
+import type { JSX } from 'react'
 import { Fragment } from 'react'
 import { jsx, jsxs } from 'react/jsx-runtime'
 import { codeToHast } from 'shiki'
@@ -87,7 +88,7 @@ async function CodeBlock(props: Props) {
       // your custom `pre` element
       pre: props => <pre data-custom-codeblock {...props} />
     },
-  })
+  }) as JSX.Element
 }
 ```
 
@@ -101,6 +102,7 @@ Create a `shared.ts` for highlighter:
 ```ts
 import type { BundledLanguage } from 'shiki/bundle/web'
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
+import type { JSX } from 'react'
 import { Fragment } from 'react'
 import { jsx, jsxs } from 'react/jsx-runtime'
 import { codeToHast } from 'shiki/bundle/web'
@@ -115,7 +117,7 @@ export async function highlight(code: string, lang: BundledLanguage) {
     Fragment,
     jsx,
     jsxs,
-  })
+  }) as JSX.Element
 }
 ```
 

From f828fc1c559e1ea56234b36f7307f1e61cb3f314 Mon Sep 17 00:00:00 2001
From: Karl Horky <karl.horky@gmail.com>
Date: Mon, 16 Dec 2024 17:35:05 +0100
Subject: [PATCH 2/2] Reorder imports in next.md documentation

---
 docs/packages/next.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/packages/next.md b/docs/packages/next.md
index 2d3af251..0de6def7 100644
--- a/docs/packages/next.md
+++ b/docs/packages/next.md
@@ -49,9 +49,9 @@ async function CodeBlock(props: Props) {
 You can also call `codeToHast` to get the HTML abstract syntax tree, and render it using [`hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime). With this method, you can render your own `pre` and `code` components.
 
 ```tsx
+import type { JSX } from 'react'
 import type { BundledLanguage } from 'shiki'
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
-import type { JSX } from 'react'
 import { Fragment } from 'react'
 import { jsx, jsxs } from 'react/jsx-runtime'
 import { codeToHast } from 'shiki'
@@ -100,9 +100,9 @@ We can start by creating a client `CodeBlock` component.
 Create a `shared.ts` for highlighter:
 
 ```ts
+import type { JSX } from 'react'
 import type { BundledLanguage } from 'shiki/bundle/web'
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
-import type { JSX } from 'react'
 import { Fragment } from 'react'
 import { jsx, jsxs } from 'react/jsx-runtime'
 import { codeToHast } from 'shiki/bundle/web'