use-typed-reducer 3.2.0 → 3.2.1

package/README.md

@@ -24,7 +24,6 @@ With useTypedReducer, you can use your function the way you prefer, it will infe
 
 ### useReducer (default import) or `useTypedReducer`
 
-
 `useTypedReducer` receive the initialState and dictionary/object with all reducers and return tuple with state and dispatch. Dispatch has the same key and functions of given dictionary in `useTypedReducer`, but return a new function to update state. This void `dispatch({ type: "ACTION" })`
 
 ```tsx
@@ -72,48 +71,58 @@ const Component = () => {
 The same of useTypedReducer, but receive a `getProps` as second argument in the second function.
 
 
-```typescript
+```typescript jsx
 import { useReducerWithProps, UseReducer } from "./index";
 
-const initialState = {
-    numbers: 0,
-    something: ""
-}
+const initialState = { numbers: 0, something: "" };
 
 type State = typeof initialState;
 
 type Reducers = {
-    reset: UseReducer.Reducer<State, () => any>;
-    onChange: UseReducer.Reducer<State, (e: React.ChangeEvent<HTMLInputElement>) => any>;
-    increment: UseReducer.Reducer<State, () => any>;
+  reset: UseReducer.Reducer<State, () => any>;
+  onChange: UseReducer.Reducer<State, (e: React.ChangeEvent<HTMLInputElement>) => any>;
+  increment: UseReducer.Reducer<State, () => any>;
 };
 
 type Props = {
-    list: number[];
+  list: number[];
 }
 
 const reducers: Reducers = {
-    increment: () => (state) => ({ ...state, numbers: state.numbers + 1 }),
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
-        const value = e.target.valueAsNumber;
-        return (state, props) => {
-            const find = props.list.find(x => x === value);
-            return find === undefined ? ({ ...state, numbers: value }): ({ ...state, numbers: find * 2 });
-        }
-    },
-    reset: () => (state) => ({ ...state, numbers: 0 })
+  increment: () => (state) => ({ ...state, numbers: state.numbers + 1 }),
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.valueAsNumber;
+    return (state, props) => {
+      const find = props.list.find(x => x === value);
+      return find === undefined ? ({ ...state, numbers: value }) : ({ ...state, numbers: find * 2 });
+    };
+  },
+  reset: () => (state) => ({ ...state, numbers: 0 })
 };
 
 
 const Component = (props: Props) => {
-    const [state, dispatch] = useReducerWithProps(initialState, props, reducers)
+  const [state, dispatch] = useReducerWithProps(initialState, props, reducers);
+
+  return (
+    <Fragment>
+      <button onClick={dispatch.increment}>+Increment</button>
+      <input onChange={dispatch.onChange} value={state.numbers} />
+      <button onClick={dispatch.reset}>Reset</button>
+    </Fragment>
+  );
+};
+```
 
