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

[Markdoc] Fix: Support render: null (#6723)

Browse source 
* fix: handle array of tree nodes

* test: render null in document node

* chore: lock

* refactor: consolidate render test logic

* chore: changeset
This commit is contained in:
Ben Holmes 2023-04-03 11:27:51 -04:00 committed by GitHub
parent ad80d830a2
commit 73fcc7627e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 307 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/mean-guests-joke.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/markdoc': patch
---
Fix: when using `render: null` in your config, content is now rendered without a wrapper element.

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

@ -1,4 +1,5 @@
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 { createComponent, renderComponent, render } from 'astro/runtime/server/index.js'; import { createComponent, renderComponent, render } from 'astro/runtime/server/index.js';
@ -44,9 +45,16 @@ export const ComponentNode = createComponent({
propagation: 'none', propagation: 'none',
}); });
export function createTreeNode(node: RenderableTreeNode): TreeNode { export function createTreeNode(node: RenderableTreeNode | RenderableTreeNode[]): TreeNode {
if (typeof node === 'string' || typeof node === 'number') { 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: 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: '' };
} }

7
packages/integrations/markdoc/test/fixtures/render-null/astro.config.mjs vendored Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'astro/config';
import markdoc from '@astrojs/markdoc';
// https://astro.build/config
export default defineConfig({
integrations: [markdoc()],
});

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

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

9
packages/integrations/markdoc/test/fixtures/render-null/package.json vendored Normal file
View file

@ -0,0 +1,9 @@
{
"name": "@test/markdoc-render-null",
"version": "0.0.0",
"private": true,
"dependencies": {
"@astrojs/markdoc": "workspace:*",
"astro": "workspace:*"
}
}

7
packages/integrations/markdoc/test/fixtures/render-null/src/content/blog/render-null.mdoc vendored Normal file
View file

@ -0,0 +1,7 @@
---
title: Post with render null
---
## Post with render null
This should render the contents inside a fragment!

19
packages/integrations/markdoc/test/fixtures/render-null/src/pages/index.astro vendored Normal file
View file

@ -0,0 +1,19 @@
---
import { getEntryBySlug } from "astro:content";
const post = await getEntryBySlug('blog', 'render-null');
const { Content } = await post.render();
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Content</title>
</head>
<body>
<Content />
</body>
</html>

130
packages/integrations/markdoc/test/render.test.js
View file

