feat: new extension vike-react-antd

package.json

@@ -28,7 +28,8 @@
       "vike-react": "link:./packages/vike-react/",
       "vike-react-query": "link:./packages/vike-react-query/",
       "vike-react-apollo": "link:./packages/vike-react-apollo/",
-      "vike-react-chakra": "link:./packages/vike-react-chakra/"
+      "vike-react-chakra": "link:./packages/vike-react-chakra/",
+      "vike-react-antd": "link:./packages/vike-react-antd/"
     }
   },
   "devDependencies": {

packages/vike-react-antd/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

packages/vike-react-antd/README.md

@@ -0,0 +1,78 @@
+# `vike-react-antd`
+
+[Installation](#installation)  
+[Settings](#settings)  
+[Version history](https://github.com/vikejs/vike-react/blob/main/packages/vike-react-antd/CHANGELOG.md)  
+[See Also](#see-also)  
+
+<br/>
+
+## Installation
+
+1. `npm install vike-react-antd antd @ant-design/cssinjs`
+2. Extend `+config.js`:
+   ```js
+   // pages/+config.js
+
+   import vikeReact from "vike-react/config"
+   import vikeReactAntd from "vike-react-antd/config"
+
+   export default {
+     // ...
+     extends: [vikeReact, vikeReactAntd]
+   }
+   ```
+3. You can now use Ant Design at any of your components.
+   ```jsx
+   import { Button, Flex } from "antd";
+
+   function SomeComponent() {
+     return (
+       <Flex gap="small" wrap>
+        <Button type="primary">Primary Button</Button>
+        <Button>Default Button</Button>
+      </Flex>
+     )
+   }
+   ```
+
+> [!NOTE]
+> The `vike-react-antd` extension requires [`vike-react`](https://vike.dev/vike-react).
+
+> [!NOTE]
+> The main purpose of this extension is to simplify the integration of Ant Design with [Server Side Rendering](https://ant.design/docs/react/server-side-rendering).
+
+<br/>
+
+## Settings
+
+`vike-react-antd` provides a configuration `+antd` for customizing Ant Design [Style Compatibility](https://ant.design/docs/react/compatible-style).
+```ts
+// pages/+antd.ts
+export { antd }
+
+import { legacyLogicalPropertiesTransformer, px2remTransformer, type StyleProviderProps } from "@ant-design/cssinjs"
+
+const px2rem = px2remTransformer({
+  rootValue: 32, // 32px = 1rem; @default 16
+})
+
+const antd: Omit<StyleProviderProps, "children"> = {
+  hashPriority: "high",
+  layer: true,
+  transformers: [legacyLogicalPropertiesTransformer, px2rem],
+}
+```
+
+You can remove Ant Design from [some of your pages](https://vike.dev/config#inheritance):
+```js
+// pages/about/+antd.js
+
+export const antd = null
+```
+
+<br/>
+
+## See also
+
+- [Vike Docs > Ant Design](https://vike.dev/antd)

packages/vike-react-antd/Wrapper.tsx

@@ -0,0 +1,16 @@
+export { Wrapper }
+
+import React, { type ReactNode } from "react"
+import { StyleProvider } from "@ant-design/cssinjs";
+import { usePageContext } from "vike-react/usePageContext";
+
+function Wrapper({ children }: { children: ReactNode }) {
+  const pageContext = usePageContext()
+  const { antd } = pageContext.config
+
+  if (antd === null) {
+    return <>{children}</>
+  }
+
+  return <StyleProvider {...antd}>{children}</StyleProvider>
+}

packages/vike-react-antd/config.ts

@@ -0,0 +1,31 @@
+export { config as default }
+
+import type { StyleProviderProps } from '@ant-design/cssinjs'
+import type { Config } from 'vike/types'
+
+const config = {
+  name: 'vike-react-antd',
+  require: {
+    vike: '>=0.4.203',
+    'vike-react': '>=0.4.13',
+  },
+  onAfterRenderHtml: 'import:vike-react-antd/__internal/onAfterRenderHtml:onAfterRenderHtml',
+  onBeforeRenderHtml: 'import:vike-react-antd/__internal/onBeforeRenderHtml:onBeforeRenderHtml',
+  Wrapper: 'import:vike-react-antd/__internal/Wrapper:Wrapper',
+  meta: {
+    antd: {
+      env: {
+        server: true,
+        client: true,
+      },
+    },
+  },
+} satisfies Config
+
+declare global {
+  namespace Vike {
+    interface Config {
+      antd?: null | Omit<StyleProviderProps, 'children'>
+    }
+  }
+}

packages/vike-react-antd/onAfterRenderHtml.ts

@@ -0,0 +1,22 @@
+export { onAfterRenderHtml }
+
+import React from 'react'
+import { extractStyle } from '@ant-design/cssinjs'
+import { useConfig } from 'vike-react/useConfig'
+import type { PageContext } from 'vike/types'
+
+function onAfterRenderHtml(pageContext: PageContext) {
+  const config = useConfig()
+
+  if (pageContext.config.antd?.cache) {
+    const styleTag = React.createElement('style', {
+      id: 'antd-cssinjs',
+      dangerouslySetInnerHTML: {
+        __html: extractStyle(pageContext.config.antd.cache, true),
+      },
+    })
+    config({
+      Head: styleTag,
+    })
+  }
+}

packages/vike-react-antd/onBeforeRenderHtml.ts

@@ -0,0 +1,11 @@
+export { onBeforeRenderHtml }
+
+import { createCache } from "@ant-design/cssinjs"
+import type { PageContext } from "vike/types"
+
+function onBeforeRenderHtml(pageContext: PageContext) {
+  if (pageContext.config.antd !== null) {
+    pageContext.config.antd ??= {}
+    pageContext.config.antd.cache = createCache()
+  }
+}

packages/vike-react-antd/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "vike-react-antd",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    "./config": "./dist/config.js",
+    "./__internal/onAfterRenderHtml": "./dist/onAfterRenderHtml.js",
+    "./__internal/onBeforeRenderHtml": "./dist/onBeforeRenderHtml.js",
+    "./__internal/Wrapper": "./dist/Wrapper.js"
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "rimraf dist/ && tsc",
+    "release": "release-me patch",
+    "release:minor": "release-me minor",
+    "release:major": "release-me major",
+    "release:commit": "release-me commit"
+  },
+  "peerDependencies": {
+    "@ant-design/cssinjs": ">=1.22",
+    "antd": ">=5",
+    "react": ">=18",
+    "vike-react": ">=0.4.13"
+  },
+  "devDependencies": {
+    "@ant-design/cssinjs": "^1.22.0",
+    "@brillout/release-me": "^0.4.2",
+    "@types/react": "^18.2.55",
+    "antd": "^5.22.2",
+    "react": "^18.3.1",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.5.3",
+    "vike": "^0.4.203",
+    "vike-react": "^0.5.8",
+    "vite": "^5.4.0"
+  },
+  "typesVersions": {
+    "*": {
+      "config": [
+        "dist/config.d.ts"
+      ],
+      "__internal/onAfterRenderHtml": [
+        "dist/onAfterRenderHtml.d.ts"
+      ],
+      "__internal/onBeforeRenderHtml": [
+        "dist/onBeforeRenderHtml.d.ts"
+      ],
+      "__internal/Wrapper": [
+        "dist/Wrapper.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": "https://github.com/vikejs/vike-react/tree/main/packages/vike-react-antd",
+  "license": "MIT"
+}

packages/vike-react-antd/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react",
+    "outDir": "./dist/",
+    "skipLibCheck": true,
+    "types": ["vike-react"],
+    // Strictness
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitAny": true
+  }
+}