-    return (
-        <>
-            <button onClick={dispatch.increment}>+Increment</button>
-            <input onChange={dispatch.onChange} value={state.numbers} />
-            <button onClick={dispatch.reset}>Reset</button>
-        </>
-    )
-}
+## useReducer
+
+This is the new way to control your state, but with the old way of use-typed-reducer. Now you have a function to getState and a function to get the props. With this you can avoid to take a function that return a function to update state.
+
+```typescript
+export const useMath = () => {
+  return useReducer({ count: 0 }, (getState) => ({
+    sum: (n: number) => ({ count: n + getState().count }),
+    diff: (n: number) => ({ count: n - getState().count })
+  }));
+};
 ```

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+declare type VoidableFn<Fn extends (...any: any[]) => any> = ReturnType<Fn> extends Promise<any> ? (...a: Parameters<Fn>) => Promise<void> : (...a: Parameters<Fn>) => void;
 declare type Action<State> = (...args: any) => Promise<(state: State) => State> | ((state: State) => State);
 declare type Actions<Actions, State> = {
     [key in keyof Actions]: Action<State>;
@@ -16,7 +17,10 @@ declare type DefaultReducer<S extends {}> = (state: S) => S;
 declare type WithProps<S extends {}, P> = (state: S, props: P) => S;
 export declare type Reducer<S extends {}, A extends (...args: any) => DefaultReducer<S>> = (...params: Parameters<A>) => DefaultReducer<S>;
 export declare type ReducerWithProps<S extends {}, P extends {}, A extends (...args: any) => WithProps<S, P>> = (...params: Parameters<A>) => WithProps<S, P>;
-export declare const useTypedReducer: <State extends {}, Reducers extends Dispatch<State, Reducers>>(initialState: State, reducers: Reducers) => [state: State, dispatch: Reducers];
+declare type RemoveReduceReturns<State extends {}, Reducers extends Dispatch<State, Reducers>> = {
+    [R in keyof Reducers]: VoidableFn<Reducers[R]>;
+};
+export declare const useTypedReducer: <State extends {}, Reducers extends Dispatch<State, Reducers>>(initialState: State, reducers: Reducers) => [state: State, dispatch: RemoveReduceReturns<State, Reducers>];
 export declare const useReducerWithProps: <State extends {}, Props extends {}, Reducers extends DispatchProps<State, Props, Reducers>>(initialState: State, props: Props, reducers: Reducers) => [state: State, dispatch: Reducers];
 declare type FnMap<State> = {
     [k: string]: (...args: any[]) => Partial<State> | Promise<Partial<State>>;
@@ -24,5 +28,8 @@ declare type FnMap<State> = {
 declare type MappedReducers<State extends {}, Fns extends FnMap<State>> = {
     [F in keyof Fns]: (...args: Parameters<Fns[F]>) => State | Promise<State>;
 };
-export declare const useReducer: <State extends {}, Reducers extends (getState: () => State, getProps: () => Props) => MappedReducers<State, FnMap<State>>, Props extends {}>(initialState: State, reducer: Reducers, props?: Props | undefined) => [state: State, dispatchers: MappedReducers<State, ReturnType<Reducers>>];
+declare type MapReducerReturn<State extends {}, Fns extends FnMap<State>> = {
+    [F in keyof Fns]: VoidableFn<Fns[F]>;
+};
+export declare const useReducer: <State extends {}, Reducers extends (getState: () => State, getProps: () => Props) => MappedReducers<State, FnMap<State>>, Props extends {}>(initialState: State, reducer: Reducers, props?: Props | undefined) => [state: State, dispatchers: MapReducerReturn<State, ReturnType<Reducers>>];
 export default useTypedReducer;

package/dist/index.es.js

@@ -167,18 +167,10 @@ var useReducer = function (initialState, reducer, props) {
                 for (var _i = 0; _i < arguments.length; _i++) {
                     params[_i] = arguments[_i];
                 }
-                return __awaiter(void 0, void 0, void 0, function () {
-                    var newState;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0: return [4 /*yield*/, dispatch.apply(void 0, __spread(params))];
-                            case 1:
-                                newState = _a.sent();
-                                setState(function (previousState) { return (__assign(__assign({}, previousState), newState)); });
-                                return [2 /*return*/];
-                        }
-                    });
-                });
+                var newState = dispatch.apply(void 0, __spread(params));
+                return newState instanceof Promise
+                    ? newState.then(function (state) { return void setState(function (prev) { return (__assign(__assign({}, prev), state)); }); })
+                    : setState(function (previousState) { return (__assign(__assign({}, previousState), newState)); });
             }, _b)));
         }, reducers);
     }, []);

package/dist/index.js

@@ -171,18 +171,10 @@ var useReducer = function (initialState, reducer, props) {
                 for (var _i = 0; _i < arguments.length; _i++) {
                     params[_i] = arguments[_i];
                 }
-                return __awaiter(void 0, void 0, void 0, function () {
-                    var newState;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0: return [4 /*yield*/, dispatch.apply(void 0, __spread(params))];
-                            case 1:
-                                newState = _a.sent();
-                                setState(function (previousState) { return (__assign(__assign({}, previousState), newState)); });
-                                return [2 /*return*/];
-                        }
-                    });
-                });
+                var newState = dispatch.apply(void 0, __spread(params));
+                return newState instanceof Promise
+                    ? newState.then(function (state) { return void setState(function (prev) { return (__assign(__assign({}, prev), state)); }); })
+                    : setState(function (previousState) { return (__assign(__assign({}, previousState), newState)); });
             }, _b)));
         }, reducers);
     }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "use-typed-reducer",
-    "version": "3.2.0",
+    "version": "3.2.1",
     "description": "use-reducer React hook alternative",
     "author": "g4rcez",
     "license": "MIT",
@@ -17,7 +17,8 @@
     },
     "scripts": {
         "build": "rollup -c",
-        "start": "rollup -c -w"
+        "start": "rollup -c -w",
+        "test": "vitest run"
     },
     "peerDependencies": {
         "react": ">= 16.8.3"
@@ -26,12 +27,18 @@
         "@rollup/plugin-node-resolve": "9.0.0",
         "@rollup/plugin-strip": "2.0.0",
         "@rollup/plugin-url": "5.0.1",
+        "@testing-library/jest-dom": "5.17.0",
+        "@testing-library/react": "14.0.0",
         "@types/react": "16.9.19",
         "@types/react-dom": "16.9.4",
+        "@vitejs/plugin-react": "4.0.3",
         "babel-core": "6.26.3",
         "babel-runtime": "6.26.0",
         "cross-env": "7.0.0",
-        "prettier": "2.8.7",
+        "jsdom": "22.1.0",
+        "prettier": "3.0.0",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
         "react-scripts-ts": "3.1.0",
         "rollup": "2.26.11",
         "rollup-plugin-alias": "2.2.0",
@@ -46,7 +53,9 @@
         "rollup-plugin-url": "3.0.1",
         "rollup-plugin-visualizer": "4.1.1",
         "tslib": "2.0.1",
-        "typescript": "4.0.2"
+        "typescript": "4.0.2",
+        "vite": "4.4.4",
+        "vitest": "0.33.0"
     },
     "files": [
         "dist"