[WIP] useProxyState hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useArray/UseArray.tsx

@@ -0,0 +1,38 @@
+import { useCallback, useRef } from "react";
+import { useArray } from "../../../../../../packages/react-tools/src";
+
+/**
+The component has:
+- A _useArray_ internal state.
+- 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.
+ */
+const UseArray = () => {
+	const array = useArray<string>();
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const pop = useCallback(() => {
+		array.pop();
+	}, [array]);
+
+	const push = useCallback(() => {
+		array.push(inputRef.current!.value);
+	}, [array]);
+
+	return (<>
+		{array.join(",")}
+		<br />
+		<input ref={inputRef} type="text" />
+		<br />
+		<div style={{ marginTop: 15, gridTemplateColumns: 'auto auto', justifyContent: 'center', display: 'grid', gap: '5px' }}>
+			<button onClick={push}>Push</button>
+			<button onClick={pop}>Pop</button>
+		</div>
+	</>);
+}
+
+UseArray.displayName = "UseArray";
+
+export { UseArray }

apps/react-tools-demo/src/constants/components.ts

@@ -11,6 +11,7 @@ export const COMPONENTS = [
 		"useSessionStorageState",
 		"useMap",
 		"useSet",
+		"useArray",
 		"useMemoizedFunction",
 		"useMemoCompare",
 		"useMemoDeepCompare",
@@ -29,6 +30,7 @@ export const COMPONENTS = [
 		"isDeepEqual",
 		"isTouchEvent",
 		"isMouseEvent",
-		"isClient"
+		"isClient",
+		"isPlainObject"
 	]
 ]

apps/react-tools-demo/src/markdown/useArray.md

