Support mapping data to props and replacing props

base/__tests__/inferno/callbag/index.tsx

@@ -2,9 +2,16 @@ import { createElement } from 'inferno-create-element'
 import {
  withEffects,
  Handler,
- ObservableComponent
+ ObservableComponent,
+ PropEffect
 } from '../../../../packages/refract-inferno-callbag/src'
-import aperture, { Effect, Props } from '../../react/callbag/aperture'
+import {
+ aperture,
+ toPropsAperture,
+ asPropsAperture,
+ Effect,
+ Props
+} from '../../react/callbag/aperture'
 import { mount } from 'enzyme'
 
 describe('refract-inferno-callbag', () => {
@@ -80,4 +87,53 @@ describe('refract-inferno-callbag', () => {
  type: 'Stop'
  })
  })
+
+ it('should map props to wrapped component', () => {
+ interface Props {
+ prop: string
+ }
+ interface ChildProps {
+ newProp: string
+ }
+ const BaseComponent = jest.fn().mockReturnValue(<div />)
+ const hander = () => () => void 0
+ const WithEffects = withEffects<Props, PropEffect, ChildProps>(hander)(
+ asPropsAperture
+ )(BaseComponent)
+
+ mount(
+ // @ts-ignore
+ <WithEffects prop="hello" />
+ )
+
+ const props = BaseComponent.mock.calls[0][0]
+
+ expect(props.prop).toBeUndefined()
+ expect(props.newProp).toBe('hello world')
+ })
+
+ it('should add props to wrapped component', () => {
+ interface Props {
+ prop: string
+ }
+ interface ChildProps {
+ prop: string
+ newProp: string
+ }
+ const BaseComponent = jest.fn().mockReturnValue(<div />)
+ const hander = () => () => void 0
+ const WithEffects = withEffects<Props, PropEffect, ChildProps>(hander)(
+ toPropsAperture
+ )(BaseComponent)
+
+ mount(
+ // @ts-ignore
+ <WithEffects prop="hello" />
+ )
+
+ const props = BaseComponent.mock.calls[0][0]
+
+ expect(props.prop).toBe('hello')
+ expect(props.newProp).toBe('hello world')
+ })
 })

base/__tests__/inferno/most/index.tsx

@@ -2,9 +2,16 @@ import { createElement } from 'inferno-create-element'
 import {
  withEffects,
  Handler,
- ObservableComponent
+ ObservableComponent,
+ PropEffect
 } from '../../../../packages/refract-inferno-most/src'
-import aperture, { Effect, Props } from '../../react/most/aperture'
+import {
+ aperture,
+ toPropsAperture,
+ asPropsAperture,
+ Effect,
+ Props
+} from '../../react/most/aperture'
 import { mount } from 'enzyme'
 
 describe('refract-inferno-most', () => {
@@ -80,4 +87,53 @@ describe('refract-inferno-most', () => {
  type: 'Stop'
  })
  })
+
+ it('should map props to wrapped component', () => {
+ interface Props {
+ prop: string
+ }
+ interface ChildProps {
+ newProp: string
+ }
+ const BaseComponent = jest.fn().mockReturnValue(<div />)
+ const hander = () => () => void 0
+ const WithEffects = withEffects<Props, PropEffect, ChildProps>(hander)(
+ asPropsAperture
+ )(BaseComponent)
+
+ mount(
+ // @ts-ignore
+ <WithEffects prop="hello" />
+ )
+
+ const props = BaseComponent.mock.calls[0][0]
+
+ expect(props.prop).toBeUndefined()
+ expect(props.newProp).toBe('hello world')
+ })
+
+ it('should add props to wrapped component', () => {
+ interface Props {
+ prop: string
+ }
+ interface ChildProps {
+ prop: string
+ newProp: string
+ }
+ const BaseComponent = jest.fn().mockReturnValue(<div />)
+ const hander = () => () => void 0
+ const WithEffects = withEffects<Props, PropEffect, ChildProps>(hander)(
+ toPropsAperture
+ )(BaseComponent)
+
+ mount(
+ // @ts-ignore
+ <WithEffects prop="hello" />
+ )
+
+ const props = BaseComponent.mock.calls[0][0]
+
+ expect(props.prop).toBe('hello')
+ expect(props.newProp).toBe('hello world')
+ })
 })

