From cf1aba7bd94a497da1638e4bbf4746e379093c2c Mon Sep 17 00:00:00 2001 From: Tino Vazquez Date: Tue, 2 Mar 2021 21:15:01 +0100 Subject: [PATCH] Revert "F #3951: Add react-refresh dependency to dev mode (#899)" This reverts commit 15b099fc464a268e5193321afc1f10d129a2179e. --- src/fireedge/package-lock.json | 90 ++++++++----------- src/fireedge/package.json | 5 +- src/fireedge/src/client/dev/index.js | 16 +++- src/fireedge/src/client/reducers/auth.js | 2 +- src/fireedge/src/server/index.js | 34 +++---- .../src/server/routes/entrypoints/App.js | 2 +- src/fireedge/webpack.config.dev.client.js | 82 ++++++++--------- 7 files changed, 112 insertions(+), 119 deletions(-) diff --git a/src/fireedge/package-lock.json b/src/fireedge/package-lock.json index 8ffc86f871..782bd3ff15 100644 --- a/src/fireedge/package-lock.json +++ b/src/fireedge/package-lock.json @@ -13057,43 +13057,6 @@ } } }, - "@pmmmwh/react-refresh-webpack-plugin": { - "version": "0.4.3", - "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz", - "integrity": "sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==", - "dev": true, - "requires": { - "ansi-html": "^0.0.7", - "error-stack-parser": "^2.0.6", - "html-entities": "^1.2.1", - "native-url": "^0.2.6", - "schema-utils": "^2.6.5", - "source-map": "^0.7.3" - }, - "dependencies": { - "error-stack-parser": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz", - "integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==", - "dev": true, - "requires": { - "stackframe": "^1.1.1" - } - }, - "source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "dev": true - }, - "stackframe": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz", - "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==", - "dev": true - } - } - }, "@types/http-proxy": { "version": "1.17.4", "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.4.tgz", @@ -17955,15 +17918,6 @@ "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz", "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==" }, - "native-url": { - "version": "0.2.6", - "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz", - "integrity": "sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==", - "dev": true, - "requires": { - "querystring": "^0.2.0" - } - }, "natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", @@ -18881,6 +18835,30 @@ "integrity": "sha512-ZCp7Y+IrlsQma08uy3H6l/qF7dZWqAWMkZ4vVbHVfh1EHjsO1SwU7aYVHgJSQpriHtEdGszCW8NS/aujGsLk0g==", "requires": {} }, + "react-hot-loader": { + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz", + "integrity": "sha512-JrLlvUPqh6wIkrK2hZDfOyq/Uh/WeVEr8nc7hkn2/3Ul0sx1Kr5y4kOGNacNRoj7RhwLNcQ3Udf1KJXrqc0ZtA==", + "dev": true, + "requires": { + "fast-levenshtein": "^2.0.6", + "global": "^4.3.0", + "hoist-non-react-statics": "^3.3.0", + "loader-utils": "^1.1.0", + "prop-types": "^15.6.1", + "react-lifecycles-compat": "^3.0.4", + "shallowequal": "^1.1.0", + "source-map": "^0.7.3" + }, + "dependencies": { + "source-map": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", + "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", + "dev": true + } + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -18894,6 +18872,12 @@ "prop-types": "^15.6.2" } }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", + "dev": true + }, "react-minimal-pie-chart": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/react-minimal-pie-chart/-/react-minimal-pie-chart-8.1.0.tgz", @@ -18921,12 +18905,6 @@ "react-is": "^16.9.0" } }, - "react-refresh": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz", - "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==", - "dev": true - }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", @@ -19510,6 +19488,12 @@ "safe-buffer": "^5.0.1" } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "dev": true + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -21363,4 +21347,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/fireedge/package.json b/src/fireedge/package.json index 9d18209bfa..bf4d6b387e 100644 --- a/src/fireedge/package.json +++ b/src/fireedge/package.json @@ -25,7 +25,6 @@ "opennebula" ], "devDependencies": { - "@pmmmwh/react-refresh-webpack-plugin": "0.4.3", "eslint": "7.11.0", "eslint-config-prettier": "6.11.0", "eslint-config-standard": "14.1.1", @@ -40,7 +39,7 @@ "eslint-plugin-standard": "4.0.1", "fireedge-genpotfile": "1.1.0", "fireedge-pojson": "1.1.0", - "react-refresh": "0.9.0", + "react-hot-loader": "4.13.0", "webpack-dev-middleware": "3.7.2", "webpack-hot-middleware": "2.25.0" }, @@ -127,4 +126,4 @@ "yup": "0.29.3", "zeromq": "5.2.0" } -} \ No newline at end of file +} diff --git a/src/fireedge/src/client/dev/index.js b/src/fireedge/src/client/dev/index.js index 2784b0af41..1bae849b22 100644 --- a/src/fireedge/src/client/dev/index.js +++ b/src/fireedge/src/client/dev/index.js @@ -19,4 +19,18 @@ import { render } from 'react-dom' import store from 'client/store' import App from 'client/dev/_app' -render(, document.getElementById('root')) +render( + , + document.getElementById('root') +) + +if (process.env.NODE_ENV === 'development' && module.hot) { + module.hot.accept('./_app', () => { + const SyncApp = require('./_app').default + render(, document.getElementById('root')) + }) + + module.hot.accept('../reducers', () => { + store.replaceReducer(require('../reducers').default) + }) +} diff --git a/src/fireedge/src/client/reducers/auth.js b/src/fireedge/src/client/reducers/auth.js index a55a3ca403..a86f12c5d8 100644 --- a/src/fireedge/src/client/reducers/auth.js +++ b/src/fireedge/src/client/reducers/auth.js @@ -37,7 +37,7 @@ const initial = { settings: { scheme: DEFAULT_SCHEME, lang: DEFAULT_LANGUAGE, - disableanimations: 'NO' + disableanimations: 'YES' }, isLoginInProcess: false, isLoading: false, diff --git a/src/fireedge/src/server/index.js b/src/fireedge/src/server/index.js index 9afb089df3..0a6e1f3222 100644 --- a/src/fireedge/src/server/index.js +++ b/src/fireedge/src/server/index.js @@ -61,24 +61,26 @@ const userLog = appConfig.log || 'dev' if (env && env.NODE_ENV && env.NODE_ENV === defaultWebpackMode) { try { + // eslint-disable-next-line import/no-extraneous-dependencies + const webpackHotMiddleware = require('webpack-hot-middleware') + // eslint-disable-next-line import/no-extraneous-dependencies + const webpackDevMiddleware = require('webpack-dev-middleware') const webpackConfig = require('../../webpack.config.dev.client') const compiler = webpack(webpackConfig) - - app.use( - // eslint-disable-next-line import/no-extraneous-dependencies - require('webpack-dev-middleware')(compiler, { - publicPath: webpackConfig.output.publicPath - }) - ) - - app.use( - // eslint-disable-next-line import/no-extraneous-dependencies - require('webpack-hot-middleware')(compiler, { - log: false, - path: '/__webpack_hmr', - heartbeat: 10 * 1000 - }) - ) + app.use(webpackDevMiddleware(compiler, { + noInfo: true, + serverSideRender: true, + publicPath: webpackConfig.output.publicPath, + stats: { + assets: false, + colors: true, + version: false, + hash: false, + timings: false, + chunks: false, + chunkModules: false + } + })).use(webpackHotMiddleware(compiler)) } catch (error) { if (error) { messageTerminal({ diff --git a/src/fireedge/src/server/routes/entrypoints/App.js b/src/fireedge/src/server/routes/entrypoints/App.js index 94d3c2dd7c..2330876441 100644 --- a/src/fireedge/src/server/routes/entrypoints/App.js +++ b/src/fireedge/src/server/routes/entrypoints/App.js @@ -92,7 +92,7 @@ router.get('*', (req, res) => { ` - res.status(200).set({ 'Content-Type': 'text/html' }).end(html) + res.send(html) }) module.exports = router diff --git a/src/fireedge/webpack.config.dev.client.js b/src/fireedge/webpack.config.dev.client.js index 10d00dfb14..366ed83e0d 100644 --- a/src/fireedge/webpack.config.dev.client.js +++ b/src/fireedge/webpack.config.dev.client.js @@ -1,52 +1,46 @@ const path = require('path') - -const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin') const webpack = require('webpack') +const { defaultWebpackMode, defaultAppName } = require('./src/server/utils/constants/defaults') -const { defaultAppName } = require('./src/server/utils/constants/defaults') - +const js = { + test: /\.js$/, + loader: 'babel-loader', + include: path.resolve(__dirname, 'src', 'client'), + options: { + babelrc: true, + plugins: ['react-hot-loader/babel'] + } +} const appName = defaultAppName ? `/${defaultAppName}` : '' - -const devPathFile = path.resolve(__dirname, 'src/client/dev/index.js') - -/** @type {import('webpack').Configuration} */ -module.exports = { - mode: 'development', - entry: { - main: ['webpack-hot-middleware/client', devPathFile] - }, - output: { - filename: 'bundle.dev.js', - path: path.resolve(__dirname, 'dist'), - publicPath: `${appName}/client` - }, - module: { - rules: [ - { - test: /\.js$/, - include: path.resolve(__dirname, 'src/client'), - use: [ - { - loader: 'babel-loader', - options: { - babelrc: true, - plugins: [require.resolve('react-refresh/babel')] - } - } - ] - } - ] - }, - resolve: { - extensions: ['.js'] - }, - plugins: [ +const bundle = () => { + const devPathFile = path.resolve(__dirname, 'src', 'client', 'dev', 'index.js') + const plugins = [ new webpack.HotModuleReplacementPlugin(), - new ReactRefreshPlugin({ - overlay: { - sockIntegration: 'whm' + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: JSON.stringify(defaultWebpackMode) } }) - ], - devtool: 'eval-source-map' + ] + return { + mode: defaultWebpackMode, + entry: [ + 'react-hot-loader/patch', + 'webpack-hot-middleware/client', + devPathFile + ], + target: 'web', + output: { + path: devPathFile, + filename: 'bundle.dev.js', + publicPath: `${appName}/client` + }, + plugins, + module: { + rules: [js] + }, + devtool: 'inline-source-map' + } } + +module.exports = bundle()