1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
import type { AstroInstance } from 'astro';
import type { RenderableTreeNode } from '@markdoc/markdoc';
import { createComponent, renderComponent, render } from 'astro/runtime/server/index.js';
// @ts-expect-error Cannot find module 'astro:markdoc-assets' or its corresponding type declarations
import { Image } from 'astro:markdoc-assets';
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',
});
const builtInComponents: Record<string, AstroInstance['default']> = {
Image,
};
export function createTreeNode(
node: RenderableTreeNode,
userComponents: Record<string, AstroInstance['default']> = {}
): TreeNode {
const components = { ...userComponents, ...builtInComponents };
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)),
};
}
}
|
