[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/CounterFunction.js

@@ -18,7 +18,7 @@ Counter.__setImpl(function CounterImpl(props) {
       {value}
       {props.hocChild && (
         <>
-          (inner HOC: <HFF />)
+          (inner HOC: <HFF /> {HFF.field})
         </>
       )}
     </span>

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

 import React, { Component } from 'react';
 
-export default function withStuff(Wrapped) {
+export default function withStuff(Wrapped, color) {
   return class extends Component {
+    static field = 42;
     render() {
-      return <Wrapped {...this.props} />;
+      return (
+        <span style={{ color }}>
+          <Wrapped {...this.props} />
+        </span>
+      );
     }
   };
 }

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

 import React from 'react';
 
-export default function withStuff(Wrapped) {
-  return function(props) {
-    return <Wrapped {...props} />;
-  };
+export default function withStuff(Wrapped, color) {
+  function Wrapper(props) {
+    return (
+      <span style={{ color }}>
+        <Wrapped {...props} />
+      </span>
+    );
+  }
+  Wrapper.field = 42;
+  return Wrapper;
 }

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

@@ -10,10 +10,10 @@ let HCF = window.__createProxy(module, 'HCF');
 let HFC = window.__createProxy(module, 'HFC');
 let HFF = window.__createProxy(module, 'HFF');
 
-HCC.__setImpl(HOCClass(CounterClass));
-HCF.__setImpl(HOCClass(CounterFunction));
-HFC.__setImpl(HOCFunction(CounterClass));
-HFF.__setImpl(HOCFunction(CounterFunction));
+HCC.__setImpl(HOCClass(CounterClass, 'red'));
+HCF.__setImpl(HOCClass(CounterFunction, 'orange'));
+HFC.__setImpl(HOCFunction(CounterClass, 'yellow'));
+HFF.__setImpl(HOCFunction(CounterFunction, 'green'));
 Hello.__setImpl(function HelloImpl() {
   const [value] = useState(Math.random());
 
@@ -21,7 +21,7 @@ Hello.__setImpl(function HelloImpl() {
     <h3>
       {value.toString().slice(0, 5)}
       <br />
-      hello world!!!
+      hello world!
       <br />
       class: <CounterClass hocChild />
       <br />

packages/react-scripts/template/src/TODO.md

@@ -21,3 +21,28 @@
 - directives?
 - when to accept?
 - test integrations
+
+lazy()?
+
+- maybe Proxy?
+- do I want to preserve type? elementType? or what?
+  or lazy element?
+
+- what about static fields
+
+  - we either break Foo.thing or <Foo />.type?
+  - maybe we never wrap, but point to latest from current one?
+  - could also bail out
+
+- how to force update all (incl. inside memo)
+
+let A = createA();
+B() {
+<A />
+}
+
+- two kinds of edits
+  - reeval child with new data
+  - remember new self
+
+* think in terms of "assign"?