feat(selector): support dependencies (#32)

Author: smmoosavi

README.md

@@ -263,6 +263,20 @@ selector.setValue(6);
 wire.getValue(); // 3
 ```
 
+You can define a dependencies list for dependencies of options.
+
+```ts
+const { n } = props;
+const wire = useWire(null, 4);
+const selector = useSelector(
+  {
+    get: ({ get }) => get(wire) * n,
+    set: ({ set }, value) => set(wire, value / n),
+  },
+  [n],
+);
+```
+
 ### `createSelector` function
 
 `createSelector` creates a new selector. It can be used outside of the react.

index.d.ts

@@ -4,6 +4,7 @@
  * @packageDocumentation
  */
 
+import { DependencyList } from 'react';
 import { Dispatch } from 'react';
 import { SetStateAction } from 'react';
 
@@ -178,10 +179,12 @@ export declare function useInterceptor<W extends StateWire<any>>(
 
 export declare function useSelector<V, Fns = {}>(
   options: WritableSelectorOptions<V>,
+  deps?: DependencyList,
 ): Wire<V, Fns>;
 
 export declare function useSelector<V, Fns = {}>(
   options: ReadOnlySelectorOptions<V>,
+  deps?: DependencyList,
 ): ReadonlyWire<V, Fns>;
 
 export declare function useSubscribe<V>(

src/selector/use-selector.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { DependencyList, useMemo } from 'react';
 import { useFnsWire } from '../fn-wire/use-fns-wire';
 import {
   ReadOnlySelectorOptions,
@@ -10,14 +10,17 @@ import { ReadonlyWire, Wire } from '../wire/wire';
 
 export function useSelector<V, Fns = {}>(
   options: WritableSelectorOptions<V>,
+  deps?: DependencyList,
 ): Wire<V, Fns>;
 export function useSelector<V, Fns = {}>(
   options: ReadOnlySelectorOptions<V>,
+  deps?: DependencyList,
 ): ReadonlyWire<V, Fns>;
 export function useSelector<V, Fns = {}>(
   options: SelectorOptions<V>,
+  deps?: DependencyList,
 ): ReadonlyWire<V, Fns> | Wire<V, Fns> {
   const fnsWire = useFnsWire<Fns>(null);
-  const selector = useStateSelector<V>(options);
+  const selector = useStateSelector<V>(options, deps);
   return useMemo(() => ({ ...fnsWire, ...selector }), [fnsWire, selector]);
 }

src/state-selector/create-state-selector.ts

@@ -7,8 +7,8 @@ import { createStateWireGuard } from '../state-wire/state-wire';
 import { StateWire } from '../types';
 import { Defined } from '../utils/type-utils';
 
-type DisconnectFunction = () => void;
-type ConnectFunction = () => DisconnectFunction;
+type ReconnectFunction<O> = (options?: O) => void;
+type ConnectFunction<O> = () => ReconnectFunction<O>;
 
 export type GetWireValue = <V>(wire: ReadonlyStateWire<V>) => V;
 export type SetWireValue = <V>(wire: StateWire<V>, value: Defined<V>) => void;
@@ -29,20 +29,22 @@ export interface SelectorOptions<V> {
 
 export function createStateSelector<V>(
   options: WritableSelectorOptions<V>,
-): [StateWire<V>, ConnectFunction];
+): [StateWire<V>, ConnectFunction<WritableSelectorOptions<V>>];
 export function createStateSelector<V>(
   options: ReadOnlySelectorOptions<V>,
-): [ReadonlyStateWire<V>, ConnectFunction];
+): [ReadonlyStateWire<V>, ConnectFunction<ReadOnlySelectorOptions<V>>];
 export function createStateSelector<V>(
   options: SelectorOptions<V>,
-): [ReadonlyStateWire<V> | StateWire<V>, ConnectFunction] {
+):
+  | [ReadonlyStateWire<V>, ConnectFunction<ReadOnlySelectorOptions<V>>]
+  | [StateWire<V>, ConnectFunction<WritableSelectorOptions<V>>] {
   const key: string = 'value';
   const activeWires: {
     current: Map<ReadonlyStateWire<any>, null | (() => void)>;
   } = {
     current: new Map(),
   };
-  const { get: getOption, set: setOption } = options;
+  let { get: getOption, set: setOption } = options;
   const get = <V>(wire: ReadonlyStateWire<V>) => {
     activeWires.current.set(wire, null);
     return wire.getValue();
@@ -92,7 +94,16 @@ export function createStateSelector<V>(
   };
 
   const connect = () => {
-    return update();
+    const disconnect = update();
+    return (options?: SelectorOptions<V>) => {
+      if (options) {
+        getOption = options.get;
+        setOption = options.set;
+        update();
+      } else {
+        disconnect();
+      }
+    };
   };
 
   const getValue = () => {

src/state-selector/use-state-selector.test.ts

@@ -27,4 +27,23 @@ describe('use state selector', () => {
     });
     expect(result.current.value).toBe(8);
   });
+  it('should have updated value when dependencies changed', () => {
+    const { result, rerender } = renderHook(
+      ({ mul }: { mul: number }) => {
+        const wire = useStateWire(null, 5);
+        const selector = useStateSelector(
+          { get: ({ get }) => get(wire) * mul },
+          [mul],
+        );
+        const value = useWireValue(selector);
+
+        return { value, wire };
+      },
+      { initialProps: { mul: 2 } },
+    );
+    act(() => {
+      rerender({ mul: 3 });
+    });
+    expect(result.current.value).toBe(15);
+  });
 });

src/state-selector/use-state-selector.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { DependencyList, useEffect, useRef, useState } from 'react';
 import { ReadonlyStateWire } from '../state-wire/readonly-state-wire';
 import { StateWire } from '../state-wire/state-wire';
 import {
@@ -10,18 +10,35 @@ import {
 
 export function useStateSelector<V>(
   options: WritableSelectorOptions<V>,
+  deps?: DependencyList,
 ): StateWire<V>;
 export function useStateSelector<V>(
   options: ReadOnlySelectorOptions<V>,
+  deps?: DependencyList,
 ): ReadonlyStateWire<V>;
 export function useStateSelector<V>(
   options: SelectorOptions<V>,
+  deps: DependencyList = [],
 ): ReadonlyStateWire<V> | StateWire<V> {
   const [[selector, connect]] = useState(() => {
     return createStateSelector<V>(options);
   });
+
+  const reconnectRef = useRef<ReturnType<typeof connect> | null>(null);
+
+  useEffect(() => {
+    const reconnect = reconnectRef.current;
+    reconnect && reconnect(options);
+    // eslint-disable-next-line
+  }, deps);
+
   useEffect(() => {
-    return connect();
+    const reconnect = connect();
+    reconnectRef.current = reconnect;
+    return () => {
+      reconnect();
+      reconnectRef.current = null;
+    };
   }, [connect]);
 
   return selector;