Report refreshed families to the caller (facebook#15957)

Author: gaearon

packages/react-refresh/src/ReactFreshRuntime.js

@@ -142,10 +142,10 @@ function resolveFamily(type) {
   return familiesByType.get(type);
 }
 
-export function performReactRefresh(): boolean {
+export function performReactRefresh(): RefreshUpdate | null {
   if (__DEV__) {
     if (pendingUpdates.length === 0) {
-      return false;
+      return null;
     }
 
     const staleFamilies = new Set();
@@ -169,9 +169,10 @@ export function performReactRefresh(): boolean {
       }
     });
 
+    // TODO: rename these fields to something more meaningful.
     const update: RefreshUpdate = {
-      updatedFamilies,
-      staleFamilies,
+      updatedFamilies, // Families that will re-render preserving state
+      staleFamilies, // Families that will be remounted
     };
 
     if (typeof setRefreshHandler !== 'function') {
@@ -182,7 +183,7 @@ export function performReactRefresh(): boolean {
           'called before the global DevTools hook was set up, or after the ' +
           'renderer has already initialized. Please file an issue with a reproducing case.',
       );
-      return false;
+      return null;
     }
 
     if (typeof scheduleRefresh !== 'function') {
@@ -193,7 +194,7 @@ export function performReactRefresh(): boolean {
           'called before the global DevTools hook was set up, or after the ' +
           'renderer has already initialized. Please file an issue with a reproducing case.',
       );
-      return false;
+      return null;
     }
     const scheduleRefreshForRoot = scheduleRefresh;
 
@@ -217,7 +218,7 @@ export function performReactRefresh(): boolean {
     if (didError) {
       throw firstError;
     }
-    return true;
+    return update;
   } else {
     throw new Error(
       'Unexpected call to React Refresh in a production environment.',

packages/react-refresh/src/__tests__/ReactFresh-test.js

@@ -3266,4 +3266,35 @@ describe('ReactFresh', () => {
       )(global, React, ReactFreshRuntime, expect, createReactClass);
     }
   });
+
+  it('reports updated and remounted families to the caller', () => {
+    if (__DEV__) {
+      const HelloV1 = () => {
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      };
+      $RefreshReg$(HelloV1, 'Hello');
+
+      const HelloV2 = () => {
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      };
+      $RefreshReg$(HelloV2, 'Hello');
+
+      const update = ReactFreshRuntime.performReactRefresh();
+      expect(update.updatedFamilies.size).toBe(1);
+      expect(update.staleFamilies.size).toBe(0);
+      const family = update.updatedFamilies.values().next().value;
+      expect(family.current.name).toBe('HelloV2');
+      // For example, we can use this to print a log of what was updated.
+    }
+  });
 });

packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js

@@ -82,13 +82,13 @@ describe('ReactFreshIntegration', () => {
         ReactDOM.render(<Component />, container);
       });
       // Module initialization shouldn't be counted as a hot update.
-      expect(ReactFreshRuntime.performReactRefresh()).toBe(false);
+      expect(ReactFreshRuntime.performReactRefresh()).toBe(null);
     }
 
     function patch(source) {
       execute(source);
       act(() => {
-        expect(ReactFreshRuntime.performReactRefresh()).toBe(true);
+        expect(ReactFreshRuntime.performReactRefresh()).not.toBe(null);
       });
       expect(ReactFreshRuntime._getMountedRootCount()).toBe(1);
     }