[MD] Add rawContent and compiledContent to MD layout props (#4222)

* fix: add subs for astro.source and astro.html * fix: define "source" property * test: raw and compiled content from layout * chore: changeset Co-authored-by: bholmesdev <bholmesdev@gmail.com>
withastro · Aug 9, 2022 · b5ef1c2 · b5ef1c2
1 parent a4f2426
commit b5ef1c2
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 1 deletion.
diff --git a/.changeset/warm-socks-exercise.md b/.changeset/warm-socks-exercise.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Add rawContent and compiledContent to MD layout props
diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts
@@ -92,10 +92,28 @@ export default function markdown({ config, logging }: AstroPluginOptions): Plugi
 							throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."')
 						}
 					});
+					Object.defineProperty(content.astro, 'html', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."')
+						}
+					});
+					Object.defineProperty(content.astro, 'source', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."')
+						}
+					});
 					const contentFragment = h(Fragment, { 'set:html': html });
 					return ${
 						layout
-							? `h(Layout, { content, frontmatter: content, headings: getHeadings(), 'server:root': true, children: contentFragment })`
+							? `h(Layout, {
+									content,
+									frontmatter: content,
+									headings: getHeadings(),
+									rawContent,
+									compiledContent,
+									'server:root': true,
+									children: contentFragment
+								})`
 							: `contentFragment`
 					};
 				}

diff --git a/packages/astro/test/astro-markdown.test.js b/packages/astro/test/astro-markdown.test.js
@@ -89,6 +89,28 @@ describe('Astro Markdown', () => {
 		expect(headingSlugs).to.contain('section-2');
 	});
 
+	it('Passes compiled content to layout via "compiledContent" prop', async () => {
+		const html = await fixture.readFile('/with-layout/index.html');
+		const $ = cheerio.load(html);
+
+		const compiledContent = $('[data-compiled-content]');
+
+		expect(fixLineEndings(compiledContent.text()).trim()).to.equal(
+			`<h2 id="section-1">Section 1</h2>\n<h2 id="section-2">Section 2</h2>`
+		);
+	});
+
+	it('Passes raw content to layout via "rawContent" prop', async () => {
+		const html = await fixture.readFile('/with-layout/index.html');
+		const $ = cheerio.load(html);
+
+		const rawContent = $('[data-raw-content]');
+
+		expect(fixLineEndings(rawContent.text()).trim()).to.equal(
+			`## Section 1\n\n## Section 2`
+		);
+	});
+
 	it('Exposes getHeadings() on glob imports', async () => {
 		const { headings } = JSON.parse(await fixture.readFile('/headings-glob.json'));
 

diff --git a/packages/astro/test/fixtures/astro-markdown/src/layouts/Base.astro b/packages/astro/test/fixtures/astro-markdown/src/layouts/Base.astro
@@ -3,6 +3,8 @@ const {
 	content = { title: "content didn't work" },
 	frontmatter = { title: "frontmatter didn't work" },
 	headings = [],
+	compiledContent = () => '',
+	rawContent = () => '',
 } = Astro.props;
 ---
 
@@ -18,6 +20,8 @@ const {
 <body>
 	<p data-content-title>{content.title}</p>
 	<p data-frontmatter-title>{frontmatter.title}</p>
+	<p data-compiled-content>{compiledContent()}</p>
+	<p data-raw-content>{rawContent()}</p>
 	<p data-layout-rendered>Layout rendered!</p>
 	<ul data-headings>
 		{headings.map(heading => <li>{heading.slug}</li>)}