Add support for breakpoints

MDX files are compiled to JavaScript and support source maps. They can
be debugged.

.changeset/tiny-vans-protect.md

@@ -0,0 +1,5 @@
+---
+"vscode-mdx": patch
+---
+
+Add support for breakpoints.

fixtures/debug/example.mdx

@@ -0,0 +1,65 @@
+{/**
+  * @typedef Step
+  * @property {React.ReactNode} description
+  * @property {boolean} [optional]
+  */}
+
+{/**
+  * @typedef ExampleProps
+  * @property {string} [reference]
+  */}
+
+# Debugging
+
+This fixture workspace contains some code to test if breakpoints work as expected.
+You can try this using Visual Studio Code.
+
+{/** @type {Step[]} */}
+export const steps = [
+  {
+    description: 'Open Visual Studio Code'
+  },
+  {
+    description: 'Grab some coffee',
+    optional: true
+  },
+  {
+    description: 'Set some breakpoints in this document'
+  },
+  {
+    description: 'Open the Visual Studio Code JavaScript Debug Terminal'
+  },
+  {
+    description: 'Navigate to the directory containing this document'
+  },
+  {
+    description: <>Run <code>./run.mjs</code></>
+  }
+]
+
+<ul>{steps.map((step, index) => {
+  const shouldRender = !step.optional
+
+  if(shouldRender) {
+    return <li key={index}>{step.description}</li>
+  }
+})}</ul>
+
+{/**
+  * @param {ExampleProps} props
+  */}
+export function Example({reference}) {
+  debugger
+  let string
+  if (reference) {
+    string = 'For example, see ' + reference
+  } else {
+    string = 'No example reference given'
+  }
+
+  return 'For example, see ' + reference
+}
+
+It works in custom components too.
+Also `debugger` expressions work.
+<Example reference="this example" />

fixtures/debug/loader.mjs

@@ -0,0 +1,4 @@
+import {createLoader} from '@mdx-js/node-loader'
+import {SourceMapGenerator} from 'source-map'
+
+export const {load} = createLoader({SourceMapGenerator})

fixtures/debug/run.mjs

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+import {register} from 'node:module'
+import {renderToStaticMarkup} from 'react-dom/server'
+import React from 'react'
+
+register('./loader.mjs', import.meta.url)
+
+const module = await import('./example.mdx')
+
+console.log(renderToStaticMarkup(React.createElement(module.default)))

fixtures/fixtures.code-workspace

@@ -11,6 +11,7 @@
     "recommendations": ["johnsoncodehk.volarjs-labs"]
   },
   "folders": [
+    {"path": "debug"},
     {"path": "demo"},
     {"path": "frontmatter"},
     {"path": "no-tsconfig"},

package.json

@@ -14,10 +14,13 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.0.0",
+    "@mdx-js/node-loader": "^3.0.0",
     "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "c8": "^9.0.0",
     "prettier": "^3.0.0",
     "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "remark-cli": "^11.0.0",
     "remark-frontmatter": "^4.0.0",
     "remark-preset-wooorm": "^9.0.0",

packages/vscode-mdx/package.json

@@ -51,6 +51,11 @@
     "theme": "light"
   },
   "contributes": {
+    "breakpoints": [
+      {
+        "language": "mdx"
+      }
+    ],
     "configuration": [
       {
         "title": "MDX",