refactor: mark toc in loaded MDX as non-optional (#7524)

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;
   /**

packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/no-heading.md

@@ -0,0 +1,7 @@
+foo
+
+`bar`
+
+```js
+baz
+```

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 = [
 	{

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();

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,
     )};`;
-    }
   };
 }

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;

packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx

@@ -65,9 +65,7 @@ function BlogPostPageContent(props: Props): JSX.Element {
     <BlogLayout
       sidebar={sidebar}
       toc={
-        !hideTableOfContents &&
+        !hideTableOfContents && BlogPostContents.toc.length > 0 ? (
-        BlogPostContents.toc &&
-        BlogPostContents.toc.length > 0 ? (
           <TOC
             toc={BlogPostContents.toc}
             minHeadingLevel={tocMinHeadingLevel}

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>

packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx

@@ -55,8 +55,7 @@ function DocItemContent(props: Props): JSX.Element {
 
   const windowSize = useWindowSize();
 
-  const canRenderTOC =
+  const canRenderTOC = !hideTableOfContents && DocContent.toc.length > 0;
-    !hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
 
   const renderTocDesktop =
     canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');

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}

website/src/plugins/changelog/theme/ChangelogPage/index.tsx

@@ -77,9 +77,7 @@ function ChangelogPageContent(props: Props): JSX.Element {
       <BlogLayout
         sidebar={sidebar}
         toc={
-          !hideTableOfContents &&
+          !hideTableOfContents && BlogPostContents.toc.length > 0 ? (
-          BlogPostContents.toc &&
-          BlogPostContents.toc.length > 0 ? (
             <TOC
               toc={BlogPostContents.toc}
               minHeadingLevel={tocMinHeadingLevel}