replace mdxName usage

Author: feedthejim

src/components/MDX/Challenges/Challenges.tsx

@@ -42,11 +42,13 @@ const parseChallengeContents = (
   let challenge: Partial<ChallengeContents> = {};
   let content: React.ReactElement[] = [];
   Children.forEach(children, (child) => {
-    const {props, type} = child as React.ReactElement<{
+    const {props} = child as React.ReactElement<{
       children?: string;
       id?: string;
+      'data-mdx-name'?: string;
     }>;
-    switch ((type as any).mdxName) {
+
+    switch (props?.['data-mdx-name']) {
       case 'Solution': {
         challenge.solution = child;
         challenge.content = content;

src/components/MDX/Challenges/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */

src/components/MDX/CodeDiagram.tsx

@@ -16,7 +16,7 @@ export function CodeDiagram({children, flip = false}: CodeDiagramProps) {
     return child.type === 'img';
   });
   const content = Children.toArray(children).map((child: any) => {
-    if (child.type?.mdxName === 'pre') {
+    if (child.props?.['data-mdx-name'] === 'pre') {
       return (
         <CodeBlock
           key={child.key}

src/components/MDX/ExpandableExample.tsx

@@ -21,11 +21,16 @@ interface ExpandableExampleProps {
 }
 
 function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
-  if (!Array.isArray(children) || children[0].type.mdxName !== 'h4') {
+  // Validate children using `data-mdx-name`
+  if (
+    !Array.isArray(children) ||
+    children[0].props?.['data-mdx-name'] !== 'h4'
+  ) {
     throw Error(
       `Expandable content ${type} is missing a corresponding title at the beginning`
     );
   }
+
   const isDeepDive = type === 'DeepDive';
   const isExample = type === 'Example';
   const id = children[0].props.id;
@@ -60,8 +65,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
         className="list-none p-8"
         tabIndex={-1 /* there's a button instead */}
         onClick={(e) => {
-          // We toggle using a button instead of this whole area,
-          // with an escape case for the header anchor link
+          // Toggle with a button instead of the whole area
           if (!(e.target instanceof SVGElement)) {
             e.preventDefault();
           }

src/components/MDX/Link.tsx

@@ -17,7 +17,7 @@ function Link({
   const classes =
     'inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal';
   const modifiedChildren = Children.toArray(children).map((child: any) => {
-    if (child.type?.mdxName && child.type?.mdxName === 'inlineCode') {
+    if (child.props?.['data-mdx-name'] === 'inlineCode') {
       return cloneElement(child, {
         isLink: true,
       });

src/components/MDX/MDXComponents.tsx

@@ -381,7 +381,17 @@ function Image(props: any) {
   return <img alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />;
 }
 
-export const MDXComponents = {
+function annotateMDXComponents(
+  components: Record<string, React.ElementType>
+): Record<string, React.ElementType> {
+  return Object.entries(components).reduce((acc, [key, Component]) => {
+    acc[key] = (props) => <Component {...props} data-mdx-name={key} />;
+    acc[key].displayName = `Annotated(${key})`; // Optional, for debugging
+    return acc;
+  }, {} as Record<string, React.ElementType>);
+}
+
+export const MDXComponents = annotateMDXComponents({
   p: P,
   strong: Strong,
   blockquote: Blockquote,
@@ -450,11 +460,11 @@ export const MDXComponents = {
   CodeStep,
   YouTubeIframe,
   ErrorDecoder,
-};
+});
 
-for (let key in MDXComponents) {
-  if (MDXComponents.hasOwnProperty(key)) {
-    const MDXComponent: any = (MDXComponents as any)[key];
-    MDXComponent.mdxName = key;
-  }
-}
+// for (let key in MDXComponents) {
+//   if (MDXComponents.hasOwnProperty(key)) {
+//     const MDXComponent: any = (MDXComponents as any)[key];
+//     MDXComponent.mdxName = key;
+//   }
+// }

src/components/MDX/PackageImport.tsx

@@ -12,10 +12,10 @@ interface PackageImportProps {
 
 export function PackageImport({children}: PackageImportProps) {
   const terminal = Children.toArray(children).filter((child: any) => {
-    return child.type?.mdxName !== 'pre';
+    return child.props?.['data-mdx-name'] !== 'pre';
   });
   const code = Children.toArray(children).map((child: any, i: number) => {
-    if (child.type?.mdxName === 'pre') {
+    if (child.props?.['data-mdx-name'] === 'pre') {
       return (
         <CodeBlock
           {...child.props}