ssr-plugin-react 6.2.70 → 6.2.71

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
-ssr-plugin-react:build: cache hit, replaying output 499ad528bd0d3598
+ssr-plugin-react:build: cache hit, replaying output 01b00897ba7382a0
 ssr-plugin-react:build: 
-ssr-plugin-react:build: > ssr-plugin-react@6.2.70 build /home/runner/work/ssr/ssr/packages/plugin-react
+ssr-plugin-react:build: > ssr-plugin-react@6.2.71 build /home/runner/work/ssr/ssr/packages/plugin-react
 ssr-plugin-react:build: > concurrently "tsc -p ./tsconfig.cjs.json " " tsc -p ./tsconfig.esm.json"
 ssr-plugin-react:build: 
-ssr-plugin-react:build: [0] tsc -p ./tsconfig.cjs.json  exited with code 0
 ssr-plugin-react:build: [1]  tsc -p ./tsconfig.esm.json exited with code 0
+ssr-plugin-react:build: [0] tsc -p ./tsconfig.cjs.json  exited with code 0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [6.2.71](https://github.com/zhangyuang/ssr/compare/plugin-react@6.2.70...plugin-react@6.2.71) (2024-01-27)
+
+
+### Bug Fixes
+
+* plugin-react close[#321](https://github.com/zhangyuang/ssr/issues/321) ([a1b69f8](https://github.com/zhangyuang/ssr/commit/a1b69f8ba467b86d3d7fc1fc63d78f97bf3b8afb))
+
+
+
 ## [6.2.70](https://github.com/zhangyuang/ssr/compare/plugin-react@6.2.69...plugin-react@6.2.70) (2024-01-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssr-plugin-react",
-  "version": "6.2.70",
+  "version": "6.2.71",
   "description": "plugin-react for ssr",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",

package/src/config/base.ts

@@ -0,0 +1,65 @@
+
+import { join } from 'path'
+import { Mode } from 'ssr-types'
+import { getCwd, loadConfig, setStyle, loadModuleFromFramework, getBuildConfig, addCommonChain } from 'ssr-common-utils'
+import * as WebpackChain from 'webpack-chain'
+import * as webpack from 'ssr-webpack4'
+
+const MiniCssExtractPlugin = require(loadModuleFromFramework('ssr-mini-css-extract-plugin'))
+const WebpackBar = require('webpackbar')
+
+const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
+  const config = loadConfig()
+  const { moduleFileExtensions, chainBaseConfig, alias, define } = config
+  const mode = process.env.NODE_ENV as Mode
+
+  chain.mode(mode)
+  chain.module.strictExportPresence(true)
+  chain
+    .resolve
+    .modules
+    .add('node_modules')
+    .add(join(getCwd(), './node_modules'))
+    .end()
+    .extensions.merge(moduleFileExtensions)
+    .end()
+    .alias
+    .end()
+
+  alias && Object.keys(alias).forEach(item => {
+    chain.resolve.alias
+      .set(item, alias[item])
+  })
+  addCommonChain(chain, isServer)
+  setStyle(chain, /\.css$/, {
+    rule: 'css',
+    isServer,
+    importLoaders: 1
+  })
+
+  setStyle(chain, /\.less$/, {
+    rule: 'less',
+    loader: 'less-loader',
+    isServer,
+    importLoaders: 2
+  })
+
+  chain.plugin('minify-css').use(MiniCssExtractPlugin, getBuildConfig().cssBuildConfig)
+
+  chain.plugin('webpackBar').use(new WebpackBar({
+    name: isServer ? 'server' : 'client',
+    color: isServer ? '#f173ac' : '#45b97c'
+  }))
+  chain.plugin('ssrDefine').use(webpack.DefinePlugin, [{
+    ...process.env,
+    __isBrowser__: !isServer,
+    ...(isServer ? define?.server : define?.client),
+    ...define?.base
+  }])
+  chainBaseConfig(chain, isServer)
+  return config
+}
+
+export {
+  getBaseConfig
+}

package/src/config/client.ts

@@ -0,0 +1,66 @@
+import { loadConfig, getSplitChunksOptions, getOutputPublicPath, loadModuleFromFramework, getBuildConfig, terserConfig, asyncChunkMap } from 'ssr-common-utils'
+import * as WebpackChain from 'webpack-chain'
+import { getBaseConfig } from './base'
+
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')
+const safePostCssParser = require('postcss-safe-parser')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+const loadModule = loadModuleFromFramework
+
+const getClientWebpack = (chain: WebpackChain) => {
+  const { isDev, chunkName, getOutput, cwd, chainClientConfig, host, fePort } = loadConfig()
+  const buildConfig = getBuildConfig()
+
+  const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP)
+  const publicPath = getOutputPublicPath()
+  getBaseConfig(chain, false)
+  chain.devtool(isDev ? 'eval-source-map' : (shouldUseSourceMap ? 'source-map' : false))
+  chain.entry(chunkName)
+    .add(require.resolve('../entry/client-entry'))
+    .end()
+    .output
+    .path(getOutput().clientOutPut)
+    .filename(buildConfig.jsBuldConfig.fileName)
+    .chunkFilename(buildConfig.jsBuldConfig.chunkFileName)
+    .publicPath(publicPath)
+    .end()
+  chain.optimization
+    .runtimeChunk(true)
+    .splitChunks(getSplitChunksOptions(asyncChunkMap))
+    .when(!isDev, optimization => {
+      optimization.minimizer('terser')
+        .use(loadModule('terser-webpack-plugin'), [terserConfig()])
+      optimization.minimizer('optimize-css').use(loadModule('optimize-css-assets-webpack-plugin'), [{
+        cssProcessorOptions: {
+          parser: safePostCssParser,
+          map: shouldUseSourceMap ? {
+            inline: false,
+            annotation: true
+          } : false
+        }
+      }])
+    })
+
+  chain.plugin('moduleNotFound').use(ModuleNotFoundPlugin, [cwd])
+
+  chain.plugin('manifest').use(loadModule('webpack-manifest-plugin'), [{
+    fileName: 'asset-manifest.json'
+  }])
+
+  chain.when(isDev, chain => {
+    chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
+      overlay: {
+        sockHost: host,
+        sockPort: fePort
+      }
+    }))
+  })
+
+  chainClientConfig(chain) // 合并用户自定义配置
+
+  return chain.toConfig()
+}
+
+export {
+  getClientWebpack
+}

