Fix MDX hash hydration regressions

Author: feedthejim

src/components/MDX/ExpandableExample.tsx

@@ -18,7 +18,7 @@ import {IconDeepDive} from '../Icon/IconDeepDive';
 import {IconCodeBlock} from '../Icon/IconCodeBlock';
 import {Button} from '../Button';
 import {H4} from './Heading';
-import {useState} from 'react';
+import {Children, isValidElement, useState} from 'react';
 import {useLocationHash} from 'hooks/useLocationHash';
 import {getMDXName} from './getMDXName';
 
@@ -28,15 +28,32 @@ interface ExpandableExampleProps {
   type: 'DeepDive' | 'Example';
 }
 
+function getExpandableChildren(children: React.ReactNode) {
+  return Children.toArray(children).filter((child) => {
+    return !(typeof child === 'string' && child.trim() === '');
+  });
+}
+
 function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
-  if (!Array.isArray(children) || getMDXName(children[0]) !== 'h4') {
+  const expandableChildren = getExpandableChildren(children);
+  const titleChild = expandableChildren[0];
+
+  if (
+    !isValidElement(titleChild) ||
+    !(
+      getMDXName(titleChild) === 'h4' ||
+      getMDXName(titleChild) === 'H4' ||
+      titleChild.type === 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;
+  const id = titleChild.props.id;
   const hash = useLocationHash();
   const [isExpanded, setIsExpanded] = useState(false);
   const [isAutoExpandedDismissed, setIsAutoExpandedDismissed] = useState(false);
@@ -88,7 +105,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
           <H4
             id={id}
             className="text-xl font-bold text-primary dark:text-primary-dark">
-            {children[0].props.children}
+            {titleChild.props.children}
           </H4>
           {excerpt && <div>{excerpt}</div>}
         </div>
@@ -120,7 +137,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
           'dark:border-purple-60 border-purple-10 ': isDeepDive,
           'dark:border-yellow-60 border-yellow-50': isExample,
         })}>
-        {children.slice(1)}
+        {expandableChildren.slice(1)}
       </div>
     </details>
   );

src/components/MDX/TerminalBlock.tsx

@@ -11,7 +11,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {isValidElement, useState, useEffect} from 'react';
+import {Children, isValidElement, useState, useEffect} from 'react';
 import * as React from 'react';
 import {IconTerminal} from '../Icon/IconTerminal';
 import {IconCopy} from 'components/Icon/IconCopy';
@@ -23,6 +23,26 @@ interface TerminalBlockProps {
   children: React.ReactNode;
 }
 
+function getTerminalText(node: React.ReactNode): string {
+  let text = '';
+
+  Children.forEach(node, (child) => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      text += child;
+      return;
+    }
+
+    if (!isValidElement(child)) {
+      return;
+    }
+
+    const props = child.props as {children?: React.ReactNode} | null;
+    text += getTerminalText(props?.children ?? null);
+  });
+
+  return text;
+}
+
 function LevelText({type}: {type: LogLevel}) {
   switch (type) {
     case 'warning':
@@ -35,17 +55,8 @@ function LevelText({type}: {type: LogLevel}) {
 }
 
 function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
-  let message: string | undefined;
-  if (typeof children === 'string') {
-    message = children;
-  } else if (
-    isValidElement(children) &&
-    typeof (children as React.ReactElement<{children: string}>).props
-      .children === 'string'
-  ) {
-    message = (children as React.ReactElement<{children: string}>).props
-      .children;
-  } else {
+  const message = getTerminalText(children).trim();
+  if (message.length === 0) {
     throw Error('Expected TerminalBlock children to be a plain string.');
   }
 
@@ -72,7 +83,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
             <button
               className="w-full text-start text-primary-dark dark:text-primary-dark "
               onClick={() => {
-                window.navigator.clipboard.writeText(message ?? '');
+                window.navigator.clipboard.writeText(message);
                 setCopied(true);
               }}>
               <IconCopy className="inline-flex me-2 self-center" />{' '}

src/hooks/useLocationHash.ts

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useEffect, useState} from 'react';
+import {useSyncExternalStore} from 'react';
 
 function getHashValue() {
   if (typeof window === 'undefined') {
@@ -17,20 +17,17 @@ function getHashValue() {
   return window.location.hash.slice(1);
 }
 
-export function useLocationHash() {
-  const [hash, setHash] = useState(getHashValue);
-
-  useEffect(() => {
-    const updateHash = () => {
-      setHash(getHashValue());
-    };
+function subscribeToHashChange(callback: () => void) {
+  if (typeof window === 'undefined') {
+    return () => {};
+  }
 
-    updateHash();
-    window.addEventListener('hashchange', updateHash);
-    return () => {
-      window.removeEventListener('hashchange', updateHash);
-    };
-  }, []);
+  window.addEventListener('hashchange', callback);
+  return () => {
+    window.removeEventListener('hashchange', callback);
+  };
+}
 
-  return hash;
+export function useLocationHash() {
+  return useSyncExternalStore(subscribeToHashChange, getHashValue, () => '');
 }