Merge pull request #159 from vikejs/phonzammi/dev

Minor refactor of integrations
vikejs · Dec 23, 2024 · 225beda · 225beda
2 parents e5de330 + c4d5bb0
commit 225beda
Show file tree

Hide file tree

Showing 14 changed files with 240 additions and 173 deletions.
diff --git a/packages/vike-react-antd/README.md b/packages/vike-react-antd/README.md
@@ -1,14 +1,15 @@
 # `vike-react-antd`
 
+Integrates [Ant Design](https://ant.design) to your [`vike-react`](https://vike.dev/vike-react) app.
+
 [Installation](#installation)  
 [Settings](#settings)  
 [Version history](https://github.com/vikejs/vike-react/blob/main/packages/vike-react-antd/CHANGELOG.md)  
+[What it does](#what-it-does)  
 [See Also](#see-also)  
 
 <br/>
 
-Integrates [Ant Design](https://ant.design) to your [`vike-react`](https://vike.dev/vike-react) app.
-
 ## Installation
 
 1. `npm install vike-react-antd antd @ant-design/cssinjs`
@@ -57,14 +58,14 @@ const px2rem = px2remTransformer({
   rootValue: 32, // 32px = 1rem; @default 16
 })
 
-const antd: Omit<StyleProviderProps, "children"> = {
+const antd: Omit<StyleProviderProps, "children" | "cache"> = {
   hashPriority: "high",
   layer: true,
   transformers: [legacyLogicalPropertiesTransformer, px2rem],
 }
 ```
 
-You can remove Ant Design from [some of your pages](https://vike.dev/config#inheritance):
+You can remove the `vike-react-antd` integration from [some of your pages](https://vike.dev/config#inheritance):
 
 ```js
 // pages/about/+antd.js
@@ -79,6 +80,22 @@ For full customization consider [ejecting](https://vike.dev/eject).
 
 <br/>
 
+## What it does
+
+The `vike-react-antd` extension allows you to use Ant Design without [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content).
+
+It collects the page's styles during SSR and injects them in the HTML, ensuring that styles are applied early (before even JavaScript starts loading).
+
+You can learn more at:
+ - [Vike > CSS-in-JS > Collect styles](https://vike.dev/css-in-js#collect-styles)
+ - [Antd Design > Server Side Rendering](https://ant.design/docs/react/server-side-rendering)
+
+For more details, have a look at the source code of `vike-react-styled-jsx` (which is small).
+
+<br/>
+
 ## See also
 
 - [Vike Docs > Ant Design](https://vike.dev/antd)
+- [Vike Docs > CSS-in-JS](https://vike.dev/css-in-js)
+- [Antd Design](https://ant.design)
diff --git a/packages/vike-react-antd/Wrapper.tsx b/packages/vike-react-antd/Wrapper.tsx
@@ -7,10 +7,15 @@ import { usePageContext } from 'vike-react/usePageContext'
 function Wrapper({ children }: { children: ReactNode }) {
   const pageContext = usePageContext()
   const { antd } = pageContext.config
+  const cache = 'antd' in pageContext ? pageContext.antd?.cache : undefined
 
-  if (antd === null) {
+  if (antd === null || !cache) {
     return <>{children}</>
   }
 
-  return <StyleProvider {...antd}>{children}</StyleProvider>
+  return (
+    <StyleProvider cache={cache} {...antd}>
+      {children}
+    </StyleProvider>
+  )
 }
diff --git a/packages/vike-react-antd/config.ts b/packages/vike-react-antd/config.ts
@@ -13,19 +13,27 @@ const config = {
   onBeforeRenderHtml: 'import:vike-react-antd/__internal/onBeforeRenderHtml:onBeforeRenderHtml',
   Wrapper: 'import:vike-react-antd/__internal/Wrapper:Wrapper',
   meta: {
+    Wrapper: {
+      env: { server: true },
+    },
     antd: {
       env: {
         server: true,
-        client: true,
+        client: false,
       },
     },
   },
 } satisfies Config
 
 declare global {
   namespace Vike {
+    interface PageContext {
+      antd?: {
+        cache?: StyleProviderProps['cache']
+      }
+    }
     interface Config {
-      antd?: null | Omit<StyleProviderProps, 'children'>
+      antd?: null | Omit<StyleProviderProps, 'children' | 'cache'>
     }
   }
 }
diff --git a/packages/vike-react-antd/onAfterRenderHtml.ts b/packages/vike-react-antd/onAfterRenderHtml.ts
@@ -7,12 +7,13 @@ import type { PageContext } from 'vike/types'
 
 function onAfterRenderHtml(pageContext: PageContext) {
   const config = useConfig()
+  const cache = pageContext.antd?.cache
 
-  if (pageContext.config.antd?.cache) {
+  if (cache) {
     const styleTag = React.createElement('style', {
       id: 'antd-cssinjs',
       dangerouslySetInnerHTML: {
-        __html: extractStyle(pageContext.config.antd.cache, true),
+        __html: extractStyle(cache, true),
       },
     })
     config({

diff --git a/packages/vike-react-antd/onBeforeRenderHtml.ts b/packages/vike-react-antd/onBeforeRenderHtml.ts
@@ -5,7 +5,8 @@ import type { PageContext } from 'vike/types'
 
 function onBeforeRenderHtml(pageContext: PageContext) {
   if (pageContext.config.antd !== null) {
-    pageContext.config.antd ??= {}
-    pageContext.config.antd.cache = createCache()
+    pageContext.antd = {
+      cache: createCache(),
+    }
   }
 }
diff --git a/packages/vike-react-antd/package.json b/packages/vike-react-antd/package.json
@@ -23,10 +23,10 @@
     "vike-react": ">=0.4.13"
   },
   "devDependencies": {
-    "@ant-design/cssinjs": "^1.22.0",
+    "@ant-design/cssinjs": "^1.22.1",
     "@brillout/release-me": "^0.4.2",
     "@types/react": "^18.2.55",
-    "antd": "^5.22.2",
+    "antd": "^5.22.5",
     "react": "^18.3.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.5.3",

diff --git a/packages/vike-react-styled-components/README.md b/packages/vike-react-styled-components/README.md
@@ -1,14 +1,15 @@
 # `vike-react-styled-components`
 
+Integrates [styled-components](https://styled-components.com) to your [`vike-react`](https://vike.dev/vike-react) app.
+
 [Installation](#installation)  
 [Settings](#settings)  
 [Version history](https://github.com/vikejs/vike-react/blob/main/packages/vike-react-styled-components/CHANGELOG.md)  
+[What it does](#what-it-does)  
 [See also](#see-also)  
 
 <br/>
 
-Integrates [styled-components](https://styled-components.com) to your [`vike-react`](https://vike.dev/vike-react) app.
-
 ## Installation
 
 1. ```
@@ -29,26 +30,25 @@ Integrates [styled-components](https://styled-components.com) to your [`vike-rea
    }
    ```
 
-3. Install `babel-plugin-styled-components`:
+3. Add the `babel-plugin-styled-components` plugin:
    ```js
    // vite.config.js
-   import { defineConfig } from "vite"
    import react from "@vitejs/plugin-react"
    import vike from "vike/plugin"
 
-   export default defineConfig({
+   export default {
      plugins: [
       vike(),
       react({
         babel: {
-          plugins: [["babel-plugin-styled-components"]],
-        },
-      }),
-    ],
-   });
+          plugins: [["babel-plugin-styled-components"]]
+        }
+      })
+    ]
+   }
    ```
 
-4. You can now use styled-components at any of your components.
+4. You can now use `styled-components` at any of your components.
    ```jsx
    import { styled } from "styled-components";
 
@@ -94,7 +94,7 @@ const styledComponents = {
 }
 ```
 
-You can remove the styled-components SSR integration from [some of your pages](https://vike.dev/config#inheritance):
+You can remove the `vike-react-styled-components` integration from [some of your pages](https://vike.dev/config#inheritance):
 
 ```js
 // pages/about/+styledComponents.js
@@ -109,6 +109,22 @@ For full customization consider [ejecting](https://vike.dev/eject).
 
 <br/>
 
+## What it does
+
+The `vike-react-styled-components` extension allows you to use `styled-components` without [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content).
+
+It collects the page's styles during SSR and injects them in the HTML, ensuring that styles are applied early (before even JavaScript starts loading).
+
+You can learn more at:
+ - [Vike > CSS-in-JS > Collect styles](https://vike.dev/css-in-js#collect-styles)
+ - [styled-components > Server Side Rendering](https://styled-components.com/docs/advanced#server-side-rendering)
+
+For more details, have a look at the source code of `vike-react-styled-jsx` (which is small).
+
+<br/>
+
 ## See also
 
 - [Vike Docs > styled-components](https://vike.dev/styled-components)
+- [Vike Docs > CSS-in-JS](https://vike.dev/css-in-js)
+- [styled-components Docs](https://styled-components.com/docs)
diff --git a/packages/vike-react-styled-components/Wrapper.tsx b/packages/vike-react-styled-components/Wrapper.tsx
@@ -7,17 +7,15 @@ import { usePageContext } from 'vike-react/usePageContext'
 function Wrapper({ children }: { children: ReactNode }) {
   const pageContext = usePageContext()
   const { styledComponents } = pageContext.config
+  const sheet = 'styledComponents' in pageContext ? pageContext.styledComponents?.sheet : undefined
+
+  if (styledComponents === null || !sheet) {
+    return <>{children}</>
+  }
 
-  if (isBrowser() || styledComponents === null) return <>{children}</>
   return (
-    <StyleSheetManager sheet={pageContext.styledComponentsSheet?.instance} {...styledComponents?.styleSheetManager}>
+    <StyleSheetManager sheet={sheet.instance} {...styledComponents?.styleSheetManager}>
       {children}
     </StyleSheetManager>
   )
 }
-
-function isBrowser() {
-  // Using `typeof window !== 'undefined'` alone is not enough because some users use https://www.npmjs.com/package/ssr-window
-  return typeof window !== 'undefined' && typeof window.scrollY === 'number'
-  // Alternatively, test whether environment is a *real* browser: https://github.com/brillout/picocolors/blob/d59a33a0fd52a8a33e4158884069192a89ce0113/picocolors.js#L87-L89
-}
diff --git a/packages/vike-react-styled-components/config.ts b/packages/vike-react-styled-components/config.ts
@@ -13,6 +13,9 @@ const config = {
   onBeforeRenderHtml: 'import:vike-react-styled-components/__internal/onBeforeRenderHtml:onBeforeRenderHtml',
   Wrapper: 'import:vike-react-styled-components/__internal/Wrapper:Wrapper',
   meta: {
+    Wrapper: {
+      env: { server: true },
+    },
     styledComponents: {
       env: {
         server: true,
@@ -25,7 +28,9 @@ const config = {
 declare global {
   namespace Vike {
     interface PageContext {
-      styledComponentsSheet?: ServerStyleSheet
+      styledComponents?: {
+        sheet?: ServerStyleSheet
+      }
     }
     interface Config {
       styledComponents?: null | {

diff --git a/packages/vike-react-styled-components/onAfterRenderHtml.ts b/packages/vike-react-styled-components/onAfterRenderHtml.ts
@@ -6,18 +6,18 @@ import type { PageContext } from 'vike/types'
 
 function onAfterRenderHtml(pageContext: PageContext) {
   const config = useConfig()
+  const sheet = pageContext.styledComponents?.sheet
 
-  if (pageContext.styledComponentsSheet) {
-    const { styledComponentsSheet } = pageContext
+  if (sheet) {
     try {
-      const styles = styledComponentsSheet.getStyleElement()
+      const styles = sheet.getStyleElement()
       config({
         Head: styles,
       })
     } catch (error) {
       throw error
     } finally {
-      styledComponentsSheet.seal()
+      sheet.seal()
     }
   }
 }
diff --git a/packages/vike-react-styled-components/onBeforeRenderHtml.ts b/packages/vike-react-styled-components/onBeforeRenderHtml.ts
@@ -5,7 +5,8 @@ import type { PageContext } from 'vike/types'
 
 function onBeforeRenderHtml(pageContext: PageContext) {
   if (pageContext.config.styledComponents !== null) {
-    pageContext.config.styledComponents ??= {}
-    pageContext.styledComponentsSheet = new ServerStyleSheet()
+    pageContext.styledComponents = {
+      sheet: new ServerStyleSheet(),
+    }
   }
 }
diff --git a/packages/vike-react-styled-jsx/Wrapper.tsx b/packages/vike-react-styled-jsx/Wrapper.tsx
@@ -6,11 +6,12 @@ import { usePageContext } from 'vike-react/usePageContext'
 
 function Wrapper({ children }: { children: ReactNode }) {
   const pageContext = usePageContext()
+  const { styledJsx } = pageContext.config
+  const registry = 'styledJsx' in pageContext ? pageContext.styledJsx?.registry : undefined
 
-  if (pageContext.config.styledJsx === null) return <>{children}</>
-
-  if ('styledJsx' in pageContext) {
-    return <StyleRegistry registry={pageContext.styledJsx!.registry}>{children}</StyleRegistry>
+  if (styledJsx === null || !registry) {
+    return <>{children}</>
   }
-  return <>{children}</>
+
+  return <StyleRegistry registry={registry}>{children}</StyleRegistry>
 }
diff --git a/packages/vike-react-styled-jsx/onBeforeRenderHtml.ts b/packages/vike-react-styled-jsx/onBeforeRenderHtml.ts
@@ -5,7 +5,8 @@ import type { PageContext } from 'vike/types'
 
 function onBeforeRenderHtml(pageContext: PageContext) {
   if (pageContext.config.styledJsx !== null) {
-    pageContext.styledJsx ??= {}
-    pageContext.styledJsx.registry = createStyleRegistry()
+    pageContext.styledJsx = {
+      registry: createStyleRegistry(),
+    }
   }
 }