it works, except on sandbox page

Author: christianalfoni

packages/app/config/babel.dev.js

@@ -28,6 +28,7 @@ module.exports = {
     require.resolve('@babel/preset-react'),
   ].filter(Boolean),
   plugins: [
+    require.resolve('react-hot-loader/babel'),
     require.resolve('@babel/plugin-transform-template-literals'),
     require.resolve('@babel/plugin-transform-destructuring'),
     require.resolve('@babel/plugin-proposal-object-rest-spread'),

packages/app/config/webpack.dev.js

@@ -4,17 +4,15 @@ const merge = require('webpack-merge');
 const WebpackBar = require('webpackbar');
 const commonConfig = require('./webpack.common');
 
-const devEntries = [
-  // 'react-hot-loader/patch',
-  'webpack-dev-server/client?/',
-  // 'webpack/hot/only-dev-server',
-];
+const devEntries = ['webpack-dev-server/client?/'];
 
 module.exports = merge(
-  // these go first, because "react-hot-loader/patch" has to be the first entry
   {
     entry: {
-      app: devEntries,
+      app: [
+        'webpack-dev-server/client?http://localhost:3000',
+        'webpack-hot-middleware/client',
+      ],
       embed: devEntries,
     },
   },
@@ -36,7 +34,7 @@ module.exports = merge(
       new webpack.EvalSourceMapDevToolPlugin({
         include: /src\/app/,
       }),
-      // new webpack.HotModuleReplacementPlugin(),
+      new webpack.HotModuleReplacementPlugin(),
     ],
   }
 );

packages/app/package.json

@@ -167,10 +167,10 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
-    "overmind": "^23.0.2-1583315924305",
+    "overmind": "^23.1.0-1588056333188",
     "overmind-devtools": "^19.0.0",
-    "overmind-graphql": "^3.1.0-1583324447920",
-    "overmind-react": "^24.0.2-1583315924305",
+    "overmind-graphql": "^3.1.0-1588056333188",
+    "overmind-react": "^24.1.0-1588056333188",
     "phoenix": "^1.4.11",
     "postcss": "^7.0.26",
     "postcss-selector-parser": "^2.2.3",
@@ -325,7 +325,7 @@
     "preval.macro": "^1.0.1",
     "promise": "7.1.1",
     "raw-loader": "^0.5.1",
-    "react-hot-loader": "^4.0.0-beta.13",
+    "react-hot-loader": "^4.12.20",
     "react-test-renderer": "16",
     "recursive-readdir": "^2.2.1",
     "resolve-url-loader": "^3.1.0",

packages/app/scripts/start.js

@@ -281,12 +281,14 @@ function runDevServer(port, protocol, index) {
     // Enable HTTPS if the HTTPS environment variable is set to 'true'
     https: protocol === 'https',
     // contentBase: paths.staticPath,
+    public: 'localhost:3000',
     host: process.env.LOCAL_SERVER ? 'localhost' : 'codesandbox.test',
     disableHostCheck: !process.env.LOCAL_SERVER,
     contentBase: false,
     clientLogLevel: 'warning',
     overlay: true,
-    inline: false,
+    inline: true,
+    hot: true,
     liveReload: process.env['DISABLE_REFRESH'] ? false : true,
   });
 

packages/app/src/app/index.js

@@ -1,3 +1,4 @@
+import 'react-hot-loader/patch';
 import '@codesandbox/common/lib/global.css';
 import 'normalize.css';
 
@@ -136,15 +137,15 @@ window.getState = path =>
 window.getSignal = path =>
   path.split('.').reduce((aggr, key) => aggr[key], overmind.actions);
 
