mdx-js
diff --git a/‎docs/_asset/editor.jsx‎
Lines changed: 1 addition & 1 deletion b/‎docs/_asset/editor.jsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎docs/_asset/index.js‎
Lines changed: 9 additions & 10 deletions b/‎docs/_asset/index.js‎
Lines changed: 9 additions & 10 deletions
diff --git a/‎docs/_component/blog.jsx‎
Lines changed: 7 additions & 3 deletions b/‎docs/_component/blog.jsx‎
Lines changed: 7 additions & 3 deletions
diff --git a/‎docs/_component/nav.jsx‎
Lines changed: 15 additions & 8 deletions b/‎docs/_component/nav.jsx‎
Lines changed: 15 additions & 8 deletions
@@ -456,7 +456,7 @@ function Playground() {
                 name="development"
                 checked={development}
                 onChange={function () {
-                  setJsx(true)
+                  setDevelopment(true)
                 }}
               />{' '}
               generate for development (<code>development: true</code>)
 
@@ -61,24 +61,23 @@ for (const copy of copies) {
 }
 
 /**
- * @param {Event} event
+ * @this {HTMLButtonElement}
  */
-function onclick(event) {
-  const node = event.target
+function onclick() {
   assert(copyIcon)
   assert(copiedIcon)
-  assert(node instanceof HTMLButtonElement)
+  assert(this instanceof HTMLButtonElement)
 
-  const value = node.dataset.value
+  const value = this.dataset.value
   assert(value !== undefined)
 
-  node.classList.add('success')
-  node.replaceChildren(copiedIcon.cloneNode(true))
+  this.classList.add('success')
+  this.replaceChildren(copiedIcon.cloneNode(true))
 
   copyToClipboard(value)
 
-  setTimeout(function () {
-    node.classList.remove('success')
-    node.replaceChildren(copyIcon.cloneNode(true))
+  setTimeout(() => {
+    this.classList.remove('success')
+    this.replaceChildren(copyIcon.cloneNode(true))
   }, 2000)
 }
@@ -1,8 +1,12 @@
-import React, {createElement} from 'react'
+import React from 'react'
+// @ts-expect-error: untyped.
+import {Fragment, jsx, jsxs} from 'react/jsx-runtime'
 import {apStyleTitleCase} from 'ap-style-title-case'
-import {toH} from 'hast-to-hyperscript'
+import {toJsxRuntime} from 'hast-util-to-jsx-runtime'
 import {sortItems} from './sort.js'
 
+const runtime = {Fragment, jsx, jsxs}
+
 const dateTimeFormat = new Intl.DateTimeFormat('en', {dateStyle: 'long'})
 
 export function BlogEntry(props) {
@@ -36,7 +40,7 @@ export function BlogEntry(props) {
       </h3>
       <div>
         {meta.descriptionHast ? (
-          toH(createElement, meta.descriptionHast)
+          toJsxRuntime(meta.descriptionHast, runtime)
         ) : description ? (
           <p>{description}</p>
         ) : null}
 
@@ -1,8 +1,12 @@
-import React, {createElement} from 'react'
+import React from 'react'
+// @ts-expect-error: untyped.
+import {Fragment, jsx, jsxs} from 'react/jsx-runtime'
 import {apStyleTitleCase} from 'ap-style-title-case'
-import {toH} from 'hast-to-hyperscript'
+import {toJsxRuntime} from 'hast-util-to-jsx-runtime'
 import {sortItems} from './sort.js'
 
+const runtime = {Fragment, jsx, jsxs}
+
 const dateTimeFormat = new Intl.DateTimeFormat('en', {dateStyle: 'long'})
 
 export function NavGroup(props) {
@@ -30,12 +34,15 @@ export function NavItem(props) {
 
   if (includeDescription) {
     if (meta.descriptionHast) {
-      description = toH(createElement, {
-        type: 'element',
-        tagName: 'div',
-        properties: {className: ['nav-description']},
-        children: meta.descriptionHast.children
-      })
+      description = toJsxRuntime(
+        {
+          type: 'element',
+          tagName: 'div',
+          properties: {className: ['nav-description']},
+          children: meta.descriptionHast.children
+        },
+        runtime
+      )
     } else {
       description = matter.description || meta.description || null