package/src/config/index.ts

@@ -0,0 +1,2 @@
+export * from './client'
+export * from './server'

package/src/config/server.ts

@@ -0,0 +1,56 @@
+import { join } from 'path'
+import { loadConfig, nodeExternals, loadModuleFromFramework } from 'ssr-common-utils'
+import * as WebpackChain from 'webpack-chain'
+import * as webpack from 'ssr-webpack4'
+
+import { getBaseConfig } from './base'
+
+const getServerWebpack = (chain: WebpackChain) => {
+  const config = loadConfig()
+  const { isDev, cwd, getOutput, chainServerConfig, whiteList, chunkName } = config
+  const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP)
+  getBaseConfig(chain, true)
+  chain.devtool(isDev ? 'inline-source-map' : false)
+  chain.target('node')
+  chain.entry(chunkName)
+    .add(require.resolve('../entry/server-entry'))
+    .end()
+    .output
+    .path(getOutput().serverOutPut)
+    .filename('[name].server.js')
+    .libraryTarget('commonjs')
+
+  const modulesDir = [join(cwd, './node_modules')]
+  chain.externals(nodeExternals({
+    whitelist: whiteList,
+    // externals Dir contains example/xxx/node_modules ssr/node_modules
+    modulesDir
+  }))
+  if (!isDev) {
+    chain.optimization.minimizer('terser')
+      .use(loadModuleFromFramework('terser-webpack-plugin'), [{
+        terserOptions: {
+          keep_fnames: true
+        },
+        extractComments: false,
+        parallel: true,
+        cache: true,
+        sourceMap: shouldUseSourceMap
+      }])
+  }
+  chain.when(isDev, () => {
+    chain.watch(true)
+  })
+
+  chain.plugin('serverLimit').use(webpack.optimize.LimitChunkCountPlugin, [{
+    maxChunks: 1
+  }])
+
+  chainServerConfig(chain) // 合并用户自定义配置
+
+  return chain.toConfig()
+}
+
+export {
+  getServerWebpack
+}