+const rootEl = document.getElementById('root');
+
 overmind.initialized.then(() => {
   requirePolyfills().then(() => {
     if (isSafari) {
       // eslint-disable-next-line
       import('subworkers');
     }
 
-    const rootEl = document.getElementById('root');
-
     const showNotification = (message, type) => {
       notificationState.addNotification({
         message,
@@ -194,3 +195,39 @@ overmind.initialized.then(() => {
     }
   });
 });
+
+if (module.hot) {
+  module.hot.accept(['./pages/index.tsx', './overmind'], () => {
+    const newOvermind = createOvermind(config, {
+      delimiter: ' ',
+      devtools:
+        (window.opener && window.opener !== window) ||
+        !window.chrome ||
+        location.search.includes('noDevtools')
+          ? false
+          : 'localhost:3031',
+      name:
+        'CodeSandbox - ' +
+        (navigator.userAgent.indexOf('Chrome/76') > 0 ? 'Chrome' : 'Canary'),
+      logProxies: true,
+    });
+    render(
+      <ApolloProvider client={client}>
+        <ActualOvermindProvider value={newOvermind}>
+          <OvermindProvider value={newOvermind}>
+            <HooksProvider client={client}>
+              <ThemeProvider theme={theme}>
+                <DndProvider backend={HTML5Backend}>
+                  <Router history={history}>
+                    <App />
+                  </Router>
+                </DndProvider>
+              </ThemeProvider>
+            </HooksProvider>
+          </OvermindProvider>
+        </ActualOvermindProvider>
+      </ApolloProvider>,
+      rootEl
+    );
+  });
+}

packages/app/src/app/pages/index.tsx

@@ -12,9 +12,9 @@ import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
 import { ErrorBoundary } from './common/ErrorBoundary';
 import { Modals } from './common/Modals';
 import { Dashboard } from './Dashboard';
-import { Dashboard as NewDashboard } from './NewDashboard';
 import { DevAuthPage } from './DevAuth';
 import { Container, Content } from './elements';
+import { Dashboard as NewDashboard } from './NewDashboard';
 import { NewSandbox } from './NewSandbox';
 import { Sandbox } from './Sandbox';
 

yarn.lock

@@ -7485,15 +7485,10 @@ [email protected]:
     "@types/node" "^10.5.1"
     tslib "^1.9.3"
 
-[email protected]:
-  version "1.0.2-1583315924305"
-  resolved "https://registry.yarnpkg.com/betsy/-/betsy-1.0.2-1583315924305.tgz#9ffab090df9c4b1e276cf6b083822d7849ff0189"
-  integrity sha512-o3EUfs58Oz2S7tn54nbEE6t3kKwvv+F5VTDbjrIlXXGMewv1OOqwSRatFQG2nswwEDzxuEfcG7yQMiDZGIh+9g==
-
-[email protected]:
-  version "1.0.2-1583324447920"
-  resolved "https://registry.yarnpkg.com/betsy/-/betsy-1.0.2-1583324447920.tgz#f6453b9b64e675a3edaad3f88ee4cb40472da12c"
-  integrity sha512-bExFE9koVJGUpyroPCwoQ6muiykV0q2h68S92C0YVaXA9j7BZ2Kowlh6Lp4Rb+alY6Ehah1oTN9Ag/iX2WbHqw==
+[email protected]:
+  version "1.0.2-1588056333188"
+  resolved "https://registry.yarnpkg.com/betsy/-/betsy-1.0.2-1588056333188.tgz#b2f7ed8056717c05585307f949724bc68cbff251"
+  integrity sha512-6N8sejJqXkHrn4VOSze/w+YkZ3tPEzDVv3zs9fF3U+IwC0nkBpplmu5kDJLCwCTQ27pE2iYx9dxQDlbBQBRBMw==
 
 better-assert@~1.0.0:
   version "1.0.2"
@@ -22169,16 +22164,16 @@ overmind-devtools@^19.0.0:
     react-dom "16.8.1"
     ws "^5.2.1"
 
-overmind-graphql@^3.1.0-1583324447920:
-  version "3.1.0-1583324447920"
-  resolved "https://registry.yarnpkg.com/overmind-graphql/-/overmind-graphql-3.1.0-1583324447920.tgz#6f231752aed892d0adde959ce816ecfd831a6cc2"
-  integrity sha512-EEVyZ/uLEbjSdBHIpw37hpXzJ3DwnJTDSIF0c6dmRWq1vCT8O5GQkkcrrD3vEAqpflceBSfinV2TYYU4dC50xw==
+overmind-graphql@^3.1.0-1588056333188:
+  version "3.1.0-1588056333188"
+  resolved "https://registry.yarnpkg.com/overmind-graphql/-/overmind-graphql-3.1.0-1588056333188.tgz#c7ce8c9b65454b084cc68aa684e561e2c6fa7c4c"
+  integrity sha512-azEKo2MINOJQMTBSuqG5Pb+z4r+ujlRIOnrImJHwgsn0DSfEeJoiBivKVCNGKsImQ6w76mU9ajVRVJUcbogYzg==
   dependencies:
     "@absinthe/socket" "^0.2.1"
     graphql "^14.5.8"
     graphql-request "^1.8.2"
     graphql-tag "^2.10.1"
-    overmind "23.0.2-1583324447920"
+    overmind "23.1.0-1588056333188"
     phoenix "^1.4.13"
 
 [email protected]:
@@ -22190,12 +22185,12 @@ [email protected]:
     overmind "18.0.1"
     tslib "^1.9.3"
 
-overmind-react@^24.0.2-1583315924305:
-  version "24.0.2-1583315924305"
-  resolved "https://registry.yarnpkg.com/overmind-react/-/overmind-react-24.0.2-1583315924305.tgz#7f0e7f76ff25a34cc02f61c29ae0597deb2a1b89"
-  integrity sha512-BwEPu5xSQt8wgRwLay0ilbWhqX9KjdA3MS7RbMqJUWDOWVPniMQMtj19iS+siliID5JbD3U6BeHuSF0H3A1CIw==
+overmind-react@^24.1.0-1588056333188:
+  version "24.1.0-1588056333188"
+  resolved "https://registry.yarnpkg.com/overmind-react/-/overmind-react-24.1.0-1588056333188.tgz#14f01774019a971c69627737239e00d5e8d35157"
+  integrity sha512-FokVcmzhhlaEPl6jXQ0ncb4go9MpwYRHmVGqZadLz9XsIc7nzuHPPq9bEIwi8opQeYuifaZY80IGLNi2D15fgw==
   dependencies:
-    overmind "23.0.2-1583315924305"
+    overmind "23.1.0-1588056333188"
 
 overmind-themes@next:
   version "1.0.2-1562145138120"
@@ -22215,24 +22210,14 @@ [email protected]:
     proxy-state-tree "4.4.0"
     tslib "^1.9.3"
 
-[email protected]:
-  version "23.0.2-1583315924305"
-  resolved "https://registry.yarnpkg.com/overmind/-/overmind-23.0.2-1583315924305.tgz#69549603d2d8a41085e6cb53d999f140a97d2484"
-  integrity sha512-04lB+dGBkDo+9aSuJGsTfuwlPUKcwD5l9Wou41no6nccczH6pcPerKmzAXt1ltCUmdA5Ah4Ol7yY6yLdrGWZQA==
-  dependencies:
-    betsy "1.0.2-1583315924305"
-    is-plain-obj "^1.1.0"
-    proxy-state-tree "5.0.0-1583315924305"
-    tslib "^1.10.0"
-
-[email protected], overmind@^23.0.2-1583315924305:
-  version "23.0.2-1583324447920"
-  resolved "https://registry.yarnpkg.com/overmind/-/overmind-23.0.2-1583324447920.tgz#d92734cc79c16a21df8492a630572757f3627cb3"
-  integrity sha512-prxEwgEuhYhN5L1XW/zMxBLvRxjQzzpeo+9ppS/cYCr0vAEbKms4pKn81/UeZuwTzDlxuCl7Tl/LU74QDzOF4w==
+[email protected], overmind@^23.1.0-1588056333188:
+  version "23.1.0-1588056333188"
+  resolved "https://registry.yarnpkg.com/overmind/-/overmind-23.1.0-1588056333188.tgz#e8152fbdd452075b4045f1427ccb3f93b6f975d0"
+  integrity sha512-4VxyQvqevfANc0M7B2KgoWz3+UFiAxozx4leRktHSHojZtFyrtGe5F+Cy16Cdcp4gx5BLzY731k8gELHqCtH0w==
   dependencies:
-    betsy "1.0.2-1583324447920"
+    betsy "1.0.2-1588056333188"
     is-plain-obj "^1.1.0"
-    proxy-state-tree "5.0.0-1583324447920"
+    proxy-state-tree "5.0.1-1588056333188"
     tslib "^1.10.0"
 
 ow@^0.15.0:
@@ -24548,17 +24533,10 @@ [email protected]:
   dependencies:
     is-plain-obj "^1.1.0"
 
-[email protected]:
-  version "5.0.0-1583315924305"
-  resolved "https://registry.yarnpkg.com/proxy-state-tree/-/proxy-state-tree-5.0.0-1583315924305.tgz#b10471bba99628d87c8fdfeee41e79ee3ed29632"
-  integrity sha512-7GUM5npXLkWAILYpnJUg9hQwCuzHz+vuMXg8mEzQ8IWSyhwcZ/UjZqyPjrem2ljgU1H4GbA3zzsS9S551KOJtQ==
-  dependencies:
-    is-plain-obj "^1.1.0"
-
-[email protected]:
-  version "5.0.0-1583324447920"
-  resolved "https://registry.yarnpkg.com/proxy-state-tree/-/proxy-state-tree-5.0.0-1583324447920.tgz#2ee11d1f8159219138dbd9a71dab4e077fd11949"
-  integrity sha512-AR7LXER1+1kgzup/bOnwOtyj7TBOsdGaNtGecHgageSW+JSQe7/j+cnflZqiB4T95UAz7BHdDA0OcjCctd6eYw==
+[email protected]:
+  version "5.0.1-1588056333188"
+  resolved "https://registry.yarnpkg.com/proxy-state-tree/-/proxy-state-tree-5.0.1-1588056333188.tgz#f03631a8d3fda8a247bebd821741385174d664fa"
+  integrity sha512-p8xU4SjGTECwVJ3nAxMUPKn6JW0omiLxdTCURl2axlM3GoEfxFhDlr22P8l6LAqKgOH9oaUbKxkshBC3qEcI5A==
   dependencies:
     is-plain-obj "^1.1.0"
 
@@ -25198,7 +25176,7 @@ react-hook-inview@^4.1.2:
   resolved "https://registry.yarnpkg.com/react-hook-inview/-/react-hook-inview-4.1.2.tgz#0d0ecdf6f2c0255842debe95f5567702fc2b4083"
   integrity sha512-+NO6NKSYWEtc2vAWfaJMoeBVqt9NbncPygoCrSPJGLxu/UpiPWnsybX2lOfqQMrwIAXkQmrGTx0hnnRFXUfuzw==
 
-react-hot-loader@^4.0.0-beta.13, react-hot-loader@^4.12.11:
+react-hot-loader@^4.12.11:
   version "4.12.11"
   resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.11.tgz#06bd618d0a7343c8afa4a31206844f651193bae5"
   integrity sha512-ySsg1hPwr/5dkZCJVp1nZRbwbpbEQ+3e2+bn/D681Wvr9+o+5bLKkTGq0TXskj8HgCS3ScysXddOng9Cg+JKzw==
@@ -25212,6 +25190,20 @@ react-hot-loader@^4.0.0-beta.13, react-hot-loader@^4.12.11:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
+react-hot-loader@^4.12.20:
+  version "4.12.20"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.20.tgz#c2c42362a7578e5c30357a5ff7afa680aa0bef8a"
+  integrity sha512-lPlv1HVizi0lsi+UFACBJaydtRYILWkfHAC/lyCs6ZlAxlOZRQIfYHDqiGaRvL/GF7zyti+Qn9XpnDAUvdFA4A==
+  dependencies:
+    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"
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"