Update dev-dependencies

mdx-js · Mar 6, 2024 · 7dc3766 · 7dc3766
1 parent 3a794ab
commit 7dc3766
Show file tree

Hide file tree

Showing 6 changed files with 941 additions and 771 deletions.
diff --git a/docs/_asset/editor.jsx b/docs/_asset/editor.jsx
@@ -55,7 +55,6 @@ import textMd from '@wooorm/starry-night/text.md'
 import {visit as visitEstree} from 'estree-util-visit'
 import {toJsxRuntime} from 'hast-util-to-jsx-runtime'
 import {useEffect, useState} from 'react'
-// @ts-expect-error: the automatic react runtime is untyped.
 import {Fragment, jsx, jsxs} from 'react/jsx-runtime'
 import ReactDom from 'react-dom/client'
 import {ErrorBoundary} from 'react-error-boundary'
@@ -68,8 +67,6 @@ import {removePosition} from 'unist-util-remove-position'
 import {visit} from 'unist-util-visit'
 import {VFile} from 'vfile'
 
-const runtime = {Fragment, jsx, jsxs}
-
 const sample = `# Hello, world!
 
 Below is an example of markdown in JSX.
@@ -140,7 +137,7 @@ function Playground() {
   const [frontmatter, setFrontmatter] = useState(false)
   const [gfm, setGfm] = useState(false)
   const [formatMarkdown, setFormatMarkdown] = useState(false)
-  const [jsx, setJsx] = useState(false)
+  const [generateJsx, setGenerateJsx] = useState(false)
   const [math, setMath] = useState(false)
   const [outputFormatFunctionBody, setOutputFormatFunctionBody] =
     useState(false)
@@ -193,7 +190,7 @@ function Playground() {
 
         await compile(file, {
           development: show === 'result' ? false : development,
-          jsx: show === 'code' || show === 'esast' ? jsx : false,
+          jsx: show === 'code' || show === 'esast' ? generateJsx : false,
           outputFormat:
             show === 'result' || outputFormatFunctionBody
               ? 'function-body'
@@ -206,7 +203,11 @@ function Playground() {
         if (show === 'result') {
           /** @type {MDXModule} */
           const result = await run(String(file), {
-            ...runtime,
+            Fragment,
+            // @ts-expect-error: to do: fix in `hast-util-to-jsx-runtime`.
+            jsx,
+            // @ts-expect-error: to do: fix in `hast-util-to-jsx-runtime`.
+            jsxs,
             baseUrl: window.location.href
           })
 
@@ -229,7 +230,8 @@ function Playground() {
                     JSON.stringify(ast, undefined, 2),
                     'source.json'
                   ),
-                  runtime
+                  // @ts-expect-error: to do: fix in `hast-util-to-jsx-runtime`.
+                  {Fragment, jsx, jsxs}
                 )}
               </code>
             </pre>
@@ -240,10 +242,13 @@ function Playground() {
         return (
           <pre>
             <code>
-              {toJsxRuntime(
-                starryNight.highlight(String(file), 'source.js'),
-                runtime
-              )}
+              {toJsxRuntime(starryNight.highlight(String(file), 'source.js'), {
+                Fragment,
+                // @ts-expect-error: to do: fix in `hast-util-to-jsx-runtime`.
+                jsx,
+                // @ts-expect-error: to do: fix in `hast-util-to-jsx-runtime`.
+                jsxs
+              })}
             </code>
           </pre>
         )
@@ -296,7 +301,7 @@ function Playground() {
       directive,
       frontmatter,
       gfm,
-      jsx,
+      generateJsx,
       formatMarkdown,
       math,
       outputFormatFunctionBody,
@@ -332,7 +337,13 @@ function Playground() {
         <div className="playground-area">
           <div className="playground-inner">
             <div className="playground-draw">
-              {toJsxRuntime(starryNight.highlight(value, scope), runtime)}
+              {toJsxRuntime(starryNight.highlight(value, scope), {
+                Fragment,
+                // @ts-expect-error: to do: fix in `hast-util-to-jsx-runtime`.
+                jsx,
+                // @ts-expect-error: to do: fix in `hast-util-to-jsx-runtime`.
+                jsxs
+              })}
               {/* Trailing whitespace in a `textarea` is shown, but not in a `div`
           with `white-space: pre-wrap`.
           Add a `br` to make the last newline explicit. */}
@@ -525,9 +536,9 @@ function Playground() {
               <input
                 type="radio"
                 name="jsx"
-                checked={jsx}
+                checked={generateJsx}
                 onChange={function () {
-                  setJsx(true)
+                  setGenerateJsx(true)
                 }}
               />{' '}
               keep JSX (<code>jsx: true</code>)
@@ -536,9 +547,9 @@ function Playground() {
               <input
                 type="radio"
                 name="jsx"
-                checked={!jsx}
+                checked={!generateJsx}
                 onChange={function () {
-                  setJsx(false)
+                  setGenerateJsx(false)
                 }}
               />{' '}
               compile JSX away (<code>jsx: false</code>)

diff --git a/docs/_component/blog.jsx b/docs/_component/blog.jsx
@@ -21,12 +21,9 @@
 import {apStyleTitleCase} from 'ap-style-title-case'
 import {toJsxRuntime} from 'hast-util-to-jsx-runtime'
 import React from 'react'
-// @ts-expect-error: the automatic react runtime is untyped.
 import {Fragment, jsx, jsxs} from 'react/jsx-runtime'
 import {sortItems} from './sort.js'
 
-const runtime = {Fragment, jsx, jsxs}
-
 const dateTimeFormat = new Intl.DateTimeFormat('en', {dateStyle: 'long'})
 
 /**
@@ -69,7 +66,8 @@ export function BlogEntry(properties) {
       </h3>
       <div>
         {meta.descriptionHast ? (
-          toJsxRuntime(meta.descriptionHast, runtime)
+          // @ts-expect-error: to do: fix in `hast-util-to-jsx-runtime`.
+          toJsxRuntime(meta.descriptionHast, {Fragment, jsx, jsxs})
         ) : description ? (
           <p>{description}</p>
         ) : undefined}

diff --git a/docs/_component/nav.jsx b/docs/_component/nav.jsx
@@ -38,12 +38,9 @@
 import {apStyleTitleCase} from 'ap-style-title-case'
 import {toJsxRuntime} from 'hast-util-to-jsx-runtime'
 import React from 'react'
-// @ts-expect-error: the automatic react runtime is untyped.
 import {Fragment, jsx, jsxs} from 'react/jsx-runtime'
 import {sortItems} from './sort.js'
 
-const runtime = {Fragment, jsx, jsxs}
-
 const dateTimeFormat = new Intl.DateTimeFormat('en', {dateStyle: 'long'})
 
 /**
@@ -107,7 +104,8 @@ export function NavigationItem(properties) {
           properties: {className: ['nav-description']},
           children
         },
-        runtime
+        // @ts-expect-error: to do: fix in `hast-util-to-jsx-runtime`.
+        {Fragment, jsx, jsxs}
       )
     } else {
       description = matter.description || meta.description || undefined