[WIP] Hot reloading (only for Hooks)

Created by: gaearon

I don't know if this is going to work but I'm going to try another time. Hooks were another piece of the puzzle. Maybe it'll work out.

Preserving state is Hooks-only. It's too brittle for classes. With Hooks it "just works" by design.

packages/react-scripts/template/src/App.js

@@ -3,8 +3,6 @@ import Hello from './Hello';
 import Layout from './Layout';
 import './App.css';
 
-console.log('running App');
-
 let App = window.__assign(module, 'App', function App({ children }) {
   return (
     <Layout>
@@ -12,6 +10,6 @@ let App = window.__assign(module, 'App', function App({ children }) {
     </Layout>
   );
 });
-window.__commit(module);
+module.hot.accept(['./Layout', './Hello'], window.__invalidate);
 
 export default App;

packages/react-scripts/template/src/CounterClass.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import CounterFunction from './CounterFunction';
 import HOCFunction from './HOCFunction';
 
-const HFF = HOCFunction(CounterFunction);
+let HFF;
 
 export default class Counter extends Component {
   state = { value: 0 };
@@ -28,3 +28,6 @@ export default class Counter extends Component {
     );
   }
 }
+
+HFF = window.__assign(module, 'HFF', HOCFunction(CounterFunction));
+module.hot.accept(['./CounterFunction', './HOCFunction'], window.__invalidate);

packages/react-scripts/template/src/CounterFunction.js

@@ -41,6 +41,8 @@ Fwd = window.__assign(
   ))
 );
 HFF = window.__assign(module, 'HFF', HOCFunction(Fwd));
-window.__commit(module);
 
+module.hot.accept(['./HOCFunction'], window.__invalidate);
+
+export let N = 10;
 export default Fwd;

packages/react-scripts/template/src/Hello.js

@@ -2,7 +2,7 @@ import React, { Suspense, lazy, useState } from 'react';
 import HOCClass from './HOCClass';
 import HOCFunction from './HOCFunction';
 import CounterClass from './CounterClass';
-import CounterFunction from './CounterFunction';
+import CounterFunction, { N } from './CounterFunction';
 
 let LazyCC;
 let LazyCF;
@@ -13,14 +13,12 @@ let HCF;
 let HFC;
 let HFF;
 
-console.log('running Hello');
-
 let Hello = window.__assign(module, 'Hello', function Hello() {
   const [value] = useState(Math.random());
   return (
     <Suspense fallback={<div />}>
       <h3>
-        {value.toString().slice(0, 5)}
+        {N} - {value.toString().slice(0, 5)}
         <br />
         hello world!
         <br />
@@ -54,6 +52,9 @@ HCC = window.__assign(module, 'HCC', HOCClass(CounterClass, 'red'));
 HCF = window.__assign(module, 'HCF', HOCClass(CounterFunction, 'orange'));
 HFC = window.__assign(module, 'HFC', HOCFunction(CounterClass, 'yellow'));
 HFF = window.__assign(module, 'HFF', HOCFunction(CounterFunction, 'green'));
-window.__commit(module);
+module.hot.accept(
+  ['./CounterFunction', './CounterClass', './HOCFunction', './HOCClass'],
+  window.__invalidate
+);
 
 export default Hello;

packages/react-scripts/template/src/hot.js

 import React from 'react';
 
 let HotContext = React.createContext();
-let invalidate;
+
+let invalidated;
+let __setInc;
+window.__invalidate = () => {
+  if (!invalidated) {
+    invalidated = true;
+    setTimeout(() => {
+      invalidated = false;
+      __setInc(c => c + 1);
+    });
+  }
+};
+
 export function HotContainer({ children }) {
   const [inc, setInc] = React.useState(0);
-  invalidate = () => setInc(c => c + 1);
+  __setInc = setInc;
   return <HotContext.Provider value={inc}>{children}</HotContext.Provider>;
 }
 
@@ -257,12 +269,3 @@ window.__assign = function(webpackModule, localId, nextRawType) {
   }
   return type;
 };
-
-window.__commit = function(webpackModule) {
-  // TODO: we should abort self-accept if one of types changed.
-  // but it doesn't seem like webpack lets us do this yet.
-  webpackModule.hot.accept();
-  webpackModule.hot.dispose(() => {
-    setTimeout(() => invalidate());
-  });
-};

packages/react-scripts/template/src/index.js

@@ -12,6 +12,8 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
+module.hot.accept(['./App'], window.__invalidate);
+
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: http://bit.ly/CRA-PWA