fix(markdoc): use astro components defined with extends

withastro · Aug 27, 2024 · 0bab683 · 0bab683
1 parent b81b703
commit 0bab683
Show file tree

Hide file tree

Showing 11 changed files with 176 additions and 2 deletions.
diff --git a/.changeset/good-adults-punch.md b/.changeset/good-adults-punch.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/markdoc': patch
+---
+
+Fixes an issue preventing to use Astro components as Markdoc tags and nodes when configured using the `extends` property.
diff --git a/packages/integrations/markdoc/src/content-entry-type.ts b/packages/integrations/markdoc/src/content-entry-type.ts
@@ -78,13 +78,13 @@ export async function getContentEntryType({
 			// Only include component imports for tags used in the document.
 			// Avoids style and script bleed.
 			for (const tag of usedTags) {
-				const render = userMarkdocConfig.tags?.[tag]?.render;
+				const render = markdocConfig.tags?.[tag]?.render;
 				if (isComponentConfig(render)) {
 					componentConfigByTagMap[tag] = render;
 				}
 			}
 			let componentConfigByNodeMap: Record<string, ComponentConfig> = {};
-			for (const [nodeType, schema] of Object.entries(userMarkdocConfig.nodes ?? {})) {
+			for (const [nodeType, schema] of Object.entries(markdocConfig.nodes ?? {})) {
 				const render = schema?.render;
 				if (isComponentConfig(render)) {
 					componentConfigByNodeMap[nodeType] = render;

diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/astro.config.mjs
@@ -0,0 +1,7 @@
+import markdoc from '@astrojs/markdoc';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc()],
+});
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/markdoc.config.ts
@@ -0,0 +1,31 @@
+import { component, defineMarkdocConfig } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	extends: [preset()],
+});
+
+function preset() {
+	return {
+		nodes: {
+			fence: {
+				render: component('./src/components/Code.astro'),
+				attributes: {
+					language: { type: String },
+					content: { type: String },
+				},
+			},
+		},
+		tags: {
+			'marquee-element': {
+				render: component('./src/components/CustomMarquee.astro'),
+				attributes: {
+					direction: {
+						type: String,
+						default: 'left',
+						matches: ['left', 'right', 'up', 'down'],
+					},
+				},
+			},
+		},
+	}
+}
diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/package.json b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/markdoc-render-with-extends-components",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/...tegrations/markdoc/test/fixtures/render-with-extends-components/src/components/Code.astro b/...tegrations/markdoc/test/fixtures/render-with-extends-components/src/components/Code.astro
@@ -0,0 +1,12 @@
+---
+import { Code } from 'astro/components';
+
+type Props = {
+	content: string;
+	language: string;
+}
+
+const { content, language } = Astro.props as Props;
+---
+
+<Code lang={language} code={content} />
diff --git a/...s/markdoc/test/fixtures/render-with-extends-components/src/components/CustomMarquee.astro b/...s/markdoc/test/fixtures/render-with-extends-components/src/components/CustomMarquee.astro
@@ -0,0 +1 @@
+<marquee data-custom-marquee {...Astro.props}><slot /></marquee>
diff --git a/...arkdoc/test/fixtures/render-with-extends-components/src/content/blog/with-components.mdoc b/...arkdoc/test/fixtures/render-with-extends-components/src/content/blog/with-components.mdoc
@@ -0,0 +1,17 @@
+---
+title: Post with components
+---
+
+## Post with components
+
+This uses a custom marquee component with a shortcode:
+
+{% marquee-element direction="right" %}
+I'm a marquee too!
+{% /marquee-element %}
+
+And a code component for code blocks:
+
+```js
+const isRenderedWithShiki = true;
+```
diff --git a/...s/integrations/markdoc/test/fixtures/render-with-extends-components/src/pages/index.astro b/...s/integrations/markdoc/test/fixtures/render-with-extends-components/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import { getEntryBySlug } from "astro:content";
+
+const post = await getEntryBySlug('blog', 'with-components');
+const { Content } = await post.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Content</title>
+</head>
+<body>
+	<Content />	
+</body>
+</html>
diff --git a/packages/integrations/markdoc/test/render-extends-components.test.js b/packages/integrations/markdoc/test/render-extends-components.test.js
@@ -0,0 +1,64 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+const root = new URL('./fixtures/render-with-extends-components/', import.meta.url);
+
+describe('Markdoc - render components defined in `extends`', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root,
+		});
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('renders content - with components', async () => {
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderComponentsChecks(html);
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('renders content - with components', async () => {
+			const html = await fixture.readFile('/index.html');
+
+			renderComponentsChecks(html);
+		});
+	});
+});
+
+/** @param {string} html */
+function renderComponentsChecks(html) {
+	const { document } = parseHTML(html);
+	const h2 = document.querySelector('h2');
+	assert.equal(h2.textContent, 'Post with components');
+
+	// Renders custom shortcode component
+	const marquee = document.querySelector('marquee');
+	assert.notEqual(marquee, null);
+	assert.equal(marquee.hasAttribute('data-custom-marquee'), true);
+
+	// Renders Astro Code component
+	const pre = document.querySelector('pre');
+	assert.notEqual(pre, null);
+	assert.equal(pre.className, 'astro-code github-dark');
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<marquee data-custom-marquee {...Astro.props}><slot /></marquee>