[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, 25 insertions, 0 deletions

diff --git a/packages/integrations/mdx/src/utils.ts b/packages/integrations/mdx/src/utils.ts
index ccce179c9..7b2c4f4ec 100644
--- a/packages/integrations/mdx/src/utils.ts
+++ b/packages/integrations/mdx/src/utils.ts
@@ -1,4 +1,8 @@
 import type { AstroConfig, SSRError } from 'astro';
+import type { Options as AcornOpts } from 'acorn';
+import type { MdxjsEsm } from 'mdast-util-mdx';
+import { parse } from 'acorn';
+
 import matter from 'gray-matter';
 
 function appendForwardSlash(path: string) {
@@ -58,3 +62,24 @@ export function getFrontmatter(code: string, id: string) {
 		}
 	}
 }
+
+export function jsToTreeNode(
+	jsString: string,
+	acornOpts: AcornOpts = {
+		ecmaVersion: 'latest',
+		sourceType: 'module',
+	}
+): MdxjsEsm {
+	return {
+		type: 'mdxjsEsm',
+		value: '',
+		data: {
+			estree: {
+				body: [],
+				...parse(jsString, acornOpts),
+				type: 'Program',
+				sourceType: 'module',
+			},
+		},
+	};
+}