[Markdoc] Refactor Renderer internals to use renderComponent() (#6607)

* wip: new TreeNode setup

* fix: pass children through `render`

* deps: remove stringify-attributes

* chore: changeset

---------

Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

.changeset/thirty-crews-love.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdoc': patch
+---
+
+Fix: Update Markdoc renderer internals to remove unneeded dependencies

packages/integrations/markdoc/components/RenderNode.astro

@@ -1,30 +0,0 @@
----
-import stringifyAttributes from 'stringify-attributes';
-import type { AstroNode } from './astroNode';
-
-type Props = {
-	node: AstroNode;
-};
-
-const Node = (Astro.props as Props).node;
----
-
-{
-	typeof Node === 'string' ? (
-		<Fragment set:text={Node} />
-	) : 'component' in Node ? (
-		<Node.component {...Node.props}>
-			{Node.children.map((child) => (
-				<Astro.self node={child} />
-			))}
-		</Node.component>
-	) : (
-		<Fragment>
-			<Fragment set:html={`<${Node.tag} ${stringifyAttributes(Node.attributes)}>`} />
-			{Node.children.map((child) => (
-				<Astro.self node={child} />
-			))}
-			<Fragment set:html={`</${Node.tag}>`} />
-		</Fragment>
-	)
-}

packages/integrations/markdoc/components/Renderer.astro

@@ -2,8 +2,7 @@
 import type { RenderableTreeNode } from '@markdoc/markdoc';
 import type { AstroInstance } from 'astro';
 import { validateComponentsProp } from '../dist/utils.js';
-import { createAstroNode } from './astroNode';
+import { ComponentNode, createTreeNode } from './TreeNode.js';
-import RenderNode from './RenderNode.astro';
 
 type Props = {
 	content: RenderableTreeNode;
@@ -18,4 +17,4 @@ if (components) {
 }
 ---
 
-<RenderNode node={createAstroNode(content, components)} />
+<ComponentNode treeNode={createTreeNode(content, components)} />

packages/integrations/markdoc/components/TreeNode.ts

@@ -0,0 +1,81 @@
+import type { AstroInstance } from 'astro';
+import type { RenderableTreeNode } from '@markdoc/markdoc';
+import { createComponent, renderComponent, render } from 'astro/runtime/server/index.js';
+import Markdoc from '@markdoc/markdoc';
+import { MarkdocError, isCapitalized } from '../dist/utils.js';
+
+export type TreeNode =
+	| {
+			type: 'text';
+			content: string;
+	  }
+	| {
+			type: 'component';
+			component: AstroInstance['default'];
+			props: Record<string, any>;
+			children: TreeNode[];
+	  }
+	| {
+			type: 'element';
+			tag: string;
+			attributes: Record<string, any>;
+			children: TreeNode[];
+	  };
+
+export const ComponentNode = createComponent({
+	factory(result: any, { treeNode }: { treeNode: TreeNode }) {
+		if (treeNode.type === 'text') return render`${treeNode.content}`;
+		const slots = {
+			default: () => render`${treeNode.children.map((child) =>
+				renderComponent(result, 'ComponentNode', ComponentNode, { treeNode: child })
+			)}`,
+		};
+		if (treeNode.type === 'component') {
+			return renderComponent(
+				result,
+				treeNode.component.name,
+				treeNode.component,
+				treeNode.props,
+				slots
+			);
+		}
+		return renderComponent(result, treeNode.tag, treeNode.tag, treeNode.attributes, slots);
+	},
+	propagation: 'none',
+});
+
+export function createTreeNode(
+	node: RenderableTreeNode,
+	components: Record<string, AstroInstance['default']> = {}
+): TreeNode {
+	if (typeof node === 'string' || typeof node === 'number') {
+		return { type: 'text', content: String(node) };
+	} else if (node === null || typeof node !== 'object' || !Markdoc.Tag.isTag(node)) {
+		return { type: 'text', content: '' };
+	}
+
+	if (node.name in components) {
+		const component = components[node.name];
+		const props = node.attributes;
+		const children = node.children.map((child) => createTreeNode(child, components));
+
+		return {
+			type: 'component',
+			component,
+			props,
+			children,
+		};
+	} else if (isCapitalized(node.name)) {
+		throw new MarkdocError({
+			message: `Unable to render ${JSON.stringify(node.name)}.`,
+			hint: 'Did you add this to the "components" prop on your <Content /> component?',
+		});
+	} else {
+		return {
+			type: 'element',
+			tag: node.name,
+			attributes: node.attributes,
+			children: node.children.map((child) => createTreeNode(child, components)),
+		};
+	}
+}

packages/integrations/markdoc/components/astroNode.ts

@@ -1,51 +0,0 @@
-import type { AstroInstance } from 'astro';
-import type { RenderableTreeNode } from '@markdoc/markdoc';
-import Markdoc from '@markdoc/markdoc';
-import { MarkdocError, isCapitalized } from '../dist/utils.js';
-
-export type AstroNode =
-	| string
-	| {
-			component: AstroInstance['default'];
-			props: Record<string, any>;
-			children: AstroNode[];
-	  }
-	| {
-			tag: string;
-			attributes: Record<string, any>;
-			children: AstroNode[];
-	  };
-
-export function createAstroNode(
-	node: RenderableTreeNode,
-	components: Record<string, AstroInstance['default']> = {}
-): AstroNode {
-	if (typeof node === 'string' || typeof node === 'number') {
-		return String(node);
-	} else if (node === null || typeof node !== 'object' || !Markdoc.Tag.isTag(node)) {
-		return '';
-	}
-
-	if (node.name in components) {
-		const component = components[node.name];
-		const props = node.attributes;
-		const children = node.children.map((child) => createAstroNode(child, components));
-
-		return {
-			component,
-			props,
-			children,
-		};
-	} else if (isCapitalized(node.name)) {
-		throw new MarkdocError({
-			message: `Unable to render ${JSON.stringify(node.name)}.`,
-			hint: 'Did you add this to the "components" prop on your <Content /> component?',
-		});
-	} else {
-		return {
-			tag: node.name,
-			attributes: node.attributes,
-			children: node.children.map((child) => createAstroNode(child, components)),
-		};
-	}
-}

packages/integrations/markdoc/package.json

@@ -33,7 +33,6 @@
   "dependencies": {
     "@markdoc/markdoc": "^0.2.2",
     "gray-matter": "^4.0.3",
-    "stringify-attributes": "^3.0.0",
     "zod": "^3.17.3"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -3078,13 +3078,11 @@ importers:
       gray-matter: ^4.0.3
       linkedom: ^0.14.12
       mocha: ^9.2.2
-      stringify-attributes: ^3.0.0
       vite: ^4.0.3
       zod: ^3.17.3
     dependencies:
       '@markdoc/markdoc': 0.2.2
       gray-matter: 4.0.3
-      stringify-attributes: 3.0.0
       zod: 3.20.6
     devDependencies:
       '@types/chai': 4.3.4