Fix missing styles and scripts on document: {render:null} (#7309)

* fix: propagate assets when using document `render: null`

* fix: reverse spread order

* refactor: use README rec in test

* chore: changeset

* chore: revert unneeded changes

.changeset/shaggy-deers-end.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdoc': patch
+---
+
+Fix missing styles and scripts for components when using `document: { render: null }` in the Markdoc config.

packages/integrations/markdoc/README.md

@@ -151,9 +151,8 @@ import Heading from './src/components/Heading.astro';
 export default defineMarkdocConfig({
   nodes: {
     heading: {
+      ...nodes.heading, // Preserve default anchor link generation
       render: Heading,
-      // Preserve default anchor link generation
-      ...nodes.heading,
     },
   },
 })
@@ -225,8 +224,8 @@ import { defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
 export default defineMarkdocConfig({
   nodes: {
     document: {
-      render: null, // default 'article'
       ...nodes.document, // Apply defaults for other options
+      render: null, // default 'article'
     },
   },
 })
@@ -246,9 +245,8 @@ import Quote from './src/components/Quote.astro';
 export default defineMarkdocConfig({
   nodes: {
     blockquote: {
+      ...nodes.blockquote, // Apply Markdoc's defaults for other options
       render: Quote,
-      // Apply Markdoc's defaults for other options
-      ...nodes.blockquote,
     },
   },
 })

packages/integrations/markdoc/components/Renderer.astro

@@ -15,4 +15,10 @@ const ast = Markdoc.Ast.fromJSON(stringifiedAst);
 const content = Markdoc.transform(ast, config);
 ---
 
-<ComponentNode treeNode={await createTreeNode(content)} />
+{
+	Array.isArray(content) ? (
+		content.map(async (c) => <ComponentNode treeNode={await createTreeNode(c)} />)
+	) : (
+		<ComponentNode treeNode={await createTreeNode(content)} />
+	)
+}

packages/integrations/markdoc/components/TreeNode.ts

@@ -1,5 +1,4 @@
 import type { AstroInstance } from 'astro';
-import { Fragment } from 'astro/jsx-runtime';
 import type { RenderableTreeNode } from '@markdoc/markdoc';
 import Markdoc from '@markdoc/markdoc';
 import {
@@ -106,18 +105,11 @@ export const ComponentNode = createComponent({
 	propagation: 'self',
 });
 
-export async function createTreeNode(node: RenderableTreeNode | RenderableTreeNode[]): TreeNode {
+export async function createTreeNode(node: RenderableTreeNode): Promise<TreeNode> {
 	if (isHTMLString(node)) {
 		return { type: 'text', content: node as HTMLString };
 	} else if (typeof node === 'string' || typeof node === 'number') {
 		return { type: 'text', content: String(node) };
-	} else if (Array.isArray(node)) {
-		return {
-			type: 'component',
-			component: Fragment,
-			props: {},
-			children: await Promise.all(node.map((child) => createTreeNode(child))),
-		};
 	} else if (node === null || typeof node !== 'object' || !Markdoc.Tag.isTag(node)) {
 		return { type: 'text', content: '' };
 	}
@@ -136,7 +128,7 @@ export async function createTreeNode(node: RenderableTreeNode | RenderableTreeNo
 		};
 	} else if (isPropagatedAssetsModule(node.name)) {
 		const { collectedStyles, collectedLinks, collectedScripts } = node.name;
-		const component = (await node.name.getMod())?.default ?? Fragment;
+		const component = (await node.name.getMod()).default;
 		const props = node.attributes;
 
 		return {
@@ -160,7 +152,7 @@ export async function createTreeNode(node: RenderableTreeNode | RenderableTreeNo
 
 type PropagatedAssetsModule = {
 	__astroPropagation: true;
-	getMod: () => Promise<AstroInstance['default']>;
+	getMod: () => Promise<AstroInstance>;
 	collectedStyles: string[];
 	collectedLinks: string[];
 	collectedScripts: string[];

packages/integrations/markdoc/test/fixtures/render-null/markdoc.config.mjs

@@ -1,26 +1,10 @@
-import { defineMarkdocConfig } from '@astrojs/markdoc/config';
+import { defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
 
 export default defineMarkdocConfig({
 	nodes: {
 		document: {
+			...nodes.document,
 			render: null,
-
-			// Defaults from `Markdoc.nodes.document`
-			children: [
-				'heading',
-				'paragraph',
-				'image',
-				'table',
-				'tag',
-				'fence',
-				'blockquote',
-				'comment',
-				'list',
-				'hr',
-			],
-			attributes: {
-				frontmatter: { render: false },
-			},
 		}
 	}
 })