[markdown] Harder, better, faster, stronger vite-plugin-markdown (#…

…4137)

* refactor: vite-plugin-md -> vite-plugin-md-legacy

* wip: add vite-plugin-md

* feat: always apply jsx renderer

* fix: markHTMLString on VNode result

* feat: apply new vite-plugin-markdown!

* fix: add meta export to md

* fix: remove needless $$metadata export

* fix: toggle to legacy plugin on flag

* fix: pass fileId to renderMarkdown

* test: raw and compiled content on plain md

* fix: escape vite env refs

* refactor: astro-md -> legacy-astro-flavored-md, astro-md-mode -> astro-markdown

* fix: import.meta.env refs with tests

* fix: add pkg.json to clientAddress

* fix: prefer JSX integration over Astro runtime

* Revert "fix: prefer JSX integration over Astro runtime"

This reverts commit 3e5fa49.

* fix: remove .mdx check on importSource

* chore: changeset

* chore: remove TODO

* fix: add back getHeadings

* fix: add pkg.json to astro-head fixture

* fix: default to Astro renderer for MDX and MD

* feat: add "headings" and "frontmatter" to md layouts

* refactor: remove legacy flag conditionals from legacy plugin

* fix: add back MDX warning when legacy is off

* test: getHeadings() glob

* fix: add error on "astro.headings" access

* feat: update docs example astro.headings => headings

* refactor: readFile as string w/ utf-8

* chore: remove astro metadata TODO

* refactor: stringify HTML once

* fix: add pkg.json to glob-pages-css

.changeset/hip-dancers-move.md

@@ -0,0 +1,6 @@
+---
+'astro': minor
+'@astrojs/markdown-remark': patch
+---
+
+Speed up internal markdown builds with new vite-plugin markdown

examples/docs/src/components/PageContent/PageContent.astro

@@ -2,9 +2,8 @@
 import MoreMenu from "../RightSidebar/MoreMenu.astro";
 import TableOfContents from "../RightSidebar/TableOfContents";
 
-const { content, githubEditUrl } = Astro.props;
+const { content, headings, githubEditUrl } = Astro.props;
 const title = content.title;
-const headings = content.astro.headings;
 ---
 
 <article id="article" class="content">
@@ -29,9 +28,11 @@ const headings = content.astro.headings;
 		display: flex;
 		flex-direction: column;
 	}
-	.content > section {
+
+	.content>section {
 		margin-bottom: 4rem;
 	}
+
 	.block {
 		display: block;
 	}

examples/docs/src/components/RightSidebar/RightSidebar.astro

@@ -1,8 +1,7 @@
 ---
 import TableOfContents from "./TableOfContents";
 import MoreMenu from "./MoreMenu.astro";
-const { content, githubEditUrl } = Astro.props;
-const headings = content.astro.headings;
+const { content, headings, githubEditUrl } = Astro.props;
 ---
 
 <nav class="sidebar-nav" aria-labelledby="grid-right">
@@ -18,6 +17,7 @@ const headings = content.astro.headings;
 		position: sticky;
 		top: 0;
 	}
