Reverse state$ and inputs$ order in useObservable

Author: OBe95

README.md

@@ -80,7 +80,7 @@ function App() {
 type RestrictArray<T> = T extends any[] ? T : []
 type InputFactory<State, Inputs = undefined> = Inputs extends undefined
   ? (state$: Observable<State>) => Observable<State>
-  : (inputs$: Observable<RestrictArray<Inputs>>, state$: Observable<State>) => Observable<State>
+  : (state$: Observable<State>, inputs$: Observable<RestrictArray<Inputs>>) => Observable<State>
 
 declare function useObservable<State>(inputFactory: InputFactory<State>): State | null
 declare function useObservable<State>(inputFactory: InputFactory<State>, 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 (

playground/index.tsx

@@ -15,7 +15,7 @@ const mockBackendRequest = (event$: Observable<React.MouseEvent<HTMLHeadElement>
 function IntervalValue(props: { interval: number }) {
   const [clickCallback, value] = useEventCallback(mockBackendRequest, 0, [])
   const intervalValue = useObservable<number, number[]>(
-    (inputs$, _) =>
+    (_, inputs$) =>
       inputs$.pipe(
         switchMap(([intervalTime]) => interval(intervalTime)),
         scan((acc) => acc + 1, 0),

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<number | null>, inputs$: Observable<[number, any] | null>) => inputs$.pipe(tap(spy)),
+        null,
+        [props.foo, props.baz] as any,
+      )
       return (
         <>
           <h1>{value && value[0]}</h1>

src/use-observable.ts

@@ -4,11 +4,18 @@ import useConstant from 'use-constant'
 
 import { RestrictArray } from './type'
 
-export type InputFactory<State> = (state$: Observable<State>) => Observable<State>;
-export type InputFactoryWithInputs<State, Inputs> = (inputs$: Observable<RestrictArray<Inputs>>, state$: Observable<State>) => Observable<State>;
-export function useObservable<State>(inputFactory: InputFactory<State>): State | null;
-export function useObservable<State>(inputFactory: InputFactory<State>, initialState: State): State;
-export function useObservable<State, Inputs>(inputFactory: InputFactoryWithInputs<State, Inputs>, initialState: State, inputs: RestrictArray<Inputs>): State;
+export type InputFactory<State> = (state$: Observable<State>) => Observable<State>
+export type InputFactoryWithInputs<State, Inputs> = (
+  state$: Observable<State>,
+  inputs$: Observable<RestrictArray<Inputs>>,
+) => Observable<State>
+export function useObservable<State>(inputFactory: InputFactory<State>): State | null
+export function useObservable<State>(inputFactory: InputFactory<State>, initialState: State): State
+export function useObservable<State, Inputs>(
+  inputFactory: InputFactoryWithInputs<State, Inputs>,
+  initialState: State,
+  inputs: RestrictArray<Inputs>,
+): State
 export function useObservable<State, Inputs extends ReadonlyArray<any>>(
   inputFactory: InputFactoryWithInputs<State, Inputs>,
   initialState?: State,
@@ -27,11 +34,11 @@ export function useObservable<State, Inputs extends ReadonlyArray<any>>(
     let output$: BehaviorSubject<State>
     if (inputs) {
       output$ = (inputFactory as (
-        inputs$: Observable<RestrictArray<Inputs> | undefined>,
         state$: Observable<State | undefined>,
-      ) => Observable<State>)(inputs$, state$) as BehaviorSubject<State>
+        inputs$: Observable<RestrictArray<Inputs> | undefined>,
+      ) => Observable<State>)(state$, inputs$) as BehaviorSubject<State>
     } else {
-      output$ = (inputFactory as unknown as (state$: Observable<State | undefined>) => Observable<State>)(
+      output$ = ((inputFactory as unknown) as (state$: Observable<State | undefined>) => Observable<State>)(
         state$,
       ) as BehaviorSubject<State>
     }