package/src/entry/client-entry.tsx

@@ -0,0 +1,57 @@
+import { createElement } from 'react'
+import * as ReactDOM from 'react-dom'
+import { proxy } from 'valtio'
+import 'react-router' // for vite prebundle list
+import { BrowserRouter, Route, Switch } from 'react-router-dom'
+import { preloadComponent, isMicro, setStoreContext, setStore } from 'ssr-common-utils'
+import { wrapComponent } from 'ssr-hoc-react'
+import { LayoutProps } from 'ssr-types'
+import { STORE_CONTEXT as Context } from '_build/create-context'
+import { Routes } from './create-router'
+import { AppContext } from './context'
+
+const { FeRoutes, layoutFetch, App, store } = Routes
+
+const clientRender = async (): Promise<void> => {
+  const IApp = App ?? function (props: LayoutProps) {
+    return props.children!
+  }
+  setStoreContext(Context)
+  for (const key in store) {
+    store[key] = proxy(window.__VALTIO_DATA__?.[key])
+  }
+  setStore(store ?? {})
+  const baseName = isMicro() ? window.clientPrefix : window.prefix
+  const routes = await preloadComponent(FeRoutes, baseName)
+  ReactDOM[window.__USE_SSR__ ? 'hydrate' : 'render'](
+    createElement(BrowserRouter, {
+      basename: baseName
+    }, createElement(AppContext as any, {
+      children: createElement(Switch, null,
+        createElement(IApp as any, null, createElement(Switch, null,
+          routes.map(item => {
+            const { fetch, component, path } = item
+            component.fetch = fetch
+            component.layoutFetch = layoutFetch
+            const WrappedComponent = wrapComponent(component)
+            return createElement(Route, {
+              exact: true,
+              key: path,
+              path: path,
+              render: () => createElement(WrappedComponent, {
+                key: location.pathname
+              })
+            })
+          }))))
+    }))
+    , document.querySelector(window.ssrDevInfo.rootId ?? '#app'))
+  if (!window.__USE_VITE__) {
+    (module as any)?.hot?.accept?.()
+  }
+}
+
+clientRender()
+
+export {
+  clientRender
+}

package/src/entry/context.tsx

@@ -0,0 +1,40 @@
+import { useReducer, createElement } from 'react'
+import { IProps, Action, IWindow, ReactRoutesType } from 'ssr-types'
+import { STORE_CONTEXT as Context } from '_build/create-context'
+import { Routes } from './create-router'
+
+const { reducer, state } = Routes as ReactRoutesType
+
+const userState = state ?? {}
+const userReducer = reducer ?? function () {}
+
+const isDev = process.env.NODE_ENV !== 'production'
+
+// 客户端的 context  只需要创建一次，在页面整个生命周期内共享
+declare const window: IWindow
+
+function defaultReducer (state: any, action: Action) {
+  switch (action.type) {
+    case 'updateContext':
+      if (isDev) {
+        console.log('[SSR:updateContext]: dispatch updateContext with action')
+        console.log(action)
+      }
+      return { ...state, ...action.payload }
+  }
+}
+
+const initialState = Object.assign({}, userState ?? {}, window.__INITIAL_DATA__)
+
+function combineReducer (state: any, action: any) {
+  return defaultReducer(state, action) || userReducer(state, action)
+}
+export function AppContext (props: IProps) {
+  const [state, dispatch] = useReducer(combineReducer, initialState)
+  return createElement(Context.Provider, {
+    value: {
+      state,
+      dispatch
+    }
+  }, props.children)
+}

package/src/entry/create-context.ts

@@ -0,0 +1,19 @@
+// The file is provisional，don't modify it
+
+import { Context, createContext } from 'react'
+import { IContext } from 'ssr-types'
+let STORE_CONTEXT: Context<IContext>
+if (__isBrowser__) {
+  STORE_CONTEXT = window.STORE_CONTEXT || createContext<IContext>({
+    state: {}
+  })
+  window.STORE_CONTEXT = STORE_CONTEXT
+} else {
+  STORE_CONTEXT = createContext<IContext>({
+    state: {}
+  })
+}
+
+export {
+  STORE_CONTEXT
+}

package/src/entry/create-router.ts

