Add markdoc support to content layer

packages/astro/package.json

@@ -163,6 +163,7 @@
     "http-cache-semantics": "^4.1.1",
     "js-yaml": "^4.1.0",
     "kleur": "^4.1.5",
+    "linkedom": "^0.18.4",
     "magic-string": "^0.30.11",
     "micromatch": "^4.0.7",
     "mrmime": "^2.0.0",

packages/astro/src/content/loaders/glob.ts

@@ -128,17 +128,7 @@ export function glob(globOptions: GlobOptions): Loader {
 					data,
 					filePath,
 				});
-
-				if (entryType.extensions.includes('.mdx')) {
-					store.set({
-						id,
-						data: parsedData,
-						body,
-						filePath: relativePath,
-						digest,
-						deferredRender: true,
-					});
-				} else if (entryType.getRenderFunction) {
+				if (entryType.getRenderFunction) {
 					let render = renderFunctionByContentType.get(entryType);
 					if (!render) {
 						render = await entryType.getRenderFunction(settings);
@@ -170,6 +160,16 @@ export function glob(globOptions: GlobOptions): Loader {
 					if (rendered?.metadata?.imagePaths?.length) {
 						store.addAssetImports(rendered.metadata.imagePaths, relativePath);
 					}
+					// todo: add an explicit way to opt in to deferred rendering
+				} else if ('contentModuleTypes' in entryType) {
+					store.set({
+						id,
+						data: parsedData,
+						body,
+						filePath: relativePath,
+						digest,
+						deferredRender: true,
+					});
 				} else {
 					store.set({ id, data: parsedData, body, filePath: relativePath, digest });
 				}

packages/astro/test/content-layer-markdoc.test.js

@@ -0,0 +1,87 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from './test-utils.js';
+
+describe('Content layer markdoc', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/content-layer-markdoc/',
+		});
+	});
+
+	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);
+		});
+
+		it('renders content - with components inside partials', async () => {
+			const res = await fixture.fetch('/');
+			const html = await res.text();
+
+			renderComponentsInsidePartialsChecks(html);
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('renders content - with components', async () => {
+			const html = await fixture.readFile('/index.html');
+
+			renderComponentsChecks(html);
+		});
+
+		it('renders content - with components inside partials', async () => {
+			const html = await fixture.readFile('/index.html');
+
+			renderComponentsInsidePartialsChecks(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');
+}
+
+/** @param {string} html */
+function renderComponentsInsidePartialsChecks(html) {
+	const { document } = parseHTML(html);
+	// renders Counter.tsx
+	const button = document.querySelector('#counter');
+	assert.equal(button.textContent, '1');
+
+	// renders DeeplyNested.astro
+	const deeplyNested = document.querySelector('#deeply-nested');
+	assert.equal(deeplyNested.textContent, 'Deeply nested partial');
+}

packages/astro/test/content-layer-render.test.js

@@ -2,15 +2,14 @@ import assert from 'node:assert/strict';
 import { after, before, describe, it } from 'node:test';
 import { loadFixture } from './test-utils.js';
 
-describe('Content Layer dev', () => {
+describe('Content Layer MDX rendering dev', () => {
 	/** @type {import("./test-utils.js").Fixture} */
 	let fixture;
 
 	let devServer;
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/content-layer-rendering/',
-			cacheDir: './fixtures/content-layer-rendering/.cache',
 		});
 		devServer = await fixture.startDevServer();
 	});
@@ -27,13 +26,12 @@ describe('Content Layer dev', () => {
 	});
 });
 
-describe('Content Layer build', () => {
+describe('Content Layer MDX rendering build', () => {
 	/** @type {import("./test-utils.js").Fixture} */
 	let fixture;
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/content-layer-rendering/',
-			cacheDir: './fixtures/content-layer-rendering/.cache',
 		});
 		await fixture.build();
 	});

packages/astro/test/fixtures/content-layer-markdoc/astro.config.mjs

@@ -0,0 +1,9 @@
+import markdoc from '@astrojs/markdoc';
+import preact from '@astrojs/preact';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [markdoc(), preact()],
+	experimental: { contentLayer: true }
+});

packages/astro/test/fixtures/content-layer-markdoc/content/_nested.mdoc

@@ -0,0 +1,3 @@
+Render components from a deeply nested partial:
+
+{% deeply-nested /%}

packages/astro/test/fixtures/content-layer-markdoc/content/blog/_counter.mdoc

@@ -0,0 +1,7 @@
+# Hello from a partial!
+
+Render a component from a partial:
+
+{% counter /%}
+
+{% partial file="../_nested.mdoc" /%}

packages/astro/test/fixtures/content-layer-markdoc/content/blog/with-components.mdoc

@@ -0,0 +1,19 @@
+---
+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 %}
+
+{% partial file="_counter.mdoc" /%}
+
+And a code component for code blocks:
+
+```js
+const isRenderedWithShiki = true;
+```

packages/astro/test/fixtures/content-layer-markdoc/markdoc.config.ts

@@ -0,0 +1,32 @@
+import { Markdoc, component, defineMarkdocConfig } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+	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'],
+					errorLevel: 'critical',
+				},
+			},
+		},
+		counter: {
+			render: component('./src/components/CounterWrapper.astro'),
+		},
+		'deeply-nested': {
+			render: component('./src/components/DeeplyNested.astro'),
+		},
+	},
+});

packages/astro/test/fixtures/content-layer-markdoc/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@test/content-layer-markdoc",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/markdoc": "workspace:*",
+    "@astrojs/preact": "workspace:*",
+    "astro": "workspace:*",
+    "preact": "^10.23.1"
+  }
+}

packages/astro/test/fixtures/content-layer-markdoc/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} />

packages/astro/test/fixtures/content-layer-markdoc/src/components/Counter.tsx

@@ -0,0 +1,10 @@
+import { useState } from 'preact/hooks';
+
+export default function Counter() {
+	const [count, setCount] = useState(1);
+	return (
+		<button id="counter" onClick={() => setCount(count + 1)}>
+			{count}
+		</button>
+	);
+}

packages/astro/test/fixtures/content-layer-markdoc/src/components/CounterWrapper.astro

@@ -0,0 +1,5 @@
+---
+import Counter from './Counter';
+---
+
+<Counter client:load />

packages/astro/test/fixtures/content-layer-markdoc/src/components/CustomMarquee.astro

@@ -0,0 +1 @@
+<marquee data-custom-marquee {...Astro.props}><slot /></marquee>

packages/astro/test/fixtures/content-layer-markdoc/src/components/DeeplyNested.astro

@@ -0,0 +1,5 @@
+---
+
+---
+
+<p id="deeply-nested">Deeply nested partial</p>

packages/astro/test/fixtures/content-layer-markdoc/src/content/config.ts

@@ -0,0 +1,11 @@
+import { defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+const blog = defineCollection({
+	loader: glob({
+		pattern: '*.mdoc',
+		base: 'content/blog',
+	}),
+});
+
+export const collections = { blog };

packages/astro/test/fixtures/content-layer-markdoc/src/pages/index.astro

@@ -0,0 +1,19 @@
+---
+import { getEntry, render } from "astro:content";
+
+const post = await getEntry('blog', 'with-components');
+const { Content } = await render(post);
+---
+
+<!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>