add type-checking to MDX files, narrow InlineFilter type

Author: josefaidt

mdx-components.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import type { MDXComponents } from 'mdx/types';
+import type { Metadata } from 'next';
+import type {
+  MDXComponents as BaseMDXComponents,
+  MDXProps as BaseMDXProps
+} from 'mdx/types';
+import type { PageNode } from './src/directory/directory';
+import type { Platform } from './src/data/platforms';
 import ExportedImage from 'next-image-export-optimizer';
 import InlineFilter from './src/components/InlineFilter';
 import { YoutubeEmbed } from './src/components/YoutubeEmbed';
@@ -34,43 +40,71 @@ const MDXHeading4 = (props) => <MDXHeading level={4} {...props} />;
 const MDXHeading5 = (props) => <MDXHeading level={5} {...props} />;
 const MDXHeading6 = (props) => <MDXHeading level={6} {...props} />;
 
-export function useMDXComponents(components: MDXComponents): MDXComponents {
-  return {
-    // Map markdown elements to custom components
-    a: MDXLink,
-    h1: MDXHeading1,
-    h2: MDXHeading2,
-    h3: MDXHeading3,
-    h4: MDXHeading4,
-    h5: MDXHeading5,
-    h6: MDXHeading6,
-    pre: (preProps) => {
-      const props = preToCodeBlock(preProps);
-      if (props) {
-        return <MDXCode {...props} />;
-      }
-      return <pre {...preProps} />;
-    },
-    img: ResponsiveImage,
-    table: MDXTable,
+const components = {
+  // Map markdown elements to custom components
+  a: MDXLink,
+  h1: MDXHeading1,
+  h2: MDXHeading2,
+  h3: MDXHeading3,
+  h4: MDXHeading4,
+  h5: MDXHeading5,
+  h6: MDXHeading6,
+  pre: (preProps) => {
+    const props = preToCodeBlock(preProps);
+    if (props) {
+      return <MDXCode {...props} />;
+    }
+    return <pre {...preProps} />;
+  },
+  img: ResponsiveImage,
+  table: MDXTable,
+
+  // Make common custom components available to content authors
+  Accordion,
+  Block,
+  BlockSwitcher,
+  Callout,
+  Fragments,
+  InlineFilter,
+  MigrationAlert,
+  YoutubeEmbed,
+  Overview,
+  ExternalLink,
+  ExternalLinkButton,
+  InternalLinkButton,
+  Grid,
+  Columns,
+  Video,
+  View
+} satisfies BaseMDXComponents;
+
+/**
+ * MDX Page metadata
+ */
+type MDXPageMeta = Metadata & {
+  platforms: Platform[];
+};
+
+/**
+ * Type for Next.js's getStaticProps return in MDX pages
+ * this is needed to satisfy the type-check for <Overview>'s childPageNodes
+ */
+type MDXGetStaticPropsResult = {
+  meta: MDXPageMeta;
+  childPageNodes?: PageNode[];
+};
 
-    // Make common custom components available to content authors
-    Accordion,
-    Block,
-    BlockSwitcher,
-    Callout,
-    Fragments,
-    InlineFilter,
-    MigrationAlert,
-    YoutubeEmbed,
-    Overview,
-    ExternalLink,
-    ExternalLinkButton,
-    InternalLinkButton,
-    Grid,
-    Columns,
-    Video,
-    View,
+/**
+ * Declare types in the global scope for MDX to type-check components and function return statements
+ */
+declare global {
+  type MDXProvidedComponents = typeof components;
+  type MDXProps = BaseMDXProps & MDXGetStaticPropsResult;
+}
+
+export function useMDXComponents(_components: BaseMDXComponents) {
+  return {
+    ..._components,
     ...components
   };
 }

src/components/InlineFilter/index.tsx

@@ -1,9 +1,10 @@
+import type { Platform } from '@/data/platforms';
 import { Fragment } from 'react';
 import FilterChildren from '../FilterChildren';
 
 type InlineFilterProps = {
   children: React.ReactNode;
-  filters: string[];
+  filters: Platform[];
 };
 
 export default function InlineFilter({ filters, children }: InlineFilterProps) {

tsconfig.json

@@ -27,10 +27,15 @@
   "extends": "./tsconfig.base.json",
   "include": [
     "next-env.d.ts",
+    "mdx-components.tsx",
     "src/**/*.ts",
     "src/**/*.tsx",
+    "src/**/*.mdx",
     "tasks",
     "adobe.d.ts",
     "jest.setup.ts"
-  ]
+  ],
+  "mdx": {
+    "checkMdx": true
+  }
 }