refactor(theme): move LayoutProviders to Layout/Provider; composeProviders util (#7676)

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

packages/docusaurus-theme-common/src/contexts/docsPreferredVersion.tsx

@@ -175,7 +175,7 @@ function DocsPreferredVersionContextProviderUnsafe({
 export function DocsPreferredVersionContextProvider({
   children,
 }: {
-  children: JSX.Element;
+  children: ReactNode;
 }): JSX.Element {
   if (isDocsPluginEnabled) {
     return (
@@ -184,7 +184,7 @@ export function DocsPreferredVersionContextProvider({
       </DocsPreferredVersionContextProviderUnsafe>
     );
   }
-  return children;
+  return <>{children}</>;
 }
 
 function useDocsPreferredVersionContext(): ContextValue {

packages/docusaurus-theme-common/src/index.ts

@@ -40,6 +40,7 @@ export {
   useIsomorphicLayoutEffect,
   useEvent,
   usePrevious,
+  composeProviders,
   ReactContextError,
 } from './utils/reactUtils';
 

packages/docusaurus-theme-common/src/utils/reactUtils.tsx

@@ -5,7 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useCallback, useEffect, useLayoutEffect, useMemo, useRef} from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  type ComponentType,
+  type ReactNode,
+} from 'react';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 
 /**
@@ -90,3 +98,32 @@ export function useShallowMemoObject<O extends object>(obj: O): O {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   return useMemo(() => obj, deps.flat());
 }
+
+type SimpleProvider = ComponentType<{children: ReactNode}>;
+
+/**
+ * Creates a single React provider from an array of existing providers
+ * assuming providers only take "children" as props.
+ *
+ * Prevents the annoying React element nesting
+ * Example here: https://getfrontend.tips/compose-multiple-react-providers/
+ *
+ * The order matters:
+ * - The first provider is at the top of the tree.
+ * - The last provider is the most nested one
+ *
+ * @param providers array of providers to compose
+ */
+export function composeProviders(providers: SimpleProvider[]): SimpleProvider {
+  // Creates a single React component: it's cheaper to compose JSX elements
+  return ({children}) => (
+    <>
+      {providers.reduceRight(
+        (element, CurrentProvider) => (
+          <CurrentProvider>{element}</CurrentProvider>
+        ),
+        children,
+      )}
+    </>
+  );
+}