Hot reloading issues fixed

This commit is contained in:
Manoj Vivek 2019-09-04 14:19:08 +05:30
parent 309444e7a5
commit c20c1a0dd4
7 changed files with 152 additions and 51 deletions

View file

@ -36,6 +36,8 @@
scripts.push('../dll/renderer.dev.dll.js');
}
console.log('process.env.HOT', process.env.HOT);
// Dynamically insert the bundled app script in the renderer process
const port = process.env.PORT || 1212;
scripts.push(

View file

@ -9,7 +9,6 @@ import styles from './style.module.css';
function Renderer(props) {
const [loading, setLoading] = useState(true);
console.log('props.hidden', props.hidden);
return (
<div className={cx(styles.container, {[styles.hidden]: props.hidden})}>
<div className={styles.titleContainer}>

View file

@ -1,23 +1,47 @@
// @flow
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import type { Store } from '../reducers/types';
import React, {Component} from 'react';
import {Provider} from 'react-redux';
import {ConnectedRouter} from 'connected-react-router';
import type {Store} from '../reducers/types';
import Routes from '../Routes';
import {createMuiTheme, makeStyles} from '@material-ui/core/styles';
import {ThemeProvider} from '@material-ui/styles';
import {grey} from '@material-ui/core/colors';
type Props = {
store: Store,
history: {}
history: {},
};
const theme = createMuiTheme({
palette: {
type: 'dark',
primary: {
main: '#7587ec',
},
secondary: {
main: '#424242',
},
ternary: {
main: '#C4C5CE',
},
divider: grey[500],
background: {
main: '#252526',
},
},
});
export default class Root extends Component<Props> {
render() {
const { store, history } = this.props;
const {store, history} = this.props;
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<Routes />
</ConnectedRouter>
<ThemeProvider theme={theme}>
<ConnectedRouter history={history}>
<Routes />
</ConnectedRouter>
</ThemeProvider>
</Provider>
);
}

View file

@ -3,37 +3,13 @@ import {render} from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import Root from './containers/Root';
import {configureStore, history} from './store/configureStore';
import {createMuiTheme, makeStyles} from '@material-ui/core/styles';
import {ThemeProvider} from '@material-ui/styles';
import {grey} from '@material-ui/core/colors';
import './app.global.css';
const store = configureStore();
const theme = createMuiTheme({
palette: {
type: 'dark',
primary: {
main: '#7587ec',
},
secondary: {
main: '#424242',
},
ternary: {
main: '#C4C5CE',
},
divider: grey[500],
background: {
main: '#252526',
},
},
});
render(
<AppContainer>
<ThemeProvider theme={theme}>
<Root store={store} history={history} />
</ThemeProvider>
<Root store={store} history={history} />
</AppContainer>,
document.getElementById('root')
);

View file

@ -2,7 +2,10 @@
const developmentEnvironments = ['development', 'test'];
const developmentPlugins = [require('react-hot-loader/babel')];
const developmentPlugins = [
require('@babel/plugin-transform-classes'),
require('react-hot-loader/babel'),
];
const productionPlugins = [
require('babel-plugin-dev-expression'),
@ -10,7 +13,7 @@ const productionPlugins = [
// babel-preset-react-optimize
require('@babel/plugin-transform-react-constant-elements'),
require('@babel/plugin-transform-react-inline-elements'),
require('babel-plugin-transform-react-remove-prop-types')
require('babel-plugin-transform-react-remove-prop-types'),
];
module.exports = api => {
@ -23,12 +26,12 @@ module.exports = api => {
[
require('@babel/preset-env'),
{
targets: { electron: require('electron/package.json').version },
useBuiltIns: 'usage'
}
targets: {electron: require('electron/package.json').version},
useBuiltIns: 'usage',
},
],
require('@babel/preset-flow'),
[require('@babel/preset-react'), { development }]
[require('@babel/preset-react'), {development}],
],
plugins: [
// Stage 0
@ -37,19 +40,19 @@ module.exports = api => {
// Stage 1
require('@babel/plugin-proposal-export-default-from'),
require('@babel/plugin-proposal-logical-assignment-operators'),
[require('@babel/plugin-proposal-optional-chaining'), { loose: false }],
[require('@babel/plugin-proposal-optional-chaining'), {loose: false}],
[
require('@babel/plugin-proposal-pipeline-operator'),
{ proposal: 'minimal' }
{proposal: 'minimal'},
],
[
require('@babel/plugin-proposal-nullish-coalescing-operator'),
{ loose: false }
{loose: false},
],
require('@babel/plugin-proposal-do-expressions'),
// Stage 2
[require('@babel/plugin-proposal-decorators'), { legacy: true }],
[require('@babel/plugin-proposal-decorators'), {legacy: true}],
require('@babel/plugin-proposal-function-sent'),
require('@babel/plugin-proposal-export-namespace-from'),
require('@babel/plugin-proposal-numeric-separator'),
@ -58,10 +61,10 @@ module.exports = api => {
// Stage 3
require('@babel/plugin-syntax-dynamic-import'),
require('@babel/plugin-syntax-import-meta'),
[require('@babel/plugin-proposal-class-properties'), { loose: true }],
[require('@babel/plugin-proposal-class-properties'), {loose: true}],
require('@babel/plugin-proposal-json-strings'),
...(development ? developmentPlugins : productionPlugins)
]
...(development ? developmentPlugins : productionPlugins),
],
};
};

View file

@ -151,6 +151,7 @@
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/plugin-transform-classes": "^7.5.5",
"@babel/plugin-transform-react-constant-elements": "^7.0.0",
"@babel/plugin-transform-react-inline-elements": "^7.0.0",
"@babel/preset-env": "^7.1.6",
@ -162,6 +163,7 @@
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4",
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-transform-es2015-classes": "^6.24.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.20",
"chalk": "^2.4.1",
"concurrently": "^4.1.0",

View file

@ -17,6 +17,13 @@
dependencies:
"@babel/highlight" "^7.0.0"
"@babel/code-frame@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
dependencies:
"@babel/highlight" "^7.0.0"
"@babel/core@^7.0.0", "@babel/core@^7.1.2":
version "7.1.2"
resolved "https://registry.npmjs.org/@babel/core/-/core-7.1.2.tgz#f8d2a9ceb6832887329a7b60f9d035791400ba4e"
@ -75,6 +82,17 @@
source-map "^0.5.0"
trim-right "^1.0.1"
"@babel/generator@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.5.tgz#873a7f936a3c89491b43536d12245b626664e3cf"
integrity sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==
dependencies:
"@babel/types" "^7.5.5"
jsesc "^2.5.1"
lodash "^4.17.13"
source-map "^0.5.0"
trim-right "^1.0.1"
"@babel/helper-annotate-as-pure@^7.0.0":
version "7.0.0"
resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@ -111,6 +129,15 @@
"@babel/types" "^7.0.0"
lodash "^4.17.10"
"@babel/helper-define-map@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.5.5.tgz#3dec32c2046f37e09b28c93eb0b103fd2a25d369"
integrity sha512-fTfxx7i0B5NJqvUOBBGREnrqbTxRh7zinBANpZXAVDlsZxYdclDp467G1sQ8VZYMnAURY3RpBUAgOYT9GfzHBg==
dependencies:
"@babel/helper-function-name" "^7.1.0"
"@babel/types" "^7.5.5"
lodash "^4.17.13"
"@babel/helper-explode-assignable-expression@^7.1.0":
version "7.1.0"
resolved "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.1.0.tgz#537fa13f6f1674df745b0c00ec8fe4e99681c8f6"
@ -144,6 +171,13 @@
dependencies:
"@babel/types" "^7.0.0"
"@babel/helper-member-expression-to-functions@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.5.5.tgz#1fb5b8ec4453a93c439ee9fe3aeea4a84b76b590"
integrity sha512-5qZ3D1uMclSNqYcXqiHoA0meVdv+xUEex9em2fqMnrk/scphGlGgg66zjMrPJESPwrFJ6sbfFQYUSa0Mz7FabA==
dependencies:
"@babel/types" "^7.5.5"
"@babel/helper-module-imports@^7.0.0":
version "7.0.0"
resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
@ -196,6 +230,16 @@
"@babel/traverse" "^7.1.0"
"@babel/types" "^7.0.0"
"@babel/helper-replace-supers@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.5.5.tgz#f84ce43df031222d2bad068d2626cb5799c34bc2"
integrity sha512-XvRFWrNnlsow2u7jXDuH4jDDctkxbS7gXssrP4q2nUD606ukXHRvydj346wmNg+zAgpFx4MWf4+usfC93bElJg==
dependencies:
"@babel/helper-member-expression-to-functions" "^7.5.5"
"@babel/helper-optimise-call-expression" "^7.0.0"
"@babel/traverse" "^7.5.5"
"@babel/types" "^7.5.5"
"@babel/helper-simple-access@^7.1.0":
version "7.1.0"
resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz#65eeb954c8c245beaa4e859da6188f39d71e585c"
@ -209,6 +253,13 @@
dependencies:
"@babel/types" "^7.0.0"
"@babel/helper-split-export-declaration@^7.4.4":
version "7.4.4"
resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz#ff94894a340be78f53f06af038b205c49d993677"
integrity sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==
dependencies:
"@babel/types" "^7.4.4"
"@babel/helper-wrap-function@^7.1.0":
version "7.1.0"
resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.1.0.tgz#8cf54e9190706067f016af8f75cb3df829cc8c66"
@ -250,6 +301,11 @@
version "7.1.6"
resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.1.6.tgz#16e97aca1ec1062324a01c5a6a7d0df8dd189854"
"@babel/parser@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.5.tgz#02f077ac8817d3df4a832ef59de67565e71cca4b"
integrity sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==
"@babel/plugin-proposal-async-generator-functions@^7.1.0":
version "7.1.0"
resolved "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.1.0.tgz#41c1a702e10081456e23a7b74d891922dd1bb6ce"
@ -558,6 +614,20 @@
"@babel/helper-split-export-declaration" "^7.0.0"
globals "^11.1.0"
"@babel/plugin-transform-classes@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.5.5.tgz#d094299d9bd680a14a2a0edae38305ad60fb4de9"
integrity sha512-U2htCNK/6e9K7jGyJ++1p5XRU+LJjrwtoiVn9SzRlDT2KubcZ11OOwy3s24TjHxPgxNwonCYP7U2K51uVYCMDg==
dependencies:
"@babel/helper-annotate-as-pure" "^7.0.0"
"@babel/helper-define-map" "^7.5.5"
"@babel/helper-function-name" "^7.1.0"
"@babel/helper-optimise-call-expression" "^7.0.0"
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/helper-replace-supers" "^7.5.5"
"@babel/helper-split-export-declaration" "^7.4.4"
globals "^11.1.0"
"@babel/plugin-transform-computed-properties@^7.0.0":
version "7.0.0"
resolved "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.0.0.tgz#2fbb8900cd3e8258f2a2ede909b90e7556185e31"
@ -899,6 +969,21 @@
globals "^11.1.0"
lodash "^4.17.10"
"@babel/traverse@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.5.tgz#f664f8f368ed32988cd648da9f72d5ca70f165bb"
integrity sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==
dependencies:
"@babel/code-frame" "^7.5.5"
"@babel/generator" "^7.5.5"
"@babel/helper-function-name" "^7.1.0"
"@babel/helper-split-export-declaration" "^7.4.4"
"@babel/parser" "^7.5.5"
"@babel/types" "^7.5.5"
debug "^4.1.0"
globals "^11.1.0"
lodash "^4.17.13"
"@babel/types@^7.0.0", "@babel/types@^7.1.2", "@babel/types@^7.1.3":
version "7.1.3"
resolved "https://registry.npmjs.org/@babel/types/-/types-7.1.3.tgz#3a767004567060c2f40fca49a304712c525ee37d"
@ -915,6 +1000,15 @@
lodash "^4.17.10"
to-fast-properties "^2.0.0"
"@babel/types@^7.4.4", "@babel/types@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.5.tgz#97b9f728e182785909aa4ab56264f090a028d18a"
integrity sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==
dependencies:
esutils "^2.0.2"
lodash "^4.17.13"
to-fast-properties "^2.0.0"
"@develar/schema-utils@~2.1.0":
version "2.1.0"
resolved "https://registry.yarnpkg.com/@develar/schema-utils/-/schema-utils-2.1.0.tgz#eceb1695bfbed6f6bb84666d5d3abe5e1fd54e17"
@ -2220,9 +2314,10 @@ babel-plugin-transform-es2015-block-scoping@^6.23.0:
babel-types "^6.26.0"
lodash "^4.17.4"
babel-plugin-transform-es2015-classes@^6.23.0:
babel-plugin-transform-es2015-classes@^6.23.0, babel-plugin-transform-es2015-classes@^6.24.1:
version "6.24.1"
resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
integrity sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=
dependencies:
babel-helper-define-map "^6.24.1"
babel-helper-function-name "^6.24.1"
@ -8181,7 +8276,7 @@ lodash@4.17.10:
version "4.17.11"
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
lodash@^4.17.15, lodash@^4.6.1:
lodash@^4.17.13, lodash@^4.17.15, lodash@^4.6.1:
version "4.17.15"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==