Merge pull request #1306 from gaearon/12.9

Update Context Provider, fixes #1207

examples/styled-components/src/Counter.js

@@ -7,7 +7,8 @@ const ComponentA = () => {
   const [state] = useState('A');
   return (
     <div>
-      {state}-{value}
+      {state}-{value}-
+      <TimerContext.Consumer>{v => v}</TimerContext.Consumer>
     </div>
   );
 };
@@ -17,7 +18,8 @@ const ComponentB = () => {
   const value = useContext(TimerContext);
   return (
     <div>
-      {state}-{value}
+      {state}-{value}-
+      <TimerContext.Consumer>{v => v}</TimerContext.Consumer>
     </div>
   );
 };

examples/styled-components/src/Spring.js

@@ -1,14 +1,36 @@
 import { animated, useSpring } from 'react-spring';
 import React, { useCallback, useState } from 'react';
+import Counter from './Counter';
+
+const context = React.createContext('test1');
+
+const Test = () => {
+  const v = React.useContext(context);
+
+  return (
+    <div>
+      --{v}-- ##<Counter />
+    </div>
+  );
+};
 
 export function SpringTest() {
   const [thingDone, toggleThingDone] = useState(false);
   const doTheThing = useCallback(() => toggleThingDone(!thingDone), [thingDone]);
 
   const fader = useSpring({ opacity: thingDone ? 1 : 0 });
 
+  const v = React.useContext(context);
+
   return (
     <React.Fragment>
+      {v}
+      <context.Provider value={24}>
+        <Test />
+      </context.Provider>
+      <context.Provider value="test2">
+        <Test />
+      </context.Provider>
       <animated.h1 style={fader}>You did the thing!</animated.h1>
       <button type="button" onClick={doTheThing}>
         {thingDone ? 'Undo The Thing' : 'Do The Thing'}

src/configuration.js

@@ -23,6 +23,8 @@ const configuration = {
   // Disable "hot-replacement-render"
   disableHotRenderer: false,
 
+  // @private
+  integratedComparator: false,
   // @private
   integratedResolver: false,
 

src/errorReporter.js

@@ -72,7 +72,7 @@ const mapError = ({ error, errorInfo, component }) => (
   <React.Fragment>
     <p style={{ color: 'red' }}>
       {errorHeader(component, errorInfo && errorInfo.componentStack)}{' '}
-      {error.toString ? error.toString() : error.message || 'undefined error'}
+      {error.toString ? error.toString() : (error && error.message) || 'undefined error'}
     </p>
     {errorInfo && errorInfo.componentStack ? (
       <div>

src/reactHotLoader.js

@@ -22,7 +22,7 @@ import logger from './logger';
 
 import { preactAdapter } from './adapters/preact';
 import { updateContext, updateForward, updateLazy, updateMemo } from './reconciler/fiberUpdater';
-import { resolveType } from './reconciler/resolver';
+import { resolveSimpleType, resolveType } from './reconciler/resolver';
 import { hotComponentCompare } from './reconciler/componentComparator';
 
 const forceSimpleSFC = { proxy: { pureSFC: true } };
@@ -133,6 +133,7 @@ const reactHotLoader = {
   },
 
   patch(React, ReactDOM) {
+    let typeResolver = resolveType;
     /* eslint-disable no-console */
     if (ReactDOM && ReactDOM.setHotElementComparator) {
       ReactDOM.setHotElementComparator(hotComponentCompare);
@@ -142,69 +143,81 @@ const reactHotLoader = {
 
       reactHotLoader.IS_REACT_MERGE_ENABLED = true;
       configuration.showReactDomPatchNotification = false;
+      configuration.integratedComparator = true;
 
       if (ReactDOM.setHotTypeResolver) {
         configuration.integratedResolver = true;
+        typeResolver = resolveSimpleType;
         ReactDOM.setHotTypeResolver(resolveType);
       }
     }
 
-    if (!configuration.integratedResolver) {
-      /* eslint-enable */
-      if (!React.createElement.isPatchedByReactHotLoader) {
-        const originalCreateElement = React.createElement;
-        // Trick React into rendering a proxy so that
-        // its state is preserved when the class changes.
-        // This will update the proxy if it's for a known type.
-        React.createElement = (type, ...args) => originalCreateElement(resolveType(type), ...args);
-        React.createElement.isPatchedByReactHotLoader = true;
-      }
+    // PATCH REACT METHODS
 
-      if (!React.cloneElement.isPatchedByReactHotLoader) {
-        const originalCloneElement = React.cloneElement;
-
-        React.cloneElement = (element, ...args) => {
-          const newType = element.type && resolveType(element.type);
-          if (newType && newType !== element.type) {
-            return originalCloneElement(
-              {
-                ...element,
-                type: newType,
-              },
-              ...args,
-            );
-          }
-          return originalCloneElement(element, ...args);
-        };
+    /* eslint-enable */
+    if (!React.createElement.isPatchedByReactHotLoader) {
+      const originalCreateElement = React.createElement;
+      // Trick React into rendering a proxy so that
+      // its state is preserved when the class changes.
+      // This will update the proxy if it's for a known type.
+      React.createElement = (type, ...args) => originalCreateElement(typeResolver(type), ...args);
+      React.createElement.isPatchedByReactHotLoader = true;
+    }
 
-        React.cloneElement.isPatchedByReactHotLoader = true;
-      }
+    if (!React.cloneElement.isPatchedByReactHotLoader) {
+      const originalCloneElement = React.cloneElement;
+
+      React.cloneElement = (element, ...args) => {
+        const newType = element.type && typeResolver(element.type);
+        if (newType && newType !== element.type) {
+          return originalCloneElement(
+            {
+              ...element,
+              type: newType,
+            },
+            ...args,
+          );
+        }
+        return originalCloneElement(element, ...args);
+      };
 
-      if (!React.createFactory.isPatchedByReactHotLoader) {
-        // Patch React.createFactory to use patched createElement
-        // because the original implementation uses the internal,
-        // unpatched ReactElement.createElement
-        React.createFactory = type => {
-          const factory = React.createElement.bind(null, type);
-          factory.type = type;
-          return factory;
-        };
-        React.createFactory.isPatchedByReactHotLoader = true;
-      }
+      React.cloneElement.isPatchedByReactHotLoader = true;
+    }
 
-      if (!React.Children.only.isPatchedByReactHotLoader) {
-        const originalChildrenOnly = React.Children.only;
-        // Use the same trick as React.createElement
-        React.Children.only = children => originalChildrenOnly({ ...children, type: resolveType(children.type) });
-        React.Children.only.isPatchedByReactHotLoader = true;
-      }
+    if (!React.createFactory.isPatchedByReactHotLoader) {
+      // Patch React.createFactory to use patched createElement
+      // because the original implementation uses the internal,
+      // unpatched ReactElement.createElement
+      React.createFactory = type => {
+        const factory = React.createElement.bind(null, type);
+        factory.type = type;
+        return factory;
+      };
+      React.createFactory.isPatchedByReactHotLoader = true;
+    }
+
+    if (!React.Children.only.isPatchedByReactHotLoader) {
+      const originalChildrenOnly = React.Children.only;
+      // Use the same trick as React.createElement
+      React.Children.only = children =>
+        originalChildrenOnly({
+          ...children,
+          type: typeResolver(children.type),
+        });
+      React.Children.only.isPatchedByReactHotLoader = true;
     }
 
+    // PATCH REACT HOOKS
+
     if (React.useEffect && !React.useEffect.isPatchedByReactHotLoader) {
       React.useEffect = hookWrapper(React.useEffect);
       React.useLayoutEffect = hookWrapper(React.useLayoutEffect);
       React.useCallback = hookWrapper(React.useCallback);
       React.useMemo = hookWrapper(React.useMemo);
+
+      // transform context for useContext
+      const { useContext } = React;
+      React.useContext = (context, ...args) => useContext(typeResolver(context), ...args);
     }
 
     // reactHotLoader.reset()

src/reconciler/componentComparator.js

@@ -14,6 +14,7 @@ import { PROXY_KEY, UNWRAP_PROXY } from '../proxy';
 import { resolveType } from './resolver';
 import logger from '../logger';
 import configuration from '../configuration';
+import { updateLazy } from './fiberUpdater';
 
 const getInnerComponentType = component => {
   const unwrapper = component[UNWRAP_PROXY];
@@ -153,10 +154,15 @@ const compareComponents = (oldType, newType, setNewType, baseType) => {
   }
 
   if (isLazyType({ type: oldType })) {
+    updateLazy(oldType, newType);
+    // no need to update
+    // setNewType(newType);
     return defaultResult;
   }
 
   if (isContextType({ type: oldType })) {
+    // update provider
+    setNewType(newType);
     return defaultResult;
   }
 

src/reconciler/fiberUpdater.js

@@ -6,13 +6,9 @@ import { resolveType } from './resolver';
 
 const lazyConstructor = '_ctor';
 
-export const updateLazy = (target, type) => {
-  const ctor = type[lazyConstructor];
-  if (target[lazyConstructor] !== type[lazyConstructor]) {
-    // just execute `import` and RHL.register will do the job
-    ctor();
-  }
+const patchLazyContructor = target => {
   if (!target[lazyConstructor].isPatchedByReactHotLoader) {
+    const ctor = target[lazyConstructor];
     target[lazyConstructor] = () =>
       ctor().then(m => {
         const C = resolveType(m.default);
@@ -39,6 +35,16 @@ export const updateLazy = (target, type) => {
   }
 };
 
+export const updateLazy = (target, type) => {
+  const ctor = type[lazyConstructor];
+  if (target[lazyConstructor] !== type[lazyConstructor]) {
+    // just execute `import` and RHL.register will do the job
+    ctor();
+  }
+  patchLazyContructor(target);
+  patchLazyContructor(type);
+};
+
 export const updateMemo = (target, { type }) => {
   target.type = resolveType(type);
 };

src/reconciler/resolver.js

@@ -11,21 +11,26 @@ import configuration, { internalConfiguration } from '../configuration';
 
 const shouldNotPatchComponent = type => isTypeBlacklisted(type);
 
-export function resolveType(type, options = {}) {
-  // fast return
-  if (!isCompositeComponent(type) || isProxyType(type)) {
-    return type;
-  }
+export function resolveUtility(type) {
+  // all "utility" types are resolved to their __initial__ shapes
+  // that enables to never change reference to them, and gives the ability to maintain React Tree on HMR
 
-  const element = { type };
+  // all operations could be skipped with react-hot-dom enabled
 
-  // fast meta
-  if (typeof element === 'object') {
+  if (typeof type === 'object') {
+    if (configuration.integratedComparator) {
+      return type;
+    }
+    const element = { type };
     if (isLazyType(element) || isMemoType(element) || isForwardType(element) || isContextType(element)) {
       return getProxyByType(type) || type;
     }
   }
 
+  return undefined;
+}
+
+export function resolveComponent(type, options = {}) {
   const existingProxy = getProxyByType(type);
 
   // cold API
@@ -35,10 +40,33 @@ export function resolveType(type, options = {}) {
 
   if (!existingProxy && configuration.onComponentCreate) {
     configuration.onComponentCreate(type, getComponentDisplayName(type));
-    if (shouldNotPatchComponent(type)) return type;
+    if (shouldNotPatchComponent(type)) {
+      return type;
+    }
   }
 
   const proxy = internalConfiguration.disableProxyCreation ? existingProxy : createProxyForType(type, options);
 
-  return proxy ? proxy.get() : type;
+  return proxy ? proxy.get() : undefined;
+}
+
+export function resolveProxy(type) {
+  if (isProxyType(type)) {
+    return type;
+  }
+
+  return undefined;
 }
+
+export function resolveNotComponent(type) {
+  if (!isCompositeComponent(type)) {
+    return type;
+  }
+
+  return undefined;
+}
+
+export const resolveSimpleType = type => resolveProxy(type) || resolveUtility(type) || type;
+
+export const resolveType = (type, options = {}) =>
+  resolveProxy(type) || resolveUtility(type) || resolveNotComponent(type) || resolveComponent(type, options) || type;