Revert to vanilla and fix HOCs

Author: gaearon

packages/babel-plugin-hot-reload/index.js

@@ -83,6 +83,8 @@ function decorateFunctionId(t, name, generatedName) {
 }
 
 module.exports = function({ types: t }) {
+  return { visitor: {} };
+
   return {
     visitor: {
       ExportDefaultDeclaration(path, state) {

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

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import CounterFunction from './CounterFunction';
 import HOCFunction from './HOCFunction';
-const HFF = HOCFunction(CounterFunction);
+
+const HFF = window.__createProxy(module, 'HFF');
+HFF.__setImpl(HOCFunction(CounterFunction));
 
 export default class Counter extends Component {
   state = { value: 0 };

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

@@ -1,11 +1,16 @@
-import React, { useState, useLayoutEffect } from 'react';
+import React, { useReducer, useLayoutEffect } from 'react';
 import HOCFunction from './HOCFunction';
-const HFF = HOCFunction(Counter);
 
-export default function Counter(props) {
-  const [value, setValue] = useState(0);
+let Counter = window.__createProxy(module, 'Counter');
+let HFF = window.__createProxy(module, 'HFF');
+
+HFF.__setImpl(HOCFunction(Counter));
+Counter.__setImpl(function CounterImpl(props) {
+  const [value, dispatch] = useReducer((v, a) => {
+    return a === 'inc' ? v + 1 : v;
+  }, 0);
   useLayoutEffect(() => {
-    const id = setInterval(() => setValue(c => c + 1), 1000);
+    const id = setInterval(() => dispatch('inc'), 1000);
     return () => clearInterval(id);
   }, []);
   return (
@@ -18,4 +23,6 @@ export default function Counter(props) {
       )}
     </span>
   );
-}
+});
+
+export default Counter;

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

@@ -3,19 +3,26 @@ 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);
-const HFF = HOCFunction(CounterFunction);
 
-export default function Hello() {
+let Hello = window.__createProxy(module, 'Hello');
+let HCC = window.__createProxy(module, 'CounterClass');
+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));
+
+Hello.__setImpl(function HelloImpl() {
   const [value] = useState(Math.random());
 
   return (
     <h3>
       {value.toString().slice(0, 5)}
       <br />
-      hello!
+      world
       <br />
       class: <CounterClass hocChild />
       <br />
@@ -24,4 +31,6 @@ export default function Hello() {
       hocs: <HCC /> <HCF /> <HFC /> <HFF />
     </h3>
   );
-}
+});
+
+export default Hello;

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

@@ -1,4 +1,19 @@
 - frags
 - error handling
 - hocs?
+  - with self as input
+  - returning a class
+  - HOC itself by mistake
+    - protect against nested?
+- type equality
+  - memo and friends
+  - nested / applied twice
+  - mutually recursive
+  - re-exports
+    - same HOC applied early, two callsites
+- classes
+  - how to detect and reload?
 - render props
+- directives?
+- when to accept?
+- test integrations

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

@@ -0,0 +1,42 @@
+import React from 'react';
+
+let HotContext = React.createContext();
+let _invalidate;
+export function HotContainer({ children }) {
+  const [inc, setInc] = React.useState(0);
+  _invalidate = () => setInc(c => c + 1);
+  return <HotContext.Provider value={inc}>{children}</HotContext.Provider>;
+}
+
+window.__createProxy = function(m, localId) {
+  m.hot.accept();
+  m.hot.dispose(() => {
+    setTimeout(() => window.__enqueueForceUpdate());
+  });
+  const id = m.i + '$' + localId;
+
+  if (!window[`${id}_proxy`]) {
+    function P(...args) {
+      let impl = window[`${id}_impl`];
+      if (impl.prototype && impl.prototype.isReactComponent) {
+        return new impl(...args);
+      }
+      let res = impl.apply(this, arguments);
+      window.__renderHook();
+      return res;
+    }
+    window[`${id}_proxy`] = P;
+    P.__setImpl = impl => {
+      window[`${id}_impl`] = impl;
+    };
+  }
+  return window[`${id}_proxy`];
+};
+
+window.__enqueueForceUpdate = function(type) {
+  _invalidate();
+};
+
+window.__renderHook = function(type) {
+  React.useContext(HotContext);
+};

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

@@ -1,27 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { HotContainer } from './hot';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-let HotContext = React.createContext();
-let _invalidate;
-function HotContainer({ children }) {
-  const [inc, setInc] = React.useState(0);
-  _invalidate = () => setInc(c => c + 1);
-  return <HotContext.Provider value={inc}>{children}</HotContext.Provider>;
-}
-
-window.__enqueueForceUpdate = function(type) {
-  console.log('force', type.name);
-  _invalidate();
-};
-
-window.__renderHook = function(type) {
-  console.log('render', type.name);
-  React.useContext(HotContext);
-};
-
 ReactDOM.render(
   <HotContainer>
     <App />