[Beta] Accurate MDX line numbers (#5153)

2026-02-25 23:05:23 +00:00 · 2022-10-05 00:14:38 +01:00
parent 440741dde2
commit a224f9d9ff
3 changed files with 59 additions and 14 deletions
--- a/beta/package.json
+++ b/beta/package.json
@@ -38,6 +38,7 @@
    "react": "0.0.0-experimental-cb5084d1c-20220924",
    "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1",
    "react-dom": "0.0.0-experimental-cb5084d1c-20220924",
+    "remark-frontmatter": "^4.0.1",
    "remark-gfm": "^3.0.1"
  },
  "devDependencies": {
--- a/beta/src/pages/[[...markdownPath]].js
+++ b/beta/src/pages/[[...markdownPath]].js
@@ -55,7 +55,7 @@ function reviveNodeOnClient(key, val) {

 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
-const DISK_CACHE_BREAKER = 5;
+const DISK_CACHE_BREAKER = 6;
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 // Put MDX output into JSON for client.
@@ -70,11 +70,11 @@ export async function getStaticProps(context) {

  // Read MDX from the file.
  let path = (context.params.markdownPath || []).join('/') || 'index';
-  let mdxWithFrontmatter;
+  let mdx;
  try {
-    mdxWithFrontmatter = fs.readFileSync(rootDir + path + '.md', 'utf8');
+    mdx = fs.readFileSync(rootDir + path + '.md', 'utf8');
  } catch {
-    mdxWithFrontmatter = fs.readFileSync(rootDir + path + '/index.md', 'utf8');
+    mdx = fs.readFileSync(rootDir + path + '/index.md', 'utf8');
  }

  // See if we have a cached output first.
@@ -87,7 +87,7 @@ export async function getStaticProps(context) {
      // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      // ~~~~ IMPORTANT: Everything that the code below may rely on.
      // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-      mdxWithFrontmatter,
+      mdx,
      mdxComponentNames,
      DISK_CACHE_BREAKER,
      PREPARE_MDX_CACHE_BREAKER,
@@ -107,24 +107,26 @@ export async function getStaticProps(context) {
    );
  }

-  // Parse Frontmatter headers from MDX.
-  const fm = require('gray-matter');
-  const {content: mdxWithoutFrontmatter, data: meta} = fm(mdxWithFrontmatter);
-
  // If we don't add these fake imports, the MDX compiler
  // will insert a bunch of opaque components we can't introspect.
  // This will break the prepareMDX() call below.
-  let mdxWithFakeImports = mdxComponentNames
-    .map((key) => 'import ' + key + ' from "' + key + '";\n')
-    .join('\n');
-  mdxWithFakeImports += '\n' + mdxWithoutFrontmatter;
+  let mdxWithFakeImports =
+    mdx +
+    '\n' +
+    mdxComponentNames
+      .map((key) => 'import ' + key + ' from "' + key + '";\n')
+      .join('\n');

  // Turn the MDX we just read into some JS we can execute.
  const {remarkPlugins} = require('../../plugins/markdownToHtml');
  const {compile: compileMdx} = await import('@mdx-js/mdx');
  const visit = (await import('unist-util-visit')).default;
  const jsxCode = await compileMdx(mdxWithFakeImports, {
-    remarkPlugins: [...remarkPlugins, (await import('remark-gfm')).default],
+    remarkPlugins: [
+      ...remarkPlugins,
+      (await import('remark-gfm')).default,
+      (await import('remark-frontmatter')).default,
+    ],
    rehypePlugins: [
      // Support stuff like ```js App.js {1-5} active by passing it through.
      function rehypeMetaAsAttributes() {
@@ -169,6 +171,10 @@ export async function getStaticProps(context) {
    toc = [];
  }

+  // Parse Frontmatter headers from MDX.
+  const fm = require('gray-matter');
+  const meta = fm(mdx).data;
+
  const output = {
    props: {
      content: JSON.stringify(children, stringifyNodeOnServer),
--- a/beta/yarn.lock
+++ b/beta/yarn.lock
@@ -2741,6 +2741,13 @@ fastq@^1.6.0:
  dependencies:
    reusify "^1.0.4"

+fault@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-2.0.1.tgz#d47ca9f37ca26e4bd38374a7c500b5a384755b6c"
+  integrity sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==
+  dependencies:
+    format "^0.2.0"
+
 file-entry-cache@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -2800,6 +2807,11 @@ flatten@^1.0.2:
  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==

+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
+
 forwarded@0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -3763,6 +3775,13 @@ mdast-util-from-markdown@^1.0.0:
    unist-util-stringify-position "^3.0.0"
    uvu "^0.5.0"

+mdast-util-frontmatter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-frontmatter/-/mdast-util-frontmatter-1.0.0.tgz#ef12469379782e4a0fd995fed60cc3b871e6c819"
+  integrity sha512-7itKvp0arEVNpCktOET/eLFAYaZ+0cNjVtFtIPxgQ5tV+3i+D4SDDTjTzPWl44LT59PC+xdx+glNTawBdF98Mw==
+  dependencies:
+    micromark-extension-frontmatter "^1.0.0"
+
 mdast-util-gfm-autolink-literal@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-1.0.2.tgz#4032dcbaddaef7d4f2f3768ed830475bb22d3970"
@@ -4002,6 +4021,15 @@ micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
    micromark-util-types "^1.0.1"
    uvu "^0.5.0"

+micromark-extension-frontmatter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-extension-frontmatter/-/micromark-extension-frontmatter-1.0.0.tgz#612498e6dad87c132c95e25f0918e7cc0cd535f6"
+  integrity sha512-EXjmRnupoX6yYuUJSQhrQ9ggK0iQtQlpi6xeJzVD5xscyAI+giqco5fdymayZhJMbIFecjnE2yz85S9NzIgQpg==
+  dependencies:
+    fault "^2.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
 micromark-extension-gfm-autolink-literal@^1.0.0:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.3.tgz#dc589f9c37eaff31a175bab49f12290edcf96058"
@@ -5404,6 +5432,16 @@ remark-external-links@^7.0.0:
    space-separated-tokens "^1.0.0"
    unist-util-visit "^2.0.0"

+remark-frontmatter@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/remark-frontmatter/-/remark-frontmatter-4.0.1.tgz#84560f7ccef114ef076d3d3735be6d69f8922309"
+  integrity sha512-38fJrB0KnmD3E33a5jZC/5+gGAC2WKNiPw1/fdXJvijBlhA7RCsvJklrYJakS0HedninvaCYW8lQGf9C918GfA==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-frontmatter "^1.0.0"
+    micromark-extension-frontmatter "^1.0.0"
+    unified "^10.0.0"
+
 remark-gfm@^3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-3.0.1.tgz#0b180f095e3036545e9dddac0e8df3fa5cfee54f"