feat: support optimizeDeps in vite, add react-is as deps when use antd5

packages/plugin-react/src/tools/vite.ts

@@ -1,12 +1,15 @@
 import { build, UserConfig } from 'vite'
 import {
   loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig,
-  asyncOptimizeChunkPlugin, getOutputPublicPath
+  asyncOptimizeChunkPlugin, getOutputPublicPath, judgeAntd
 } from 'ssr-common-utils'
 import react from '@vitejs/plugin-react'
 import { createStyleImportPlugin, AndDesignVueResolve, VantResolve, ElementPlusResolve, NutuiResolve, AntdResolve } from 'ssr-vite-plugin-style-import'
 const { getOutput, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions, optimize } = loadConfig()
 const { clientOutPut, serverOutPut } = getOutput()
+const isAntd5 = judgeAntd() === 5
+const extraInclude = ([] as string[]).concat(isAntd5 ? ['react-is'] : [])
+
 const styleImportConfig = {
   include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
   resolves: [
@@ -47,7 +50,10 @@ const serverConfig: UserConfig = {
     logOverride: { 'this-is-undefined-in-esm': 'silent' }
   },
   optimizeDeps: {
+    ...viteConfig?.().server?.otherConfig?.optimizeDeps,
+    include: extraInclude.concat(...viteConfig?.().server?.otherConfig?.optimizeDeps?.include ?? []),
     esbuildOptions: {
+      ...viteConfig?.().server?.otherConfig?.optimizeDeps?.esbuildOptions,
       // @ts-expect-error
       bundle: isDev
     }
@@ -82,7 +88,6 @@ const clientPlugins = [
   viteConfig?.()?.client?.extraPlugin,
   createStyleImportPlugin(styleImportConfig)
 ].filter(Boolean)
-
 const clientConfig: UserConfig = {
   ...commonConfig(),
   ...viteConfig?.().client?.otherConfig,
@@ -94,7 +99,7 @@ const clientConfig: UserConfig = {
   },
   optimizeDeps: {
     ...viteConfig?.().client?.otherConfig?.optimizeDeps,
-    include: ['react-router'].concat(...viteConfig?.().client?.otherConfig?.optimizeDeps?.include ?? []),
+    include: ['react-router', ...extraInclude].concat(...viteConfig?.().client?.otherConfig?.optimizeDeps?.include ?? []),
     exclude: ['ssr-hoc-react'].concat(...viteConfig?.().client?.otherConfig?.optimizeDeps?.exclude ?? [])
   },
   plugins: viteConfig?.()?.client?.processPlugin?.(clientPlugins) ?? clientPlugins,
@@ -126,7 +131,7 @@ const viteBuild = async () => {
 }
 
 const viteBuildClient = async () => {
-  await build({ ...clientConfig, mode: 'production' }).catch(_ => {})
+  await build({ ...clientConfig, mode: 'production' }).catch(_ => { })
 }
 const viteBuildServer = async () => {
   await build({ ...serverConfig, mode: 'production' })

packages/plugin-react18/src/tools/vite.ts

@@ -1,12 +1,15 @@
 import { build, UserConfig } from 'vite'
 import {
   loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig,
-  asyncOptimizeChunkPlugin, getOutputPublicPath
+  asyncOptimizeChunkPlugin, getOutputPublicPath, judgeAntd
 } from 'ssr-common-utils'
 import react from '@vitejs/plugin-react'
 import { createStyleImportPlugin, AndDesignVueResolve, VantResolve, ElementPlusResolve, NutuiResolve, AntdResolve } from 'ssr-vite-plugin-style-import'
 const { getOutput, react18ServerEntry, react18ClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions, optimize } = loadConfig()
 const { clientOutPut, serverOutPut } = getOutput()
+const isAntd5 = judgeAntd() === 5
+const extraInclude = ([] as string[]).concat(isAntd5 ? ['react-is'] : [])
+
 const styleImportConfig = {
   include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
   resolves: [
@@ -47,7 +50,10 @@ const serverConfig: UserConfig = {
     logOverride: { 'this-is-undefined-in-esm': 'silent' }
   },
   optimizeDeps: {
+    ...viteConfig?.().server?.otherConfig?.optimizeDeps,
+    include: extraInclude.concat(...viteConfig?.().server?.otherConfig?.optimizeDeps?.include ?? []),
     esbuildOptions: {
+      ...viteConfig?.().server?.otherConfig?.optimizeDeps?.esbuildOptions,
       // @ts-expect-error
       bundle: isDev
     }
@@ -94,7 +100,7 @@ const clientConfig: UserConfig = {
   },
   optimizeDeps: {
     ...viteConfig?.().client?.otherConfig?.optimizeDeps,
-    include: ['react-router'].concat(...viteConfig?.().client?.otherConfig?.optimizeDeps?.include ?? []),
+    include: ['react-router', ...extraInclude].concat(...viteConfig?.().client?.otherConfig?.optimizeDeps?.include ?? []),
     exclude: ['ssr-hoc-react18'].concat(...viteConfig?.().client?.otherConfig?.optimizeDeps?.exclude ?? [])
   },
   plugins: viteConfig?.()?.client?.processPlugin?.(clientPlugins) ?? clientPlugins,
@@ -126,7 +132,7 @@ const viteBuild = async () => {
 }
 
 const viteBuildClient = async () => {
-  await build({ ...clientConfig, mode: 'production' }).catch(_ => {})
+  await build({ ...clientConfig, mode: 'production' }).catch(_ => { })
 }
 const viteBuildServer = async () => {
   await build({ ...serverConfig, mode: 'production' })

packages/plugin-vue3/src/tools/vite.ts

@@ -45,7 +45,9 @@ const serverConfig: UserConfig = {
   ...viteConfig?.().server?.otherConfig,
   plugins: viteConfig?.()?.server?.processPlugin?.(serverPlugins) ?? serverPlugins,
   optimizeDeps: {
+    ...viteConfig?.().server?.otherConfig?.optimizeDeps,
     esbuildOptions: {
+      ...viteConfig?.().server?.otherConfig?.optimizeDeps?.esbuildOptions,
       // @ts-expect-error
       bundle: isDev
     }
@@ -116,7 +118,7 @@ const viteBuild = async () => {
 }
 
 const viteBuildClient = async () => {
-  await build({ ...clientConfig, mode: 'production' }).catch(_ => {})
+  await build({ ...clientConfig, mode: 'production' }).catch(_ => { })
 }
 const viteBuildServer = async () => {
   await build({ ...serverConfig, mode: 'production' })

packages/utils/src/server/index.ts

@@ -17,4 +17,5 @@ export * from './build-utils'
 export * from './server-store'
 export * from './babelOptions'
 export * from './build-config'
+export * from './judge'
 export * from '../common'

packages/utils/src/server/judge.ts

@@ -0,0 +1,7 @@
+import { coerce } from 'semver'
+import { getPkgJson } from './cwd'
+
+export const judgeAntd = () => {
+  const antdVersion = getPkgJson().dependencies?.['antd'] ?? getPkgJson().devDependencies?.['antd']
+  return coerce(antdVersion)?.major
+}

packages/utils/src/server/webpack/common-chain.ts

@@ -1,18 +1,18 @@
 import { promises } from 'fs'
-import { coerce } from 'semver'
 import { resolve } from 'path'
 import type { Chain, PluginItem } from 'ssr-types'
 import type { Rule, Module } from 'webpack-chain'
 import type { Compiler } from 'webpack'
 import { getImageOutputPath } from '../parse'
-import { loadModuleFromFramework, getPkgJson, judgeFramework, getCwd } from '../cwd'
+import { loadModuleFromFramework, judgeFramework, getCwd } from '../cwd'
 import { loadConfig } from '../loadConfig'
 import { logWarning } from '../log'
+import { judgeAntd } from '../judge'
 import { asyncChunkMap } from '../build-utils'
 
-const antdVersion = getPkgJson().dependencies?.['antd'] ?? getPkgJson().devDependencies?.['antd']
-const isAntd4 = coerce(antdVersion)?.major === 4
-if (coerce(antdVersion)?.major === 5) {
+const antdVersion = judgeAntd()
+const isAntd4 = antdVersion === 4
+if (antdVersion === 5) {
   logWarning('Check [email protected] has been installed, [email protected] is more recommend in ssr environment')
 }
 const addBabelLoader = (chain: Rule<Module>, envOptions: any, isServer: boolean) => {
@@ -127,7 +127,7 @@ const addCommonChain = (chain: Chain, isServer: boolean) => {
     .test(/\.(js|mjs|jsx|ts|tsx)$/)
     .exclude
     .add(/node_modules|core-js/)
-    .add(babelOptions?.exclude as Array<string|RegExp> ?? [])
+    .add(babelOptions?.exclude as Array<string | RegExp> ?? [])
     .end()
 
   chain.module
@@ -141,7 +141,7 @@ const addCommonChain = (chain: Chain, isServer: boolean) => {
     .test(/\.(js|mjs|jsx|ts|tsx)$/)
     .include
 
-  const babelForExtraModule = module.add(babelExtraModule ?? []).add(babelOptions?.include as Array<string|RegExp> ?? []).end().exclude.add(/core-js/).end()
+  const babelForExtraModule = module.add(babelExtraModule ?? []).add(babelOptions?.include as Array<string | RegExp> ?? []).end().exclude.add(/core-js/).end()
 
   addBabelLoader(babelModule, envOptions, isServer)
   addBabelLoader(babelForExtraModule, envOptions, isServer)