From 0ccb493639b7aa6094b87a32e02f6685890747b5 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Sun, 29 May 2022 22:19:41 +0800
Subject: [PATCH] refactor: mark toc in loaded MDX as non-optional

---
 packages/docusaurus-mdx-loader/src/index.ts         |  2 +-
 .../remark/toc/__tests__/__fixtures__/no-heading.md |  7 +++++++
 .../toc/__tests__/__snapshots__/index.test.ts.snap  | 13 +++++++++++++
 .../src/remark/toc/__tests__/index.test.ts          |  5 +++++
 .../docusaurus-mdx-loader/src/remark/toc/index.ts   |  8 +++-----
 .../docusaurus-theme-classic/src/theme-classic.d.ts |  2 --
 .../src/theme/BlogPostPage/index.tsx                |  4 +---
 .../src/theme/DocCardList/index.tsx                 |  2 +-
 .../src/theme/DocItem/index.tsx                     |  3 +--
 .../src/theme/MDXPage/index.tsx                     |  2 +-
 .../plugins/changelog/theme/ChangelogPage/index.tsx |  4 +---
 11 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/no-heading.md

diff --git a/packages/docusaurus-mdx-loader/src/index.ts b/packages/docusaurus-mdx-loader/src/index.ts
index 1b7f2be72344..ad7887dcc77c 100644
--- a/packages/docusaurus-mdx-loader/src/index.ts
+++ b/packages/docusaurus-mdx-loader/src/index.ts
@@ -21,7 +21,7 @@ export type LoadedMDXContent<FrontMatter, Metadata, Assets = undefined> = {
   /** As provided by the content plugin. */
   readonly metadata: Metadata;
   /** A list of TOC items (headings). */
-  readonly toc?: readonly TOCItem[];
+  readonly toc: readonly TOCItem[];
   /** First h1 title before any content. */
   readonly contentTitle: string | undefined;
   /**
diff --git a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/no-heading.md b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/no-heading.md
new file mode 100644
index 000000000000..d02f9a00f460
--- /dev/null
+++ b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/no-heading.md
@@ -0,0 +1,7 @@
+foo
+
+`bar`
+
+```js
+baz
+```
diff --git a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.ts.snap
index b87c1cd50d75..e7811b9e9f26 100644
--- a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.ts.snap
@@ -119,6 +119,19 @@ Content.
 "
 `;
 
+exports[`toc remark plugin outputs empty array for no TOC 1`] = `
+"export const toc = [];
+
+foo
+
+\`bar\`
+
+\`\`\`js
+baz
+\`\`\`
+"
+`;
+
 exports[`toc remark plugin works on non text phrasing content 1`] = `
 "export const toc = [
 	{
diff --git a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts
index 43b627c8b1dc..acd2a37615e2 100644
--- a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts
+++ b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts
@@ -25,6 +25,11 @@ const processFixture = async (name: string) => {
 };
 
 describe('toc remark plugin', () => {
+  it('outputs empty array for no TOC', async () => {
+    const result = await processFixture('no-heading');
+    expect(result).toMatchSnapshot();
+  });
+
   it('works on non text phrasing content', async () => {
     const result = await processFixture('non-text-content');
     expect(result).toMatchSnapshot();
diff --git a/packages/docusaurus-mdx-loader/src/remark/toc/index.ts b/packages/docusaurus-mdx-loader/src/remark/toc/index.ts
index 5e6c694dc339..9fe619e32532 100644
--- a/packages/docusaurus-mdx-loader/src/remark/toc/index.ts
+++ b/packages/docusaurus-mdx-loader/src/remark/toc/index.ts
@@ -89,10 +89,8 @@ export default function plugin(): Transformer {
     const {children} = root as Parent<Literal>;
     const targetIndex = getOrCreateExistingTargetIndex(children);
 
-    if (headings.length) {
-      children[targetIndex]!.value = `export const ${name} = ${stringifyObject(
-        headings,
-      )};`;
-    }
+    children[targetIndex]!.value = `export const ${name} = ${stringifyObject(
+      headings,
+    )};`;
   };
 }
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index 1986158d8e22..f182ba6470ac 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -328,8 +328,6 @@ declare module '@theme/DocSidebar' {
     readonly sidebar: readonly PropSidebarItem[];
     readonly onCollapse: () => void;
     readonly isHidden: boolean;
-    // MobileSecondaryFilter expects Record<string, unknown>
-    readonly [key: string]: unknown;
   }
 
   export default function DocSidebar(props: Props): JSX.Element;
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
index 3d47fc4dd379..d09c589f305c 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
@@ -65,9 +65,7 @@ function BlogPostPageContent(props: Props): JSX.Element {
     <BlogLayout
       sidebar={sidebar}
       toc={
-        !hideTableOfContents &&
-        BlogPostContents.toc &&
-        BlogPostContents.toc.length > 0 ? (
+        !hideTableOfContents && BlogPostContents.toc.length > 0 ? (
           <TOC
             toc={BlogPostContents.toc}
             minHeadingLevel={tocMinHeadingLevel}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx
index 3c105378ae81..b2d480697ac3 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx
@@ -27,7 +27,7 @@ export default function DocCardList({items, className}: Props): JSX.Element {
     <section className={clsx('row', className)}>
       {filterItems(items).map((item, index) => (
         <article key={index} className="col col--6 margin-bottom--lg">
-          <DocCard key={index} item={item} />
+          <DocCard item={item} />
         </article>
       ))}
     </section>
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
index fa75f1c162e5..5e1e9debcf44 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
@@ -55,8 +55,7 @@ function DocItemContent(props: Props): JSX.Element {
 
   const windowSize = useWindowSize();
 
-  const canRenderTOC =
-    !hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
+  const canRenderTOC = !hideTableOfContents && DocContent.toc.length > 0;
 
   const renderTocDesktop =
     canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
index 64bb180a5634..e0fbca8fcf8d 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
@@ -42,7 +42,7 @@ export default function MDXPage(props: Props): JSX.Element {
                 <MDXPageContent />
               </MDXContent>
             </div>
-            {!hideTableOfContents && MDXPageContent.toc && (
+            {!hideTableOfContents && MDXPageContent.toc.length > 0 && (
               <div className="col col--2">
                 <TOC
                   toc={MDXPageContent.toc}
diff --git a/website/src/plugins/changelog/theme/ChangelogPage/index.tsx b/website/src/plugins/changelog/theme/ChangelogPage/index.tsx
index 7ce92e1707d2..5f4a128d7759 100644
--- a/website/src/plugins/changelog/theme/ChangelogPage/index.tsx
+++ b/website/src/plugins/changelog/theme/ChangelogPage/index.tsx
@@ -77,9 +77,7 @@ function ChangelogPageContent(props: Props): JSX.Element {
       <BlogLayout
         sidebar={sidebar}
         toc={
-          !hideTableOfContents &&
-          BlogPostContents.toc &&
-          BlogPostContents.toc.length > 0 ? (
+          !hideTableOfContents && BlogPostContents.toc.length > 0 ? (
             <TOC
               toc={BlogPostContents.toc}
               minHeadingLevel={tocMinHeadingLevel}