feat: 🎸 upgrade @mdx-js/mdx 3.0.0

deerleo · Jan 2, 2024 · 14e3c68 · 14e3c68
1 parent 2a6d03f
commit 14e3c68
Show file tree

Hide file tree

Showing 7 changed files with 1,065 additions and 668 deletions.
diff --git a/package.json b/package.json
@@ -20,9 +20,9 @@
   "devDependencies": {
     "@babel/standalone": "^7.17.8",
     "@headlessui/react": "^1.4.2",
-    "@mdx-js/mdx": "^2.0.0",
-    "@mdx-js/react": "^2.0.0",
+    "@mdx-js/mdx": "^3.0.0",
     "@types/node": "20.5.6",
+    "@types/react": "18.2.46",
     "@typescript-eslint/eslint-plugin": "2.x",
     "@typescript-eslint/parser": "2.x",
     "autoprefixer": "10.3.5",
@@ -55,17 +55,16 @@
     "rehype-katex": "^6.0.2",
     "rehype-mermaidjs": "^1.0.1",
     "rehype-prism-plus": "^1.6.3",
-    "remark-frontmatter": "^4.0.1",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1",
-    "remark-toc": "^8.0.1",
+    "rehype-raw": "^7.0.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "remark-toc": "^9.0.0",
     "tailwindcss": "^3.0.23",
     "typeit": "^8.5.4",
     "typescript": "5.2.2",
-    "vfile": "5.3.0",
-    "vfile-message": "3.1.0",
-    "vfile-reporter": "7.0.3",
-    "vfile-statistics": "2.0.0",
+    "vfile": "6.0.1",
+    "vfile-message": "^4.0.0",
     "word-count": "^0.2.2",
     "worker-loader": "^3.0.8"
   },

