[WIP] useProxyState hook

nDriaDev · nDriaDev · commit 498da685de20 · 2023-11-02T18:01:18.000+01:00
diff --git a/apps/react-tools-demo/src/components/hooks/useProxyState/UseProxyState.tsx b/apps/react-tools-demo/src/components/hooks/useProxyState/UseProxyState.tsx
@@ -0,0 +1,40 @@
+import { memo, useCallback } from "react";
+import { useProxyState } from "../../../../../../packages/react-tools/src";
+
+/**
+DEMO
+ */
+const Child1 = memo(({ state, onClick }: { state: number, onClick: ()=>void }) => {
+	return (<>
+		<p>Num value is: {state}</p>
+		<button onClick={onClick} type={'button'}>Increment</button>
+	</>);
+});
+
+const Child2 = memo(({ state, onClick }: { state: string, onClick: () => void }) => {
+	return (<>
+		<p>Random value is: {state}</p>
+		<button onClick={onClick} type={'button'}>
+			Change random
+		</button>
+	</>);
+});
+
+const UseProxyState = () => {
+	const state = useProxyState({ num: 0, nested: { random: "" } }, true);
+	const increment = useCallback(() => state.num++, [state.num]);
+	const random = useCallback(() => state.nested.random = Math.random().toFixed(2), [state.nested]);
+	return (
+		<div>
+			<p>
+				Current Value (in the proxy state): {state.num}  -  random: {state.nested.random}
+			</p>
+			<Child1 state={state.num} onClick={increment}/>
+			<Child2 state={state.nested.random} onClick={random} />
+		</div>
+	);
+}
+
+UseProxyState.displayName = "UseProxyState";
+
+export { UseProxyState };
diff --git a/apps/react-tools-demo/src/constants/components.ts b/apps/react-tools-demo/src/constants/components.ts
@@ -12,6 +12,7 @@ export const COMPONENTS = [
 		"useMap",
 		"useSet",
 		"useArray",
+		"useProxyState",
 		"useMemoizedFunction",
 		"useMemoCompare",
 		"useMemoDeepCompare",
@@ -31,6 +32,5 @@ export const COMPONENTS = [
 		"isTouchEvent",
 		"isMouseEvent",
 		"isClient",
-		"isPlainObject"
 	]
 ]
diff --git a/apps/react-tools-demo/src/markdown/useArray.md b/apps/react-tools-demo/src/markdown/useArray.md
@@ -1,5 +1,5 @@
 # useArray
-Hooks to use _Array data structure_ to handle component state with all Array methods.
+Hook to use _Array data structure_ to handle component state with all Array methods.
 
 ## Usage
 
@@ -17,10 +17,6 @@ const UseArray = () => {
 		array.push(inputRef.current!.value);
 	}, [array]);
 
-	const concat = useCallback(() => {
-		array.concat(inputRef.current!.value);
-	}, [array]);
-
 	return (<>
 		{array.join(",")}
 		<br />
@@ -29,7 +25,6 @@ const UseArray = () => {
 		<div style={{ marginTop: 15, gridTemplateColumns: 'auto auto', justifyContent: 'center', display: 'grid', gap: '5px' }}>
 			<button onClick={push}>Push</button>
 			<button onClick={pop}>Pop</button>
-			<button onClick={concat}>Concat</button>
 		</div>
 	</>);
 }
@@ -44,7 +39,6 @@ export { UseArray }
 > - An uncontrolled input with _inputRef_ ref used to execute buttons actions.
 > - A button _Push_ that push the input value into state by _push_ method of Array interface.
 > - A button _Pop_ that remove last item into state by _pop_ method of Array interface.
-> - A button _Concat_ that concats the input value with state by _concat_ method of Array interface.
 
 
 ## API
diff --git a/apps/react-tools-demo/src/markdown/useMap.md b/apps/react-tools-demo/src/markdown/useMap.md
@@ -1,5 +1,5 @@
 # useMap
-Hooks to use _Map data structure_ to handle component state with all Map methods.
+Hook to use _Map data structure_ to handle component state with all Map methods.
 
 ## Usage
 
