Fix recursive markdown (#315)

* wip: fix recursive markdown

* fix: recursive markdown issue

* chore: add changeset

.changeset/gold-carrots-bow.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixed a bug where recursive markdown was not working properly

packages/astro/src/compiler/codegen/index.ts

@@ -454,9 +454,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
       });
 
       // 3. Codegen
-      // Reset state before compilation
-      state.markers.insideMarkdown = false;
-      const result = await compileHtml(ast.html, state, compileOptions);
+      const result = await compileHtml(ast.html, { ...state, markers: { insideMarkdown: false } }, compileOptions);
 
       buffers.out += ',' + result;
       buffers.markdown = '';
@@ -554,7 +552,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
               }
               if (componentName === 'Markdown') {
                 const { $scope } = attributes ?? {};
-                state.markers.insideMarkdown = { $scope };
+                state.markers.insideMarkdown = typeof state.markers.insideMarkdown === 'object' ? { $scope, count: state.markers.insideMarkdown.count + 1 } : { $scope, count: 1 };
                 if (attributes.content) {
                   if (curr === 'markdown') {
                     await pushMarkdownToBuffer();
@@ -638,6 +636,9 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
           case 'Body':
           case 'Title':
           case 'Element': {
+            if (state.markers.insideMarkdown) {
+              await pushMarkdownToBuffer();
+            }
             if (paren !== -1) {
               buffers.out += ')';
               paren--;
@@ -645,10 +646,18 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
             return;
           }
           case 'InlineComponent': {
+            if (node.name === 'Markdown') {
+              (state.markers.insideMarkdown as Record<string, any>).count--;
+              if ((state.markers.insideMarkdown as Record<string, any>).count <= 0) {
+                state.markers.insideMarkdown = false;
+              }
+            }
             if (curr === 'markdown' && buffers.markdown !== '') {
               await pushMarkdownToBuffer();
+              if (!state.markers.insideMarkdown) {
                 return;
               }
+            }
             if (paren !== -1) {
               buffers.out += ')';
               paren--;
@@ -664,7 +673,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
         }
       },
     }).then(() => {
-      const content = buffers.out.replace(/^\,/, '').replace(/\,\)/g, ')').replace(/\,+/g, ',').replace(/\)h/g, '),h');
+      const content = buffers.out.replace(/^\,/, '').replace(/\,\)/g, ')').replace(/\,+/g, ',').replace(/\)h/g, '),h')
       buffers.out = '';
       buffers.markdown = '';
       return resolve(content);

packages/astro/test/astro-markdown.test.js

@@ -45,7 +45,7 @@ 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 }) => {
+Markdown('Renders correctly when deeply nested on a page', async ({ runtime }) => {
   const result = await runtime.load('/deep');
   if (result.error) throw new Error(result.error);
 
@@ -60,6 +60,18 @@ Markdown('Renders content correctly when deeply nested on a page', async ({ runt
   assert.equal($('.c > h2').text(), 'C', 'Rendered title in correct section');
 });
 
+Markdown('Renders recursively', async ({ runtime }) => {
+  const result = await runtime.load('/recursive');
+  if (result.error) throw new Error(result.error);
+
+  console.log(result.contents);
+  
+  const $ = doc(result.contents);
+  assert.equal($('.a > h1').text(), 'A', 'Rendered title .a correctly');
+  assert.equal($('.b > h1').text(), 'B', 'Rendered title .b correctly');
+  assert.equal($('.c > h1').text(), 'C', 'Rendered title .c correctly');
+});
+
 Markdown('Renders dynamic content though the content attribute', async ({ runtime }) => {
   const result = await runtime.load('/external');
   if (result.error) throw new Error(result.error);

packages/astro/test/fixtures/astro-markdown/src/pages/recursive.astro

@@ -0,0 +1,15 @@
+---
+import { Markdown } from 'astro/components';
+---
+
+<Markdown>
+  <div class="a">
+    # A
+    <div class="b">
+      # B
+      <div class="c">
+        # C
+      </div>
+    </div>
+  </div>
+</Markdown>