Merge pull request cerebral#179 from cerebral/reactImprovements

React improvements

Author: christianalfoni

packages/node_modules/overmind-react/src/index.test.tsx

@@ -134,4 +134,55 @@ describe('React', () => {
     expect(ConnectedFoo.name).toBe('ConnectFooComponent')
     expect(ConnectedBar.name).toBe('ConnectBarComponent')
   })
+
+  test('should allow using shouldComponentUpdate', () => {
+    let renderCount = 0
+
+    const doThis: Action = ({ state }) => {
+      state.foo = 'bar2'
+    }
+    const config = {
+      state: {
+        foo: 'bar',
+      },
+      actions: {
+        doThis,
+      },
+    }
+
+    type IConfig = {
+      state: {
+        foo: typeof config.state.foo
+      }
+      actions: {
+        doThis: typeof doThis
+      }
+    }
+
+    const app = new Overmind(config)
+
+    type Action<Input = void> = TAction<IConfig, Input>
+
+    const connect = createConnect(app)
+
+    class FooComponent extends React.Component<TConnect<typeof config>> {
+      shouldComponentUpdate(nextProps) {
+        return this.props.overmind !== nextProps.overmind
+      }
+      render() {
+        renderCount++
+        return <h1>{this.props.overmind.state.foo}</h1>
+      }
+    }
+
+    const ConnectedFoo = connect(FooComponent)
+
+    const tree = renderer.create(<ConnectedFoo />).toJSON()
+
+    expect(renderCount).toBe(1)
+
+    app.actions.doThis()
+
+    expect(renderCount).toBe(2)
+  })
 })

packages/node_modules/overmind-react/src/index.ts

@@ -3,9 +3,9 @@ import {
   // @ts-ignore
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   ClassicComponentClass,
+  Component,
   ComponentClass,
   createElement,
-  PureComponent,
   StatelessComponent,
   // @ts-ignore
   useEffect,
@@ -15,6 +15,8 @@ import {
 } from 'react'
 import { IMutation } from 'proxy-state-tree'
 
+const IS_PRODUCTION = process.env.NODE_ENV === 'production'
+
 export type IReactComponent<P = any> =
   | StatelessComponent<P>
   | ComponentClass<P>
@@ -66,48 +68,62 @@ export const createHook = <A extends Overmind<Configuration>>(
     const [tree, updateComponent] = useState<any>(() =>
       (overmind as any).proxyStateTree.getTrackStateTree()
     )
-    const [debugging] = useState<any>(() => ({
-      isFirstRender: true,
-      currentFlushId: 0,
-      componentInstanceId: currentComponentInstanceId++,
-    }))
-
-    tree.track((mutations, paths, flushId) => {
-      debugging.currentFlushId = flushId
-      updateComponent((state) => state)
-    })
-
-    useLayoutEffect(() => {
-      if (debugging.isFirstRender) {
-        overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
-          componentId: component.__componentId,
-          componentInstanceId: debugging.componentInstanceId,
-          name,
-          paths: Array.from(tree.pathDependencies) as any,
-        })
-        debugging.isFirstRender = false
-      } else {
-        overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
-          componentId: component.__componentId,
-          componentInstanceId: debugging.componentInstanceId,
-          name,
-          flushId: debugging.currentFlushId,
-          paths: Array.from(tree.pathDependencies as Set<string>),
-        })
-      }
-    })
-
-    useEffect(
-      () => () => {
-        ;(overmind as any).proxyStateTree.disposeTree(tree)
-        overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
-          componentId: component.__componentId,
-          componentInstanceId: debugging.componentInstanceId,
-          name,
-        })
-      },
-      []
-    )
+
+    if (IS_PRODUCTION) {
+      tree.track(() => {
+        updateComponent((state) => state)
+      })
+
+      useEffect(
+        () => () => {
+          ;(overmind as any).proxyStateTree.disposeTree(tree)
+        },
+        []
+      )
+    } else {
+      const [debugging] = useState<any>(() => ({
+        isFirstRender: true,
+        currentFlushId: 0,
+        componentInstanceId: currentComponentInstanceId++,
+      }))
+
+      tree.track((mutations, paths, flushId) => {
+        debugging.currentFlushId = flushId
+        updateComponent((state) => state)
+      })
+
+      useLayoutEffect(() => {
+        if (debugging.isFirstRender) {
+          overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
+            componentId: component.__componentId,
+            componentInstanceId: debugging.componentInstanceId,
+            name,
+            paths: Array.from(tree.pathDependencies) as any,
+          })
+          debugging.isFirstRender = false
+        } else {
+          overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+            componentId: component.__componentId,
+            componentInstanceId: debugging.componentInstanceId,
+            name,
+            flushId: debugging.currentFlushId,
+            paths: Array.from(tree.pathDependencies as Set<string>),
+          })
+        }
+      })
+
+      useEffect(
+        () => () => {
+          ;(overmind as any).proxyStateTree.disposeTree(tree)
+          overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
+            componentId: component.__componentId,
+            componentInstanceId: debugging.componentInstanceId,
+            name,
+          })
+        },
+        []
+      )
+    }
 
     return {
       state: tree.state,
@@ -144,72 +160,137 @@ export const createConnect = <A extends Overmind<Configuration>>(
       }
     }
 
