[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

-import React, { memo, useReducer, useLayoutEffect } from 'react';
+import React, { forwardRef, memo, useReducer, useLayoutEffect } from 'react';
 import HOCFunction from './HOCFunction';
 
 let HFF;
 let Counter;
+let Fwd;
 
 Counter = window.__assign(
   module,
@@ -18,7 +19,7 @@ Counter = window.__assign(
       }, []);
       return (
         <span>
-          {value}{' '}
+          {value}
           {props.hocChild && (
             <>
               (inner HOC: <HFF /> {HFF.field})
@@ -29,6 +30,15 @@ Counter = window.__assign(
     })
   )
 );
-HFF = window.__assign(module, 'HFF', HOCFunction(Counter));
+Fwd = window.__assign(
+  module,
+  'FWD',
+  forwardRef((props, ref) => (
+    <span ref={ref}>
+      <Counter {...props} />
+    </span>
+  ))
+);
+HFF = window.__assign(module, 'HFF', HOCFunction(Fwd));
 
-export default Counter;
+export default Fwd;

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

@@ -21,30 +21,7 @@
 - directives?
 - when to accept?
 - test integrations
-
-lazy()?
-
-- lazy of memo of proxy
-
-- 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
-
+- exotic (lazy, memo, fwd)
 - 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"?
+- don't accept module if either assignment failed
+- displayName etc

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

@@ -8,6 +8,12 @@ export function HotContainer({ children }) {
   return <HotContext.Provider value={inc}>{children}</HotContext.Provider>;
 }
 
+let CurrentOwner =
+  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
+function readContext(Ctx) {
+  CurrentOwner.currentDispatcher.readContext(Ctx);
+}
+
 let idToPersistentType = new Map();
 let idToRawFunction = new Map();
 let proxies = new WeakSet();
@@ -24,6 +30,8 @@ function getKind(type) {
       return 'memo';
     } else if (type.$$typeof === Symbol.for('react.lazy')) {
       return 'lazy';
+    } else if (type.$$typeof === Symbol.for('react.forward_ref')) {
+      return 'forward_ref';
     }
   }
   return 'other';
@@ -40,7 +48,7 @@ function init(rawType, id) {
       const proxy = new Proxy(rawType, {
         apply(target, thisArg, args) {
           let ret = idToRawFunction.get(id).apply(null, args);
-          React.useContext(HotContext);
+          readContext(HotContext);
           return ret;
         },
       });
@@ -54,6 +62,10 @@ function init(rawType, id) {
     case 'lazy': {
       return rawType;
     }
+    case 'forward_ref': {
+      rawType.render = init(rawType.render, id);
+      return rawType;
+    }
     default: {
       return rawType;
     }
@@ -74,6 +86,9 @@ function accept(type, nextRawType, id) {
     case 'memo': {
       return accept(type.type, nextRawType.type, id);
     }
+    case 'forward_ref': {
+      return accept(type.render, nextRawType.render, id);
+    }
     case 'lazy': {
       return true;
     }