Compose React Providers without nesting

.eslintrc.js

@@ -45,6 +45,7 @@ module.exports = {
     '@typescript-eslint/unbound-method': 'warn',
     'no-console': ['warn', { allow: ['warn', 'error'] }],
     'react/display-name': 'warn',
+    'react/no-children-prop': 'off',
     'react/no-find-dom-node': 'off',
   },
 }

packages/components/src/components/AppProviders.tsx

@@ -16,6 +16,7 @@ import { LoginHelpersProvider } from './context/LoginHelpersContext'
 import { AppLayoutProvider } from './context/LayoutContext'
 import { PlansProvider } from './context/PlansContext'
 import { ThemeProvider } from './context/ThemeContext'
+import { Compose } from './common/Compose'
 
 const { persistor, store } = configureStore()
 
@@ -25,35 +26,30 @@ export interface AppProvidersProps {
 
 export function AppProviders(props: AppProvidersProps) {
   return (
-    <HelmetProvider>
-      <ReduxProvider store={store as any}>
-        <PersistGate loading={null} persistor={persistor}>
-          <AppearanceProvider>
-            <ThemeProvider>
-              <SafeAreaProvider>
-                <DialogProvider>
-                  <DeepLinkProvider>
-                    <PlansProvider>
-                      <AppLayoutProvider>
-                        <ColumnFocusProvider>
-                          <ColumnWidthProvider>
-                            <ColumnFiltersProvider>
-                              <LoginHelpersProvider>
-                                {props.children}
-                              </LoginHelpersProvider>
-                              <OverrideSystemDialog />
-                            </ColumnFiltersProvider>
-                          </ColumnWidthProvider>
-                        </ColumnFocusProvider>
-                      </AppLayoutProvider>
-                    </PlansProvider>
-                  </DeepLinkProvider>
-                </DialogProvider>
-              </SafeAreaProvider>
-            </ThemeProvider>
-          </AppearanceProvider>
-        </PersistGate>
-      </ReduxProvider>
-    </HelmetProvider>
+    <Compose
+      components={[
+        (child) => <HelmetProvider children={child} />,
+        (child) => <ReduxProvider children={child} store={store} />,
+        (child) => (
+          <PersistGate children={child} loading={null} persistor={persistor} />
+        ),
+        (child) => <AppearanceProvider children={child} />,
+        (child) => <ThemeProvider children={child} />,
+        (child) => <SafeAreaProvider children={child} />,
+        (child) => <DialogProvider children={child} />,
+        (child) => <DeepLinkProvider children={child} />,
+        (child) => <PlansProvider children={child} />,
+        (child) => <AppLayoutProvider children={child} />,
+        (child) => <ColumnFocusProvider children={child} />,
+        (child) => <ColumnWidthProvider children={child} />,
+        (child) => <ColumnFiltersProvider children={child} />,
+        (child) => <LoginHelpersProvider children={child} />,
+      ]}
+    >
+      <>
+        {props.children}
+        <OverrideSystemDialog />
+      </>
+    </Compose>
   )
 }

packages/components/src/components/common/Compose.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+type PropsWithChildren = { [key: string]: any; children: any }
+
+type ComposableFunction = (
+  child: React.ComponentElement<PropsWithChildren, any>,
+) => React.ComponentElement<PropsWithChildren, any>
+
+interface ComposeProps {
+  components: ComposableFunction[]
+  children: React.ReactNode
+}
+
+export function Compose(props: ComposeProps) {
+  const { components = [], children } = props
+
+  return (
+    <>
+      {components.reduceRight<React.ComponentElement<PropsWithChildren, any>>(
+        (result, item) => item(result),
+        children as any,
+      )}
+    </>
+  )
+}

tsconfig.json

@@ -5,5 +5,5 @@
     "module": "esnext"
   },
   "exclude": ["node_modules"],
-  "include": ["@types", "landing", "packages"]
+  "include": ["@types", "landing", "packages", ".eslintrc.js"]
 }