[markdown] Harder, better, faster, stronger vite-plugin-markdown

.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

@@ -49,6 +49,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 === 'dev' && 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/runtime/server/jsx.ts

@@ -51,7 +51,7 @@ export async function renderJSX(result: SSRResult, vnode: any): Promise<any> {
 						props[key] = value;
 					}
 				}
-				return await renderToString(result, vnode.type as any, props, slots);
+				return markHTMLString(await renderToString(result, vnode.type as any, props, slots));
 			}
 			case !vnode.type && (vnode.type as any) !== 0:
 				return '';

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.