refactor: remove advanced component API

This commit is contained in:
bholmesdev 2023-03-01 14:20:48 -05:00
parent 5966a9f5e1
commit 95dab5393b
3 changed files with 12 additions and 36 deletions

View file

@ -1,11 +1,12 @@
--- ---
import type { RenderableTreeNode } from '@markdoc/markdoc'; import type { RenderableTreeNode } from '@markdoc/markdoc';
import { ComponentRenderer, createAstroNode } from './astroNode'; import type { AstroInstance } from 'astro';
import { createAstroNode } from './astroNode';
import RenderNode from './RenderNode.astro'; import RenderNode from './RenderNode.astro';
type Props = { type Props = {
content: RenderableTreeNode; content: RenderableTreeNode;
components: Record<string, ComponentRenderer>; components: Record<string, AstroInstance['default']>;
}; };
const { content, components } = Astro.props as Props; const { content, components } = Astro.props as Props;

View file

@ -1,18 +1,11 @@
import type { ComponentInstance } from 'astro'; import type { AstroInstance } from 'astro';
import type { RenderableTreeNode, Tag } from '@markdoc/markdoc'; import type { RenderableTreeNode } from '@markdoc/markdoc';
import Markdoc from '@markdoc/markdoc'; import Markdoc from '@markdoc/markdoc';
export type ComponentRenderer =
| ComponentInstance['default']
| {
component: ComponentInstance['default'];
props?(params: { attributes: Record<string, any>; getTreeNode(): Tag }): Record<string, any>;
};
export type AstroNode = export type AstroNode =
| string | string
| { | {
component: ComponentInstance['default']; component: AstroInstance['default'];
props: Record<string, any>; props: Record<string, any>;
children: AstroNode[]; children: AstroNode[];
} }
@ -24,7 +17,7 @@ export type AstroNode =
export function createAstroNode( export function createAstroNode(
node: RenderableTreeNode, node: RenderableTreeNode,
components: Record<string, ComponentRenderer> = {} components: Record<string, AstroInstance['default']> = {}
): AstroNode { ): AstroNode {
if (typeof node === 'string' || typeof node === 'number') { if (typeof node === 'string' || typeof node === 'number') {
return String(node); return String(node);
@ -33,18 +26,10 @@ export function createAstroNode(
} }
if (node.name in components) { if (node.name in components) {
const componentRenderer = components[node.name]; const component = components[node.name];
const component = const props = node.attributes;
'component' in componentRenderer ? componentRenderer.component : componentRenderer;
const props = console.log({ node, component, props, components });
'props' in componentRenderer && typeof componentRenderer.props === 'function'
? componentRenderer.props({
attributes: node.attributes,
getTreeNode() {
return node;
},
})
: node.attributes;
const children = node.children.map((child) => createAstroNode(child, components)); const children = node.children.map((child) => createAstroNode(child, components));

View file

@ -1,18 +1,8 @@
declare module 'astro:content' { declare module 'astro:content' {
type ComponentRenderer =
| import('astro').ComponentInstance['default']
| {
component: import('astro').ComponentInstance['default'];
props?(params: {
attributes: Record<string, any>;
getTreeNode(): typeof import('@astrojs/markdoc').Markdoc.Tag;
}): Record<string, any>;
};
interface Render { interface Render {
'.mdoc': Promise<{ '.mdoc': Promise<{
Content(props: { Content(props: {
components?: Record<string, ComponentRenderer>; components?: Record<string, import('astro').AstroInstance['default']>;
}): import('astro').MarkdownInstance<{}>['Content']; }): import('astro').MarkdownInstance<{}>['Content'];
}>; }>;
} }