@ -16,11 +16,8 @@ describe('Markdoc - render', () => {
const res = await fixture.fetch('/'); const res = await fixture.fetch('/');
const html = await res.text(); const html = await res.text();
const { document } = parseHTML(html);
const h2 = document.querySelector('h2'); renderSimpleChecks(html);
expect(h2.textContent).to.equal('Simple post');
const p = document.querySelector('p');
expect(p.textContent).to.equal('This is a simple Markdoc post.');
await server.stop(); await server.stop();
}); });
@ -31,17 +28,8 @@ describe('Markdoc - render', () => {
const res = await fixture.fetch('/'); const res = await fixture.fetch('/');
const html = await res.text(); const html = await res.text();
const { document } = parseHTML(html);
const h2 = document.querySelector('h2');
expect(h2.textContent).to.equal('Post with config');
const textContent = html;
expect(textContent).to.not.include('Hello'); renderConfigChecks(html);
expect(textContent).to.include('Hola');
expect(textContent).to.include(`Konnichiwa`);
const runtimeVariable = document.querySelector('#runtime-variable');
expect(runtimeVariable?.textContent?.trim()).to.equal('working!');
await server.stop(); await server.stop();
}); });
@ -52,19 +40,20 @@ describe('Markdoc - render', () => {
const res = await fixture.fetch('/'); const res = await fixture.fetch('/');
const html = await res.text(); const html = await res.text();
const { document } = parseHTML(html);
const h2 = document.querySelector('h2');
expect(h2.textContent).to.equal('Post with components');
// Renders custom shortcode component renderComponentsChecks(html);
const marquee = document.querySelector('marquee');
expect(marquee).to.not.be.null;
expect(marquee.hasAttribute('data-custom-marquee')).to.equal(true);
// Renders Astro Code component await server.stop();
const pre = document.querySelector('pre'); });
expect(pre).to.not.be.null;
expect(pre.className).to.equal('astro-code'); it('renders content - with `render: null` in document', async () => {
const fixture = await getFixture('render-null');
const server = await fixture.startDevServer();
const res = await fixture.fetch('/');
const html = await res.text();
renderNullChecks(html);
await server.stop(); await server.stop();
}); });
@ -76,11 +65,8 @@ describe('Markdoc - render', () => {
await fixture.build(); await fixture.build();
const html = await fixture.readFile('/index.html'); const html = await fixture.readFile('/index.html');
const { document } = parseHTML(html);
const h2 = document.querySelector('h2'); renderSimpleChecks(html);
expect(h2.textContent).to.equal('Simple post');
const p = document.querySelector('p');
expect(p.textContent).to.equal('This is a simple Markdoc post.');
}); });
it('renders content - with config', async () => { it('renders content - with config', async () => {
@ -88,17 +74,8 @@ describe('Markdoc - render', () => {
await fixture.build(); await fixture.build();
const html = await fixture.readFile('/index.html'); const html = await fixture.readFile('/index.html');
const { document } = parseHTML(html);
const h2 = document.querySelector('h2');
expect(h2.textContent).to.equal('Post with config');
const textContent = html;
expect(textContent).to.not.include('Hello'); renderConfigChecks(html);
expect(textContent).to.include('Hola');
expect(textContent).to.include(`Konnichiwa`);
const runtimeVariable = document.querySelector('#runtime-variable');
expect(runtimeVariable?.textContent?.trim()).to.equal('working!');
}); });
it('renders content - with components', async () => { it('renders content - with components', async () => {
@ -106,19 +83,68 @@ describe('Markdoc - render', () => {
await fixture.build(); await fixture.build();
const html = await fixture.readFile('/index.html'); const html = await fixture.readFile('/index.html');
const { document } = parseHTML(html);
const h2 = document.querySelector('h2');
expect(h2.textContent).to.equal('Post with components');
// Renders custom shortcode component renderComponentsChecks(html);
const marquee = document.querySelector('marquee'); });
expect(marquee).to.not.be.null;
expect(marquee.hasAttribute('data-custom-marquee')).to.equal(true);
// Renders Astro Code component it('renders content - with `render: null` in document', async () => {
const pre = document.querySelector('pre'); const fixture = await getFixture('render-null');
expect(pre).to.not.be.null; await fixture.build();
expect(pre.className).to.equal('astro-code');
const html = await fixture.readFile('/index.html');
renderNullChecks(html);
}); });
}); });
}); });
/**
* @param {string} html
*/
function renderNullChecks(html) {
const { document } = parseHTML(html);
const h2 = document.querySelector('h2');
expect(h2.textContent).to.equal('Post with render null');
expect(h2.parentElement?.tagName).to.equal('BODY');
}
/** @param {string} html */
function renderComponentsChecks(html) {
const { document } = parseHTML(html);
const h2 = document.querySelector('h2');
expect(h2.textContent).to.equal('Post with components');
// Renders custom shortcode component
const marquee = document.querySelector('marquee');
expect(marquee).to.not.be.null;
expect(marquee.hasAttribute('data-custom-marquee')).to.equal(true);
// Renders Astro Code component
const pre = document.querySelector('pre');
expect(pre).to.not.be.null;
expect(pre.className).to.equal('astro-code');
}
/** @param {string} html */
function renderConfigChecks(html) {
const { document } = parseHTML(html);
const h2 = document.querySelector('h2');
expect(h2.textContent).to.equal('Post with config');
const textContent = html;
expect(textContent).to.not.include('Hello');
expect(textContent).to.include('Hola');
expect(textContent).to.include(`Konnichiwa`);
const runtimeVariable = document.querySelector('#runtime-variable');
expect(runtimeVariable?.textContent?.trim()).to.equal('working!');
}
/** @param {string} html */
function renderSimpleChecks(html) {
const { document } = parseHTML(html);
const h2 = document.querySelector('h2');
expect(h2.textContent).to.equal('Simple post');
const p = document.querySelector('p');
expect(p.textContent).to.equal('This is a simple Markdoc post.');
}

152
pnpm-lock.yaml
View file

