Added watchEffect function in Stock

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
 	"typescript.tsdk": "node_modules\\typescript\\lib",
 	"editor.codeActionsOnSave": {
-		"source.fixAll": true
+		"source.fixAll": "explicit"
 	}
 }

src/hooks/useObservers.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { MutableRefObject, useCallback, useRef } from 'react';
 import { createPxth, deepGet, isInnerPxth, Pxth, samePxth } from 'pxth';
 import invariant from 'tiny-invariant';
 
@@ -8,10 +8,20 @@ import { ObserverArray, ObserverKey } from '../utils/ObserverArray';
 import { useLazyRef } from '../utils/useLazyRef';
 
 export type ObserversControl<T> = {
-	/** Watch stock value. Returns cleanup function. */
+	/**
+	 * Watch stock value. Returns cleanup function.
+	 * @deprecated - use watchEffect instead
+	 */
 	watch: <V>(path: Pxth<V>, observer: Observer<V>) => () => void;
-	/** Watch all stock values. Returns cleanup function. */
+	/**
+	 * Watch all stock values. Returns cleanup function.
+	 * @deprecated - use watchAllEffect instead
+	 */
 	watchAll: (observer: Observer<T>) => () => void;
+	/** Watch stock value. Returns cleanup function. Calls observer instantly. */
+	watchEffect: <V>(path: Pxth<V>, observer: Observer<V>) => () => void;
+	/** Watch all stock values. Returns cleanup function. Calls observer instantly. */
+	watchAllEffect: (observer: Observer<T>) => () => void;
 	/** Check if value is observed or not. */
 	isObserved: <V>(path: Pxth<V>) => boolean;
 	/** Notify all observers, which are children of specified path */
@@ -23,7 +33,7 @@ export type ObserversControl<T> = {
 };
 
 /** Hook, wraps functionality of observers storage (add, remove, notify tree of observers, etc.) */
-export const useObservers = <T>(): ObserversControl<T> => {
+export const useObservers = <T>(values: MutableRefObject<T>): ObserversControl<T> => {
 	const observersMap = useRef<PxthMap<ObserverArray<unknown>>>(new PxthMap());
 	const batchUpdateObservers = useLazyRef<ObserverArray<BatchUpdate<T>>>(() => new ObserverArray());
 
@@ -74,6 +84,20 @@ export const useObservers = <T>(): ObserversControl<T> => {
 
 	const watchAll = useCallback((observer: Observer<T>) => watch(createPxth<T>([]), observer), [watch]);
 
+	const watchEffect = useCallback(
+		<V>(path: Pxth<V>, observer: Observer<V>) => {
+			observer(deepGet(values.current, path));
+			const key = observe(path, observer);
+			return () => stopObserving(path, key);
+		},
+		[observe, stopObserving, values],
+	);
+
+	const watchAllEffect = useCallback(
+		(observer: Observer<T>) => watchEffect(createPxth<T>([]), observer),
+		[watchEffect],
+	);
+
 	const watchBatchUpdates = useCallback(
 		(observer: Observer<BatchUpdate<T>>) => {
 			const key = observeBatchUpdates(observer);
@@ -121,6 +145,8 @@ export const useObservers = <T>(): ObserversControl<T> => {
 	return {
 		watch,
 		watchAll,
+		watchEffect,
+		watchAllEffect,
 		watchBatchUpdates,
 		isObserved,
 		notifySubTree,

src/hooks/useStock.ts

@@ -40,7 +40,8 @@ export type StockConfig<T extends object> = {
  */
 export const useStock = <T extends object>({ initialValues, debugName }: StockConfig<T>): Stock<T> => {
 	const values = useLazyRef<T>(() => cloneDeep(initialValues));
-	const { notifySubTree, notifyAll, watch, watchAll, watchBatchUpdates, isObserved } = useObservers<T>();
+	const { notifySubTree, notifyAll, watch, watchAll, watchEffect, watchAllEffect, watchBatchUpdates, isObserved } =
+		useObservers<T>(values);
 
 	const setValue = useCallback(
 		<V>(path: Pxth<V>, action: SetStateAction<V>) => {
@@ -78,6 +79,8 @@ export const useStock = <T extends object>({ initialValues, debugName }: StockCo
 			resetValues,
 			watch,
 			watchAll,
+			watchEffect,
+			watchAllEffect,
 			watchBatchUpdates,
 			isObserved,
 			debugName,
@@ -86,14 +89,16 @@ export const useStock = <T extends object>({ initialValues, debugName }: StockCo
 		[
 			getValue,
 			getValues,
-			debugName,
 			setValue,
 			setValues,
 			resetValues,
 			watch,
 			watchAll,
+			watchEffect,
+			watchAllEffect,
 			watchBatchUpdates,
 			isObserved,
+			debugName,
 		],
 	);
 

src/hooks/useStockValue.ts

@@ -20,19 +20,19 @@ export const useStockValue = <V, T extends object = object>(
 ): V => {
 	const stock = useStockContext(customStock, proxy);
 
-	const { watch, getValue } = stock;
+	const { watchEffect, getValue } = stock;
 
 	const [, forceUpdate] = useReducer((val) => val + 1, 0);
 
 	const value = useLazyRef<V>(() => getValue(path));
 
 	useEffect(
 		() =>
-			watch(path, (newValue) => {
+			watchEffect(path, (newValue) => {
 				value.current = newValue;
 				forceUpdate();
 			}),
-		[path, watch, value],
+		[path, watchEffect, value],
 	);
 
 	return value.current;

src/typings/MappingProxy.ts

@@ -67,6 +67,15 @@ export class MappingProxy<T> extends StockProxy<T> {
 		return defaultWatch(normalPath, (value) => observer(this.mapValue(value, path, normalPath) as V));
 	};
 
+	public watchEffect = <V>(
+		path: Pxth<V>,
+		observer: Observer<V>,
+		defaultWatchEffect: <U>(path: Pxth<U>, observer: Observer<U>) => () => void,
+	) => {
+		const normalPath = this.getNormalPath(path);
+		return defaultWatchEffect(normalPath, (value) => observer(this.mapValue(value, path, normalPath) as V));
+	};
+
 	public getValue = <V>(path: Pxth<V>, defaultGetValue: <U>(path: Pxth<U>) => U): V => {
 		const normalPath = this.getNormalPath(path);
 		return this.mapValue(defaultGetValue(normalPath), path, normalPath) as V;

src/typings/StockProxy.ts

@@ -23,13 +23,23 @@ export abstract class StockProxy<T> {
 		defaultGetValue: <U>(path: Pxth<U>) => U,
 	) => void;
 
-	/** Function for watching proxied value. Should return cleanup. */
+	/**
+	 * Function for watching proxied value. Should return cleanup.
+	 * @deprecated
+	 */
 	public abstract watch: <V>(
 		path: Pxth<V>,
 		observer: Observer<V>,
 		defaultWatch: <U>(path: Pxth<U>, observer: Observer<U>) => () => void,
 	) => () => void;
 
+	/** Function for watching proxied value. Should return cleanup. Calls observer instantly. */
+	public abstract watchEffect: <V>(
+		path: Pxth<V>,
+		observer: Observer<V>,
+		defaultWatchEffect: <U>(path: Pxth<U>, observer: Observer<U>) => () => void,
+	) => () => void;
+
 	/** Function to access proxied value. */
 	public abstract getValue: <V>(path: Pxth<V>, defaultGetValue: <U>(path: Pxth<U>) => U) => V;
 

src/utils/useInterceptors.ts

@@ -34,7 +34,7 @@ export const intercept = <T extends (...args: any[]) => any>(
 
 /** Intercepts stock's `observe`, `stopObserving` and `setValue` functions, if proxy is provided. */
 export const useInterceptors = <T extends object>(stock: Stock<T>, proxy?: StockProxy<unknown>): Stock<T> => {
-	const { watch, setValue, getValue, setValues, getValues } = stock;
+	const { watch, watchEffect, setValue, getValue, setValues, getValues } = stock;
 
 	useEffect(
 		() =>
@@ -57,6 +57,18 @@ export const useInterceptors = <T extends object>(stock: Stock<T>, proxy?: Stock
 		[watch, proxy],
 	);
 
+	const interceptedWatchEffect = useCallback(
+		<V>(path: Pxth<V>, observer: Observer<V>) =>
+			intercept(
+				proxy,
+				path as Pxth<unknown>,
+				watchEffect,
+				(path: Pxth<V>, observer: Observer<V>) => proxy!.watchEffect<V>(path, observer, watchEffect),
+				[path, observer],
+			),
+		[watchEffect, proxy],
+	);
+
 	const interceptedSetValue = useCallback(
 		<V>(path: Pxth<V>, value: SetStateAction<V>) =>
 			intercept(
@@ -114,6 +126,7 @@ export const useInterceptors = <T extends object>(stock: Stock<T>, proxy?: Stock
 	return {
 		...stock,
 		watch: interceptedWatch,
+		watchEffect: interceptedWatchEffect,
 		setValue: interceptedSetValue,
 		getValue: interceptedGetValue,
 		getValues: interceptedGetValues,

test/DummyProxy.ts

@@ -7,5 +7,6 @@ export class DummyProxy extends StockProxy<unknown> {
 	public getNormalPath = <V>(path: Pxth<V>) => path;
 	public setValue = () => {};
 	public watch = () => () => {};
+	public watchEffect = () => () => {};
 	public getValue = <V>(path: Pxth<V>, defaultGetValue: <U>(path: Pxth<U>) => U) => defaultGetValue(path) as V;
 }

test/hooks/useObservers.test.ts

@@ -3,7 +3,12 @@ import { createPxth, getPxthSegments } from 'pxth';
 
 import { useObservers } from '../../src';
 
-const renderUseObserversHook = () => renderHook(() => useObservers());
+const renderUseObserversHook = (values: object = {}) =>
+	renderHook(() =>
+		useObservers({
+			current: values,
+		}),
+	);
 
 describe('Observer tests', () => {
 	it('should call value observer', () => {
@@ -21,6 +26,20 @@ describe('Observer tests', () => {
 		expect(observer).toBeCalled();
 	});
 
+	it('should call observer instantly with "watchEffect"', () => {
+		const { result } = renderUseObserversHook({
+			b: 'hello',
+		});
+
+		const observer = jest.fn();
+
+		act(() => {
+			result.current.watchEffect(createPxth(['b']), observer);
+		});
+
+		expect(observer).toBeCalled();
+	});
+
 	it('Should call all values observer', async () => {
 		const { result } = renderUseObserversHook();