refactor: provider composer

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/app/Composer/index.tsx

@@ -0,0 +1,16 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react'
+import { cloneElement } from 'react'
+
+// @copy https://github.dev/toeverything/AFFiNE/blob/fd510834ed45a4e8bed9ded95cbe5ee284334236/apps/web/src/components/provider-composer.tsx#L1
+export const ProviderComposer: FC<
+  PropsWithChildren<{
+    contexts: any
+  }>
+> = ({ contexts, children }) =>
+  contexts.reduceRight(
+    (kids: ReactNode, parent: any) =>
+      cloneElement(parent, {
+        children: kids,
+      }),
+    children,
+  )

src/components/app/ErrorBoundary/index.tsx

@@ -2,7 +2,7 @@ import Router from 'next/router'
 import React, { PureComponent, createElement } from 'react'
 
 export class ErrorBoundary extends PureComponent<{
-  children: React.ReactNode
+  children?: React.ReactNode
   fallbackComponent?: React.ComponentType<any>
   [k: string]: any
 }> {

src/components/layouts/AppLayout.tsx

@@ -20,7 +20,7 @@ import { loadStyleSheet } from '~/utils/load-script'
 
 import { useStore } from '../../store'
 
-export const Content: FC = observer((props) => {
+export const AppLayout: FC = observer((props) => {
   const { userStore: master } = useStore()
 
   useScreenMedia()

src/components/layouts/BasicLayout/index.tsx

@@ -17,10 +17,10 @@ import {
 } from '@mx-space/kami-design/components/Icons/layout'
 
 import { TrackerAction } from '~/constants/tracker'
-import { useRootStore } from '~/context'
 import { useAnalyze } from '~/hooks/use-analyze'
 import { useThemeBackground } from '~/hooks/use-kami'
 import { useMediaToggle } from '~/hooks/use-media-toggle'
+import { useRootStore } from '~/provider'
 import { springScrollToElement } from '~/utils/spring'
 
 const Header = React.lazy(() =>

src/hooks/use-initial-data.ts

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 
-import { InitialContext } from '~/context/initial-data'
+import { InitialContext } from '~/provider/initial-data'
 
 export const useInitialData = () => {
   return useContext(InitialContext).aggregateData

src/pages/_app.tsx

@@ -2,27 +2,24 @@ import 'windi.css'
 import 'assets/styles/main.css'
 import '../../third/qp/index.css'
 
-import NextApp from 'next/app'
 import type { AppContext } from 'next/app'
+import NextApp from 'next/app'
 import { useRouter } from 'next/router'
 import type { FC } from 'react'
-import React, { memo, useMemo, useRef } from 'react'
-import type { ToastContainerProps } from 'react-toastify'
-import { ToastContainer } from 'react-toastify'
-import { SWRConfig } from 'swr'
-import type { FullConfiguration } from 'swr/_internal'
+import { useMemo } from 'react'
 
+import { ProviderComposer } from '~/components/app/Composer'
 import { NoDataErrorView } from '~/components/app/Error/no-data'
 import { ErrorBoundary } from '~/components/app/ErrorBoundary'
 import { BasicLayout } from '~/components/layouts/BasicLayout'
 import { DebugLayout } from '~/components/layouts/DebugLayout'
-import type { InitialDataType } from '~/context/initial-data'
-import { InitialContextProvider } from '~/context/initial-data'
-import { RootStoreProvider } from '~/context/root-store'
+import type { InitialDataType } from '~/provider/initial-data'
+import { InitialContextProvider } from '~/provider/initial-data'
+import { RootStoreProvider } from '~/provider/root-store'
+import { SWRProvider } from '~/provider/swr'
 import { isDev } from '~/utils/env'
-import { localStorageProvider } from '~/utils/swr'
 
-import { Content } from '../components/layouts/AppLayout'
+import { AppLayout } from '../components/layouts/AppLayout'
 import { attachRequestProxy, fetchInitialData } from '../utils/app'
 
 interface DataModel {
@@ -35,12 +32,31 @@ const App: FC<DataModel & { Component: any; pageProps: any; err: any }> = (
 
   const router = useRouter()
 
+  const PageProviders = useMemo(
+    () => [
+      <SWRProvider key="SWRProvider" />,
+      <ErrorBoundary key="ErrorBoundary1" />,
+      <BasicLayout key="BasicLayout" />,
+      <AppLayout key="appLayout" />,
+      <ErrorBoundary key="ErrorBoundary2" />,
+    ],
+    [],
+  )
+
+  const AppProviders = useMemo(
+    () => [
+      <RootStoreProvider key="RootStoreProvider" />,
+      <InitialContextProvider value={initData} key="InitialContextProvider" />,
+    ],
+    [initData],
+  )
+
   const Inner = useMemo(() => {
     // 兜底页
     return initData.aggregateData ? (
-      <Wrapper>
+      <ProviderComposer contexts={PageProviders}>
         <Component {...pageProps} />
-      </Wrapper>
+      </ProviderComposer>
     ) : (
       <NoDataErrorView />
     )
@@ -54,47 +70,8 @@ const App: FC<DataModel & { Component: any; pageProps: any; err: any }> = (
       </RootStoreProvider>
     )
   }
-  return (
-    <RootStoreProvider>
-      <InitialContextProvider value={initData}>{Inner}</InitialContextProvider>
-    </RootStoreProvider>
-  )
+  return <ProviderComposer contexts={AppProviders}>{Inner}</ProviderComposer>
 }
-const Wrapper = memo((props) => {
-  const toastOptions = useRef<ToastContainerProps>({
-    autoClose: 3000,
-    pauseOnHover: true,
-    hideProgressBar: true,
-    newestOnTop: true,
-    closeOnClick: true,
-    closeButton: false,
-    toastClassName: () => '',
-    bodyClassName: () => '',
-  })
-  const swrConfig = useRef<
-    Partial<FullConfiguration> & {
-      provider?: any
-    }
-  >({
-    refreshInterval: 30_000,
-    provider: localStorageProvider,
-  })
-  return (
-    <>
-      <SWRConfig value={swrConfig.current}>
-        <ErrorBoundary>
-          <BasicLayout>
-            <Content>
-              <ErrorBoundary>{props.children}</ErrorBoundary>
-            </Content>
-          </BasicLayout>
-        </ErrorBoundary>
-      </SWRConfig>
-
-      <ToastContainer {...toastOptions.current} />
-    </>
-  )
-})
 // @ts-ignore
 App.getInitialProps = async (props: AppContext) => {
   const ctx = props.ctx
@@ -109,6 +86,7 @@ App.getInitialProps = async (props: AppContext) => {
       return await NextApp.getInitialProps(props)
     } catch (e) {
       // TODO next rfc Layout, 出了就重构这里
+      // 2023 tmd next rfc 全是大饼，根本没法用
       // 只有无数据 也就是 服务端不跑起来 或者接口不对的时候 捕获异常
       // 这是为什么呢 说来说去还是 nextjs 太辣鸡了 只能各种 hack
       // 只能这样了

src/context/index.ts src/provider/index.ts

@@ -26,7 +26,7 @@ export function useRootStore() {
   return context
 }
 export const store = initializeStore()
-export function RootStoreProvider({ children }: { children: ReactNode }) {
+export function RootStoreProvider({ children }: { children?: ReactNode }) {
   if (isDev && isClientSide() && !window.store) {
     Object.defineProperty(window, 'store', {
       get() {

src/context/initial-data.tsx src/provider/initial-data.tsx

@@ -1,4 +1,18 @@
-import { isClientSide } from './env'
+import type { FC } from 'react'
+import { SWRConfig } from 'swr'
+import type { FullConfiguration, ProviderConfiguration } from 'swr/_internal'
+
+import { isClientSide } from '~/utils/env'
+
+const swrConfig = {
+  refreshInterval: 30_000,
+  // @ts-ignore
+  provider: localStorageProvider,
+} satisfies FullConfiguration & ProviderConfiguration
+
+export const SWRProvider: FC<{ children?: JSX.Element }> = ({ children }) => {
+  return <SWRConfig value={swrConfig}>{children}</SWRConfig>
+}
 
 export function localStorageProvider() {
   if (!isClientSide()) {

src/context/root-store.tsx src/provider/root-store.tsx

@@ -0,0 +1,17 @@
+import type { ToastContainerProps } from 'react-toastify'
+import { ToastContainer as _ToastContainer } from 'react-toastify'
+
+const toastOptions = {
+  autoClose: 3000,
+  pauseOnHover: true,
+  hideProgressBar: true,
+  newestOnTop: true,
+  closeOnClick: true,
+  closeButton: false,
+  toastClassName: () => '',
+  bodyClassName: () => '',
+} satisfies ToastContainerProps
+
+export const ToastContainer = () => {
+  return <_ToastContainer {...toastOptions} />
+}

src/utils/swr.ts src/provider/swr.tsx

@@ -1,4 +1,4 @@
-import { store, useRootStore } from '~/context/root-store'
+import { store, useRootStore } from '~/provider/root-store'
 
 export const useStore = useRootStore
 export * from './root-store'

src/provider/toastify.tsx

@@ -10,7 +10,7 @@ import { TokenKey } from '~/utils/cookie'
 import { isClientSide, isServerSide } from '~/utils/env'
 
 import PKG from '../../package.json'
-import type { InitialDataType } from '../context'
+import type { InitialDataType } from '../provider'
 
 export const attachRequestProxy = (request?: IncomingMessage) => {
   if (!request) {

src/store/index.ts

@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 
-import type { InitialDataType } from '~/context/initial-data'
+import type { InitialDataType } from '~/provider/initial-data'
 
 import 'react-dom/next'