@@ -0,0 +1,66 @@
+# useArray
+Hooks to use _Array data structure_ to handle component state with all Array methods.
+
+## Usage
+
+```tsx
+const UseArray = () => {
+	const array = useArray<string>();
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const pop = useCallback(() => {
+		array.pop();
+	}, [array]);
+
+	const push = useCallback(() => {
+		array.push(inputRef.current!.value);
+	}, [array]);
+
+	const concat = useCallback(() => {
+		array.concat(inputRef.current!.value);
+	}, [array]);
+
+	return (<>
+		{array.join(",")}
+		<br />
+		<input ref={inputRef} type="text" />
+		<br />
+		<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>
+	</>);
+}
+
+UseArray.displayName = "UseArray";
+
+export { UseArray }
+```
+
+> The component has:
+> - A _useArray_ internal state.
+> - 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
+
+```tsx
+useArray <T>(initialState?: Array<T> | (() => Array<T>)) 
+```
+
+> ### Params
+>
+> - __initialState?__: _Array<T> | (() => Array<T>_  
+An Array or function that returns it.
+>
+
+> ### Returns
+>
+> 
+> - _Array<T>_  
+>

apps/react-tools-demo/src/markdown/useMap.md

@@ -59,6 +59,7 @@ export {UseMap}
 > - A button _Delete_ that remove item into state by _key_, written in input by _delete_ method of Map interface.
 > - A button _Clear_ that clear state by _clear_ method of Map interface.
 > - A button _IncrementAll_ that adds 1 to every value into map by _forEach_ method of Map interface.
+> - A variable parsed create with useMemo that memoized a concatenated string of state key-value pairs, separated by comma.
 
 
 ## API

apps/react-tools-demo/src/markdown/useSet.md

@@ -64,7 +64,7 @@ useSet <T>(initialState?: Iterable<T> | (() => Iterable<T>))
 > ### Params
 >
 > - __initialState?__: _Iterable<T> | (() => Iterable<T>)_  
-An Array or other iterable object whose elements are key-value pairs, or function that returns it.
+An iterable object whose elements are added to Set, or function that returns it.
 >
 
 > ### Returns

apps/react-tools-demo/src/router/Router.tsx

@@ -25,12 +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 { UsePrevious } from '../components/hooks/usePrevious/UsePrevious';
 import { UseStateHistory } from '../components/hooks/useStateHistory/UseStateHistory';
 import { UseCallbackCompare } from '../components/hooks/useCallbackCompare/UseCallbackCompare';
@@ -48,6 +50,7 @@ import { UseEventListener } from '../components/hooks/useEventListener/UseEventL
 import { UseEventDispatcher } from '../components/hooks/useEventDispatcher/UseEventDispatcher';
 import { UseMap } from '../components/hooks/useMap/UseMap';
 import { UseSet } from '../components/hooks/useSet/UseSet';
+import { UseArray } from '../components/hooks/useArray/UseArray';
 
 function Router() {
     const router = createBrowserRouter([
@@ -132,6 +135,13 @@ function Router() {
 						markdown={useSetMD}
 					/>
 				},
+				{
+					path: "/useArray",
+					element: <ComponentLayout
+						component={<UseArray />}
+						markdown={useArrayMD}
+					/>
+				},
 				{
 					path: "/useMemoizedFunction",
 					element: <ComponentLayout
@@ -244,6 +254,11 @@ function Router() {
 						source={isClientMD}
 					/>
 				},
+				{
+					path: "/isPlainObject",
+					element: <MarkdownLayout source={isPlainObjectMD}
+					/>
+				}
             ]
         }
     ]);

packages/react-tools/README.md

@@ -9,9 +9,10 @@
 	- [x] useReducerHistoryGetter
 	- [x] useLocalStorage
  	- [x] useSessionStorage
-	- [-] useMap (da sistemare interfaccia jsdoc e ci sono problemi col generatore di markdown)
-	- [ ] useSet
-	- [ ] useArray
+	- [x] useMap
+	- [x] useSet
+	- [x] useArray
+	- [ ] useProxyState
 - __EFFECTS__
 	- [x] useCallbackCompare
 	- [x] useCallbackDeepCompare
@@ -72,7 +73,8 @@
 	- [x] isDeepEqual
 	- [x] isMouseEvent
 	- [x] isTouchEvent
-	- [ ] isClient (thinking if it is necessary)
+	- [x] isClient
+	- [x] isPlainObject
 
 ## ESlint configuration
 To validate dependencies of custom hooks like `useMemoCompare`, configure `exhaustive-deps` with the `additionalHooks` option

packages/react-tools/src/hooks/index.ts

@@ -8,6 +8,7 @@ export { useLocalStorageState } from './useLocalStorageState';
 export { useSessionStorageState } from './useSessionStorageState';
 export { useMap } from './useMap';
 export { useSet } from './useSet';
+export { useArray } from './useArray';
 export { useMemoizedFunction } from './useMemoizedFunction';
 export { useMemoCompare } from "./useMemoCompare";
 export { useMemoDeepCompare } from './useMemoDeepCompare';

packages/react-tools/src/hooks/useArray.ts

@@ -0,0 +1,70 @@
+import { useState } from "react"
+
+/**
+ * __`useArray`__: Hooks 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>}
+ */
+export const useArray = <T>(initialState?: Array<T> | (() => Array<T>)) => {
+	const [array, setArray] = useState<Array<T>>(() => (initialState instanceof Function ? initialState() : initialState ? initialState : new Array<T>()));
+
+	array.copyWithin = (target: number, start: number, end?: number): T[] => {
+		const arr = [...array].copyWithin(target, start, end);
+		setArray(arr);
+		return arr;
+	}
+
+	array.fill = (value: T, start?: number, end?: number): T[] => {
+		const arr = [...array].fill(value, start, end);
+		setArray(arr);
+		return arr;
+	}
+
+	array.pop = (): T|undefined => {
+		const arr = [...array];
+		const removedItem = arr.pop();
+		setArray(arr);
+		return removedItem;
+	}
+
+	array.push = (...items: T[]): number => {
+		const arr = [...array];
+		const result = arr.push(...items);
+		setArray(arr);
+		return result;
+	}
+
+	array.reverse = (): T[] => {
+		const arr = [...array].reverse();
+		setArray(arr);
+		return arr;
+	}
+
+	array.shift = (): T | undefined => {
+		const arr = [...array];
+		const result = arr.shift();
+		setArray(arr);
+		return result;
+	}
+
+	array.sort = (compareFn?: ((a: T, b: T) => number)): T[] => {
+		const arr = [...array].sort(compareFn);
+		setArray(arr);
+		return arr;
+	}
+
+	array.splice = (start: number, deleteCount: number, ...items: T[]): T[] => {
+		const arr = [...array].splice(start, deleteCount, ...items);
+		setArray(arr);
+		return arr;
+	}
+
+	array.unshift = (...items: T[]): number => {
+		const arr = [...array];
+		const result = arr.unshift(...items);
+		setArray(arr);
+		return result;
+	}
+
+	return array;
+}

packages/react-tools/src/hooks/useMap.ts

@@ -9,12 +9,10 @@ export const useMap = <K, V>(initialState?: Iterable<readonly [K, V]> | (() => I
 	const [map, setMap] = useState<Map<K, V>>(()=>new Map<K, V>(initialState instanceof Function ? initialState() : initialState));
 
 	map.set = (key: K, value: V) => {
-		setMap(prev => {
-			const temp = new Map(prev);
-			temp.set(key, value);
-			return temp
-		});
-		return map;
+		const temp = new Map(map);
+		temp.set(key, value);
+		setMap(temp);
+		return temp;
 	}
 
 	map.clear = () => {