[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>
This commit is contained in:
Ben Holmes
GitHub
parent
6afb1efea8
commit
86273b5881
7 changed files with 88 additions and 87 deletions
5
.changeset/thirty-crews-love.md
Normal file
5
.changeset/thirty-crews-love.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@astrojs/markdoc': patch
|
||||
---
|
||||
|
||||
Fix: Update Markdoc renderer internals to remove unneeded dependencies
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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) {
|
|||
}
|
||||
---
|
||||
|
||||
<RenderNode node={createAstroNode(content, components)} />
|
||||
<ComponentNode treeNode={createTreeNode(content, components)} />
|
||||
|
|
|
|||
81
packages/integrations/markdoc/components/TreeNode.ts
Normal file
81
packages/integrations/markdoc/components/TreeNode.ts
Normal file
|
|
@ -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)),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -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)),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue