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 { Fragment } from 'astro/jsx-runtime';
import type { RenderableTreeNode } from '@markdoc/markdoc';
import Markdoc from '@markdoc/markdoc';
import {
createComponent,
renderComponent,
render,
HTMLString,
isHTMLString,
} from 'astro/runtime/server/index.js';
export type TreeNode =
| {
type: 'text';
content: string | HTMLString;
}
| {
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 | RenderableTreeNode[]): 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: node.map((child) => createTreeNode(child)),
};
} else if (node === null || typeof node !== 'object' || !Markdoc.Tag.isTag(node)) {
return { type: 'text', content: '' };
}
if (typeof node.name === 'function') {
const component = node.name;
const props = node.attributes;
const children = node.children.map((child) => createTreeNode(child));
return {
type: 'component',
component,
props,
children,
};
} else {
return {
type: 'element',
tag: node.name,
attributes: node.attributes,
children: node.children.map((child) => createTreeNode(child)),
};
}
}
|
