michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix missing styles and scripts on document: {render:null} (#7309)

Browse source 
* fix: propagate assets when using document `render: null`

* fix: reverse spread order

* refactor: use README rec in test

* chore: changeset

* chore: revert unneeded changes
This commit is contained in:
Ben Holmes 2023-06-06 13:40:04 -04:00 committed by GitHub
parent f63d1d0c4d
commit 2a4bb23b2f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/shaggy-deers-end.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/markdoc': patch
---
Fix missing styles and scripts for components when using `document: { render: null }` in the Markdoc config.

8
packages/integrations/markdoc/README.md
View file

@ -151,9 +151,8 @@ import Heading from './src/components/Heading.astro';
export default defineMarkdocConfig({ export default defineMarkdocConfig({
nodes: { nodes: {
heading: { heading: {
...nodes.heading, // Preserve default anchor link generation
render: Heading, render: Heading,
// Preserve default anchor link generation
...nodes.heading,
}, },
}, },
}) })
@ -225,8 +224,8 @@ import { defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
export default defineMarkdocConfig({ export default defineMarkdocConfig({
nodes: { nodes: {
document: { document: {
render: null, // default 'article'
...nodes.document, // Apply defaults for other options ...nodes.document, // Apply defaults for other options
render: null, // default 'article'
}, },
}, },
}) })
@ -246,9 +245,8 @@ import Quote from './src/components/Quote.astro';
export default defineMarkdocConfig({ export default defineMarkdocConfig({
nodes: { nodes: {
blockquote: { blockquote: {
...nodes.blockquote, // Apply Markdoc's defaults for other options
render: Quote, render: Quote,
// Apply Markdoc's defaults for other options
...nodes.blockquote,
}, },
}, },
}) })

8
packages/integrations/markdoc/components/Renderer.astro
View file

@ -15,4 +15,10 @@ const ast = Markdoc.Ast.fromJSON(stringifiedAst);
const content = Markdoc.transform(ast, config); const content = Markdoc.transform(ast, config);
--- ---
<ComponentNode treeNode={await createTreeNode(content)} /> {
Array.isArray(content) ? (
content.map(async (c) => <ComponentNode treeNode={await createTreeNode(c)} />)
) : (
<ComponentNode treeNode={await createTreeNode(content)} />
)
}

14
packages/integrations/markdoc/components/TreeNode.ts
View file

@ -1,5 +1,4 @@
import type { AstroInstance } from 'astro'; import type { AstroInstance } from 'astro';
import { Fragment } from 'astro/jsx-runtime';
import type { RenderableTreeNode } from '@markdoc/markdoc'; import type { RenderableTreeNode } from '@markdoc/markdoc';
import Markdoc from '@markdoc/markdoc'; import Markdoc from '@markdoc/markdoc';
import { import {
@ -106,18 +105,11 @@ export const ComponentNode = createComponent({
propagation: 'self', propagation: 'self',
}); });
export async function createTreeNode(node: RenderableTreeNode | RenderableTreeNode[]): TreeNode { export async function createTreeNode(node: RenderableTreeNode): Promise<TreeNode> {
if (isHTMLString(node)) { if (isHTMLString(node)) {
return { type: 'text', content: node as HTMLString }; return { type: 'text', content: node as HTMLString };
} else if (typeof node === 'string' || typeof node === 'number') { } else if (typeof node === 'string' || typeof node === 'number') {
return { type: 'text', content: String(node) }; return { type: 'text', content: String(node) };
} else if (Array.isArray(node)) {
return {
type: 'component',
component: Fragment,
props: {},
children: await Promise.all(node.map((child) => createTreeNode(child))),
};
} else if (node === null || typeof node !== 'object' || !Markdoc.Tag.isTag(node)) { } else if (node === null || typeof node !== 'object' || !Markdoc.Tag.isTag(node)) {
return { type: 'text', content: '' }; return { type: 'text', content: '' };
} }
@ -136,7 +128,7 @@ export async function createTreeNode(node: RenderableTreeNode | RenderableTreeNo
}; };
} else if (isPropagatedAssetsModule(node.name)) { } else if (isPropagatedAssetsModule(node.name)) {
const { collectedStyles, collectedLinks, collectedScripts } = node.name; const { collectedStyles, collectedLinks, collectedScripts } = node.name;
const component = (await node.name.getMod())?.default ?? Fragment; const component = (await node.name.getMod()).default;
const props = node.attributes; const props = node.attributes;
return { return {
@ -160,7 +152,7 @@ export async function createTreeNode(node: RenderableTreeNode | RenderableTreeNo
type PropagatedAssetsModule = { type PropagatedAssetsModule = {
__astroPropagation: true; __astroPropagation: true;
getMod: () => Promise<AstroInstance['default']>; getMod: () => Promise<AstroInstance>;
collectedStyles: string[]; collectedStyles: string[];
collectedLinks: string[]; collectedLinks: string[];
collectedScripts: string[]; collectedScripts: string[];

20
packages/integrations/markdoc/test/fixtures/render-null/markdoc.config.mjs vendored
View file

@ -1,26 +1,10 @@
import { defineMarkdocConfig } from '@astrojs/markdoc/config'; import { defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
export default defineMarkdocConfig({ export default defineMarkdocConfig({
nodes: { nodes: {
document: { document: {
...nodes.document,
render: null, render: null,
// Defaults from `Markdoc.nodes.document`
children: [
'heading',
'paragraph',
'image',
'table',
'tag',
'fence',
'blockquote',
'comment',
'list',
'hr',
],
attributes: {
frontmatter: { render: false },
},
} }
} }
}) })