Improve Markdown + Components usage (#3410)

* feat: use internal MDX tooling for markdown + components

* fix: improve MD + component tests

* chore: add changeset

* fix: make tsc happy

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

* fix(markdown): support HTML comments in markdown

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

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

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

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

* fix: revert parsing change

* fix: remove `markdown.mode` option

1 files changed, 40 insertions, 0 deletions

diff --git a/packages/markdown/remark/test/expressions.test.js b/packages/markdown/remark/test/expressions.test.js
new file mode 100644
index 000000000..bcc95cbed
--- /dev/null
+++ b/packages/markdown/remark/test/expressions.test.js
@@ -0,0 +1,40 @@
+import { renderMarkdown } from '../dist/index.js';
+import chai from 'chai';
+
+describe('expressions', () => {
+	it('should be able to serialize bare expession', async () => {
+		const { code } = await renderMarkdown(`{a}`, {});
+
+		chai.expect(code).to.equal(`{a}`);
+	});
+
+	it('should be able to serialize expression inside component', async () => {
+		const { code } = await renderMarkdown(`<Component>{a}</Component>`, {});
+
+		chai.expect(code).to.equal(`<Fragment>\n<Component>{a}</Component>\n</Fragment>`);
+	});
+
+	it('should be able to serialize expression inside markdown', async () => {
+		const { code } = await renderMarkdown(`# {frontmatter.title}`, {});
+
+		chai.expect(code).to.equal(`<h1 id={$$slug(\`\${frontmatter.title}\`)}>{frontmatter.title}</h1>`);
+	});
+
+	it('should be able to serialize complex expression inside markdown', async () => {
+		const { code } = await renderMarkdown(`# Hello {frontmatter.name}`, {});
+
+		chai.expect(code).to.equal(`<h1 id={$$slug(\`Hello \${frontmatter.name}\`)}>Hello {frontmatter.name}</h1>`);
+	});
+
+	it('should be able to serialize complex expression with markup inside markdown', async () => {
+		const { code } = await renderMarkdown(`# Hello <span>{frontmatter.name}</span>`, {});
+
+		chai.expect(code).to.equal(`<h1 id={$$slug(\`Hello \${frontmatter.name}\`)}>Hello <span>{frontmatter.name}</span></h1>`);
+	});
+
+	it('should be able to serialize function expression', async () => {
+		const { code } = await renderMarkdown(`{frontmatter.list.map(item => <p id={item}>{item}</p>)}`	, {});
+
+		chai.expect(code).to.equal(`{frontmatter.list.map(item => <p id={item}>{item}</p>)}`);
+	})
+});