refactor(markdown): removed rehype-slug in favor of our own implementation

.changeset/cuddly-trees-sniff.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdown-remark': patch
+---
+
+Removed `rehype-slug` in favor of our own implementation. The behavior of the slugging should remain the same

.changeset/silly-yaks-happen.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/markdown-remark': patch
+---
+
+Moved some type from `astro` to `@astrojs/markdown-remark`

examples/with-markdown-plugins/astro.config.mjs

@@ -7,10 +7,10 @@ export default defineConfig({
 	markdown: {
 		remarkPlugins: ['remark-code-titles'],
 		rehypePlugins: [
+			'rehype-slug',
 			['rehype-autolink-headings', { behavior: 'prepend' }],
 			['rehype-toc', { headings: ['h2', 'h3'] }],
 			[addClasses, { 'h1,h2,h3': 'title' }],
-			'rehype-slug',
 		],
 	},
 });

packages/astro/package.json

@@ -116,7 +116,6 @@
     "prismjs": "^1.28.0",
     "prompts": "^2.4.2",
     "recast": "^0.20.5",
-    "rehype-slug": "^5.0.1",
     "resolve": "^1.22.0",
     "rollup": "^2.70.2",
     "semver": "^7.3.7",

packages/astro/src/@types/astro.ts

@@ -2,7 +2,14 @@ import type { AddressInfo } from 'net';
 import type * as babel from '@babel/core';
 import type * as vite from 'vite';
 import { z } from 'zod';
-import type { ShikiConfig, RemarkPlugins, RehypePlugins } from '@astrojs/markdown-remark';
+import type {
+	ShikiConfig,
+	RemarkPlugins,
+	RehypePlugins,
+	MarkdownHeader,
+	MarkdownMetadata,
+	MarkdownRenderingResult,
+} from '@astrojs/markdown-remark';
 import type { AstroConfigSchema } from '../core/config';
 import type { AstroComponentFactory, Metadata } from '../runtime/server';
 import type { ViteConfigWithSSR } from '../core/create-vite';
