diff options
| -rw-r--r-- | .changeset/strong-geese-boil.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/compiler/codegen/index.ts | 7 | ||||
| -rw-r--r-- | packages/astro/test/astro-markdown.test.js | 15 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/astro-markdown/src/pages/deep.astro | 29 |
4 files changed, 54 insertions, 2 deletions
diff --git a/.changeset/strong-geese-boil.md b/.changeset/strong-geese-boil.md new file mode 100644 index 000000000..63b575247 --- /dev/null +++ b/.changeset/strong-geese-boil.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixes a few small bugs with the `Markdown` component when there are multiple instances on the same page diff --git a/packages/astro/src/compiler/codegen/index.ts b/packages/astro/src/compiler/codegen/index.ts index bb3702526..8a168f0c5 100644 --- a/packages/astro/src/compiler/codegen/index.ts +++ b/packages/astro/src/compiler/codegen/index.ts @@ -440,7 +440,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile let { content: rendered } = await renderMarkdown(dedent(md), { ...(markdownOptions as AstroMarkdownOptions), mode: 'astro-md', - $: { scopedClassName: scopedClassName.slice(1, -1) }, + $: { scopedClassName: scopedClassName && scopedClassName.slice(1, -1) }, }); // 1. Parse @@ -454,7 +454,9 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile }); // 3. Codegen - const result = await compileHtml(ast.html, { ...state, markers: { ...state.markers, insideMarkdown: false } }, compileOptions); + // Reset state before compilation + state.markers.insideMarkdown = false; + const result = await compileHtml(ast.html, state, compileOptions); buffers.out += ',' + result; buffers.markdown = ''; @@ -645,6 +647,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile case 'InlineComponent': { if (curr === 'markdown' && buffers.markdown !== '') { await pushMarkdownToBuffer(); + return; } if (paren !== -1) { buffers.out += ')'; diff --git a/packages/astro/test/astro-markdown.test.js b/packages/astro/test/astro-markdown.test.js index ecd946f47..5500736c9 100644 --- a/packages/astro/test/astro-markdown.test.js +++ b/packages/astro/test/astro-markdown.test.js @@ -45,6 +45,21 @@ Markdown('Bundles client-side JS for prod', async (context) => { assert.ok(counterJs, 'Counter.jsx is bundled for prod'); }); +Markdown('Renders content correctly when deeply nested on a page', async ({ runtime }) => { + const result = await runtime.load('/deep'); + if (result.error) throw new Error(result.error); + + const $ = doc(result.contents); + assert.equal($('#deep').children().length, 3, 'Rendered all children'); + assert.equal($('.a').children().length, 1, 'Only rendered title in each section'); + assert.equal($('.b').children().length, 1, 'Only rendered title in each section'); + assert.equal($('.c').children().length, 1, 'Only rendered title in each section'); + + assert.equal($('.a > h2').text(), 'A', 'Rendered title in correct section'); + assert.equal($('.b > h2').text(), 'B', 'Rendered title in correct section'); + assert.equal($('.c > h2').text(), 'C', 'Rendered title in correct section'); +}); + Markdown('Renders dynamic content though the content attribute', async ({ runtime }) => { const result = await runtime.load('/external'); if (result.error) throw new Error(result.error); diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/deep.astro b/packages/astro/test/fixtures/astro-markdown/src/pages/deep.astro new file mode 100644 index 000000000..b2a8b51a7 --- /dev/null +++ b/packages/astro/test/fixtures/astro-markdown/src/pages/deep.astro @@ -0,0 +1,29 @@ +--- +import { Markdown } from 'astro/components'; +import Layout from '../layouts/content.astro'; +import Hello from '../components/Hello.jsx'; +import Counter from '../components/Counter.jsx'; + +export const title = 'My Blog Post'; +export const description = 'This is a post about some stuff.'; +--- + +<div id="deep"> + <section class="a"> + <Markdown> + ## A + </Markdown> + </section> + + <section class="b"> + <Markdown> + ## B + </Markdown> + </section> + + <section class="c"> + <Markdown> + ## C + </Markdown> + </section> +</div> |