diff --git a/.changeset/thirty-crews-love.md b/.changeset/thirty-crews-love.md
new file mode 100644
index 000000000000..fd9efd9c2baf
--- /dev/null
+++ b/.changeset/thirty-crews-love.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/markdoc': patch
+---
+
+Fix: Update Markdoc renderer internals to remove unneeded dependencies
diff --git a/packages/integrations/markdoc/components/RenderNode.astro b/packages/integrations/markdoc/components/RenderNode.astro
deleted file mode 100644
index a683cd9839e5..000000000000
--- a/packages/integrations/markdoc/components/RenderNode.astro
+++ /dev/null
@@ -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' ? (
-
- ) : 'component' in Node ? (
-
- {Node.children.map((child) => (
-
- ))}
-
- ) : (
-
- `} />
- {Node.children.map((child) => (
-
- ))}
- `} />
-
- )
-}
diff --git a/packages/integrations/markdoc/components/Renderer.astro b/packages/integrations/markdoc/components/Renderer.astro
index 4fce72b0407f..6ae8ee85079c 100644
--- a/packages/integrations/markdoc/components/Renderer.astro
+++ b/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 RenderNode from './RenderNode.astro';
+import { ComponentNode, createTreeNode } from './TreeNode.js';
type Props = {
content: RenderableTreeNode;
@@ -18,4 +17,4 @@ if (components) {
}
---
-
+
diff --git a/packages/integrations/markdoc/components/TreeNode.ts b/packages/integrations/markdoc/components/TreeNode.ts
new file mode 100644
index 000000000000..36fd63fee891
--- /dev/null
+++ b/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;
+ children: TreeNode[];
+ }
+ | {
+ type: 'element';
+ tag: string;
+ attributes: Record;
+ 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 = {}
+): 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 component?',
+ });
+ } else {
+ return {
+ type: 'element',
+ tag: node.name,
+ attributes: node.attributes,
+ children: node.children.map((child) => createTreeNode(child, components)),
+ };
+ }
+}
diff --git a/packages/integrations/markdoc/components/astroNode.ts b/packages/integrations/markdoc/components/astroNode.ts
deleted file mode 100644
index 12a0cd0a6822..000000000000
--- a/packages/integrations/markdoc/components/astroNode.ts
+++ /dev/null
@@ -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;
- children: AstroNode[];
- }
- | {
- tag: string;
- attributes: Record;
- children: AstroNode[];
- };
-
-export function createAstroNode(
- node: RenderableTreeNode,
- components: Record = {}
-): 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 component?',
- });
- } else {
- return {
- tag: node.name,
- attributes: node.attributes,
- children: node.children.map((child) => createAstroNode(child, components)),
- };
- }
-}
diff --git a/packages/integrations/markdoc/package.json b/packages/integrations/markdoc/package.json
index e1cb6b84c7c6..1c9629e3d07d 100644
--- a/packages/integrations/markdoc/package.json
+++ b/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": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8413313b73e1..0c78b695b52c 100644
--- a/pnpm-lock.yaml
+++ b/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