ssr-plugin-react 6.2.84 → 6.2.85

package/src/config/base.ts

@@ -1,65 +1,57 @@
-
 import { join } from 'path'
+import { addCommonChain, getBuildConfig, getCwd, loadConfig, loadModuleFromFramework, setStyle } from 'ssr-common-utils'
 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'
+import WebpackChain from 'webpack-chain'
 
 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
+	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
-}
+export { getBaseConfig }

package/src/config/client.ts

@@ -1,5 +1,5 @@
-import { loadConfig, getSplitChunksOptions, getOutputPublicPath, loadModuleFromFramework, getBuildConfig, terserConfig, asyncChunkMap } from 'ssr-common-utils'
-import * as WebpackChain from 'webpack-chain'
+import { asyncChunkMap, getBuildConfig, getOutputPublicPath, getSplitChunksOptions, loadConfig, loadModuleFromFramework, terserConfig } from 'ssr-common-utils'
+import WebpackChain from 'webpack-chain'
 import { getBaseConfig } from './base'
 
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')
@@ -8,58 +8,55 @@ 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.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(false)])
-      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()
+	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.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(false)])
+			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
-}
+export { getClientWebpack }

package/src/config/server.ts

@@ -1,48 +1,43 @@
 import { loadConfig, loadModuleFromFramework } from 'ssr-common-utils'
-import * as WebpackChain from 'webpack-chain'
 import * as webpack from 'ssr-webpack4'
+import WebpackChain from 'webpack-chain'
 
 import { getBaseConfig } from './base'
 
 const getServerWebpack = (chain: WebpackChain) => {
-  const config = loadConfig()
-  const { isDev, getOutput, chainServerConfig, chunkName } = config
-  const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP)
-  getBaseConfig(chain, true)
-  chain.target('node')
-  chain.entry(chunkName)
-    .add(require.resolve('../entry/server-entry'))
-    .end()
-    .output
-    .path(getOutput().serverOutPut)
-    .filename('[name].server.js')
-    .libraryTarget('commonjs')
+	const config = loadConfig()
+	const { isDev, getOutput, chainServerConfig, chunkName } = config
+	const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP)
+	getBaseConfig(chain, true)
+	chain.target('node')
+	chain.entry(chunkName).add(require.resolve('../entry/server-entry')).end().output.path(getOutput().serverOutPut).filename('[name].server.js').libraryTarget('commonjs')
 
-  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)
-  })
+	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
-  }])
+	chain.plugin('serverLimit').use(webpack.optimize.LimitChunkCountPlugin, [
+		{
+			maxChunks: 1
+		}
+	])
 
-  chainServerConfig(chain) // 合并用户自定义配置
+	chainServerConfig(chain) // 合并用户自定义配置
 
-  return chain.toConfig()
+	return chain.toConfig()
 }
 
-export {
-  getServerWebpack
-}
+export { getServerWebpack }

package/src/entry/client-entry.tsx

@@ -11,45 +11,61 @@ import { AppContext } from './context'
 const { FeRoutes, layoutFetch, App } = Routes
 
 const clientRender = async (): Promise<void> => {
-  const IApp = App ?? function(props: LayoutProps) {
-    return props.children!
-  }
-  const context = ssrCreateContext() as any
-  setStoreContext(context)
-  const store = createStore(window.__VALTIO_DATA__)
-  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, {
-      context,
-      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?.()
-  }
+	const IApp =
+		App ??
+		function (props: LayoutProps) {
+			return props.children!
+		}
+	const context = ssrCreateContext() as any
+	setStoreContext(context)
+	const store = createStore(window.__VALTIO_DATA__)
+	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, {
+				context,
+				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
-}
+export { clientRender }

package/src/entry/context.tsx

@@ -5,35 +5,38 @@ import { Routes } from './create'
 const { reducer, state } = Routes as ReactRoutesType
 
 const userState = state ?? {}
-const userReducer = reducer ?? function() { }
+const userReducer = reducer ?? function () {}
 
 const isDev = process.env.NODE_ENV !== 'production'
 
 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 }
-  }
+	switch (action.type) {
+		case 'updateContext':
+			if (isDev) {
+				console.log('[SSR:updateContext]: dispatch updateContext with action')
+				console.log(action)
+			}
+			return { ...state, ...action.payload }
+	}
 }
 
-
 function combineReducer(state: any, action: any) {
-  return defaultReducer(state, action) || userReducer(state, action)
+	return defaultReducer(state, action) || userReducer(state, action)
 }
 
 export function AppContext(props: IProps) {
-  const initialState = Object.assign({}, userState ?? {}, __isBrowser__ ? window?.__INITIAL_DATA__ : props.initialState)
-  const [state, dispatch] = useReducer(combineReducer, initialState)
-  return createElement(props.context.Provider, {
-    value: {
-      state,
-      dispatch
-    }
-  }, props.children as any)
+	const initialState = Object.assign({}, userState ?? {}, __isBrowser__ ? window?.__INITIAL_DATA__ : props.initialState)
+	const [state, dispatch] = useReducer(combineReducer, initialState)
+	return createElement(
+		props.context.Provider,
+		{
+			value: {
+				state,
+				dispatch
+			}
+		},
+		props.children as any
+	)
 }

package/src/entry/create.ts

@@ -1,29 +1,29 @@
-import { createContext } from 'react'
-import type { IContext } from 'ssr-types'
-import { proxy } from 'valtio'
-import { deepClone } from 'ssr-deepclone'
-import { combineRoutes } from 'ssr-common-utils'
 import * as declareRoutes from '_build/ssr-declare-routes'
 import * as ManualRoutes from '_build/ssr-manual-routes'
+import { createContext } from 'react'
+import { combineRoutes } from 'ssr-common-utils'
+import { deepClone } from 'ssr-deepclone'
+import type { IContext } from 'ssr-types'
 import { ReactRoutesType } from 'ssr-types'
+import { proxy } from 'valtio'
 
 export const Routes = combineRoutes(declareRoutes, ManualRoutes) as ReactRoutesType
 
 export const ssrCreateContext = () => {
-  const STORE_CONTEXT = createContext<IContext>({
-    state: {}
-  })
-  if (__isBrowser__) {
-    window.STORE_CONTEXT = STORE_CONTEXT
-  }
-  return STORE_CONTEXT
+	const STORE_CONTEXT = createContext<IContext>({
+		state: {}
+	})
+	if (__isBrowser__) {
+		window.STORE_CONTEXT = STORE_CONTEXT
+	}
+	return STORE_CONTEXT
 }
 
-export function createStore (initialData?: any) {
-  const { store } = Routes
-  const storeInstance = initialData ? store : deepClone(store)
-  for (const key in storeInstance) {
-    storeInstance[key] = initialData ? proxy(initialData[key]) : proxy(storeInstance[key])
-  }
-  return storeInstance
+export function createStore(initialData?: any) {
+	const { store } = Routes
+	const storeInstance = initialData ? store : deepClone(store)
+	for (const key in storeInstance) {
+		storeInstance[key] = initialData ? proxy(initialData[key]) : proxy(storeInstance[key])
+	}
+	return storeInstance
 }