base/__tests__/inferno/rxjs/index.tsx

@@ -2,9 +2,16 @@ import { createElement } from 'inferno-create-element'
 import {
  withEffects,
  Handler,
- ObservableComponent
+ ObservableComponent,
+ PropEffect
 } from '../../../../packages/refract-inferno-rxjs/src'
-import aperture, { Effect, Props } from '../../react/rxjs/aperture'
+import {
+ aperture,
+ toPropsAperture,
+ asPropsAperture,
+ Effect,
+ Props
+} from '../../react/rxjs/aperture'
 import { mount } from 'enzyme'
 
 describe('refract-inferno-rxjs', () => {
@@ -80,4 +87,53 @@ describe('refract-inferno-rxjs', () => {
  type: 'Stop'
  })
  })
+
+ it('should map props to wrapped component', () => {
+ interface Props {
+ prop: string
+ }
+ interface ChildProps {
+ newProp: string
+ }
+ const BaseComponent = jest.fn().mockReturnValue(<div />)
+ const hander = () => () => void 0
+ const WithEffects = withEffects<Props, PropEffect, ChildProps>(hander)(
+ asPropsAperture
+ )(BaseComponent)
+
+ mount(
+ // @ts-ignore
+ <WithEffects prop="hello" />
+ )
+
+ const props = BaseComponent.mock.calls[0][0]
+
+ expect(props.prop).toBeUndefined()
+ expect(props.newProp).toBe('hello world')
+ })
+
+ it('should add props to wrapped component', () => {
+ interface Props {
+ prop: string
+ }
+ interface ChildProps {
+ prop: string
+ newProp: string
+ }
+ const BaseComponent = jest.fn().mockReturnValue(<div />)
+ const hander = () => () => void 0
+ const WithEffects = withEffects<Props, PropEffect, ChildProps>(hander)(
+ toPropsAperture
+ )(BaseComponent)
+
+ mount(
+ // @ts-ignore
+ <WithEffects prop="hello" />
+ )
+
+ const props = BaseComponent.mock.calls[0][0]
+
+ expect(props.prop).toBe('hello')
+ expect(props.newProp).toBe('hello world')
+ })
 })

base/__tests__/inferno/xstream/index.tsx

@@ -2,9 +2,16 @@ import { createElement } from 'inferno-create-element'
 import {
  withEffects,
  Handler,
- ObservableComponent
+ ObservableComponent,
+ PropEffect
 } from '../../../../packages/refract-inferno-xstream/src'
-import aperture, { Effect, Props } from '../../react/xstream/aperture'
+import {
+ aperture,
+ toPropsAperture,
+ asPropsAperture,
+ Effect,
+ Props
+} from '../../react/xstream/aperture'
 import { mount } from 'enzyme'
 
 describe('refract-inferno-xstream', () => {
@@ -80,4 +87,53 @@ describe('refract-inferno-xstream', () => {
  type: 'Stop'
  })
  })
+
+ it('should map props to wrapped component', () => {
+ interface Props {
+ prop: string
+ }
+ interface ChildProps {
+ newProp: string
+ }
+ const BaseComponent = jest.fn().mockReturnValue(<div />)
+ const hander = () => () => void 0
+ const WithEffects = withEffects<Props, PropEffect, ChildProps>(hander)(
+ asPropsAperture
+ )(BaseComponent)
+
+ mount(
+ // @ts-ignore
+ <WithEffects prop="hello" />
+ )
+
+ const props = BaseComponent.mock.calls[0][0]
+
+ expect(props.prop).toBeUndefined()
+ expect(props.newProp).toBe('hello world')
+ })
+
+ it('should add props to wrapped component', () => {
+ interface Props {
+ prop: string
+ }
+ interface ChildProps {
+ prop: string
+ newProp: string
+ }
+ const BaseComponent = jest.fn().mockReturnValue(<div />)
+ const hander = () => () => void 0
+ const WithEffects = withEffects<Props, PropEffect, ChildProps>(hander)(
+ toPropsAperture
+ )(BaseComponent)
+
+ mount(
+ // @ts-ignore
+ <WithEffects prop="hello" />
+ )
+
+ const props = BaseComponent.mock.calls[0][0]
+
+ expect(props.prop).toBe('hello')
+ expect(props.newProp).toBe('hello world')
+ })
 })

