Feat: new `legacy.astroFlavoredMarkdown` flag (#4016)

* refactor: add legacy.jsxInMarkdown flag to config

* refactor: jsxInMarkdown -> astroFlavoredMarkdown

* refactor: remove `markdown.mode`

* feat: wire up legacy.astroFlavoredMarkdown

* test: add legacy to astro-markdown fixture

* test: remark autolinking

* test: remark components

* test: remark expressions

* test: remark strictness

* chore: remove "mode" from md component

* chore: remove "mode: md" from tests

* Fixing legacy MD tests, adding named slots tests for MDX pages

* chore: update lock file

* WIP: debugging named slots in MDX

* fix: handle named slots in MDX properly

* chore: re-enabling slots tests for MDX pages

* fixing test validation for svelte & vue

* removing unused Tailwind test

* legacy flag for Markdown component tests

* adding is:raw to Markdown component test

* adding is:raw to all Markdown component test fixtures

* can't use is:raw when nesting markdown components

* another nested test can't use is:raw

* one more <Markdown> test fix

* fixing another JSX markdown component test

* chore: add changeset

* e2e tests were missing the legacy flag

* removing the broken tailwind E2E markdown page

Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com>
Co-authored-by: Nate Moore <nate@astro.build>

1 files changed, 16 insertions, 14 deletions

diff --git a/packages/markdown/remark/test/expressions.test.js b/packages/markdown/remark/test/expressions.test.js
index 828f70561..b2cb1a73d 100644
--- a/packages/markdown/remark/test/expressions.test.js
+++ b/packages/markdown/remark/test/expressions.test.js
@@ -1,21 +1,23 @@
 import { renderMarkdown } from '../dist/index.js';
-import chai, { expect } from 'chai';
+import chai from 'chai';
 
 describe('expressions', () => {
+	const renderAstroMd = (text, opts) => renderMarkdown(text, { isAstroFlavoredMd: true, ...opts });
+
 	it('should be able to serialize bare expression', async () => {
-		const { code } = await renderMarkdown(`{a}`, {});
+		const { code } = await renderAstroMd(`{a}`, {});
 
 		chai.expect(code).to.equal(`{a}`);
 	});
 
 	it('should be able to serialize expression inside component', async () => {
-		const { code } = await renderMarkdown(`<Component>{a}</Component>`, {});
+		const { code } = await renderAstroMd(`<Component>{a}</Component>`, {});
 
 		chai.expect(code).to.equal(`<Component>{a}</Component>`);
 	});
 
 	it('should be able to serialize expression inside markdown', async () => {
-		const { code } = await renderMarkdown(`# {frontmatter.title}`, {});
+		const { code } = await renderAstroMd(`# {frontmatter.title}`, {});
 
 		chai
 			.expect(code)
@@ -23,7 +25,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to serialize complex expression inside markdown', async () => {
-		const { code } = await renderMarkdown(`# Hello {frontmatter.name}`, {});
+		const { code } = await renderAstroMd(`# Hello {frontmatter.name}`, {});
 
 		chai
 			.expect(code)
@@ -31,7 +33,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to serialize complex expression with markup inside markdown', async () => {
-		const { code } = await renderMarkdown(`# Hello <span>{frontmatter.name}</span>`, {});
+		const { code } = await renderAstroMd(`# Hello <span>{frontmatter.name}</span>`, {});
 
 		chai
 			.expect(code)
@@ -41,7 +43,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to avoid evaluating JSX-like expressions in an inline code & generate a slug for id', async () => {
-		const { code } = await renderMarkdown(`# \`{frontmatter.title}\``, {});
+		const { code } = await renderAstroMd(`# \`{frontmatter.title}\``, {});
 
 		chai
 			.expect(code)
@@ -49,7 +51,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to avoid evaluating JSX-like expressions in inline codes', async () => {
-		const { code } = await renderMarkdown(`# \`{ foo }\` is a shorthand for \`{ foo: foo }\``, {});
+		const { code } = await renderAstroMd(`# \`{ foo }\` is a shorthand for \`{ foo: foo }\``, {});
 
 		chai
 			.expect(code)
@@ -59,7 +61,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to avoid evaluating JSX-like expressions & escape HTML tag characters in inline codes', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`###### \`{}\` is equivalent to \`Record<never, never>\` <small>(at TypeScript v{frontmatter.version})</small>`,
 			{}
 		);
@@ -72,7 +74,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to encode ampersand characters in code blocks', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			'The ampersand in `&nbsp;` must be encoded in code blocks.',
 			{}
 		);
@@ -85,7 +87,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to encode ampersand characters in fenced code blocks', async () => {
-		const { code } = await renderMarkdown(`
+		const { code } = await renderAstroMd(`
 		\`\`\`md
 			The ampersand in \`&nbsp;\` must be encoded in code blocks.
 		\`\`\`
@@ -95,7 +97,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to serialize function expression', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`{frontmatter.list.map(item => <p id={item}>{item}</p>)}`,
 			{}
 		);
@@ -104,13 +106,13 @@ describe('expressions', () => {
 	});
 
 	it('should unwrap HTML comments in inline code blocks', async () => {
-		const { code } = await renderMarkdown(`\`{/*<!-- HTML comment -->*/}\``);
+		const { code } = await renderAstroMd(`\`{/*<!-- HTML comment -->*/}\``);
 
 		chai.expect(code).to.equal('<p><code is:raw>&lt;!-- HTML comment --&gt;</code></p>');
 	});
 
 	it('should unwrap HTML comments in code fences', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`
 			  \`\`\`
 				<!-- HTML comment -->