@@ -0,0 +1,10 @@
+import { combineRoutes } from 'ssr-common-utils'
+import * as declareRoutes from '_build/ssr-declare-routes'
+import * as ManualRoutes from '_build/ssr-manual-routes'
+import { ReactRoutesType } from 'ssr-types'
+
+const Routes = combineRoutes(declareRoutes, ManualRoutes) as ReactRoutesType
+
+export {
+  Routes
+}

package/src/entry/server-entry.tsx

@@ -0,0 +1,106 @@
+import { PassThrough } from 'stream'
+import * as React from 'react'
+import { createElement } from 'react'
+import { StaticRouter } from 'react-router-dom'
+import { renderToString, renderToNodeStream } from 'react-dom/server'
+import { findRoute, getManifest, logGreen, normalizePath, getAsyncCssChunk, getAsyncJsChunk, splitPageInfo, reactRefreshFragment, localStorageWrapper, checkRoute, useStore } from 'ssr-common-utils'
+import { ISSRContext, IConfig, ReactESMPreloadFeRouteItem, DynamicFC, StaticFC } from 'ssr-types'
+import { serialize } from 'ssr-serialize-javascript'
+import { STORE_CONTEXT as Context } from '_build/create-context'
+import { Routes } from './create-router'
+
+const { FeRoutes, layoutFetch, state, Layout, store } = Routes
+
+const serverRender = async (ctx: ISSRContext, config: IConfig) => {
+  const { mode, parallelFetch, prefix, isVite, isDev, clientPrefix, stream, rootId, hashRouter } = config
+  const rawPath = ctx.request.path ?? ctx.request.url
+  const path = normalizePath(rawPath, prefix)
+  const routeItem = findRoute<ReactESMPreloadFeRouteItem>(FeRoutes, path)
+  checkRoute({ routeItem, path })
+  const { fetch, webpackChunkName, component } = routeItem
+
+  const fn = async () => {
+    const dynamicCssOrder = await getAsyncCssChunk(ctx, webpackChunkName, config)
+    const dynamicJsOrder = await getAsyncJsChunk(ctx, webpackChunkName, config)
+    const manifest = await getManifest(config)
+
+    const injectCss = ((isVite && isDev) ? [
+      <script src="/@vite/client" type="module" key="vite-client" />,
+      <script key="vite-react-refresh" type="module" dangerouslySetInnerHTML={{
+        __html: reactRefreshFragment
+      }} />
+    ] : dynamicCssOrder.map(css => manifest[css]).filter(Boolean).map(css => <link rel='stylesheet' key={css} href={css} />))
+      .concat((isVite && isDev) ? [] : dynamicJsOrder.map(js => manifest[js]).filter(Boolean).map(js =>
+        <link href={js} as="script" rel={isVite ? 'modulepreload' : 'preload'} key={js} />
+      ))
+
+    const injectScript = [
+      ...(isVite ? [<script key="viteWindowInit" dangerouslySetInnerHTML={{
+        __html: 'window.__USE_VITE__=true'
+      }} />] : []),
+      ...((isVite && isDev) ? [<script type="module" src='/node_modules/ssr-plugin-react/esm/entry/client-entry.js' key="vite-react-entry" />] : []),
+      ...dynamicJsOrder.map(js => manifest[js]).filter(Boolean).map(item => <script key={item} src={item} type={isVite ? 'module' : 'text/javascript'} />)
+    ]
+    const staticList = {
+      injectCss,
+      injectScript
+    }
+
+    const isCsr = !!(mode === 'csr' || ctx.request.query?.csr)
+    const Component = isCsr ? React.Fragment : (component.name === 'dynamicComponent' ? (await (component as DynamicFC)()).default : component as StaticFC)
+
+    if (isCsr) {
+      logGreen(`Current path ${path} use csr render mode`)
+    }
+
+    let [layoutFetchData, fetchData] = [{}, {}]
+
+    if (!isCsr) {
+      const currentFetch = fetch ? (await fetch()).default : null
+      const lF = layoutFetch ? layoutFetch({ ctx }) : Promise.resolve({})
+      const CF = currentFetch ? currentFetch({ ctx }) : Promise.resolve({});
+      [layoutFetchData, fetchData] = parallelFetch ? await Promise.all([lF, CF]) : [await lF, await CF]
+    }
+
+    const combineData = isCsr ? null : Object.assign(state ?? {}, layoutFetchData ?? {}, fetchData ?? {})
+    const ssrDevInfo = { manifest: isDev ? manifest : '', rootId }
+    const innerHTML = splitPageInfo({
+      'window.__USE_SSR__': !isCsr,
+      'window.__INITIAL_DATA__': isCsr ? {} : serialize(combineData),
+      'window.__USE_VITE__': isVite,
+      'window.prefix': `"${prefix}"`,
+      'window.clientPrefix': `"${clientPrefix ?? ''}"`,
+      'window.ssrDevInfo': JSON.stringify(ssrDevInfo),
+      'window.hashRouter': Boolean(hashRouter),
+      'window.__VALTIO_DATA__': isCsr ? {} : serialize(useStore())
+    })
+    const injectState = <script dangerouslySetInnerHTML={{ __html: innerHTML }} />
+    // with jsx type error, use createElement here
+    const ele = createElement(StaticRouter, {
+      location: ctx.request.url,
+      basename: prefix === '/' ? undefined : prefix
+    }, createElement(Context.Provider, {
+      value: {
+        state: combineData
+      }
+    }, createElement(Layout, {
+      ctx: ctx,
+      config: config,
+      staticList: staticList,
+      injectState: injectState
+    }, createElement(Component, null))))
+    // for ctx.body will loose asynclocalstorage context, consume stream in advance like vue2/3
+    return stream ? renderToNodeStream(ele).pipe(new PassThrough()) : renderToString(ele)
+  }
+
+  return await localStorageWrapper.run({
+    context: Context,
+    ctx,
+    store
+  }, fn)
+}
+
+export {
+  serverRender,
+  Routes
+}

