Fix lazy and double wrapping

Author: gaearon

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

@@ -1,9 +1,13 @@
-import React, { useState } from 'react';
-import CounterClass from './CounterClass';
-import CounterFunction from './CounterFunction';
+import React, { Suspense, lazy, useState } from 'react';
 import HOCClass from './HOCClass';
 import HOCFunction from './HOCFunction';
+import CounterClass from './CounterClass';
+import CounterFunction from './CounterFunction';
 
+let LazyCC;
+let LazyCF;
+let DblCC;
+let DblCF;
 let HCC;
 let HCF;
 let HFC;
@@ -13,20 +17,38 @@ let Hello = window.__assign(module, 'Hello', function Hello() {
   const [value] = useState(Math.random());
 
   return (
-    <h3>
-      {value.toString().slice(0, 5)}
-      <br />
-      hello world!
-      <br />
-      class: <CounterClass hocChild />
-      <br />
-      function: <CounterFunction hocChild />
-      <br />
-      hocs: <HCC /> <HCF /> <HFC /> <HFF />
-    </h3>
+    <Suspense fallback={<div />}>
+      <h3>
+        {value.toString().slice(0, 5)}
+        <br />
+        hello world!
+        <br />
+        class: <CounterClass hocChild />
+        <br />
+        function: <CounterFunction hocChild />
+        <br />
+        doublewrapped: <DblCC /> <DblCF />
+        <br />
+        lazy: <LazyCC /> <LazyCF />
+        <br />
+        hocs: <HCC /> <HCF /> <HFC /> <HFF />
+      </h3>
+    </Suspense>
   );
 });
 
+LazyCC = window.__assign(
+  module,
+  'LazyCC',
+  lazy(() => import('./CounterClass'))
+);
+LazyCF = window.__assign(
+  module,
+  'LazyCF',
+  lazy(() => import('./CounterFunction'))
+);
+DblCC = window.__assign(module, 'DblCC', CounterClass);
+DblCF = window.__assign(module, 'DblCF', CounterFunction);
 HCC = window.__assign(module, 'HCC', HOCClass(CounterClass, 'red'));
 HCF = window.__assign(module, 'HCF', HOCClass(CounterFunction, 'orange'));
 HFC = window.__assign(module, 'HFC', HOCFunction(CounterClass, 'yellow'));

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

@@ -24,6 +24,8 @@
 
 lazy()?
 
+- lazy of memo of proxy
+
 - maybe Proxy?
 - do I want to preserve type? elementType? or what?
   or lazy element?

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

@@ -8,8 +8,9 @@ export function HotContainer({ children }) {
   return <HotContext.Provider value={inc}>{children}</HotContext.Provider>;
 }
 
-let storage = new Map();
-let latestRawFunctions = new Map();
+let idToPersistentType = new Map();
+let idToRawFunction = new Map();
+let proxies = new WeakSet();
 
 function getKind(type) {
   if (typeof type === 'function') {
@@ -21,6 +22,8 @@ function getKind(type) {
   } else if (type !== null && typeof type === 'object') {
     if (type.$$typeof === Symbol.for('react.memo')) {
       return 'memo';
+    } else if (type.$$typeof === Symbol.for('react.lazy')) {
+      return 'lazy';
     }
   }
   return 'other';
@@ -30,19 +33,27 @@ function init(rawType, id) {
   let kind = getKind(rawType);
   switch (kind) {
     case 'function': {
-      latestRawFunctions.set(id, rawType);
-      return new Proxy(rawType, {
+      if (proxies.has(rawType)) {
+        return rawType;
+      }
+      idToRawFunction.set(id, rawType);
+      const proxy = new Proxy(rawType, {
         apply(target, thisArg, args) {
-          let ret = latestRawFunctions.get(id).apply(null, args);
+          let ret = idToRawFunction.get(id).apply(null, args);
           React.useContext(HotContext);
           return ret;
         },
       });
+      proxies.add(proxy);
+      return proxy;
     }
     case 'memo': {
       rawType.type = init(rawType.type, id);
       return rawType;
     }
+    case 'lazy': {
+      return rawType;
+    }
     default: {
       return rawType;
     }
@@ -57,12 +68,15 @@ function accept(type, nextRawType, id) {
   }
   switch (kind) {
     case 'function': {
-      latestRawFunctions.set(id, nextRawType);
+      idToRawFunction.set(id, nextRawType);
       return true;
     }
     case 'memo': {
       return accept(type.type, nextRawType.type, id);
     }
+    case 'lazy': {
+      return true;
+    }
     default: {
       return false;
     }
@@ -75,10 +89,10 @@ window.__assign = function(webpackModule, localId, nextRawType) {
     setTimeout(() => _invalidate());
   });
   const id = webpackModule.i + '$' + localId;
-  let type = storage.get(id);
+  let type = idToPersistentType.get(id);
   if (!accept(type, nextRawType, id)) {
     type = init(nextRawType, id);
-    storage.set(id, type);
+    idToPersistentType.set(id, type);
   }
   return type;
 };