-    class HOC extends PureComponent {
-      tree = (overmind as any).proxyStateTree.getTrackStateTree()
-      componentInstanceId = componentInstanceId++
-      currentFlushId = 0
-      componentDidMount() {
-        overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
-          componentId: populatedComponent.__componentId,
-          componentInstanceId: this.componentInstanceId,
-          name,
-          paths: Array.from(this.tree.pathDependencies) as any,
-        })
-      }
-      componentDidUpdate() {
-        overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
-          componentId: populatedComponent.__componentId,
-          componentInstanceId: this.componentInstanceId,
-          name,
-          flushId: this.currentFlushId,
-          paths: Array.from(this.tree.pathDependencies as Set<string>),
-        })
-      }
-      componentWillUnmount() {
-        ;(overmind as any).proxyStateTree.disposeTree(this.tree)
-        overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
-          componentId: populatedComponent.__componentId,
-          componentInstanceId: this.componentInstanceId,
-          name,
-        })
-      }
-      onUpdate = (mutatons, paths, flushId) => {
-        this.currentFlushId = flushId
-        this.forceUpdate()
-      }
-      render() {
-        if (isClassComponent) {
+    if (IS_PRODUCTION) {
+      class HOC extends Component {
+        tree = (overmind as any).proxyStateTree.getTrackStateTree()
+        state: {
+          overmind: any
+        }
+        constructor(props) {
+          super(props)
+          this.state = {
+            overmind: {
+              state: this.tree.state,
+              actions: overmind.actions,
+              addMutationListener: overmind.addMutationListener,
+              onUpdate: this.onUpdate,
+              tree: this.tree,
+            },
+          }
+        }
+        componentWillUnmount() {
+          ;(overmind as any).proxyStateTree.disposeTree(this.tree)
+        }
+        onUpdate = () => {
+          this.setState({
+            overmind: {
+              state: this.tree.state,
+              actions: overmind.actions,
+              addMutationListener: overmind.addMutationListener,
+              onUpdate: this.onUpdate,
+              tree: this.tree,
+            },
+          })
+        }
+        render() {
+          if (isClassComponent) {
+            return createElement(component, {
+              ...this.props,
+              overmind: this.state.overmind,
+            } as any)
+          }
+
+          this.tree.track(this.onUpdate)
+
           return createElement(component, {
             ...this.props,
+            overmind: this.state.overmind,
+          } as any)
+        }
+      }
+
+      return HOC as any
+    } else {
+      class HOC extends Component {
+        tree = (overmind as any).proxyStateTree.getTrackStateTree()
+        componentInstanceId = componentInstanceId++
+        currentFlushId = 0
+        state: {
+          overmind: any
+        }
+        constructor(props) {
+          super(props)
+          this.state = {
             overmind: {
               state: this.tree.state,
               actions: overmind.actions,
               addMutationListener: overmind.addMutationListener,
               onUpdate: this.onUpdate,
               tree: this.tree,
             },
-          } as any)
+          }
+        }
+        componentDidMount() {
+          overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
+            componentId: populatedComponent.__componentId,
+            componentInstanceId: this.componentInstanceId,
+            name,
+            paths: Array.from(this.tree.pathDependencies) as any,
+          })
+        }
+        componentDidUpdate() {
+          overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+            componentId: populatedComponent.__componentId,
+            componentInstanceId: this.componentInstanceId,
+            name,
+            flushId: this.currentFlushId,
+            paths: Array.from(this.tree.pathDependencies as Set<string>),
+          })
+        }
+        componentWillUnmount() {
+          ;(overmind as any).proxyStateTree.disposeTree(this.tree)
+          overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
+            componentId: populatedComponent.__componentId,
+            componentInstanceId: this.componentInstanceId,
+            name,
+          })
         }
+        onUpdate = (mutatons, paths, flushId) => {
+          this.currentFlushId = flushId
+          this.setState({
+            overmind: {
+              state: this.tree.state,
+              actions: overmind.actions,
+              addMutationListener: overmind.addMutationListener,
+              onUpdate: this.onUpdate,
+              tree: this.tree,
+            },
+          })
+        }
+        render() {
+          if (isClassComponent) {
+            return createElement(component, {
+              ...this.props,
+              overmind: this.state.overmind,
+            } as any)
+          }
 
-        this.tree.track(this.onUpdate)
+          this.tree.track(this.onUpdate)
 
-        return createElement(component, {
-          ...this.props,
-          overmind: {
-            state: this.tree.state,
-            actions: overmind.actions,
-            addMutationListener: overmind.addMutationListener,
-          },
-        } as any)
+          return createElement(component, {
+            ...this.props,
+            overmind: this.state.overmind,
+          } as any)
+        }
       }
-    }
 
-    Object.defineProperties(HOC, {
-      name: {
-        value: 'Connect' + (component.displayName || component.name || ''),
-      },
-    })
+      Object.defineProperties(HOC, {
+        name: {
+          value: 'Connect' + (component.displayName || component.name || ''),
+        },
+      })
 
-    return HOC as any
+      return HOC as any
+    }
   }
 }