base/__tests__/preact/callbag/index.tsx

@@ -4,7 +4,7 @@ import {
  Handler,
  ObservableComponent
 } from '../../../../packages/refract-preact-callbag/src'
-import aperture, { Effect, Props } from '../../react/callbag/aperture'
+import { aperture, Effect, Props } from '../../react/callbag/aperture'
 import { mount } from 'enzyme'
 
 describe('refract-preact-callbag', () => {

base/__tests__/preact/most/index.tsx

@@ -4,7 +4,7 @@ import {
  Handler,
  ObservableComponent
 } from '../../../../packages/refract-preact-most/src'
-import aperture, { Effect, Props } from '../../react/most/aperture'
+import { aperture, Effect, Props } from '../../react/most/aperture'
 import { mount } from 'enzyme'
 
 describe('refract-preact-most', () => {

base/__tests__/preact/rxjs/index.tsx

@@ -4,7 +4,7 @@ import {
  Handler,
  ObservableComponent
 } from '../../../../packages/refract-preact-rxjs/src'
-import aperture, { Effect, Props } from '../../react/rxjs/aperture'
+import { aperture, Effect, Props } from '../../react/rxjs/aperture'
 import { mount } from 'enzyme'
 
 describe('refract-preact-rxjs', () => {

base/__tests__/preact/xstream/index.tsx

@@ -4,7 +4,7 @@ import {
  Handler,
  ObservableComponent
 } from '../../../../packages/refract-preact-xstream/src'
-import aperture, { Effect, Props } from '../../react/xstream/aperture'
+import { aperture, Effect, Props } from '../../react/xstream/aperture'
 import { mount } from 'enzyme'
 
 describe('refract-preact-xstream', () => {

base/__tests__/react/callbag/aperture.ts

@@ -1,6 +1,11 @@
-import { merge, map } from 'callbag-basics'
+import { merge, map, pipe } from 'callbag-basics'
 
-import { Aperture } from '../../../../packages/refract-callbag/src'
+import {
+ Aperture,
+ toProps,
+ asProps,
+ PropEffect
+} from '../../../../packages/refract-callbag/src'
 
 export interface Effect {
  type: string
@@ -12,7 +17,7 @@ export interface Props {
  setValue: (value: number) => void
 }
 
-const aperture: Aperture<Props, Effect> = props => component => {
+export const aperture: Aperture<Props, Effect> = props => component => {
  const value$ = component.observe<number>('value')
  const valueSet$ = component.observe<number>('setValue')
  const mount$ = component.mount
@@ -44,4 +49,33 @@ const aperture: Aperture<Props, Effect> = props => component => {
  )
 }
 
-export default aperture
+export interface SourceProps {
+ prop: string
+}
+interface SinkProps {
+ newProp: string
+}
+
+export const asPropsAperture: Aperture<
+ SourceProps,
+ PropEffect<SinkProps>
+> = () => component =>
+ pipe(
+ component.observe(),
+ map(({ prop }) => ({
+ newProp: `${prop} world`
+ })),
+ map(asProps)
+ )
+
+export const toPropsAperture: Aperture<
+ SourceProps,
+ PropEffect<SinkProps>
+> = () => component =>
+ pipe(
+ component.observe(),
+ map(({ prop }) => ({
+ newProp: `${prop} world`
+ })),
+ map(toProps)
+ )