fix: make <Wrapper> cumulative (#118)

vikejs · Jun 6, 2024 · b3a7de1 · b3a7de1
1 parent d365e76
commit b3a7de1
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 30 deletions.
diff --git a/packages/vike-react-query/package.json b/packages/vike-react-query/package.json
@@ -7,7 +7,7 @@
   "exports": {
     ".": "./dist/src/index.js",
     "./config": "./dist/renderer/+config.js",
-    "./renderer/VikeReactQueryWrapper": "./dist/renderer/VikeReactQueryWrapper.js",
+    "./renderer/Wrapper": "./dist/renderer/Wrapper.js",
     "./renderer/FallbackErrorBoundary": "./dist/renderer/FallbackErrorBoundary.js"
   },
   "scripts": {
@@ -53,8 +53,8 @@
       "config": [
         "dist/renderer/+config.d.ts"
       ],
-      "renderer/VikeReactQueryWrapper": [
-        "dist/renderer/VikeReactQueryWrapper.d.ts"
+      "renderer/Wrapper": [
+        "dist/renderer/Wrapper.d.ts"
       ]
     }
   },

diff --git a/packages/vike-react-query/renderer/+config.ts b/packages/vike-react-query/renderer/+config.ts
@@ -9,7 +9,7 @@ export default {
     'vike-react': '>=0.4.12'
   },
   queryClientConfig: undefined,
-  VikeReactQueryWrapper: 'import:vike-react-query/renderer/VikeReactQueryWrapper:default',
+  Wrapper: 'import:vike-react-query/renderer/Wrapper:default',
   FallbackErrorBoundary: 'import:vike-react-query/renderer/FallbackErrorBoundary:default',
   streamIsRequired: true,
   meta: {

diff --git a/...-query/renderer/VikeReactQueryWrapper.tsx → ...ges/vike-react-query/renderer/Wrapper.tsx b/...-query/renderer/VikeReactQueryWrapper.tsx → ...ges/vike-react-query/renderer/Wrapper.tsx
@@ -1,14 +1,10 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import React, { ReactNode, useState } from 'react'
-import type { PageContext } from 'vike/types'
 import { StreamedHydration } from './StreamedHydration.js'
+import { usePageContext } from 'vike-react/usePageContext'
 
-type VikeReactQueryWrapperProps = {
-  pageContext: PageContext
-  children: ReactNode
-}
-
-export default function VikeReactQueryWrapper({ pageContext, children }: VikeReactQueryWrapperProps) {
+export default function Wrapper({ children }: { children: ReactNode }) {
+  const pageContext = usePageContext()
   const { queryClientConfig, FallbackErrorBoundary = PassThrough } = pageContext.config
   const [queryClient] = useState(() => new QueryClient(queryClientConfig))
 

diff --git a/packages/vike-react/src/+config.ts b/packages/vike-react/src/+config.ts
@@ -58,10 +58,8 @@ export default {
     onAfterRenderClient: {
       env: { client: true }
     },
-    VikeReactQueryWrapper: {
-      env: { client: true, server: true }
-    },
     Wrapper: {
+      cumulative: true,
       env: { client: true, server: true }
     },
     // Vike already defines the setting 'name', but we redundantly define it here for older Vike versions (otherwise older Vike versions will complain that 'name` is an unknown config). TODO/eventually: remove this once <=0.4.172 versions become rare (also because we use the `require` setting starting from `0.4.173`).

diff --git a/packages/vike-react/src/renderer/getPageElement.tsx b/packages/vike-react/src/renderer/getPageElement.tsx
@@ -5,22 +5,20 @@ import type { PageContext } from 'vike/types'
 import { PageContextProvider } from '../hooks/usePageContext.js'
 
 function getPageElement(pageContext: PageContext): JSX.Element {
+  // Main component
   const Layout = pageContext.config.Layout ?? PassThrough
-  const Wrapper = pageContext.config.Wrapper ?? PassThrough
-  const VikeReactQueryWrapper = pageContext.config.VikeReactQueryWrapper ?? (PassThrough as any)
   const { Page } = pageContext
-  let page = (
-    <PageContextProvider pageContext={pageContext}>
-      <VikeReactQueryWrapper pageContext={pageContext}>
-        <Wrapper>
-          <Layout>{Page ? <Page /> : null}</Layout>
-        </Wrapper>
-      </VikeReactQueryWrapper>
-    </PageContextProvider>
-  )
+  let page = <Layout>{Page ? <Page /> : null}</Layout>
+
+  // Wrapper components
+  ;(pageContext.config.Wrapper || []).forEach((Wrapper) => {
+    page = <Wrapper>{page}</Wrapper>
+  })
+  page = <PageContextProvider pageContext={pageContext}>{page}</PageContextProvider>
   if (pageContext.config.reactStrictMode !== false) {
     page = <React.StrictMode>{page}</React.StrictMode>
   }
+
   return page
 }
 

diff --git a/packages/vike-react/src/types/Config.ts b/packages/vike-react/src/types/Config.ts
@@ -1,5 +1,5 @@
 // https://vike.dev/meta#typescript
-import type { PageContextClient } from 'vike/types'
+import type { ImportString, PageContextClient } from 'vike/types'
 
 declare global {
   namespace Vike {
@@ -24,7 +24,7 @@ declare global {
        *
        * https://vike.dev/Wrapper
        */
-      Wrapper?: (props: { children: React.ReactNode }) => React.ReactNode
+      Wrapper?: Wrapper | ImportString
 
       /** &lt;title>${title}&lt;/title> */
       title?: string
@@ -90,9 +90,11 @@ declare global {
        * https://vike.dev/onAfterRenderClient
        */
       onAfterRenderClient?: (pageContext: PageContextClient) => void
-
-      // Temporary until Wrapper is cumulative
-      VikeReactQueryWrapper?: React.ReactNode
+    }
+    interface ConfigResolved {
+      Wrapper?: Wrapper[]
     }
   }
 }
+
+type Wrapper = (props: { children: React.ReactNode }) => React.ReactNode