diff --git a/apps/react-tools-demo/src/markdown/useProxyState.md b/apps/react-tools-demo/src/markdown/useProxyState.md
@@ -0,0 +1,65 @@
+# useProxyState
+Hook to handle component state that allows you to use an object for your state and mutating it in a way more idiomatic for JS.
+
+## Usage
+
+```tsx
+const Child1 = memo(({ state }: { state: { num: number[], nested: { random: string } } }) => {
+	const onClick = useCallback(() => state.num.push(Math.random()), [state.num]);
+	return (<>
+		<p>Num value is: {state.num}</p>
+		<button onClick={onClick} type={'button'}>Increment</button>
+	</>);
+});
+
+const Child2 = memo(({ state }: { state: { num: number[], nested: {random: string} } }) => {
+	const onClick = useCallback(() => state.nested = {random: String(Math.round(Math.random() * 1000))}, [state]);
+	return (<>
+		<p>Random value is: {state.nested.random}</p>
+		<button onClick={onClick} type={'button'}>
+			Change random
+		</button>
+	</>);
+});
+
+const UseProxyState = () => {
+	const state = useProxyState({ num: [], nested: { random: "" } });
+
+	return (
+		<div>
+			<p>
+				Current Value (in the proxy state): {state.num}  -  random: {state.nested.random}
+			</p>
+			<Child1 state={state}/>
+			<Child2 state={state}/>
+		</div>
+	);
+}
+
+UseProxyState.displayName = "UseProxyState";
+
+export { UseProxyState };
+```
+
+> DEMO
+
+
+## API
+
+```tsx
+useProxyState
+```
+
+> ### Params
+>
+> - __initialState__: _T | () => T_  
+value or function
+> - __proxyInDepth=false?__: _boolean_  
+if true, it creates proxy for nested object also.
+>
+
+> ### Returns
+>
+> __state__
+> - _T_  
+>
diff --git a/apps/react-tools-demo/src/markdown/useSet.md b/apps/react-tools-demo/src/markdown/useSet.md
@@ -1,5 +1,5 @@
 # useSet
-Hooks to use _Set data structure_ to handle component state with all Set methods.
+Hook to use _Set data structure_ to handle component state with all Set methods.
 
 ## Usage
 
diff --git a/apps/react-tools-demo/src/router/Router.tsx b/apps/react-tools-demo/src/router/Router.tsx
@@ -25,14 +25,14 @@ import isDeepEqualMD from '../markdown/isDeepEqual.md?url';
 import isMouseEventMD from '../markdown/isMouseEvent.md?url';
 import isTouchEventMD from '../markdown/isTouchEvent.md?url';
 import isClientMD from '../markdown/isClient.md?url';
-import isPlainObjectMD from '../markdown/isPlainObject.md?url';
 import usePubSubModelMD from '../markdown/usePubSubModel.md?url';
 import useEventDispatcherMD from '../markdown/useEventDispatcher.md?url';
 import useLocalStorageStateMD from '../markdown/useLocalStorageState.md?url';
 import useSessionStorageStateMD from '../markdown/useSessionStorageState.md?url';
 import useMapMD from '../markdown/useMap.md?url';
 import useSetMD from '../markdown/useSet.md?url';
 import useArrayMD from '../markdown/useArray.md?url';
+import useProxyStateMD from '../markdown/useProxyState.md?url';
 import { UsePrevious } from '../components/hooks/usePrevious/UsePrevious';
 import { UseStateHistory } from '../components/hooks/useStateHistory/UseStateHistory';
 import { UseCallbackCompare } from '../components/hooks/useCallbackCompare/UseCallbackCompare';
@@ -51,6 +51,7 @@ import { UseEventDispatcher } from '../components/hooks/useEventDispatcher/UseEv
 import { UseMap } from '../components/hooks/useMap/UseMap';
 import { UseSet } from '../components/hooks/useSet/UseSet';
 import { UseArray } from '../components/hooks/useArray/UseArray';
+import { UseProxyState } from '../components/hooks/useProxyState/UseProxyState';
 
 function Router() {
     const router = createBrowserRouter([
@@ -142,6 +143,13 @@ function Router() {
 						markdown={useArrayMD}
 					/>
 				},
+				{
+					path: "/useProxyState",
+					element: <ComponentLayout
+						component={<UseProxyState />}
+						markdown={useProxyStateMD}
+					/>
+				},
 				{
 					path: "/useMemoizedFunction",
 					element: <ComponentLayout
@@ -253,11 +261,6 @@ function Router() {
 					element: <MarkdownLayout
 						source={isClientMD}
 					/>
-				},
-				{
-					path: "/isPlainObject",
-					element: <MarkdownLayout source={isPlainObjectMD}
-					/>
 				}
             ]
         }
diff --git a/packages/react-tools/src/hooks/index.ts b/packages/react-tools/src/hooks/index.ts
@@ -9,6 +9,7 @@ export { useSessionStorageState } from './useSessionStorageState';
 export { useMap } from './useMap';
 export { useSet } from './useSet';
 export { useArray } from './useArray';
+export { useProxyState } from './useProxyState';
 export { useMemoizedFunction } from './useMemoizedFunction';
 export { useMemoCompare } from "./useMemoCompare";
 export { useMemoDeepCompare } from './useMemoDeepCompare';
diff --git a/packages/react-tools/src/hooks/useArray.ts b/packages/react-tools/src/hooks/useArray.ts
@@ -1,7 +1,7 @@
 import { useState } from "react"
 
 /**
- * __`useArray`__: Hooks to use _Array data structure_ to handle component state with all Array methods.
+ * __`useArray`__: Hook to use _Array data structure_ to handle component state with all Array methods.
  * @param {Array<T> | (() => Array<T>} [initialState] - An Array or function that returns it.
  * @returns {Array<T>}
  */
diff --git a/packages/react-tools/src/hooks/useMap.ts b/packages/react-tools/src/hooks/useMap.ts
@@ -1,7 +1,7 @@
 import { useState } from "react"
 
 /**
- * __`useMap`__: Hooks to use _Map data structure_ to handle component state with all Map methods.
+ * __`useMap`__: Hook to use _Map data structure_ to handle component state with all Map methods.
  * @param {Iterable<readonly [K, V]> | (() => Iterable<readonly [K, V]>)} [initialState] - An Array or other iterable object whose elements are key-value pairs, or function that returns it.
  * @returns {Map<K,V>}
  */
diff --git a/packages/react-tools/src/hooks/useProxyState.ts b/packages/react-tools/src/hooks/useProxyState.ts
@@ -1,62 +1,36 @@
-import { useMemo, useRef, useState } from "react"
-import { isPlainObject } from "../utils";
-
-const proxyMap = new WeakMap();
-const mapProxy = new WeakMap();
-
-const track = <T extends Record<string, any>>(initialState: T, cb: () => void): T => {
-	const hasProxy = proxyMap.get(initialState);
-
-	if (hasProxy) {
-		return hasProxy;
-	}
-
-	if (mapProxy.has(initialState)) {
-		return initialState;
-	}
-
-	const proxy = new Proxy<T>(initialState, {
-		get(target, key, receiver) {
-			const res = Reflect.get(target, key, receiver);
-			const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
-			if (!descriptor?.configurable && !descriptor?.writable) {
-				return res;
-			}
-
-			return isPlainObject(res) || Array.isArray(res) ? track(res, cb) : res;
-		},
-		set(target, key, val) {
-			const ret = Reflect.set(target, key, val);
-			cb();
-			return ret;
-		},
-		deleteProperty(target, key) {
-			const ret = Reflect.deleteProperty(target, key);
-			cb();
-			return ret;
-		},
-	});
-
-	proxyMap.set(initialState, proxy);
-	mapProxy.set(proxy, initialState);
-
-	return proxy;
-
-
-};
+import { useReducer, useRef } from "react"
 
 /**
- * __`useProxyState`__:
+ * __`useProxyState`__: Hook to handle component state that allows you to use an object for your state and mutating it in a way more idiomatic for JS.
  * @param {T | () => T} initialState - value or function
+ * @param {boolean} [proxyInDepth=false] - if true, it creates proxy for nested object also.
  * @returns {T} state
  */
-export const useProxyState = <T extends Record<string, any>>(initialState: T | (() => T)): T => {
-	const [, update] = useState({});
-	const stateRef = useRef<T>(initialState instanceof Function ? initialState() : initialState);
 
-	const state = useMemo(() => {
-		return track(stateRef.current, () => { update({}) });
-	}, []);
+export const useProxyState = <T extends Record<string, any>>(initialState: T | (() => T), proxyInDepth:boolean=false): T => {
+	const initialStateComputed = useRef(initialState instanceof Function ? initialState() : initialState);
+	const [, update] = useReducer(t => t + 1, 0);
+	const buildProxy = useRef((obj: T) => {
+		let proxyObj: Record<string, unknown> = {};
+		if (!proxyInDepth) {
+			proxyObj = obj;
+		} else {
+			const keys: string[] = Reflect.ownKeys(obj) as string[];
+			for (const key of keys) {
+				proxyObj[key] = initialStateComputed.current[key] instanceof Date || initialStateComputed.current[key] instanceof RegExp || Array.isArray(initialStateComputed.current[key]) || typeof initialStateComputed.current[key] !== "object"
+					? initialStateComputed.current[key]
+					: buildProxy.current(initialStateComputed.current[key]);
+			}
+		}
+		return new Proxy(proxyObj, {
+			set(target, p, newValue, receiver) {
+				Reflect.set(target, p, newValue, receiver);
+				update();
+				return true;
+			},
+		});
+	});
+	const proxy = useRef(buildProxy.current(initialStateComputed.current) as T);
 
-	return state;
+	return proxy.current;
 }
diff --git a/packages/react-tools/src/hooks/useSet.ts b/packages/react-tools/src/hooks/useSet.ts
@@ -1,7 +1,7 @@
 import { useState } from "react"
 
 /**
- * __`useSet`__: Hooks to use _Set data structure_ to handle component state with all Set methods.
+ * __`useSet`__: Hook to use _Set data structure_ to handle component state with all Set methods.
  * @param {Iterable<T> | (() => Iterable<T>)} [initialState] - An iterable object whose elements are added to Set, or function that returns it.
  * @returns {Set<T>}
  */
diff --git a/packages/react-tools/src/index.ts b/packages/react-tools/src/index.ts
@@ -15,6 +15,7 @@ export {
 	useMap,
 	useSet,
 	useArray,
+	useProxyState,
 	useMemoizedFunction,
 	useMemoCompare,
 	useMemoDeepCompare,
@@ -34,6 +35,5 @@ export {
 	isDeepEqual,
 	isMouseEvent,
 	isTouchEvent,
-	isClient,
-	isPlainObject
+	isClient
 } from './utils'
diff --git a/packages/react-tools/src/utils/index.ts b/packages/react-tools/src/utils/index.ts
@@ -3,4 +3,3 @@ export { isDeepEqual } from "./isDeepEqual";
 export { isMouseEvent } from "./isMouseEvent";
 export { isTouchEvent } from "./isTouchEvent";
 export { isClient } from './isClient';
-export { isPlainObject } from './isPlainObject';
diff --git a/packages/react-tools/src/utils/isPlainObject.ts b/packages/react-tools/src/utils/isPlainObject.ts

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ export const COMPONENTS = [`
`12`	`12`	`"useMap",`
`13`	`13`	`"useSet",`
`14`	`14`	`"useArray",`
	`15`	`+ "useProxyState",`
`15`	`16`	`"useMemoizedFunction",`
`16`	`17`	`"useMemoCompare",`
`17`	`18`	`"useMemoDeepCompare",`
`@@ -31,6 +32,5 @@ export const COMPONENTS = [`
`31`	`32`	`"isTouchEvent",`
`32`	`33`	`"isMouseEvent",`
`33`	`34`	`"isClient",`
`34`		`- "isPlainObject"`
`35`	`35`	`]`
`36`	`36`	`]`