+
 	.sidebar-nav-inner {
 		height: 100%;
 		padding: 0;

packages/astro/package.json

@@ -48,6 +48,8 @@
     "./vite-plugin-astro-postprocess/*": "./dist/vite-plugin-astro-postprocess/*",
     "./vite-plugin-jsx/*": "./dist/vite-plugin-jsx/*",
     "./vite-plugin-jsx": "./dist/vite-plugin-jsx/index.js",
+    "./vite-plugin-markdown-legacy": "./dist/vite-plugin-markdown-legacy/index.js",
+    "./vite-plugin-markdown-legacy/*": "./dist/vite-plugin-markdown-legacy/*",
     "./vite-plugin-markdown": "./dist/vite-plugin-markdown/index.js",
     "./vite-plugin-markdown/*": "./dist/vite-plugin-markdown/*",
     "./dist/jsx/*": "./dist/jsx/*"

packages/astro/src/core/config.ts

@@ -17,6 +17,7 @@ import { z } from 'zod';
 import { LogOptions } from './logger/core.js';
 import { appendForwardSlash, prependForwardSlash, trimSlashes } from './path.js';
 import { arraify, isObject } from './util.js';
+import jsxRenderer from '../jsx/renderer.js';
 
 load.use([loadTypeScript]);
 
@@ -343,16 +344,11 @@ export async function validateConfig(
 		_ctx: {
 			pageExtensions: ['.astro', '.md', '.html'],
 			scripts: [],
-			renderers: [],
+			renderers: [jsxRenderer],
 			injectedRoutes: [],
 			adapter: undefined,
 		},
 	};
-	if (result.integrations.find((integration) => integration.name === '@astrojs/mdx')) {
-		// Enable default JSX integration. It needs to come first, so unshift rather than push!
-		const { default: jsxRenderer } = await import('../jsx/renderer.js');
-		(result._ctx.renderers as any[]).unshift(jsxRenderer);
-	}
 
 	// If successful, return the result as a verified AstroConfig object.
 	return result;

packages/astro/src/core/create-vite.ts

@@ -12,6 +12,7 @@ import envVitePlugin from '../vite-plugin-env/index.js';
 import htmlVitePlugin from '../vite-plugin-html/index.js';
 import astroIntegrationsContainerPlugin from '../vite-plugin-integrations-container/index.js';
 import jsxVitePlugin from '../vite-plugin-jsx/index.js';
+import legacyMarkdownVitePlugin from '../vite-plugin-markdown-legacy/index.js';
 import markdownVitePlugin from '../vite-plugin-markdown/index.js';
 import astroScriptsPlugin from '../vite-plugin-scripts/index.js';
 import astroScriptsPageSSRPlugin from '../vite-plugin-scripts/page-ssr.js';
@@ -76,7 +77,9 @@ export async function createVite(
 			// the build to run very slow as the filewatcher is triggered often.
 			mode !== 'build' && astroViteServerPlugin({ config: astroConfig, logging }),
 			envVitePlugin({ config: astroConfig }),
-			markdownVitePlugin({ config: astroConfig, logging }),
+			astroConfig.legacy.astroFlavoredMarkdown
+				? legacyMarkdownVitePlugin({ config: astroConfig, logging })
+				: markdownVitePlugin({ config: astroConfig, logging }),
 			htmlVitePlugin(),
 			jsxVitePlugin({ config: astroConfig, logging }),
 			astroPostprocessVitePlugin({ config: astroConfig }),

packages/astro/src/vite-plugin-jsx/index.ts

@@ -137,9 +137,31 @@ export default function jsx({ config, logging }: AstroPluginJSXOptions): Plugin
 				JSX_RENDERER_CACHE.set(config, jsxRenderers);
 			}
 
-			// Attempt: Single JSX renderer
+			const astroRenderer = jsxRenderers.get('astro');
+
+			// Shortcut: only use Astro renderer for MD and MDX files
+			if ((id.includes('.mdx') || id.includes('.md')) && astroRenderer) {
+				const { code: jsxCode } = await esbuild.transform(code, {
+					loader: getEsbuildLoader(path.extname(id)) as esbuild.Loader,
+					jsx: 'preserve',
+					sourcefile: id,
+					sourcemap: 'inline',
+				});
+				return transformJSX({
+					code: jsxCode,
+					id,
+					renderer: astroRenderer,
+					mode,
+					ssr,
+				});
+			}
+
+			// Attempt: Single JSX integration
 			// If we only have one renderer, we can skip a bunch of work!
-			if (jsxRenderers.size === 1) {
+			const nonAstroJsxRenderers = new Map(
+				[...jsxRenderers.entries()].filter(([key]) => key !== 'astro')
+			);
+			if (nonAstroJsxRenderers.size === 1) {
 				// downlevel any non-standard syntax, but preserve JSX
 				const { code: jsxCode } = await esbuild.transform(code, {
 					loader: getEsbuildLoader(path.extname(id)) as esbuild.Loader,
@@ -150,7 +172,7 @@ export default function jsx({ config, logging }: AstroPluginJSXOptions): Plugin
 				return transformJSX({
 					code: jsxCode,
 					id,
-					renderer: [...jsxRenderers.values()][0],
+					renderer: [...nonAstroJsxRenderers.values()][0],
 					mode,
 					ssr,
 				});
@@ -196,10 +218,6 @@ export default function jsx({ config, logging }: AstroPluginJSXOptions): Plugin
 				}
 			}
 
-			if (!importSource && jsxRenderers.has('astro') && id.includes('.mdx')) {
-				importSource = 'astro';
-			}
-
 			// if JSX renderer found, then use that
 			if (importSource) {
 				const jsxRenderer = jsxRenderers.get(importSource);

packages/astro/src/vite-plugin-markdown-legacy/README.md

@@ -0,0 +1,3 @@
+# vite-plugin-markdown-legacy
+
+Adds Markdown support to Vite, both at the top level as well as within `.astro` files.