Merge pull request #115 from OBe95/fix/event-callback-observables-order

Reverse EventCallback state$ and inputs$ order

Author: zry656565

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 (
@@ -202,8 +202,8 @@ type EventCallback<EventValue, State, Inputs> = Inputs extends void
   ? (eventSource$: Observable<EventValue>, state$: Observable<State>) => Observable<State>
   : (
       eventSource$: Observable<EventValue>,
-      inputs$: Observable<RestrictArray<Inputs>>,
       state$: Observable<State>,
+      inputs$: Observable<RestrictArray<Inputs>>,
     ) => Observable<State>
 
 declare function useEventCallback<EventValue, State = void>(
@@ -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$),

playground/index.tsx

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

src/__test__/use-event-callback.spec.tsx

@@ -134,8 +134,8 @@ describe('useEventCallback specs', () => {
     const timeToDelay = 200
     const factory = (
       event$: Observable<React.MouseEvent<HTMLButtonElement>>,
-      inputs$: Observable<number[]>,
       _state$: Observable<number>,
+      inputs$: Observable<number[]>,
     ): Observable<number> =>
       event$.pipe(
         combineLatest(inputs$),

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-event-callback.ts

@@ -19,8 +19,8 @@ export type EventCallback<EventValue, State, Inputs> = Not<
   Inputs extends void ? true : false,
   (
     eventSource$: Observable<EventValue>,
-    inputs$: Observable<RestrictArray<Inputs>>,
     state$: Observable<State>,
+    inputs$: Observable<RestrictArray<Inputs>>,
   ) => Observable<State>,
   (eventSource$: Observable<EventValue>, state$: Observable<State>) => Observable<State>
 >
@@ -67,7 +67,7 @@ export function useEventCallback<EventValue, State = void, Inputs = void>(
     if (!inputs) {
       value$ = (callback as EventCallback<EventValue, State, void>)(event$, state$ as Observable<State>)
     } else {
-      value$ = (callback as any)(event$, inputs$ as Observable<Inputs>, state$ as Observable<State>)
+      value$ = (callback as any)(event$, state$ as Observable<State>, inputs$ as Observable<Inputs>)
     }
     const subscription = value$.subscribe((value) => {
       state$.next(value)

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>
     }