ssr-plugin-react 6.2.13 → 6.2.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/cjs/config/base.js +5 -5
  3. package/cjs/config/client.js +10 -1
  4. package/cjs/entry/client-entry.js +1 -4
  5. package/esm/config/base.js +5 -5
  6. package/esm/config/client.js +10 -1
  7. package/esm/entry/client-entry.js +1 -4
  8. package/package.json +4 -2
  9. package/src/config/base.ts +5 -5
  10. package/src/config/client.ts +11 -1
  11. package/src/entry/client-entry.tsx +0 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
1
+ ## [6.2.14](https://github.com/zhangyuang/ssr/compare/plugin-react@6.2.13...plugin-react@6.2.14) (2022-04-20)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * update preinstall ([2b4b869](https://github.com/zhangyuang/ssr/commit/2b4b869c28b83b414bef10260e5561bc3773cea9))
7
+
8
+
9
+ ### Features
10
+
11
+ * optimize customescript ([f374760](https://github.com/zhangyuang/ssr/commit/f3747608d4684576875968394eca6315e2fa8dd1))
12
+ * plugin-react add react-refresh, remove module.hot ([7bee211](https://github.com/zhangyuang/ssr/commit/7bee211ddfefaef688713f505756e1155320b844))
13
+
14
+
15
+
1
16
  ## [6.2.13](https://github.com/zhangyuang/ssr/compare/plugin-react@6.2.12...plugin-react@6.2.13) (2022-04-18)
2
17
 
3
18
 
package/cjs/config/base.js CHANGED
@@ -7,9 +7,9 @@ const webpack = require("webpack");
7
7
  const MiniCssExtractPlugin = require((0, ssr_server_utils_1.loadModuleFromFramework)('mini-css-extract-plugin'));
8
8
  const WebpackBar = require('webpackbar');
9
9
  const loadModule = ssr_server_utils_1.loadModuleFromFramework;
10
- const addBabelLoader = (chain, envOptions) => {
10
+ const addBabelLoader = (chain, envOptions, isServer) => {
11
11
  var _a, _b;
12
- const { babelOptions } = (0, ssr_server_utils_1.loadConfig)();
12
+ const { babelOptions, isDev } = (0, ssr_server_utils_1.loadConfig)();
13
13
  chain.use('babel-loader')
14
14
  .loader(loadModule('babel-loader'))
15
15
  .options({
@@ -41,7 +41,7 @@ const addBabelLoader = (chain, envOptions) => {
41
41
  [loadModule('@babel/plugin-proposal-private-methods'), { loose: true }],
42
42
  [loadModule('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
43
43
  ...(_b = babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) !== null && _b !== void 0 ? _b : []
44
- ]
44
+ ].concat((!isServer && isDev) ? loadModule('react-refresh/babel') : [])
45
45
  })
46
46
  .end();
47
47
  };
@@ -98,8 +98,8 @@ const getBaseConfig = (chain, isServer) => {
98
98
  else {
99
99
  babelForExtraModule = module.end().exclude.add(/core-js/).end();
100
100
  }
101
- addBabelLoader(babelModule, envOptions);
102
- addBabelLoader(babelForExtraModule, envOptions);
101
+ addBabelLoader(babelModule, envOptions, isServer);
102
+ addBabelLoader(babelForExtraModule, envOptions, isServer);
103
103
  (0, ssr_server_utils_1.setStyle)(chain, /\.css$/, {
104
104
  rule: 'css',
105
105
  isServer,
package/cjs/config/client.js CHANGED
@@ -8,11 +8,12 @@ const base_1 = require("./base");
8
8
  const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
9
9
  const safePostCssParser = require('postcss-safe-parser');
10
10
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
11
+ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
11
12
  const generateAnalysis = Boolean(process.env.GENERATE_ANALYSIS);
12
13
  const loadModule = ssr_server_utils_1.loadModuleFromFramework;
13
14
  let asyncChunkMap = {};
14
15
  const getClientWebpack = (chain) => {
15
- const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig } = (0, ssr_server_utils_1.loadConfig)();
16
+ const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig, host, fePort } = (0, ssr_server_utils_1.loadConfig)();
16
17
  const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP);
17
18
  const publicPath = (0, ssr_server_utils_1.getOutputPublicPath)();
18
19
  (0, base_1.getBaseConfig)(chain, false);
@@ -89,6 +90,14 @@ const getClientWebpack = (chain) => {
89
90
  chain.when(generateAnalysis, chain => {
90
91
  chain.plugin('analyze').use(BundleAnalyzerPlugin);
91
92
  });
93
+ chain.when(isDev, chain => {
94
+ chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
95
+ overlay: {
96
+ sockHost: host,
97
+ sockPort: fePort
98
+ }
99
+ }));
100
+ });
92
101
  chain.plugin('WriteAsyncManifest').use(class WriteAsyncChunkManifest {
93
102
  apply(compiler) {
94
103
  compiler.hooks.watchRun.tap('thisCompilation', async () => {
package/cjs/entry/client-entry.js CHANGED
@@ -10,7 +10,7 @@ const create_router_1 = require("./create-router");
10
10
  const context_1 = require("./context");
11
11
  const { FeRoutes, layoutFetch, App, PrefixRouterBase } = create_router_1.Routes;
12
12
  const clientRender = async () => {
13
- var _a, _b, _c, _d;
13
+ var _a, _b;
14
14
  const IApp = App !== null && App !== void 0 ? App : function (props) {
15
15
  return props.children;
16
16
  };
@@ -30,9 +30,6 @@ const clientRender = async () => {
30
30
  const WrappedComponent = (0, ssr_hoc_react_1.wrapComponent)(component);
31
31
  return (React.createElement(react_router_dom_1.Route, { exact: true, key: path, path: path, render: () => React.createElement(WrappedComponent, { key: location.pathname }) }));
32
32
  })))))), document.getElementById('app'));
33
- if (!window.__USE_VITE__) {
34
- (_d = (_c = module === null || module === void 0 ? void 0 : module.hot) === null || _c === void 0 ? void 0 : _c.accept) === null || _d === void 0 ? void 0 : _d.call(_c); // webpack 场景下的 hmr
35
- }
36
33
  };
37
34
  exports.clientRender = clientRender;
38
35
  if (!window.__disableClientRender__) {
package/esm/config/base.js CHANGED
@@ -4,9 +4,9 @@ import * as webpack from 'webpack';
4
4
  const MiniCssExtractPlugin = require(loadModuleFromFramework('mini-css-extract-plugin'));
5
5
  const WebpackBar = require('webpackbar');
6
6
  const loadModule = loadModuleFromFramework;
7
- const addBabelLoader = (chain, envOptions) => {
7
+ const addBabelLoader = (chain, envOptions, isServer) => {
8
8
  var _a, _b;
9
- const { babelOptions } = loadConfig();
9
+ const { babelOptions, isDev } = loadConfig();
10
10
  chain.use('babel-loader')
11
11
  .loader(loadModule('babel-loader'))
12
12
  .options({
@@ -38,7 +38,7 @@ const addBabelLoader = (chain, envOptions) => {
38
38
  [loadModule('@babel/plugin-proposal-private-methods'), { loose: true }],
39
39
  [loadModule('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
40
40
  ...(_b = babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) !== null && _b !== void 0 ? _b : []
41
- ]
41
+ ].concat((!isServer && isDev) ? loadModule('react-refresh/babel') : [])
42
42
  })
43
43
  .end();
44
44
  };
@@ -95,8 +95,8 @@ const getBaseConfig = (chain, isServer) => {
95
95
  else {
96
96
  babelForExtraModule = module.end().exclude.add(/core-js/).end();
97
97
  }
98
- addBabelLoader(babelModule, envOptions);
99
- addBabelLoader(babelForExtraModule, envOptions);
98
+ addBabelLoader(babelModule, envOptions, isServer);
99
+ addBabelLoader(babelForExtraModule, envOptions, isServer);
100
100
  setStyle(chain, /\.css$/, {
101
101
  rule: 'css',
102
102
  isServer,
package/esm/config/client.js CHANGED
@@ -5,11 +5,12 @@ import { getBaseConfig } from './base';
5
5
  const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
6
6
  const safePostCssParser = require('postcss-safe-parser');
7
7
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
8
+ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
8
9
  const generateAnalysis = Boolean(process.env.GENERATE_ANALYSIS);
9
10
  const loadModule = loadModuleFromFramework;
10
11
  let asyncChunkMap = {};
11
12
  const getClientWebpack = (chain) => {
12
- const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig } = loadConfig();
13
+ const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig, host, fePort } = loadConfig();
13
14
  const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP);
14
15
  const publicPath = getOutputPublicPath();
15
16
  getBaseConfig(chain, false);
@@ -86,6 +87,14 @@ const getClientWebpack = (chain) => {
86
87
  chain.when(generateAnalysis, chain => {
87
88
  chain.plugin('analyze').use(BundleAnalyzerPlugin);
88
89
  });
90
+ chain.when(isDev, chain => {
91
+ chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
92
+ overlay: {
93
+ sockHost: host,
94
+ sockPort: fePort
95
+ }
96
+ }));
97
+ });
89
98
  chain.plugin('WriteAsyncManifest').use(class WriteAsyncChunkManifest {
90
99
  apply(compiler) {
91
100
  compiler.hooks.watchRun.tap('thisCompilation', async () => {
package/esm/entry/client-entry.js CHANGED
@@ -7,7 +7,7 @@ import { Routes } from './create-router';
7
7
  import { AppContext } from './context';
8
8
  const { FeRoutes, layoutFetch, App, PrefixRouterBase } = Routes;
9
9
  const clientRender = async () => {
10
- var _a, _b, _c, _d;
10
+ var _a, _b;
11
11
  const IApp = App !== null && App !== void 0 ? App : function (props) {
12
12
  return props.children;
13
13
  };
@@ -27,9 +27,6 @@ const clientRender = async () => {
27
27
  const WrappedComponent = wrapComponent(component);
28
28
  return (React.createElement(Route, { exact: true, key: path, path: path, render: () => React.createElement(WrappedComponent, { key: location.pathname }) }));
29
29
  })))))), document.getElementById('app'));
30
- if (!window.__USE_VITE__) {
31
- (_d = (_c = module === null || module === void 0 ? void 0 : module.hot) === null || _c === void 0 ? void 0 : _c.accept) === null || _d === void 0 ? void 0 : _d.call(_c); // webpack 场景下的 hmr
32
- }
33
30
  };
34
31
  if (!window.__disableClientRender__) {
35
32
  // 如果服务端直出的时候带上该记号，则默认不进行客户端渲染，将处理逻辑交给上层
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ssr-plugin-react",
3
- "version": "6.2.13",
3
+ "version": "6.2.14",
4
4
  "description": "plugin-react for ssr",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./esm/index.js",
@@ -34,6 +34,7 @@
34
34
  "@babel/plugin-proposal-optional-chaining": "^7.16.5",
35
35
  "@babel/plugin-transform-runtime": "^7.9.6",
36
36
  "@babel/preset-env": "^7.5.5",
37
+ "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
37
38
  "@vitejs/plugin-react": "^1.0.0",
38
39
  "babel-loader": "^8.0.4",
39
40
  "babel-plugin-import": "1.13.3",
@@ -54,10 +55,11 @@
54
55
  "postcss-preset-env": "^7.0.0",
55
56
  "postcss-safe-parser": "^6.0.0",
56
57
  "react": "^17.0.1",
58
+ "react-dev-utils": "^11.0.4",
57
59
  "react-dom": "^17.0.0",
60
+ "react-refresh": "^0.12.0",
58
61
  "react-router": "^5.2.1",
59
62
  "react-router-dom": "^5.1.2",
60
- "react-dev-utils": "^11.0.4",
61
63
  "serialize-javascript": "^6.0.0",
62
64
  "ssr-client-utils": "^6.2.7",
63
65
  "ssr-hoc-react": "^6.2.7",
package/src/config/base.ts CHANGED
@@ -9,8 +9,8 @@ const MiniCssExtractPlugin = require(loadModuleFromFramework('mini-css-extract-p
9
9
  const WebpackBar = require('webpackbar')
10
10
  const loadModule = loadModuleFromFramework
11
11
 
12
- const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOptions: any) => {
13
- const { babelOptions } = loadConfig()
12
+ const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOptions: any, isServer: boolean) => {
13
+ const { babelOptions, isDev } = loadConfig()
14
14
  chain.use('babel-loader')
15
15
  .loader(loadModule('babel-loader'))
16
16
  .options({
@@ -42,7 +42,7 @@ const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOption
42
42
  [loadModule('@babel/plugin-proposal-private-methods'), { loose: true }],
43
43
  [loadModule('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
44
44
  ...babelOptions?.plugins ?? []
45
- ]
45
+ ].concat((!isServer && isDev) ? loadModule('react-refresh/babel') : [])
46
46
  })
47
47
  .end()
48
48
  }
@@ -106,8 +106,8 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
106
106
  babelForExtraModule = module.end().exclude.add(/core-js/).end()
107
107
  }
108
108
 
109
- addBabelLoader(babelModule, envOptions)
110
- addBabelLoader(babelForExtraModule, envOptions)
109
+ addBabelLoader(babelModule, envOptions, isServer)
110
+ addBabelLoader(babelForExtraModule, envOptions, isServer)
111
111
 
112
112
  setStyle(chain, /\.css$/, {
113
113
  rule: 'css',
package/src/config/client.ts CHANGED
@@ -7,12 +7,13 @@ import { getBaseConfig } from './base'
7
7
  const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')
8
8
  const safePostCssParser = require('postcss-safe-parser')
9
9
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
10
+ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
10
11
  const generateAnalysis = Boolean(process.env.GENERATE_ANALYSIS)
11
12
  const loadModule = loadModuleFromFramework
12
13
  let asyncChunkMap: Record<string, string[]> = {}
13
14
 
14
15
  const getClientWebpack = (chain: WebpackChain) => {
15
- const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig } = loadConfig()
16
+ const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig, host, fePort } = loadConfig()
16
17
  const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP)
17
18
  const publicPath = getOutputPublicPath()
18
19
  getBaseConfig(chain, false)
@@ -92,6 +93,15 @@ const getClientWebpack = (chain: WebpackChain) => {
92
93
  chain.when(generateAnalysis, chain => {
93
94
  chain.plugin('analyze').use(BundleAnalyzerPlugin)
94
95
  })
96
+ chain.when(isDev, chain => {
97
+ chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
98
+ overlay: {
99
+ sockHost: host,
100
+ sockPort: fePort
101
+ }
102
+ }))
103
+ })
104
+
95
105
  chain.plugin('WriteAsyncManifest').use(
96
106
  class WriteAsyncChunkManifest {
97
107
  apply (compiler: any) {
package/src/entry/client-entry.tsx CHANGED
@@ -9,7 +9,6 @@ import { AppContext } from './context'
9
9
 
10
10
  const { FeRoutes, layoutFetch, App, PrefixRouterBase } = Routes as ReactRoutesType
11
11
 
12
- declare const module: any
13
12
  declare const window: IWindow
14
13
 
15
14
  const clientRender = async (): Promise<void> => {
@@ -44,9 +43,6 @@ const clientRender = async (): Promise<void> => {
44
43
  </BrowserRouter>
45
44
  , document.getElementById('app'))
46
45
 
47
- if (!window.__USE_VITE__) {
48
- module?.hot?.accept?.() // webpack 场景下的 hmr
49
- }
50
46
  }
51
47
  if (!window.__disableClientRender__) {
52
48
  // 如果服务端直出的时候带上该记号，则默认不进行客户端渲染，将处理逻辑交给上层