@@ -530,7 +537,7 @@ export interface AstroUserConfig {
 		 * @description
 		 * Pass a custom [Remark](https://github.com/remarkjs/remark) plugin to customize how your Markdown is built.
 		 *
-		 * **Note:** Enabling custom `remarkPlugins` or `rehypePlugins` removes Astro's built-in support for [GitHub-flavored Markdown](https://github.github.com/gfm/) support, [Footnotes](https://github.com/remarkjs/remark-footnotes) syntax, [Smartypants](https://github.com/silvenon/remark-smartypants). You must explicitly add these plugins to your `astro.config.mjs` file, if desired.
+		 * **Note:** Enabling custom `remarkPlugins` or `rehypePlugins` removes Astro's built-in support for [GitHub-flavored Markdown](https://github.github.com/gfm/) support and [Smartypants](https://github.com/silvenon/remark-smartypants). You must explicitly add these plugins to your `astro.config.mjs` file, if desired.
 		 *
 		 * ```js
 		 * {
@@ -549,13 +556,13 @@ export interface AstroUserConfig {
 		 * @description
 		 * Pass a custom [Rehype](https://github.com/remarkjs/remark-rehype) plugin to customize how your Markdown is built.
 		 *
-		 * **Note:** Enabling custom `remarkPlugins` or `rehypePlugins` removes Astro's built-in support for [GitHub-flavored Markdown](https://github.github.com/gfm/) support, [Footnotes](https://github.com/remarkjs/remark-footnotes) syntax, [Smartypants](https://github.com/silvenon/remark-smartypants). You must explicitly add these plugins to your `astro.config.mjs` file, if desired.
+		 * **Note:** Enabling custom `remarkPlugins` or `rehypePlugins` removes Astro's built-in support for [GitHub-flavored Markdown](https://github.github.com/gfm/) support and [Smartypants](https://github.com/silvenon/remark-smartypants). You must explicitly add these plugins to your `astro.config.mjs` file, if desired.
 		 *
 		 * ```js
 		 * {
 		 *   markdown: {
 		 *     // Example: The default set of rehype plugins used by Astro
-		 *     rehypePlugins: [['rehype-toc', { headings: ['h2', 'h3'] }], [addClasses, { 'h1,h2,h3': 'title' }], 'rehype-slug'],
+		 *     rehypePlugins: ['rehype-slug', ['rehype-toc', { headings: ['h2', 'h3'] }], [addClasses, { 'h1,h2,h3': 'title' }]],
 		 *   },
 		 * };
 		 * ```
@@ -774,24 +781,10 @@ export interface ManifestData {
 	routes: RouteData[];
 }
 
-export interface MarkdownHeader {
-	depth: number;
-	slug: string;
-	text: string;
-}
-
-export interface MarkdownMetadata {
-	headers: MarkdownHeader[];
-	source: string;
-	html: string;
-}
-
-export interface MarkdownParserResponse {
+export interface MarkdownParserResponse extends MarkdownRenderingResult {
 	frontmatter: {
 		[key: string]: any;
 	};
-	metadata: MarkdownMetadata;
-	code: string;
 }
 
 /**

packages/astro/test/astro-markdown-plugins.test.js

@@ -15,9 +15,9 @@ describe('Astro Markdown plugins', () => {
 					['rehype-autolink-headings', { behavior: 'prepend' }],
 				],
 				rehypePlugins: [
+					'rehype-slug',
 					['rehype-toc', { headings: ['h2', 'h3'] }],
 					[addClasses, { 'h1,h2,h3': 'title' }],
-					'rehype-slug',
 				],
 			},
 		});

packages/astro/test/fixtures/astro-markdown-plugins/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@astrojs/preact": "workspace:*",
     "astro": "workspace:*",
-    "hast-util-select": "^5.0.1"
+    "hast-util-select": "^5.0.1",
+    "rehype-slug": "^5.0.1"
   }
 }

packages/markdown/remark/package.json

@@ -32,7 +32,6 @@
     "micromark-extension-mdx-jsx": "^1.0.3",
     "prismjs": "^1.28.0",
     "rehype-raw": "^6.1.1",
-    "rehype-slug": "^5.0.1",
     "rehype-stringify": "^9.0.3",
     "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.1",

packages/markdown/remark/src/index.ts

@@ -1,4 +1,4 @@
-import type { MarkdownRenderingOptions } from './types';
+import type { MarkdownRenderingOptions, MarkdownRenderingResult } from './types';
 
 import createCollectHeaders from './rehype-collect-headers.js';
 import scopedStyles from './remark-scoped-styles.js';
@@ -22,11 +22,13 @@ import rehypeRaw from 'rehype-raw';
 export * from './types.js';
 
 export const DEFAULT_REMARK_PLUGINS = ['remark-gfm', 'remark-smartypants'];
-
-export const DEFAULT_REHYPE_PLUGINS = ['rehype-slug'];
+export const DEFAULT_REHYPE_PLUGINS = [];
 
 /** Shared utility for rendering markdown */
-export async function renderMarkdown(content: string, opts: MarkdownRenderingOptions) {
+export async function renderMarkdown(
+	content: string,
+	opts: MarkdownRenderingOptions
+): Promise<MarkdownRenderingResult> {
 	let { mode, syntaxHighlight, shikiConfig, remarkPlugins, rehypePlugins } = opts;
 	const scopedClassName = opts.$?.scopedClassName;
 	const isMDX = mode === 'mdx';

packages/markdown/remark/src/rehype-collect-headers.ts

@@ -1,12 +1,14 @@
 import { visit } from 'unist-util-visit';
-import slugger from 'github-slugger';
+import Slugger from 'github-slugger';
+
+import type { MarkdownHeader, RehypePlugin } from './types.js';
 
-/**  */
 export default function createCollectHeaders() {
-	const headers: any[] = [];
+	const headers: MarkdownHeader[] = [];
+	const slugger = new Slugger();
 
-	function rehypeCollectHeaders() {
-		return function (tree: any) {
+	function rehypeCollectHeaders(): ReturnType<RehypePlugin> {
+		return function (tree) {
 			visit(tree, (node) => {
 				if (node.type !== 'element') return;
 				const { tagName } = node;
@@ -21,11 +23,12 @@ export default function createCollectHeaders() {
 					text += child.value;
 				});
 
-				let slug = node?.properties?.id || slugger.slug(text);
-
 				node.properties = node.properties || {};
-				node.properties.id = slug;
-				headers.push({ depth, slug, text });
+				if (typeof node.properties.id !== 'string') {
+					node.properties.id = slugger.slug(text);
+				}
+
+				headers.push({ depth, slug: node.properties.id, text });
 			});
 		};
 	}

packages/markdown/remark/src/types.ts

@@ -40,3 +40,20 @@ export interface MarkdownRenderingOptions extends AstroMarkdownOptions {
 		scopedClassName: string | null;
 	};
 }
+
+export interface MarkdownHeader {
+	depth: number;
+	slug: string;
+	text: string;
+}
+
+export interface MarkdownMetadata {
+	headers: MarkdownHeader[];
+	source: string;
+	html: string;
+}
+
+export interface MarkdownRenderingResult {
+	metadata: MarkdownMetadata;
+	code: string;
+}