diff --git a/src/components/ErrorOverlay.js b/src/components/ErrorOverlay.js
@@ -1,4 +1,6 @@
-export function ErrorOverlay({ error }) {
+import { Switch } from '@headlessui/react'
+
+export function ErrorOverlay({ error, value, onChange }) {
   if (!error) {
     return null
   }
@@ -16,6 +18,22 @@ export function ErrorOverlay({ error }) {
         ) : null}
       </h2>
       <p className="font-mono text-sm leading-5">{error.message}</p>
+      <div className="flex items-center mt-4">
+        <label className="flex-none">You can try using format Markdown：</label>
+        <Switch
+          checked={value.formatMarkdown}
+          onChange={(formatMarkdown) => onChange({ ...value, formatMarkdown })}
+          className={`${
+            value.formatMarkdown ? 'bg-sky-500' : 'bg-sky-500/40'
+          }  inline-flex h-6 w-11 items-center rounded-full`}
+        >
+          <span
+            className={`${
+              value.formatMarkdown ? 'translate-x-6' : 'translate-x-1'
+            } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+          />
+        </Switch>
+      </div>
     </div>
   )
 }
diff --git a/src/components/Pen.jsx b/src/components/Pen.jsx
@@ -117,34 +117,38 @@ export default function Pen({
       JSON.stringify(content)
     )
     setIsLoading(true)
-    compileMdx(content.config, content.html, theme.isMac, theme.codeTheme).then(
-      (res) => {
-        if (res.err) {
-          setError(res.err)
-        } else {
-          setErrorImmediate()
-        }
-        if (res.html) {
-          const { html } = res
-          const { css } = content
-          if (css || html) {
-            //编译后的html保存到ref 中
-            htmlRef.current = html
-            inject({
-              css:
-                baseCss +
-                themes[theme.markdownTheme].css +
-                codeThemes[theme.codeTheme].css +
-                css,
-              html,
-              codeTheme: theme.codeTheme,
-            })
-          }
+    compileMdx(
+      content.config,
+      content.html,
+      theme.isMac,
+      theme.codeTheme,
+      theme.formatMarkdown
+    ).then((res) => {
+      if (res.err) {
+        setError(res.err)
+      } else {
+        setErrorImmediate()
+      }
+      if (res.html) {
+        const { html } = res
+        const { css } = content
+        if (css || html) {
+          //编译后的html保存到ref 中
+          htmlRef.current = html
+          inject({
+            css:
+              baseCss +
+              themes[theme.markdownTheme].css +
+              codeThemes[theme.codeTheme].css +
+              css,
+            html,
+            codeTheme: theme.codeTheme,
+          })
         }
-        setWordCount(Count(content.html || ''))
-        setIsLoading(false)
       }
-    )
+      setWordCount(Count(content.html || ''))
+      setIsLoading(false)
+    })
   }
 
   const compile = useCallback(debounce(compileNow, 200), [theme])
@@ -462,7 +466,7 @@ export default function Pen({
                     })
                   }}
                 />
-                <ErrorOverlay error={error} />
+                <ErrorOverlay value={theme} onChange={setTheme} error={error} />
               </div>
             </SplitPane>
           </>

diff --git a/src/components/ThemeDropdown.js b/src/components/ThemeDropdown.js
@@ -95,6 +95,26 @@ export default function ThemeDropdown({ themes, codeThemes, onChange, value }) {
                       />
                     </Switch>
                   </div>
+                  <div className="flex items-center">
+                    <label className="flex-none">formatMarkdown：</label>
+                    <Switch
+                      checked={value.formatMarkdown}
+                      onChange={(formatMarkdown) =>
+                        onChange({ ...value, formatMarkdown })
+                      }
+                      className={`${
+                        value.formatMarkdown ? 'bg-sky-500' : 'bg-sky-500/40'
+                      }  inline-flex h-6 w-11 items-center rounded-full`}
+                    >
+                      <span
+                        className={`${
+                          value.formatMarkdown
+                            ? 'translate-x-6'
+                            : 'translate-x-1'
+                        } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+                      />
+                    </Switch>
+                  </div>
                 </div>
               </Popover.Panel>
             </Transition>

diff --git a/src/hooks/compileMdx.js b/src/hooks/compileMdx.js
@@ -1,20 +1,20 @@
 import React from 'react'
 import * as runtime from 'react/jsx-runtime'
 import * as Babel from '@babel/standalone'
-import { evaluate } from '@mdx-js/mdx'
-import { MDXProvider, useMDXComponents } from '@mdx-js/react'
+import { compile, nodeTypes, run } from '@mdx-js/mdx'
+import { VFile } from 'vfile'
+import { VFileMessage } from 'vfile-message'
 import remarkGfm from 'remark-gfm'
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkMath from 'remark-math'
 import rehypeKatex from 'rehype-katex'
+import rehypeRaw from 'rehype-raw'
 import rehypePrismPlus from 'rehype-prism-plus'
 import rehypeMermaid from 'rehype-mermaidjs'
 import remarkToc from 'remark-toc'
 import ReactDOMServer from 'react-dom/server'
 import { validateReactComponent } from '../utils/validateJavaScript'
 import { MDXComponents } from '../components/MDX/MDXComponents'
-import { VFile } from 'vfile'
-import { VFileMessage } from 'vfile-message'
 import rehypeDivToSection, {
   rehypeAddLineNumbers,
 } from '../components/utils/rehype-div'
@@ -23,7 +23,13 @@ import reHypeLinkFoot from '../components/utils/rehype-link-foot'
 
 export const Context = React.createContext({ isMac: true })
 
-export const compileMdx = async (jsx, mdx, isMac, codeTheme = '') => {
+export const compileMdx = async (
+  jsx,
+  mdx,
+  isMac,
+  codeTheme = '',
+  formatMarkdown = false
+) => {
   let err = null
   let html = null
   let RootComponents = {}
@@ -54,8 +60,6 @@ export const compileMdx = async (jsx, mdx, isMac, codeTheme = '') => {
     }
   }
 
-  const file = new VFile({ basename: 'index.mdx', value: mdx })
-
   // const capture = (name) => (opt) => (tree) => {
   //   file.data[name] = tree;
   // };
@@ -75,13 +79,17 @@ export const compileMdx = async (jsx, mdx, isMac, codeTheme = '') => {
 
   //remarkPlugins.push(capture('mdast'))
 
+  const file = new VFile({
+    basename: formatMarkdown ? 'example.md' : 'example.mdx',
+    value: mdx,
+  })
   try {
-    const { default: Content } = await evaluate(mdx, {
-      ...runtime,
-      format: 'mdx',
-      useDynamicImport: true,
+    await compile(file, {
+      development: false,
+      outputFormat: 'function-body',
       remarkPlugins,
       rehypePlugins: [
+        [rehypeRaw, { passThrough: nodeTypes }],
         rehypeAddLineNumbers,
         rehypeDivToSection,
         reHypeLinkFoot,
@@ -90,20 +98,20 @@ export const compileMdx = async (jsx, mdx, isMac, codeTheme = '') => {
         [rehypePrismPlus, { ignoreMissing: true, defaultLanguage: 'js' }],
         [rehypeCodeTitle, { isMac }],
       ],
-      //recmaPlugins: [capture('esast')],
-      useMDXComponents,
+    })
+    const { default: Content } = await run(String(file), {
+      ...runtime,
+      baseUrl: window.location.href,
     })
     html = ReactDOMServer.renderToString(
       <Context.Provider value={{ isMac, codeTheme }}>
-        <MDXProvider components={{ ...MDXComponents, ...RootComponents }}>
-          <section
-            data-tool="mdx editor"
-            data-website="https://editor.runjs.cool/"
-            className={codeTheme}
-          >
-            <Content />
-          </section>
-        </MDXProvider>
+        <section
+          data-tool="mdx editor"
+          data-website="https://editor.runjs.cool/"
+          className={codeTheme}
+        >
+          <Content components={{ ...MDXComponents, ...RootComponents }} />
+        </section>
       </Context.Provider>
     )
   } catch (error) {

diff --git a/src/pages/templates.js b/src/pages/templates.js
@@ -16,14 +16,12 @@ export default function Templates({ data }) {
               key={item._id}
               className="flex flex-col items-start col-span-12 space-y-3 sm:col-span-6 xl:col-span-4"
             >
-              <Link href={'/' + item.docId}>
-                <a className="block">
-                  <img
-                    alt={item.name}
-                    className="object-cover w-full mb-2 overflow-hidden rounded-lg shadow-sm max-h-56"
-                    src={item.img}
-                  />
-                </a>
+              <Link className="block" href={'/' + item.docId}>
+                <img
+                  alt={item.name}
+                  className="object-cover w-full mb-2 overflow-hidden rounded-lg shadow-sm max-h-56"
+                  src={item.img}
+                />
               </Link>
               {item.tags &&
                 item.tags.map((tag, index) => (