package/src/index.ts

@@ -0,0 +1,49 @@
+import { loadConfig } from 'ssr-common-utils'
+
+const { isVite, optimize } = loadConfig()
+const spinner = require('ora')('Building')
+
+export function clientPlugin () {
+  return {
+    name: 'plugin-react',
+    start: async () => {
+      if (isVite) {
+        const { viteStart } = await import('./tools/vite')
+        await viteStart()
+      } else {
+        if (optimize) {
+          spinner.start()
+          const { viteBuildClient } = await import('./tools/vite')
+          await viteBuildClient()
+          process.env.NODE_ENV = 'development'
+          spinner.stop()
+          const { webpackStart } = await import('./tools/webpack')
+          await webpackStart()
+        } else {
+          const { webpackStart } = await import('./tools/webpack')
+          await webpackStart()
+        }
+      }
+    },
+    build: async () => {
+      if (isVite) {
+        const { viteBuild } = await import('./tools/vite')
+        await viteBuild()
+      } else {
+        if (optimize) {
+          spinner.start()
+          const { viteBuildClient } = await import('./tools/vite')
+          await viteBuildClient()
+          spinner.stop()
+          const { webpackBuild } = await import('./tools/webpack')
+          await webpackBuild()
+        } else {
+          const { webpackBuild } = await import('./tools/webpack')
+          await webpackBuild()
+        }
+      }
+    }
+  }
+}
+
+export * from './tools/vite'

package/src/tools/vite.ts

