fix: empty callouts erroring out (#1232)

[![PR App][icn]][demo] | Fix RM-XYZ
:-------------------:|:----------:

## 🧰 Changes

- In readme-to-mdx.ts, do more type checking when checking if a node is
an h3 when visiting rdme-callout
- Part of the fix is also included in
#1230 where we skip wrapping
callout children in heading if it's empty

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].

---------

Co-authored-by: Kelly Joseph Price <[email protected]>

Author: eaglethrost

__tests__/compilers/callout.test.ts

@@ -21,13 +21,19 @@ describe('callouts compiler', () => {
     expect(mdx(mdast(markdown))).toBe(markdown);
   });
 
-  it('compiles callouts with no heading or body!?', () => {
+  it('compiles callouts with no heading or body', () => {
     const markdown = `> 🚧
 `;
 
     expect(mdx(mdast(markdown))).toBe(markdown);
   });
 
+  it('compiles callouts with no heading or body and no new line at the end', () => {
+    const markdown = '> ℹ️';
+
+    expect(mdx(mdast(markdown))).toBe(`${markdown}\n`);
+  });
+
   it('compiles callouts with markdown in the heading', () => {
     const markdown = `> 🚧 It **works**!
 >

__tests__/migration/callouts.test.ts

@@ -1,6 +1,15 @@
 import { migrate } from '../helpers';
 
 describe('migrating callouts', () => {
+  it('does not error on callouts with no heading', () => {
+    const md = '> ℹ️';
+    const mdx = migrate(md);
+    expect(mdx).toMatchInlineSnapshot(`
+      "<Callout icon="ℹ️" theme="info" />
+      "
+    `);
+  });
+
   it('retains HTML content that starts a callout body', () => {
     const md = `> ⚠️ <div><b>hello</b></div>
     `;

processor/transform/readme-to-mdx.ts

@@ -22,7 +22,7 @@ const readmeToMdx = (): Transform => tree => {
 
   visit(tree, 'rdme-callout', (node, index, parent) => {
     const isEmpty = node.data.hProperties?.empty;
-    const isH3 = node.children[0].type === 'heading' && node.children[0].depth === 3;
+    const isH3 = node.children?.[0] && 'type' in node.children[0] && node.children[0].type === 'heading' && node.children[0].depth === 3;
     let { icon, theme } = node.data.hProperties;
     if (!icon) icon = defaultIcons[theme];
     if (!theme) theme = themes[icon] || 'default';