react-duck - npm Package Compare versions

Comparing version 0.4.2 to 0.5.0

dist/components/Context.d.ts

 import * as React from "react";
-export declare let GlobalContext: any;
+export declare let GlobalContext: React.Context<any>;
 export declare function setGlobalContext<T>(Context: React.Context<T>): void;

dist/createContext.d.ts

@@ -0,1 +1,2 @@
+export declare function createContextWithValue<S, T extends string, P>(value: Partial<ContextValue<S, T, P>>): Context<S, T, P>;
 export declare function createContext<S, T extends string, P>(rootReducer: Reducer<S, T, P>, preloadedState: S, enhancer?: ContextEnhance<S, T, P>, displayName?: string, global?: boolean): Context<S, T, P>;

dist/createContext.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createContext = void 0;
+exports.createContext = exports.createContextWithValue = void 0;
 var React = require("react");
@@ -15,2 +26,6 @@ var symbolObservable_1 = require("./utils/symbolObservable");
 }
+function createContextWithValue(value) {
+    return React.createContext(__assign({ dispatch: function (a) { return a; }, getState: function () { return value.state; } }, value));
+}
+exports.createContextWithValue = createContextWithValue;
 function createContext(rootReducer, preloadedState, enhancer, displayName, global) {
@@ -20,6 +35,4 @@ var _a;
     var unimplemented = createUnimplemented("Context(" + (displayName !== null && displayName !== void 0 ? displayName : "") + ")");
-    var Context = React.createContext((_a = {
-            dispatch: function (a) { return a; },
+    var Context = createContextWithValue((_a = {
             enhancer: enhancer,
-            getState: function () { return preloadedState; },
             reducer: rootReducer,
@@ -26,0 +39,0 @@ state: preloadedState

dist/createReducer.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createReducer = void 0;
-function createReducer(initialState, actionTypeToReducer /* Action types to reducer mapping */, defaultReducer) {
+function createReducer(initialState, actionTypeToReducer, defaultReducer) {
     var isReducerActionType = function (a) {
@@ -6,0 +6,0 @@ return a !== undefined &&

dist/hooks/useDispatch.d.ts

@@ -1,1 +0,1 @@
-export declare function useDispatch<S, T extends string, P>(actionCreator: ActionCreator<T, P>, Context?: Context<S, T, P>): (...args: any[]) => void;
+export declare function useDispatch<S, T extends string, P>(actionCreator: Nullable<ActionCreator<T, P>>, Context?: Context<S, T, P>): (...args: P[]) => void;

dist/hooks/useDispatch.js

 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spread = (this && this.__spread) || function () {
-    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
-    return ar;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDispatch = void 0;
 var React = require("react");
+var bindActionCreators_1 = require("../utils/bindActionCreators");
 var __1 = require("..");
 function useDispatch(actionCreator, Context) {
     var dispatch = React.useContext(Context !== null && Context !== void 0 ? Context : __1.GlobalContext).dispatch;
-    return React.useCallback(function dispatchAction() {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        dispatch(actionCreator.apply(void 0, __spread(args)));
-    }, [actionCreator, dispatch]);
+    var boundActionCreator = React.useMemo(function () { return bindActionCreators_1.bindActionCreator(actionCreator, dispatch); }, [actionCreator, dispatch]);
+    if (!boundActionCreator) {
+        throw new Error("Unable to bind action creator \"" + actionCreator + "\" to disptch");
+    }
+    return React.useCallback(boundActionCreator, [boundActionCreator]);
 }
 exports.useDispatch = useDispatch;

dist/hooks/useSelector.d.ts

@@ -1,1 +0,1 @@
-export declare function useSelector<S, R, T extends string, P>(selector: Selector<S, R, T, P> | undefined, Context?: Context<S, T, P>): R | undefined;
+export declare function useSelector<S, R, T extends string, P>(selector: Nullable<Selector<S, R, T, P>>, Context?: Context<S, T, P>): Nullable<R>;

dist/index.d.ts

@@ -6,2 +6,3 @@ export { GlobalContext } from "./components/Context";
 export { createContext } from "./createContext";
+export { createConnect } from "./createConnect";
 export { createDuck } from "./createDuck";
@@ -8,0 +9,0 @@ export { createReducer } from "./createReducer";

dist/index.js

@@ -13,2 +13,4 @@ "use strict";
 Object.defineProperty(exports, "createContext", { enumerable: true, get: function () { return createContext_1.createContext; } });
+var createConnect_1 = require("./createConnect");
+Object.defineProperty(exports, "createConnect", { enumerable: true, get: function () { return createConnect_1.createConnect; } });
 var createDuck_1 = require("./createDuck");
@@ -15,0 +17,0 @@ Object.defineProperty(exports, "createDuck", { enumerable: true, get: function () { return createDuck_1.createDuck; } });

dist/utils/combineSelectors.d.ts

@@ -1,1 +0,1 @@
-export declare function combineSelectors<S, T extends string, P, R, N extends string, Q extends string>(duckName: N, selectors?: SelectorMapping<S, R, T, P, Q>): SelectorMapping<S, R, T, P, Q> | undefined;
+export declare function combineSelectors<S, T extends string, P, R, N extends string, Q extends string>(duckName: N, selectors?: SelectorMapping<S, R, T, P, Q>): Nullable<SelectorMapping<S, R, T, P, Q>>;

package.json

 {
     "name": "react-duck",
-    "version": "0.4.2",
+    "version": "0.5.0",
     "description": "🦆 React ducks without Redux",
     "author": "iamogbz",
+    "license": "Unlicense",
     "repository": {
@@ -31,10 +32,11 @@ "type": "git",
     "scripts": {
+        "build": "npm run clean && tsc --project tsconfig.prod.json",
+        "build-watch": "npm run clean && tsc --watch",
+        "clean": "rm -rf ./dist",
+        "commit": "git-cz",
+        "dedupe": "npm dedupe",
         "lint": "eslint . --max-warnings=0 --ext .js,.jsx,.ts,.tsx",
-        "build": "rm -rf ./dist && tsc --project tsconfig.prod.json",
-        "build-watch": "tsc --watch",
+        "release": "semantic-release",
         "test": "jest",
-        "coveralls": "cat ./artifacts/coverage/lcov.info | coveralls",
-        "typecheck": "tsc --noEmit",
-        "commit": "git-cz",
-        "release": "semantic-release"
+        "typecheck": "tsc --noEmit"
     },
@@ -86,12 +88,10 @@ "release": {
     "peerDependencies": {
-        "react": "^16.13.0"
+        "react": "^16.13.0",
+        "hoist-non-react-statics": "^3.3.0"
     },
     "devDependencies": {
-        "@babel/cli": "^7.11.6",
-        "@babel/core": "^7.11.6",
-        "@babel/preset-typescript": "^7.10.4",
-        "@commitlint/cli": "^9.1.2",
-        "@commitlint/config-conventional": "^9.1.2",
-        "@commitlint/travis-cli": "^9.1.2",
-        "@testing-library/react": "^11.0.2",
+        "@commitlint/cli": "^11.0.0",
+        "@commitlint/config-conventional": "^11.0.0",
+        "@commitlint/travis-cli": "^11.0.0",
+        "@testing-library/react": "^11.0.4",
         "@testing-library/react-hooks": "^3.4.1",
@@ -101,10 +101,7 @@ "@types/jest": "^26.0.13",
         "@types/react": "^16.9.49",
+        "@types/react-is": "^16.7.1",
         "@typescript-eslint/eslint-plugin": "^2.34.0",
         "@typescript-eslint/parser": "^2.34.0",
         "acorn": "^8.0.1",
-        "babel-eslint": "^10.1.0",
-        "babel-loader": "^8.1.0",
-        "babel-plugin-transform-class-properties": "^6.24.1",
         "commitizen": "^4.2.1",
-        "coveralls": "^3.1.0",
         "cz-conventional-changelog": "^3.3.0",
@@ -119,3 +116,3 @@ "eslint": "^6.8.0",
         "eslint-plugin-react": "^7.20.6",
-        "eslint-plugin-react-hooks": "^4.1.1",
+        "eslint-plugin-react-hooks": "^4.1.2",
         "husky": "^4.3.0",
@@ -129,5 +126,6 @@ "jest": "^25.5.4",
         "react-test-renderer": "^16.13.1",
+        "reselect": "^4.0.0",
         "rxjs": "^6.6.3",
         "semantic-release": "^17.1.1",
-        "stylelint": "^13.7.0",
+        "stylelint": "^13.7.1",
         "stylelint-config-standard": "^20.0.0",
@@ -134,0 +132,0 @@ "stylelint-config-styled-components": "^0.1.1",

README.md

@@ -120,13 +120,9 @@ # React Duck
 
-```git
-diff --git a/index.jsx b/index.jsx
-index 0a0a0a0..1b1b1b1 100644
---- a/index.jsx
-+++ b/index.jsx
+```js
+// index.jsx
 const rootElement = document.getElementById("root");
--const Provider = createRootProvider(Context);
- ReactDOM.render(
--    <Provider>
-+    <Provider Context={Context}>
-         <App />
+ReactDOM.render(
+  <Provider Context={Context}>
+    <App />
+...
 ```
@@ -138,3 +134,3 @@
 
-This takes a variable list of middlewares to be applied
+This takes a variable list of middlewares to be applied.
 
@@ -165,6 +161,40 @@ #### Example: Custom Logger Middleware
 
-## Example
+### createConnect(Context?)
 
-As a proof of concept converted the sandbox app from the react-redux basic tutorial
+This a helper creates a function that can be used to smartly connect a component to your context value.
 
+```js
+// connect.js
+export default connect = createConnect(Context);
+```
+
+**Note**: if the `Context` argument is not supplied, the `GlobalContext` is used.
+
+**Note**: `createConnect` is just a helper and can be replaced with a direct import and use of `connect`.
+
+#### Example Usage
+
+```jsx
+// app.jsx
+function App(props) {
+  return (
+    <div>
+      Count: <span>{props.count}</span>
+      <button onClick={props.increment} />
+    </div>
+  );
+}
+
+export default connect(
+  (state) => ({ count: state[counterDuck.name] }),
+  (dispatch) => bindActionCreators(dispatch, counterDuck.actions)
+)(App);
+```
+
+See [redux connect][react-redux-connect] for more options.
+
+## Demo
+
+As a proof of concept see the converted sandbox app from the react-redux basic tutorial below.
+
 - With redux [example][react-redux-tutorial]
@@ -179,3 +209,3 @@ - Without redux [code][react-duck-no-redux]
 
-- Use `immer` to create immutable reducers, [see guide][immer-intro].
+- Use `immer` to create immutable reducers, [see guide][immer-intro]
 
@@ -185,3 +215,4 @@ [immer-intro]: https://medium.com/hackernoon/introducing-immer-immutability-the-easy-way-9d73d8f71cb3
 [react-duck-no-redux]: https://codesandbox.io/s/todo-app-without-redux-9yc57
+[react-redux-connect]: https://react-redux.js.org/api/connect
 [react-redux-tutorial]: https://react-redux.js.org/introduction/basic-tutorial
 [redux-applymiddleware]: https://redux.js.org/api/applymiddleware#applymiddlewaremiddleware

typings/duck.d.ts

@@ -7,3 +7,3 @@ type Action<
     payload?: P;
-};
+} & Record<string, unknown>;
 
@@ -19,4 +19,12 @@ type ActionCreator<T extends string = string, P = unknown, S = unknown> = (
     C extends string = T /* Action creator mapping keys */
-> = Record<C, ActionCreator<T, P, S>>;
+> = Record<C, Nullable<ActionCreator<T, P, S>>>;
 
+type ActionDispatcher<T extends string, P = unknown> = (...args: P[]) => void;
+
+type ActionDispatcherMapping<
+    T extends string = string,
+    P = unknown,
+    D extends string = T /* Action dispatcher mapping keys */
+> = Record<D, ActionDispatcher<T, P>>;
+
 type Reducer<
@@ -39,4 +47,5 @@ S = unknown,
     T extends string = string,
-    P = unknown
-> = (state: React.ReducerState<Reducer<S, Action<T, P>>>) => R;
+    P = unknown,
+    E extends unknown[] = unknown[]
+> = (state: React.ReducerState<Reducer<S, Action<T, P>>>, ...args: E) => R;
 
@@ -87,3 +96,3 @@ type SelectorMapping<
     reducer: Reducer<Record<N, S>, T, P>;
-    selectors: Record<N, SelectorMapping<S, R, T, P, Q> | undefined>;
+    selectors: Record<N, Nullable<SelectorMapping<S, R, T, P, Q>>>;
 };

No alert changes

Improved metrics

Total package byte prevSize

53791

increased by26.5%

Dev dependency count

41

decreased by-10.87%

Number of package files

52

increased by18.18%

Lines of code

973

increased by26.53%

Number of lines in readme file

214

increased by16.94%

Worsened metrics

Dependency count

2

increased by100%

No dependency changes