fix(overmind-react): forward ref to connected component

Author: veloek

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

@@ -41,3 +41,9 @@ exports[`React should connect state and actions to stateless components 1`] = `
   bar
 </h1>
 `;
+
+exports[`React should forward ref 1`] = `
+<h1>
+  bar
+</h1>
+`;

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

@@ -398,4 +398,33 @@ describe('React', () => {
         .toJSON()
     }).toThrow(Error)
   })
+  test('should forward ref', () => {
+    const app = new Overmind({})
+
+    const connect = createConnect<{}>()
+
+    const expected = "bar"
+
+    class ForwardComponent extends React.Component<IConnect<{}>> {
+      foo = expected
+      render() {
+        return <h1>{this.foo}</h1>
+      }
+    }
+
+    const ConnectedFoo = connect(ForwardComponent)
+
+    const ref = React.createRef<ForwardComponent>();
+
+    const tree = renderer
+      .create(
+        <Provider value={app}>
+          <ConnectedFoo ref={ref} />
+        </Provider>
+      )
+      .toJSON()
+
+    expect(ref.current?.foo).toBe(expected)
+    expect(tree).toMatchSnapshot()
+  })
 })

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

@@ -84,7 +84,7 @@ function useForceRerender() {
   }, [])
 
   return {
-    flushId, 
+    flushId,
     forceRerender
   }
 }
@@ -211,7 +211,6 @@ const useState =  <Config extends IConfiguration>(): Overmind<Config>['state'] =
       }
     })
   }
-  
 
   return trackingRef.current.tree.state
 }
@@ -222,7 +221,7 @@ const useActions =  <Config extends IConfiguration>(): Overmind<Config>['actions
   if (!(overmind as any).mode) {
     throwMissingContextError()
   }
-  
+
   return overmind.actions
 }
 
@@ -232,7 +231,7 @@ const useEffects =  <Config extends IConfiguration>(): Overmind<Config>['effects
   if (!(overmind as any).mode) {
     throwMissingContextError()
   }
-  
+
   return overmind.effects
 }
 
@@ -242,7 +241,7 @@ const useReaction =  <Config extends IConfiguration>(): Overmind<Config>['reacti
   if (!(overmind as any).mode) {
     throwMissingContextError()
   }
-  
+
   return overmind.reaction
 }
 
@@ -285,23 +284,23 @@ export const createHook: <Config extends IConfiguration>() => () => {
   }
 }
 
-export const createConnect: <ThisConfig extends IConfiguration>() => <Props>(component: IReactComponent<
-  Props & {
+export const createConnect: <ThisConfig extends IConfiguration>() =>
+  <Props, TComponent extends IReactComponent<Props & {
     overmind: {
       state: Overmind<ThisConfig>['state']
       actions: Overmind<ThisConfig>['actions']
       reaction: Overmind<ThisConfig>['reaction']
     }
   }
->) => IReactComponent<
+>>(component: TComponent) => IReactComponent<
   Omit<
-    Props & IConnect<Overmind<ThisConfig>>,
+    react.ComponentPropsWithRef<TComponent> & IConnect<Overmind<ThisConfig>>,
     keyof IConnect<Overmind<ThisConfig>>
   >
->  = () => {
+> = <Props, TComponent extends IReactComponent>() => {
   return (
     component
-  )=> {
+  ) => {
     let componentInstanceId = 0
     const name = component.displayName || component.name || 'Anonymous';
     const populatedComponent = component as any
@@ -327,7 +326,7 @@ export const createConnect: <ThisConfig extends IConfiguration>() => <Props>(com
     }
 
     if (IS_PRODUCTION) {
-      class HOC extends react.Component {
+      class HOC extends react.Component<{innerRef: react.Ref<TComponent>}> {
         tree: any
         overmind: any
         state: {
@@ -380,20 +379,27 @@ export const createConnect: <ThisConfig extends IConfiguration>() => <Props>(com
           if (isClassComponent) {
             return react.createElement(component, {
               ...this.props,
+              ref: this.props.innerRef,
               overmind: this.state.overmind,
             } as any)
           }
 
           return react.createElement(this.wrappedComponent, {
             ...this.props,
+            ref: this.props.innerRef,
             overmind: this.state.overmind,
           } as any)
         }
       }
 
-      return HOC as any
+      const refForwarder = react.forwardRef<TComponent, Props>((props, ref) => react.createElement(HOC, {
+        ...props,
+        innerRef: ref
+      }))
+
+      return refForwarder
     } else {
-      class HOC extends react.Component {
+      class HOC extends react.Component<{innerRef: react.Ref<TComponent>}> {
         tree: any
         overmind: any
         componentInstanceId = componentInstanceId++
@@ -477,23 +483,30 @@ export const createConnect: <ThisConfig extends IConfiguration>() => <Props>(com
           if (isClassComponent) {
             return react.createElement(component, {
               ...this.props,
+              ref: this.props.innerRef,
               overmind: this.state.overmind,
             } as any)
           }
           return react.createElement(this.wrappedComponent, {
             ...this.props,
+            ref: this.props.innerRef,
             overmind: this.state.overmind,
           } as any)
         }
       }
 
-      Object.defineProperties(HOC, {
+      const refForwarder = react.forwardRef<TComponent, Props>((props, ref) => react.createElement(HOC, {
+        ...props,
+        innerRef: ref
+      }))
+
+      Object.defineProperties(refForwarder, {
         name: {
           value: 'Connect' + name,
         },
       })
 
-      return HOC as any
+      return refForwarder
     }
   }
 }