improve ssr plugin

packages/playground/use-theme-doc/pages/_theme.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { createTheme, defaultSideNavs, useThemeCtx } from './themeDev'
-import { Button } from 'antd'
 import Component404 from './404'
 import { topNavsConfig } from './themeConfig/topNavs'
 import { sideNavsConfig } from './themeConfig/sideNavs'
@@ -37,9 +36,9 @@ export default createTheme({
     const themeCtx = useThemeCtx()
     // console.log('themeCtx', themeCtx)
     return (
-      <Button size="small" style={{ verticalAlign: 'middle' }}>
+      <button>
         Extra
-      </Button>
+      </button>
     )
   },
   sideNavs(ctx) {

packages/playground/use-theme-doc/pages/themeDev.tsx

@@ -1,4 +1,4 @@
 // import the src directly instead of build output
 // useful for local development in this repo
 // actual users don't need to do this, they should import from 'vite-pages-theme-doc'
-export * from 'vite-pages-theme-doc/src/index'
+export * from 'vite-pages-theme-doc'

packages/react-pages/client.ts

@@ -28,12 +28,16 @@ export type { Theme } from './clientTypes'
 
 export const IS_SSR = process.env.VITE_PAGES_IS_SSR === 'true'
 
-export function registerSSRPlugin(ssrPlugin: SSRPlugin | Promise<SSRPlugin>) {
+/**
+ * With ssr plugins, users can hook into the ssr process.
+ *
+ * For example, you can extract style from css-in-js tools to render it in ssr output(HTML):
+ * https://ant.design/docs/react/customize-theme#server-side-render-ssr
+ *
+ * Register ssr plugin with dynamic import function,
+ * so that your ssr code will not increase client bundle size.
+ */
+export function registerSSRPlugin(importSSRPlugin: () => Promise<SSRPlugin>) {
   const impl = (global as any)['register_vite_pages_ssr_plugin']
-  if (typeof impl !== 'function') {
-    throw new Error(
-      'registerSSRPlugin hook should only be called under the condition: `IS_SSR === true`. Otherwise, your client bundle will include your ssrPlugin and related dependencies, which will increase your bundle size.'
-    )
-  }
-  return impl(ssrPlugin)
+  return impl(importSSRPlugin)
 }

packages/react-pages/src/node/static-site-generation/index.ts

@@ -44,7 +44,11 @@ export async function ssrBuild(
       minify: false,
     },
     ssr: {
-      // TODO: theme-doc should export a vite plugin to do this
+      // `vite-pages-theme-doc/dist/index.js` have `import './index.css'`
+      // so it needs to be bundled by vite before executed by node.js.
+      // This is coupled to theme-doc,
+      // but we don't want to ask users to put this in their vite config.
+      // So let's put it here :)
       noExternal: ['vite-pages-theme-doc'],
     },
   })
@@ -53,9 +57,9 @@ export async function ssrBuild(
 
   const ssrPluginPromises: Promise<SSRPlugin>[] = []
   ;(global as any)['register_vite_pages_ssr_plugin'] = (
-    promise: Promise<SSRPlugin>
+    importSSRPlugin: () => Promise<SSRPlugin>
   ) => {
-    ssrPluginPromises.push(promise)
+    ssrPluginPromises.push(importSSRPlugin())
   }
   process.env.VITE_PAGES_IS_SSR = 'true'
 

packages/theme-doc/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useContext } from 'react'
+import React, { useMemo } from 'react'
 import type { ThemeProps } from 'vite-plugin-react-pages/clientTypes'
 import { useStaticData } from 'vite-plugin-react-pages/client'
 import { useLocation } from 'react-router-dom'
@@ -13,8 +13,6 @@ import type { ThemeConfig, ThemeContextValue } from './ThemeConfig.doc'
 import { normalizeI18nConfig, useIsomorphicLayoutEffect } from './utils'
 import { getPageGroups, matchPagePathLocalePrefix } from './analyzeStaticData'
 
-import './importSSRPlugin'
-
 export function createTheme(
   originalThemeConfig: ThemeConfig
 ): React.FC<React.PropsWithChildren<ThemeProps>> {
@@ -166,3 +164,6 @@ export type {
   FooterLink,
 } from './ThemeConfig.doc'
 export { useThemeCtx } from './ctx'
+
+import { registerSSRPlugin } from 'vite-plugin-react-pages/client'
+registerSSRPlugin(() => import('./ssrPlugin').then((mod) => mod.default))