feat(hoc): properly expose WrappedComponent type (#7)

src/__tests__/__snapshots__/hoc.spec.tsx.snap

@@ -1,9 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Hoc wrappers should should return wrapped component with proper prop annotation 1`] = `
+<CounterModule
+  title="Hello"
+/>
+`;
+
+exports[`Hoc wrappers should should return wrapped component with proper prop annotation 2`] = `
+<Counter
+  counterService={
+    CounterService {
+      "logger": Logger {},
+      "state": Object {
+        "count": 0,
+      },
+    }
+  }
+  logger={Logger {}}
+/>
+`;
+
 exports[`Hoc wrappers should work with HoC 1`] = `
 <App>
   <main>
-    <WithProvider(CounterModule
+    <WithProvider(CounterModule)
       title="count module"
     >
       <Provider
@@ -137,7 +157,7 @@ exports[`Hoc wrappers should work with HoC 1`] = `
           </div>
         </CounterModule>
       </Provider>
-    </WithProvider(CounterModule>
+    </WithProvider(CounterModule)>
   </main>
 </App>
 `;

src/__tests__/guards.spec.ts

@@ -27,8 +27,8 @@ describe(`guards`, () => {
       expect(isJsLikeObject(undefined)).toBe(false)
       expect(isJsLikeObject(true)).toBe(false)
       expect(isJsLikeObject(noop)).toBe(false)
+      expect(isJsLikeObject(null)).toBe(false)
 
-      expect(isJsLikeObject(null)).toBe(true)
       expect(isJsLikeObject(emptyArr)).toBe(true)
       expect(isJsLikeObject(emptyObj)).toBe(true)
     })

src/__tests__/hoc.spec.tsx

@@ -4,6 +4,7 @@
 import { mount } from 'enzyme'
 import React, { Component } from 'react'
 
+import { ReflectiveInjector } from 'injection-js'
 import { noop } from '../helpers'
 import { withInjectables } from '../with-injectables'
 import { withProvider } from '../with-provider'
@@ -79,4 +80,33 @@ describe('Hoc wrappers', () => {
 
     tree.unmount()
   })
+
+  it(`should should return wrapped component with proper prop annotation`, () => {
+    const injector = ReflectiveInjector.resolveAndCreate([
+      Logger,
+      CounterService,
+    ])
+    const logger: Logger = injector.get(Logger)
+    const counter: CounterService = injector.get(CounterService)
+
+    expect(CounterModuleEnhanced.WrappedComponent).toBe(CounterModule)
+    expect(CounterEnhanced.WrappedComponent).toBe(Counter)
+
+    expect(
+      <CounterModuleEnhanced.WrappedComponent title="Hello" />
+    ).toMatchSnapshot()
+    expect(
+      <CounterEnhanced.WrappedComponent
+        counterService={counter}
+        logger={logger}
+      />
+    ).toMatchSnapshot()
+  })
+
+  it(`should should create proper displayName`, () => {
+    expect(CounterModuleEnhanced.displayName).toBe(
+      'WithProvider(CounterModule)'
+    )
+    expect(CounterEnhanced.displayName).toBe('WithInjectables(Counter)')
+  })
 })

src/guards.ts

@@ -1,7 +1,7 @@
 import { Provider, Type, TypeProvider } from 'injection-js'
 
 export const isJsLikeObject = <T extends object>(value: any): value is T =>
-  typeof value === 'object'
+  value !== null && typeof value === 'object'
 export const isBlank = <T>(
   value: any
 ): value is T extends undefined | null ? T : never => value == null

src/helpers.ts

@@ -6,5 +6,13 @@ export const getComponentDisplayName = <P>(Component: ComponentType<P>) =>
   (Component.constructor && Component.constructor.name) ||
   'Component'
 
+export const createHOCName = <P>(
+  Wrapper: ComponentType<any>,
+  WrappedComponent: ComponentType<P>
+) =>
+  `${getComponentDisplayName(Wrapper)}(${getComponentDisplayName(
+    WrappedComponent
+  )})`
+
 // tslint:disable-next-line:no-empty
 export const noop = () => {}

src/types.ts

@@ -1,4 +1,5 @@
 import { Type } from 'injection-js'
+import { ComponentClass, ComponentType } from 'react'
 
 export type StateCallback<T = {}> = (state: T) => Partial<T>
 export type WrapperProps<
@@ -7,3 +8,9 @@ export type WrapperProps<
 > = Pick<OriginalProps, Exclude<keyof OriginalProps, keyof P>>
 
 export type ProvidersMap<T = any> = { [key: string]: Type<T> }
+
+export type HoCComponentClass<P, O extends ComponentType<any>> = ComponentClass<
+  P
+> & {
+  WrappedComponent: O
+}

src/with-injectables.tsx

@@ -2,7 +2,7 @@ import React, { Component, ComponentType } from 'react'
 
 import { getComponentDisplayName } from './helpers'
 import { Inject } from './inject'
-import { ProvidersMap, WrapperProps } from './types'
+import { HoCComponentClass, ProvidersMap, WrapperProps } from './types'
 
 /**
  * If you need to access injected service instances outside of render, you can use this high order component.
@@ -13,7 +13,7 @@ import { ProvidersMap, WrapperProps } from './types'
 export const withInjectables = <T extends ProvidersMap>(providers: T) => {
   return <OriginalProps extends {}>(
     Cmp: ComponentType<OriginalProps>
-  ): ComponentType<WrapperProps<OriginalProps, T>> => {
+  ): HoCComponentClass<WrapperProps<OriginalProps, T>, typeof Cmp> => {
     class WithInjectables extends Component<WrapperProps<OriginalProps, T>> {
       static displayName = `WithInjectables(${getComponentDisplayName(Cmp)})`
       static readonly WrappedComponent = Cmp

src/with-provider.tsx

@@ -1,9 +1,9 @@
 import { Provider as ProviderConfig } from 'injection-js'
 import React, { Component, ComponentType } from 'react'
 
-import { getComponentDisplayName } from './helpers'
+import { createHOCName } from './helpers'
 import { Provider } from './provider'
-import { WrapperProps } from './types'
+import { HoCComponentClass, WrapperProps } from './types'
 
 type ProvidersSetup = { provide: ProviderConfig[] }
 
@@ -15,9 +15,9 @@ type ProvidersSetup = { provide: ProviderConfig[] }
 export const withProvider = <T extends ProvidersSetup>(provideConfig: T) => {
   return <OriginalProps extends {}>(
     Cmp: ComponentType<OriginalProps>
-  ): ComponentType<WrapperProps<OriginalProps, T>> => {
+  ): HoCComponentClass<WrapperProps<OriginalProps, T>, typeof Cmp> => {
     class WithProvider extends Component<WrapperProps<OriginalProps, T>> {
-      static displayName = `WithProvider(${getComponentDisplayName(Cmp)}`
+      static displayName: string = createHOCName(WithProvider, Cmp)
 
       static readonly WrappedComponent = Cmp