Improve Markdown + Components usage (withastro#3410)

* feat: use internal MDX tooling for markdown + components

* fix: improve MD + component tests

* chore: add changeset

* fix: make tsc happy

* fix(withastro#3319): add regression test for component children

* fix(markdown): support HTML comments in markdown

* fix(withastro#2474): ensure namespaced components are properly handled in markdown pages

* fix(withastro#3220): ensure html in markdown pages does not have extra surrounding space

* fix(withastro#3264): ensure that remark files pass in file information

* fix(withastro#3254): enable experimentalStaticExtraction for `.md` pages

* fix: revert parsing change

* fix: remove `markdown.mode` option

src/@types/astro.ts

@@ -513,16 +513,6 @@ export interface AstroUserConfig {
 		 */
 		drafts?: boolean;
 
-		/**
-		 * @docs
-		 * @name markdown.mode
-		 * @type {'md' | 'mdx'}
-		 * @default `mdx`
-		 * @description
-		 * Control wheater to allow components inside markdown files ('mdx') or not ('md').
-		 */
-		mode?: 'md' | 'mdx';
-
 		/**
 		 * @docs
 		 * @name markdown.shikiConfig

src/vite-plugin-markdown/index.ts

@@ -84,7 +84,7 @@ export default function markdown({ config }: AstroPluginOptions): Plugin {
 				const source = await fs.promises.readFile(fileId, 'utf8');
 				const { data: frontmatter } = matter(source);
 				return {
-					code: `   
+					code: `
 						// Static
 						export const frontmatter = ${JSON.stringify(frontmatter)};
 						export const file = ${JSON.stringify(fileId)};
@@ -122,12 +122,17 @@ export default function markdown({ config }: AstroPluginOptions): Plugin {
 				const hasInjectedScript = isPage && config._ctx.scripts.some((s) => s.stage === 'page-ssr');
 
 				// Extract special frontmatter keys
-				const { data: frontmatter, content: markdownContent } = matter(source);
-				let renderResult = await renderMarkdown(markdownContent, renderOpts);
+				let { data: frontmatter, content: markdownContent } = matter(source);
+
+				// Turn HTML comments into JS comments
+				markdownContent = markdownContent.replace(/<\s*!--([^-->]*)(.*?)-->/gs, (whole) => `{/*${whole}*/}`)
+
+				let renderResult = await renderMarkdown(markdownContent, { ...renderOpts, fileURL: fileUrl } as any);
 				let { code: astroResult, metadata } = renderResult;
 				const { layout = '', components = '', setup = '', ...content } = frontmatter;
 				content.astro = metadata;
 				const prelude = `---
+import { slug as $$slug } from '@astrojs/markdown-remark';
 ${layout ? `import Layout from '${layout}';` : ''}
 ${components ? `import * from '${components}';` : ''}
 ${hasInjectedScript ? `import '${PAGE_SSR_SCRIPT_ID}';` : ''}
@@ -151,6 +156,8 @@ ${setup}`.trim();
 					site: config.site ? new URL(config.base, config.site).toString() : undefined,
 					sourcefile: id,
 					sourcemap: 'inline',
+					// TODO: baseline flag
+					experimentalStaticExtraction: true,
 					internalURL: `/@fs${prependForwardSlash(
 						viteID(new URL('../runtime/server/index.js', import.meta.url))
 					)}`,

test/astro-markdown.test.js

@@ -28,12 +28,57 @@ describe('Astro Markdown', () => {
 		const $ = cheerio.load(html);
 
 		expect($('h2').html()).to.equal('Blog Post with JSX expressions');
-		expect($('p').first().html()).to.equal('JSX at the start of the line!');
+
+		expect(html).to.contain('JSX at the start of the line!');
 		for (let listItem of ['test-1', 'test-2', 'test-3']) {
-			expect($(`#${listItem}`).html()).to.equal(`\n${listItem}\n`);
+			expect($(`#${listItem}`).html()).to.equal(`${listItem}`);
 		}
 	});
 
+	it('Can handle slugs with JSX expressions in markdown pages', async () => {
+		const html = await fixture.readFile('/slug/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('h1').attr("id")).to.equal('my-blog-post');
+	});
+
+	it('Can handle code elements without extra spacing', async () => {
+		const html = await fixture.readFile('/code-element/index.html');
+		const $ = cheerio.load(html);
+
+		$('code').each((_, el) => {
+			expect($(el).html()).to.equal($(el).html().trim())
+		});
+	});
+
+	it('Can handle namespaced components in markdown', async () => {
+		const html = await fixture.readFile('/namespace/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('h1').text()).to.equal('Hello Namespace!');
+		expect($('button').length).to.equal(1);
+	});
+
+	it('Correctly handles component children in markdown pages (#3319)', async () => {
+		const html = await fixture.readFile('/children/index.html');
+
+		expect(html).not.to.contain('<p></p>');
+	});
+
+	it('Can handle HTML comments in markdown pages', async () => {
+		const html = await fixture.readFile('/comment/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('h1').text()).to.equal('It works!');
+	});
+
+	// https://github.com/withastro/astro/issues/3254
+	it('Can handle scripts in markdown pages', async () => {
+		const html = await fixture.readFile('/script/index.html');
+		console.log(html);
+		expect(html).not.to.match(new RegExp("\/src\/scripts\/test\.js"));
+	});
+
 	it('Can load more complex jsxy stuff', async () => {
 		const html = await fixture.readFile('/complex/index.html');
 		const $ = cheerio.load(html);

test/fixtures/astro-markdown/src/components/TextBlock.jsx

@@ -0,0 +1,20 @@
+import { h } from 'preact';
+
+const TextBlock = ({
+  title,
+  children,
+  noPadding = false,
+}) => {
+  return (
+    <div
+      className={`${
+        noPadding ? "" : "md:px-2 lg:px-4"
+      } flex-1 prose prose-headings:font-grotesk`}
+    >
+      <h3>{title}</h3>
+      <p>{children}</p>
+    </div>
+  );
+};
+
+export default TextBlock;

test/fixtures/astro-markdown/src/components/index.js

@@ -0,0 +1,5 @@
+import Counter from './Counter';
+
+export default {
+	Counter
+}

test/fixtures/astro-markdown/src/content/code-element.md

@@ -0,0 +1,3 @@
+This should have `nospace` around it.
+
+This should have <code class="custom-class">nospace</code> around it.

test/fixtures/astro-markdown/src/pages/children.md

@@ -0,0 +1,12 @@
+---
+setup: import TextBlock from '../components/TextBlock'
+---
+{/* https://github.com/withastro/astro/issues/3319 */}
+
+<TextBlock title="Hello world!" noPadding>
+  <ul class="not-prose">
+    <li>A</li>
+    <li>B</li>
+    <li>C</li>
+  </ul>
+</TextBlock>

test/fixtures/astro-markdown/src/pages/code-element.astro

@@ -0,0 +1,7 @@
+---
+const content = await Astro.glob('../content/*.md');
+---
+
+<div>
+	{content.map(({ Content }) => <Content />)}
+</div>

test/fixtures/astro-markdown/src/pages/comment.md

@@ -0,0 +1,2 @@
+<!-- HTML comments! -->
+# It works!

test/fixtures/astro-markdown/src/pages/jsx-expressions.md

@@ -8,4 +8,6 @@ list: ['test-1', 'test-2', 'test-3']
 
 {frontmatter.paragraph}
 
-{frontmatter.list.map(item => <p id={item}>{item}</p>)}
+<ul>
+  {frontmatter.list.map(item => <li id={item}>{item}</li>)}
+</ul>

test/fixtures/astro-markdown/src/pages/namespace.md

@@ -0,0 +1,7 @@
+---
+setup: import ns from '../components/index.js';
+---
+
+# Hello Namespace!
+
+<ns.Counter>Click me!</ns.Counter>

test/fixtures/astro-markdown/src/pages/script.md

@@ -0,0 +1,7 @@
+# Test
+
+## Let's try a script...
+
+This should work!
+
+<script src="/src/scripts/test.js" />

test/fixtures/astro-markdown/src/pages/slug.md

@@ -0,0 +1,7 @@
+---
+title: My Blog Post
+---
+
+# {frontmatter.title}
+
+Hello world

test/fixtures/astro-markdown/src/scripts/test.js

@@ -0,0 +1 @@
+console.log("Hello world");