diff options
| author |  Nate Moore <natemoo-re@users.noreply.github.com>
| 2021-06-29 15:33:56 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-06-29 15:33:56 -0500 |
| commit | f721275f33ca96464d3dc651f89127cd90dff796 (patch) | |
| tree | 861595cddf4f7b251a02f21e4f0948d1d53b502f | |
| parent | 8b4760c24ffc0e6920f77efb4f0b4435f670f198 (diff) | |
| download | astro-f721275f33ca96464d3dc651f89127cd90dff796.tar.gz astro-f721275f33ca96464d3dc651f89127cd90dff796.tar.zst astro-f721275f33ca96464d3dc651f89127cd90dff796.zip | |
Fix `<Markdown {content} />` closing parent tag (#575)
* test(#494): add failing test
* chore: update with-markdown example
* fix(#494): avoid early close with <Markdown content />
* chore: add changeset
| -rw-r--r-- | .changeset/warm-terms-admire.md | 5 | ||||
| -rw-r--r-- | examples/with-markdown/src/layouts/main.astro | 1 | ||||
| -rw-r--r-- | examples/with-markdown/src/pages/external.astro | 17 | ||||
| -rw-r--r-- | packages/astro/src/compiler/codegen/index.ts | 15 | ||||
| -rw-r--r-- | packages/astro/test/astro-markdown.test.js | 8 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/astro-markdown/src/pages/close.astro | 12 |
6 files changed, 56 insertions, 2 deletions
diff --git a/.changeset/warm-terms-admire.md b/.changeset/warm-terms-admire.md new file mode 100644 index 000000000..6a7575706 --- /dev/null +++ b/.changeset/warm-terms-admire.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix issue where Markdown could close it's parent element early (#494) diff --git a/examples/with-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro index 26993bcaf..c3ef56d60 100644 --- a/examples/with-markdown/src/layouts/main.astro +++ b/examples/with-markdown/src/layouts/main.astro @@ -1,4 +1,5 @@ --- +const { content } = Astro.props; --- <html> diff --git a/examples/with-markdown/src/pages/external.astro b/examples/with-markdown/src/pages/external.astro new file mode 100644 index 000000000..1149666b2 --- /dev/null +++ b/examples/with-markdown/src/pages/external.astro @@ -0,0 +1,17 @@ +--- +import { Markdown } from 'astro/components'; +import Layout from '../layouts/main.astro'; + +const title = `External Markdown`; +const content = `Markdown *content* to render`; +--- + +<Layout content={{ title }}> + <main> + <div> + <Markdown {content} /> + <p>Some other stuff</p> + </div> + <p>Lastly...</p> + </main> +</Layout> diff --git a/packages/astro/src/compiler/codegen/index.ts b/packages/astro/src/compiler/codegen/index.ts index 843ecc428..ea094a32c 100644 --- a/packages/astro/src/compiler/codegen/index.ts +++ b/packages/astro/src/compiler/codegen/index.ts @@ -509,6 +509,12 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile async function pushMarkdownToBuffer() { const md = buffers.markdown; const { markdownOptions = {} } = astroConfig; + if (!md.trim()) { + buffers.out += ',' + md; + buffers.markdown = ''; + curr = 'out'; + return; + } const { $scope: scopedClassName } = state.markers.insideMarkdown as Record<'$scope', any>; let { content: rendered } = await renderMarkdown(dedent(md), { ...(markdownOptions as AstroMarkdownOptions), @@ -627,7 +633,8 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile if (componentName === 'Markdown') { const { $scope } = attributes ?? {}; state.markers.insideMarkdown = typeof state.markers.insideMarkdown === 'object' ? { $scope, count: state.markers.insideMarkdown.count + 1 } : { $scope, count: 1 }; - if (attributes.content) { + const keys = Object.keys(attributes).filter(attr => attr !== '$scope'); + if (keys.length > 0) { if (curr === 'markdown') { await pushMarkdownToBuffer(); } @@ -717,7 +724,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile case 'Body': case 'Title': case 'Element': { - if (state.markers.insideMarkdown) { + if (curr === 'markdown') { await pushMarkdownToBuffer(); } if (paren !== -1) { @@ -732,6 +739,10 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile if ((state.markers.insideMarkdown as Record<string, any>).count <= 0) { state.markers.insideMarkdown = false; } + const hasAttrs = (node.attributes.filter(({ name }: Attribute) => name !== '$scope')).length > 0; + if (hasAttrs) { + return; + } } if (curr === 'markdown' && buffers.markdown !== '') { await pushMarkdownToBuffer(); diff --git a/packages/astro/test/astro-markdown.test.js b/packages/astro/test/astro-markdown.test.js index cadb255bd..73e17a5f8 100644 --- a/packages/astro/test/astro-markdown.test.js +++ b/packages/astro/test/astro-markdown.test.js @@ -82,4 +82,12 @@ Markdown('Renders dynamic content though the content attribute', async ({ runtim assert.ok($('#inner').is('[class]'), 'Scoped class passed down'); }); +Markdown('Does not close parent early when using content attribute (#494)', async ({ runtime }) => { + const result = await runtime.load('/close'); + if (result.error) throw new Error(result.error); + + const $ = doc(result.contents); + assert.equal($('#target').children().length, 2, '<Markdown content /> closed div#target early'); +}); + Markdown.run(); diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/close.astro b/packages/astro/test/fixtures/astro-markdown/src/pages/close.astro new file mode 100644 index 000000000..1da319c03 --- /dev/null +++ b/packages/astro/test/fixtures/astro-markdown/src/pages/close.astro @@ -0,0 +1,12 @@ +--- +import { Markdown } from 'astro/components'; +const content = `Markdown *content* to render`; +--- + +<main> + <div id="target"> + <Markdown content={content} /> + <p>Some other stuff</p> + </div> + <p>Lastly...</p> +</main> |