Add debug link

Author: pomber

packages/mdx/dev/files.ts

@@ -2,6 +2,7 @@ import fs from "fs"
 import { remarkCodeHike } from "../src/index"
 import { compile } from "@mdx-js/mdx"
 import theme from "shiki/themes/slack-dark.json"
+import { withDebugger } from "mdx-debugger"
 
 export async function getFiles() {
   const files = await fs.promises.readdir("./dev/content")
@@ -19,14 +20,22 @@ export async function getContent(filename: string) {
 }
 
 export async function getCode(file: string) {
+  let debugLink = ""
+
+  const debugCompile = withDebugger(compile, {
+    log: (path: string, url: string) => {
+      debugLink = url
+    },
+  })
+
   const code = String(
-    await compile(file, {
+    await debugCompile(file, {
       outputFormat: "function-body",
       remarkPlugins: [
         [remarkCodeHike, { autoImport: false, theme }],
       ],
     })
   )
 
-  return code
+  return { code, debugLink }
 }

packages/mdx/package.json

@@ -58,6 +58,7 @@
     "cssnano": "^4.1.10",
     "esbuild": "^0.13.2",
     "mdx-bundler": "^8.0.1",
+    "mdx-debugger": "^0.2.0",
     "next": "^12.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

packages/mdx/pages/[name].tsx

@@ -17,11 +17,12 @@ export async function getStaticProps({ params }) {
 
   const files = await getFiles()
   const content = await getContent(name)
-  const code = await getCode(content)
+  const { code, debugLink } = await getCode(content)
   return {
     props: {
       tests: files,
       code,
+      debugLink,
       current: name,
     },
   }
@@ -31,8 +32,9 @@ export default function Page({
   current,
   code,
   tests,
-  content,
+  debugLink,
 }) {
+  console.log(debugLink)
   const { default: Content } = runSync(code, runtime)
   return (
     <div
@@ -44,7 +46,7 @@ export default function Page({
       }}
     >
       <Sidebar tests={tests} current={current} />
-      <Result Content={Content} />
+      <Result Content={Content} debugLink={debugLink} />
     </div>
   )
 }
@@ -77,7 +79,7 @@ function Sidebar({ tests, current }) {
   )
 }
 
-function Result({ Content }) {
+function Result({ Content, debugLink }) {
   return (
     <div
       style={{
@@ -86,8 +88,21 @@ function Result({ Content }) {
         background: "#fafafa",
         borderRadius: 4,
         padding: 16,
+        position: "relative",
       }}
     >
+      <a
+        href={debugLink}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{
+          position: "absolute",
+          right: "16px",
+          top: "16px",
+        }}
+      >
+        Debug
+      </a>
       <Content components={{ CH }} />
     </div>
   )

yarn.lock

@@ -6963,6 +6963,13 @@ mdx-bundler@^8.0.1:
     uuid "^8.3.2"
     xdm "^3.3.0"
 
+mdx-debugger@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/mdx-debugger/-/mdx-debugger-0.2.0.tgz#c441bdc9790731774d837374d3acda01cc6f5e86"
+  integrity sha512-xIgIhQszqkLWeh+RR0Y7m+2983EbHMuRmwY3gfDtamXnsi4NO32G88nTAEIDq7D0fV7Ml3BW3yT9dM7jTZjRzQ==
+  dependencies:
+    lz-string "^1.4.4"
+
 meant@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/meant/-/meant-1.0.3.tgz#67769af9de1d158773e928ae82c456114903554c"