import React from 'react'
import { withEffects } from 'refract-rxjs'
import { combineLatest } from 'rxjs'
import { scan, startWith, map } from 'rxjs/operators'
const { Provider, Consumer: CounterStateConsumer } = React.createContext({})
const aperture = (component, initialProps) => {
const children$ = component.observe('children')
const [countEvents$, countUp] = component.useEvent('count')
const context$ = countEvents$.pipe(
count: initialProps.initialCount
return combineLatest(context$, children$).pipe(
map(([context, children]) => (
<Provider value={context}>{children}</Provider>
const CounterStateProvider = withEffects(aperture)()
export { CounterStateProvider, CounterStateConsumer }