@ -332,8 +332,8 @@ importers:
astro: ^2.1.9 astro: ^2.1.9
kleur: ^4.1.5 kleur: ^4.1.5
dependencies: dependencies:
'@astrojs/markdoc': link:../../packages/integrations/markdoc '@astrojs/markdoc': 0.1.0_astro@2.1.9
astro: link:../../packages/astro astro: 2.1.9
kleur: 4.1.5 kleur: 4.1.5
examples/with-markdown-plugins: examples/with-markdown-plugins:
@ -3150,6 +3150,14 @@ importers:
'@astrojs/markdoc': link:../../.. '@astrojs/markdoc': link:../../..
astro: link:../../../../../astro astro: link:../../../../../astro
packages/integrations/markdoc/test/fixtures/render-null:
specifiers:
'@astrojs/markdoc': workspace:*
astro: workspace:*
dependencies:
'@astrojs/markdoc': link:../../..
astro: link:../../../../../astro
packages/integrations/markdoc/test/fixtures/render-simple: packages/integrations/markdoc/test/fixtures/render-simple:
specifiers: specifiers:
'@astrojs/markdoc': workspace:* '@astrojs/markdoc': workspace:*
@ -4268,6 +4276,46 @@ packages:
- react - react
dev: false dev: false
/@astrojs/markdoc/0.1.0_astro@2.1.9:
resolution: {integrity: sha512-t+9pDDi8JpAoUfkHI7V8lGxrtbYx4nx3QZ5OOdbMtj5BTUqyR+rVQyA5dRcIsEFvg2Wfqb/BqsjpXOrt75s4UA==}
engines: {node: '>=16.12.0'}
peerDependencies:
astro: '*'
dependencies:
'@markdoc/markdoc': 0.2.2
astro: 2.1.9
esbuild: 0.17.12
gray-matter: 4.0.3
kleur: 4.1.5
zod: 3.20.6
transitivePeerDependencies:
- '@types/react'
- react
dev: false
/@astrojs/markdown-remark/2.1.2_astro@2.1.9:
resolution: {integrity: sha512-rYkmFEv2w7oEk6ZPgxHkhWzwcxSUGc1vJU0cbCu5sHF8iFNnc1cmMsjXWa5DrU5sCEf8VVYE1iFlbbnFzvHQJw==}
peerDependencies:
astro: '*'
dependencies:
'@astrojs/prism': 2.1.1
astro: 2.1.9
github-slugger: 1.5.0
import-meta-resolve: 2.2.1
rehype-raw: 6.1.1
rehype-stringify: 9.0.3
remark-gfm: 3.0.1
remark-parse: 10.0.1
remark-rehype: 10.1.0
remark-smartypants: 2.0.0
shiki: 0.11.1
unified: 10.1.2
unist-util-visit: 4.1.2
vfile: 5.3.7
transitivePeerDependencies:
- supports-color
dev: false
/@astrojs/markdown-remark/2.1.2_astro@packages+astro: /@astrojs/markdown-remark/2.1.2_astro@packages+astro:
resolution: {integrity: sha512-rYkmFEv2w7oEk6ZPgxHkhWzwcxSUGc1vJU0cbCu5sHF8iFNnc1cmMsjXWa5DrU5sCEf8VVYE1iFlbbnFzvHQJw==} resolution: {integrity: sha512-rYkmFEv2w7oEk6ZPgxHkhWzwcxSUGc1vJU0cbCu5sHF8iFNnc1cmMsjXWa5DrU5sCEf8VVYE1iFlbbnFzvHQJw==}
peerDependencies: peerDependencies:
@ -4347,6 +4395,22 @@ packages:
prismjs: 1.29.0 prismjs: 1.29.0
dev: false dev: false
/@astrojs/telemetry/2.1.0:
resolution: {integrity: sha512-P3gXNNOkRJM8zpnasNoi5kXp3LnFt0smlOSUXhkynfJpTJMIDrcMbKpNORN0OYbqpKt9JPdgRN7nsnGWpbH1ww==}
engines: {node: '>=16.12.0'}
dependencies:
ci-info: 3.7.1
debug: 4.3.4
dlv: 1.1.3
dset: 3.1.2
is-docker: 3.0.0
is-wsl: 2.2.0
undici: 5.20.0
which-pm-runs: 1.1.0
transitivePeerDependencies:
- supports-color
dev: false
/@astrojs/webapi/1.1.1: /@astrojs/webapi/1.1.1:
resolution: {integrity: sha512-yeUvP27PoiBK/WCxyQzC4HLYZo4Hg6dzRd/dTsL50WGlAQVCwWcqzVJrIZKvzNDNaW/fIXutZTmdj6nec0PIGg==} resolution: {integrity: sha512-yeUvP27PoiBK/WCxyQzC4HLYZo4Hg6dzRd/dTsL50WGlAQVCwWcqzVJrIZKvzNDNaW/fIXutZTmdj6nec0PIGg==}
dependencies: dependencies:
@ -4354,6 +4418,12 @@ packages:
node-fetch: 3.3.0 node-fetch: 3.3.0
dev: false dev: false
/@astrojs/webapi/2.1.0:
resolution: {integrity: sha512-sbF44s/uU33jAdefzKzXZaENPeXR0sR3ptLs+1xp9xf5zIBhedH2AfaFB5qTEv9q5udUVoKxubZGT3G1nWs6rA==}
dependencies:
undici: 5.20.0
dev: false
/@babel/code-frame/7.18.6: /@babel/code-frame/7.18.6:
resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==} resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
engines: {node: '>=6.9.0'} engines: {node: '>=6.9.0'}
@ -8790,6 +8860,79 @@ packages:
ultrahtml: 0.1.3 ultrahtml: 0.1.3
dev: false dev: false
/astro/2.1.9:
resolution: {integrity: sha512-UkbG0lgue1b/t4yMI+AkAGEfdOwcPS2RUYQ/QIurtKjP6W5gtKQveRTBuHH7iwiBziH+z8Ecc5/OAALoXSvMlQ==}
engines: {node: '>=16.12.0', npm: '>=6.14.0'}
hasBin: true
peerDependencies:
sharp: ^0.31.3
peerDependenciesMeta:
sharp:
optional: true
dependencies:
'@astrojs/compiler': 1.3.0
'@astrojs/language-server': 0.28.3
'@astrojs/markdown-remark': 2.1.2_astro@2.1.9
'@astrojs/telemetry': 2.1.0
'@astrojs/webapi': 2.1.0
'@babel/core': 7.20.12
'@babel/generator': 7.20.14
'@babel/parser': 7.20.15
'@babel/plugin-transform-react-jsx': 7.20.13_@babel+core@7.20.12
'@babel/traverse': 7.20.13
'@babel/types': 7.20.7
'@types/babel__core': 7.20.0
'@types/yargs-parser': 21.0.0
acorn: 8.8.2
boxen: 6.2.1
chokidar: 3.5.3
ci-info: 3.7.1
common-ancestor-path: 1.0.1
cookie: 0.5.0
debug: 4.3.4
deepmerge-ts: 4.3.0
devalue: 4.2.3
diff: 5.1.0
es-module-lexer: 1.1.1
estree-walker: 3.0.3
execa: 6.1.0
fast-glob: 3.2.12
github-slugger: 2.0.0
gray-matter: 4.0.3
html-escaper: 3.0.3
kleur: 4.1.5
magic-string: 0.27.0
mime: 3.0.0
ora: 6.1.2
path-to-regexp: 6.2.1
preferred-pm: 3.0.3
prompts: 2.4.2
rehype: 12.0.1
semver: 7.3.8
server-destroy: 1.0.1
shiki: 0.11.1
slash: 4.0.0
string-width: 5.1.2
strip-ansi: 7.0.1
supports-esm: 1.0.0
tsconfig-resolver: 3.0.1
typescript: 5.0.2
unist-util-visit: 4.1.2
vfile: 5.3.7
vite: 4.1.2
vitefu: 0.2.4_vite@4.1.2
yargs-parser: 21.1.1
zod: 3.20.6
transitivePeerDependencies:
- '@types/node'
- less
- sass
- stylus
- sugarss
- supports-color
- terser
dev: false
/async-sema/3.1.1: /async-sema/3.1.1:
resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==} resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
dev: false dev: false
@ -14986,7 +15129,6 @@ packages:
hasBin: true hasBin: true
optionalDependencies: optionalDependencies:
fsevents: 2.3.2 fsevents: 2.3.2
dev: true
/run-parallel/1.2.0: /run-parallel/1.2.0:
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@ -16525,7 +16667,7 @@ packages:
esbuild: 0.16.17 esbuild: 0.16.17
postcss: 8.4.21 postcss: 8.4.21
resolve: 1.22.1 resolve: 1.22.1
rollup: 3.14.0 rollup: 3.20.1
optionalDependencies: optionalDependencies:
fsevents: 2.3.2 fsevents: 2.3.2
@ -16614,7 +16756,7 @@ packages:
vite: vite:
optional: true optional: true
dependencies: dependencies:
vite: 4.1.2_sass@1.58.0 vite: 4.1.2
dev: false dev: false
/vitest/0.20.3: /vitest/0.20.3: