[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/babel-plugin-hot-reload/index.js

@@ -55,7 +55,9 @@ function exportHoistedFunctionCallProxy(t, name, generatedName) {
   return template(
     `
     export default function NAME() {
-      return window[GEN_NAME].apply(this, arguments);
+      var result = window[GEN_NAME].apply(this, arguments);
+      window.__renderHook(NAME);
+      return result;
     }
     `,
     { sourceType: 'module' }

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

 import React, { Component } from 'react';
 import CounterFunction from './CounterFunction';
 import HOCFunction from './HOCFunction';
-
 const HFF = HOCFunction(CounterFunction);
 
 export default class Counter extends Component {

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

 import React, { useState, useLayoutEffect } from 'react';
 import HOCFunction from './HOCFunction';
-
 const HFF = HOCFunction(Counter);
 
 export default function Counter(props) {

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

@@ -3,7 +3,6 @@ import CounterClass from './CounterClass';
 import CounterFunction from './CounterFunction';
 import HOCClass from './HOCClass';
 import HOCFunction from './HOCFunction';
-
 const HCC = HOCClass(CounterClass);
 const HCF = HOCClass(CounterFunction);
 const HFC = HOCFunction(CounterClass);
@@ -15,7 +14,7 @@ export default function Hello() {
     <h3>
       {value.toString().slice(0, 5)}
       <br />
-      hello!!!!
+      hello!!
       <br />
       class: <CounterClass hocChild />
       <br />

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

@@ -5,7 +5,11 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 window.__enqueueForceUpdate = function(type) {
-  console.log(type);
+  console.log('force', type);
+};
+
+window.__renderHook = function(type) {
+  console.log('render', type);
 };
 
 ReactDOM.render(<App />, document.getElementById('root'));