diff --git a/src/fireedge/package-lock.json b/src/fireedge/package-lock.json index 782bd3ff15..8ffc86f871 100644 --- a/src/fireedge/package-lock.json +++ b/src/fireedge/package-lock.json @@ -13057,6 +13057,43 @@ } } }, + "@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", @@ -17918,6 +17955,15 @@ "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", @@ -18835,30 +18881,6 @@ "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", @@ -18872,12 +18894,6 @@ "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", @@ -18905,6 +18921,12 @@ "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", @@ -19488,12 +19510,6 @@ "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", @@ -21347,4 +21363,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/fireedge/package.json b/src/fireedge/package.json index bf4d6b387e..9d18209bfa 100644 --- a/src/fireedge/package.json +++ b/src/fireedge/package.json @@ -25,6 +25,7 @@ "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", @@ -39,7 +40,7 @@ "eslint-plugin-standard": "4.0.1", "fireedge-genpotfile": "1.1.0", "fireedge-pojson": "1.1.0", - "react-hot-loader": "4.13.0", + "react-refresh": "0.9.0", "webpack-dev-middleware": "3.7.2", "webpack-hot-middleware": "2.25.0" }, @@ -126,4 +127,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 1bae849b22..2784b0af41 100644 --- a/src/fireedge/src/client/dev/index.js +++ b/src/fireedge/src/client/dev/index.js @@ -19,18 +19,4 @@ import { render } from 'react-dom' import store from 'client/store' import App from 'client/dev/_app' -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) - }) -} +render(, document.getElementById('root')) diff --git a/src/fireedge/src/client/reducers/auth.js b/src/fireedge/src/client/reducers/auth.js index a86f12c5d8..a55a3ca403 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: 'YES' + disableanimations: 'NO' }, isLoginInProcess: false, isLoading: false, diff --git a/src/fireedge/src/server/index.js b/src/fireedge/src/server/index.js index 0a6e1f3222..9afb089df3 100644 --- a/src/fireedge/src/server/index.js +++ b/src/fireedge/src/server/index.js @@ -61,26 +61,24 @@ 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(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)) + + 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 + }) + ) } 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 2330876441..94d3c2dd7c 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.send(html) + res.status(200).set({ 'Content-Type': 'text/html' }).end(html) }) module.exports = router diff --git a/src/fireedge/webpack.config.dev.client.js b/src/fireedge/webpack.config.dev.client.js index 366ed83e0d..10d00dfb14 100644 --- a/src/fireedge/webpack.config.dev.client.js +++ b/src/fireedge/webpack.config.dev.client.js @@ -1,46 +1,52 @@ const path = require('path') -const webpack = require('webpack') -const { defaultWebpackMode, 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 ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin') +const webpack = require('webpack') + +const { defaultAppName } = require('./src/server/utils/constants/defaults') + const appName = defaultAppName ? `/${defaultAppName}` : '' -const bundle = () => { - const devPathFile = path.resolve(__dirname, 'src', 'client', 'dev', 'index.js') - const plugins = [ + +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: [ new webpack.HotModuleReplacementPlugin(), - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify(defaultWebpackMode) + new ReactRefreshPlugin({ + overlay: { + sockIntegration: 'whm' } }) - ] - 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' - } + ], + devtool: 'eval-source-map' } - -module.exports = bundle()