diff --git a/README.md b/README.md index 80bad0ab..ce614bae 100644 --- a/README.md +++ b/README.md @@ -80,7 +80,7 @@ function App() { type RestrictArray = T extends any[] ? T : [] type InputFactory = Inputs extends undefined ? (state$: Observable) => Observable - : (inputs$: Observable>, state$: Observable) => Observable + : (state$: Observable, inputs$: Observable>) => Observable declare function useObservable(inputFactory: InputFactory): State | null declare function useObservable(inputFactory: InputFactory, initialState: State): State @@ -140,7 +140,7 @@ import { of } from 'rxjs' import { map } from 'rxjs/operators' function App(props: { foo: number }) { - const value = useObservable((inputs$) => inputs$.pipe( + const value = useObservable((_, inputs$) => inputs$.pipe( map(([val]) => val + 1), ), 200, [props.foo]) return ( @@ -202,8 +202,8 @@ type EventCallback = Inputs extends void ? (eventSource$: Observable, state$: Observable) => Observable : ( eventSource$: Observable, - inputs$: Observable>, state$: Observable, + inputs$: Observable>, ) => Observable declare function useEventCallback( @@ -335,7 +335,7 @@ import "./styles.css"; function App() { const [count, setCount] = useState(0); const [clickCallback, [description, x, y, prevDesc]] = useEventCallback( - (event$, inputs$, state$) => + (event$, state$, inputs$) => event$.pipe( map(event => [event.target.innerHTML, event.clientX, event.clientY]), combineLatest(inputs$), diff --git a/playground/index.tsx b/playground/index.tsx index e9a31d71..81ed4a51 100644 --- a/playground/index.tsx +++ b/playground/index.tsx @@ -14,8 +14,8 @@ const mockBackendRequest = (event$: Observable function IntervalValue(props: { interval: number }) { const [clickCallback, value] = useEventCallback(mockBackendRequest, 0, []) - const intervalValue = useObservable( - (inputs$, _) => + const intervalValue = useObservable( + (_, inputs$) => inputs$.pipe( switchMap(([intervalTime]) => interval(intervalTime)), scan((acc) => acc + 1, 0), diff --git a/src/__test__/use-event-callback.spec.tsx b/src/__test__/use-event-callback.spec.tsx index de2926f0..79a2774f 100644 --- a/src/__test__/use-event-callback.spec.tsx +++ b/src/__test__/use-event-callback.spec.tsx @@ -134,8 +134,8 @@ describe('useEventCallback specs', () => { const timeToDelay = 200 const factory = ( event$: Observable>, - inputs$: Observable, _state$: Observable, + inputs$: Observable, ): Observable => event$.pipe( combineLatest(inputs$), diff --git a/src/__test__/use-observable.spec.tsx b/src/__test__/use-observable.spec.tsx index 78973589..90e863f6 100644 --- a/src/__test__/use-observable.spec.tsx +++ b/src/__test__/use-observable.spec.tsx @@ -121,10 +121,11 @@ describe('useObservable specs', () => { const spy = Sinon.spy() const timeToDelay = 200 function Fixture(props: { foo: number; bar: string; baz: any }) { - const value = useObservable((inputs$: Observable<[number, any] | null>) => inputs$.pipe(tap(spy)), null, [ - props.foo, - props.baz, - ] as any) + const value = useObservable( + (_: Observable, inputs$: Observable<[number, any] | null>) => inputs$.pipe(tap(spy)), + null, + [props.foo, props.baz] as any, + ) return ( <>

{value && value[0]}

diff --git a/src/use-event-callback.ts b/src/use-event-callback.ts index ae380410..4959eb7d 100644 --- a/src/use-event-callback.ts +++ b/src/use-event-callback.ts @@ -19,8 +19,8 @@ export type EventCallback = Not< Inputs extends void ? true : false, ( eventSource$: Observable, - inputs$: Observable>, state$: Observable, + inputs$: Observable>, ) => Observable, (eventSource$: Observable, state$: Observable) => Observable > @@ -67,7 +67,7 @@ export function useEventCallback( if (!inputs) { value$ = (callback as EventCallback)(event$, state$ as Observable) } else { - value$ = (callback as any)(event$, inputs$ as Observable, state$ as Observable) + value$ = (callback as any)(event$, state$ as Observable, inputs$ as Observable) } const subscription = value$.subscribe((value) => { state$.next(value) diff --git a/src/use-observable.ts b/src/use-observable.ts index 2ce08983..36d672ad 100644 --- a/src/use-observable.ts +++ b/src/use-observable.ts @@ -4,11 +4,18 @@ import useConstant from 'use-constant' import { RestrictArray } from './type' -export type InputFactory = (state$: Observable) => Observable; -export type InputFactoryWithInputs = (inputs$: Observable>, state$: Observable) => Observable; -export function useObservable(inputFactory: InputFactory): State | null; -export function useObservable(inputFactory: InputFactory, initialState: State): State; -export function useObservable(inputFactory: InputFactoryWithInputs, initialState: State, inputs: RestrictArray): State; +export type InputFactory = (state$: Observable) => Observable +export type InputFactoryWithInputs = ( + state$: Observable, + inputs$: Observable>, +) => Observable +export function useObservable(inputFactory: InputFactory): State | null +export function useObservable(inputFactory: InputFactory, initialState: State): State +export function useObservable( + inputFactory: InputFactoryWithInputs, + initialState: State, + inputs: RestrictArray, +): State export function useObservable>( inputFactory: InputFactoryWithInputs, initialState?: State, @@ -27,11 +34,11 @@ export function useObservable>( let output$: BehaviorSubject if (inputs) { output$ = (inputFactory as ( - inputs$: Observable | undefined>, state$: Observable, - ) => Observable)(inputs$, state$) as BehaviorSubject + inputs$: Observable | undefined>, + ) => Observable)(state$, inputs$) as BehaviorSubject } else { - output$ = (inputFactory as unknown as (state$: Observable) => Observable)( + output$ = ((inputFactory as unknown) as (state$: Observable) => Observable)( state$, ) as BehaviorSubject }