@@ -0,0 +1,147 @@
+import { build, UserConfig } from 'vite'
+import {
+  loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig,
+  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: [
+    AndDesignVueResolve(),
+    VantResolve(),
+    ElementPlusResolve(),
+    NutuiResolve(),
+    AntdResolve()
+  ]
+}
+const serverPlugins = [
+  react({
+    ...viteConfig?.()?.server?.defaultPluginOptions,
+    jsxRuntime: 'automatic',
+    babel: {
+      ...babelOptions,
+      plugins: [
+        ...babelOptions?.plugins ?? [],
+        ...!supportOptinalChaining ? [
+          '@babel/plugin-proposal-optional-chaining',
+          '@babel/plugin-proposal-nullish-coalescing-operator'
+        ] : []
+      ]
+    }
+  }),
+  viteConfig?.()?.common?.extraPlugin,
+  viteConfig?.()?.server?.extraPlugin,
+  createStyleImportPlugin(styleImportConfig)
+].filter(Boolean)
+
+const serverConfig: UserConfig = {
+  ...commonConfig(),
+  ...viteConfig?.().server?.otherConfig,
+  plugins: viteConfig?.()?.server?.processPlugin?.(serverPlugins) ?? serverPlugins,
+  esbuild: {
+    ...viteConfig?.().server?.otherConfig?.esbuild,
+    keepNames: true,
+    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
+    }
+  },
+  build: {
+    ...viteConfig?.().server?.otherConfig?.build,
+    ssr: reactServerEntry,
+    outDir: serverOutPut,
+    rollupOptions: {
+      ...viteConfig?.().server?.otherConfig?.build?.rollupOptions,
+      input: isDev ? reactClientEntry : reactServerEntry, // setting prebundle list by client-entry in dev
+      output: {
+        entryFileNames: 'Page.server.js',
+        assetFileNames: rollupOutputOptions().assetFileNames
+      }
+    }
+  },
+  define: {
+    ...viteConfig?.().server?.otherConfig?.define,
+    __isBrowser__: false,
+    ...define?.base,
+    ...define?.server
+  }
+}
+const clientPlugins = [
+  react({
+    ...viteConfig?.()?.client?.defaultPluginOptions,
+    jsxRuntime: 'automatic',
+    ...babelOptions
+  }),
+  viteConfig?.()?.common?.extraPlugin,
+  viteConfig?.()?.client?.extraPlugin,
+  createStyleImportPlugin(styleImportConfig)
+].filter(Boolean)
+const clientConfig: UserConfig = {
+  ...commonConfig(),
+  ...viteConfig?.().client?.otherConfig,
+  base: isDev ? '/' : getOutputPublicPath(),
+  esbuild: {
+    ...viteConfig?.().client?.otherConfig?.esbuild,
+    keepNames: true,
+    logOverride: { 'this-is-undefined-in-esm': 'silent' }
+  },
+  optimizeDeps: {
+    ...viteConfig?.().client?.otherConfig?.optimizeDeps,
+    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,
+  build: {
+    ...viteConfig?.().client?.otherConfig?.build,
+    ...(optimize ? { write: false } : {}),
+    ssrManifest: true,
+    outDir: clientOutPut,
+    rollupOptions: {
+      ...viteConfig?.().client?.otherConfig?.build?.rollupOptions,
+      input: reactClientEntry,
+      output: rollupOutputOptions(),
+      plugins: [chunkNamePlugin(), asyncOptimizeChunkPlugin(), manifestPlugin()]
+    }
+  },
+  define: {
+    ...viteConfig?.().client?.otherConfig?.define,
+    __isBrowser__: true,
+    ...define?.base,
+    ...define?.client
+  }
+}
+const viteStart = async () => {
+  //
+}
+const viteBuild = async () => {
+  await build({ ...clientConfig, mode: 'production' })
+  await build({ ...serverConfig, mode: 'production' })
+}
+
+const viteBuildClient = async () => {
+  await build({ ...clientConfig, mode: 'production' }).catch(_ => { })
+}
+const viteBuildServer = async () => {
+  await build({ ...serverConfig, mode: 'production' })
+}
+
+export {
+  viteBuild,
+  viteStart,
+  serverConfig,
+  clientConfig,
+  viteBuildClient,
+  viteBuildServer
+}

package/src/tools/webpack.ts

@@ -0,0 +1,20 @@
+import * as WebpackChain from 'webpack-chain'
+
+export const webpackStart = async () => {
+  const { startServerBuild } = await import('ssr-webpack/cjs/server')
+  const { getServerWebpack } = await import('../config/server')
+  const serverConfigChain = new WebpackChain()
+
+  const { startClientServer } = await import('ssr-webpack')
+  const { getClientWebpack } = await import('../config')
+  const clientConfigChain = new WebpackChain()
+  await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientServer(getClientWebpack(clientConfigChain))])
+}
+
+export const webpackBuild = async () => {
+  const { startServerBuild, startClientBuild } = await import('ssr-webpack')
+  const { getClientWebpack, getServerWebpack } = await import('../config')
+  const serverConfigChain = new WebpackChain()
+  const clientConfigChain = new WebpackChain()
+  await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))])
+}