[MDX] Add `getHeadings` + generate anchor links (#4095)

* deps: mdx github-slugger

* feat: add getHeadings via rehype plugin

* chore: stray console.log

* test: getHeadings w/ & w/0 JSX expressions

* docs: add generated exports

* refactor: pass headings using vfile.data

* deps: vfile

* test: heading anchor IDs

* docs: add collect-headings to default rehype plugins

* chore: changeset

* deps: estree-util-value-to-estree

* refactor: inject getHeadings export the right way!

* deps: switch to acorn

* refactor: just use acorn

* docs: `getHeadings` info structuring

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

* docs: clarify `url` example

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

* fix: move slugger inside plugin call

* refactor: cleanup code reassignment

* chore: lint

* deps: mdast-util-mdx, test utils

* refactor: add jsToTreeNode util

* feat: expose utils for lib authors

* test: rehype plugins w/ and w/o extends

* test: fixture

* refactor: remove utils from package exports

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

1 files changed, 81 insertions, 0 deletions

diff --git a/packages/integrations/mdx/test/mdx-rehype-plugins.test.js b/packages/integrations/mdx/test/mdx-rehype-plugins.test.js
new file mode 100644
index 000000000..bb0c6eb63
--- /dev/null
+++ b/packages/integrations/mdx/test/mdx-rehype-plugins.test.js
@@ -0,0 +1,81 @@
+import mdx from '@astrojs/mdx';
+import { jsToTreeNode } from '../dist/utils.js';
+
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import getReadingTime from 'reading-time';
+import { toString } from 'mdast-util-to-string';
+
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+export function rehypeReadingTime() {
+  return function (tree) {
+		const readingTime = getReadingTime(toString(tree))
+		tree.children.unshift(
+			jsToTreeNode(`export const readingTime = ${JSON.stringify(readingTime)}`)
+		)
+  };
+}
+
+const FIXTURE_ROOT = new URL('./fixtures/mdx-rehype-plugins/', import.meta.url);
+
+describe('MDX rehype plugins', () => {
+	describe('without "extends"', () => {
+		let fixture;
+		before(async () => {
+			fixture = await loadFixture({
+				root: FIXTURE_ROOT,
+				integrations: [
+					mdx({
+						rehypePlugins: [rehypeReadingTime],
+					}),
+				],
+			});
+			await fixture.build();
+		});
+
+		it('removes default getHeadings', async () => {
+			const html = await fixture.readFile('/space-ipsum/index.html');
+			const { document } = parseHTML(html);
+	
+			const headings = [...document.querySelectorAll('h1, h2')];
+			expect(headings.length).to.be.greaterThan(0);
+			for (const heading of headings) {
+				expect(heading.id).to.be.empty;
+			}
+		});
+
+		it('supports custom rehype plugins - reading time', async () => {
+			const readingTime = JSON.parse(await fixture.readFile('/reading-time.json'));
+	
+			expect(readingTime).to.not.be.null;
+			expect(readingTime.text).to.match(/^\d+ min read/);
+		});
+	});
+
+	describe('with "extends"', () => {
+		let fixture;
+		before(async () => {
+			fixture = await loadFixture({
+				root: FIXTURE_ROOT,
+				integrations: [
+					mdx({
+						rehypePlugins: { extends: [rehypeReadingTime] },
+					}),
+				],
+			});
+			await fixture.build();
+		});
+
+		it('preserves default getHeadings', async () => {
+			const html = await fixture.readFile('/space-ipsum/index.html');
+			const { document } = parseHTML(html);
+	
+			const headings = [...document.querySelectorAll('h1, h2')];
+			expect(headings.length).to.be.greaterThan(0);
+			for (const heading of headings) {
+				expect(heading.id).to.not.be.empty;
+			}
+		});
+	});
+});