refactor: remove advanced component API
This commit is contained in:
parent
5966a9f5e1
commit
95dab5393b
3 changed files with 12 additions and 36 deletions
|
@ -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;
|
||||||
|
|
|
@ -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));
|
||||||
|
|
||||||
|
|
|
@ -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'];
|
||||||
}>;
|
}>;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue