constate - npm Package Compare versions

Comparing version 1.0.0-alpha.1 to 1.0.0-alpha.2

CHANGELOG.md

@@ -5,2 +5,19 @@ # Change Log
 
+<a name="1.0.0-alpha.2"></a>
+# [1.0.0-alpha.2](https://github.com/diegohaz/constate/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2018-11-22)
+
+
+### Bug Fixes
+
+* Fix Redux DevTools creating unnecessary entries ([7162ad2](https://github.com/diegohaz/constate/commit/7162ad2))
+* Fix usage of `useContext(Context)` ([3ff531a](https://github.com/diegohaz/constate/commit/3ff531a))
+* Make `initialAction` on `useContextReducer` synchronous on render ([bde4b3c](https://github.com/diegohaz/constate/commit/bde4b3c))
+
+
+### BREAKING CHANGES
+
+* `createContext` doesn't accept a `name` argument anymore.
+
+
+
 <a name="1.0.0-alpha.1"></a>
@@ -7,0 +24,0 @@ # [1.0.0-alpha.1](https://github.com/diegohaz/constate/compare/v1.0.0-alpha.0...v1.0.0-alpha.1) (2018-11-21)

dist/constate.cjs.js

@@ -65,9 +65,8 @@ 'use strict';
   return function (contextKey, reducer, initialState, initialAction) {
-    var observedBits = contextKey ? hash(contextKey) : undefined; // @ts-ignore
-
-    var _React$useContext = React.useContext(contextKey ? context : EmptyContext, observedBits),
+    // @ts-ignore
+    var _React$useContext = React.useContext(contextKey ? context : EmptyContext, contextKey ? hash(contextKey) : undefined),
         contextState = _React$useContext[0],
         setContextState = _React$useContext[1];
 
-    var _React$useReducer = React.useReducer(reducer, initialState, contextKey ? undefined : initialAction),
+    var _React$useReducer = React.useReducer(reducer, initialState, initialAction),
         state = _React$useReducer[0],
@@ -91,3 +90,3 @@ dispatch = _React$useReducer[1];
     React.useMutationEffect(function () {
-      if (contextKey && contextState[contextKey] == null && (initialState != null || initialAction)) {
+      if (contextKey && contextState[contextKey] == null && state != null) {
         setContextState(function (prevState) {
@@ -97,3 +96,3 @@ if (prevState[contextKey] == null) {
 
-            return Object.assign({}, prevState, (_Object$assign2 = {}, _Object$assign2[contextKey] = initialAction ? reducer(state, initialAction) : state, _Object$assign2));
+            return Object.assign({}, prevState, (_Object$assign2 = {}, _Object$assign2[contextKey] = state, _Object$assign2));
           }
@@ -124,3 +123,2 @@
   var _ref = _temp === void 0 ? {} : _temp,
-      name = _ref.name,
       _ref$enabled = _ref.enabled,
@@ -131,11 +129,11 @@ enabled = _ref$enabled === void 0 ? true : _ref$enabled;
   var prevState = React.useRef(null);
+  var lastStateSentFromDevtools = React.useRef(null);
   React.useEffect(function () {
     if (enabled && devtoolsExtension) {
-      devtools.current = devtoolsExtension.connect({
-        name: name
-      });
+      devtools.current = devtoolsExtension.connect();
       devtools.current.init(state);
       devtools.current.subscribe(function (message) {
         if (message.type === "DISPATCH" && message.state) {
-          setState(JSON.parse(message.state));
+          lastStateSentFromDevtools.current = JSON.parse(message.state);
+          setState(lastStateSentFromDevtools.current);
         }
@@ -157,10 +155,12 @@ });
 
-      for (var key in state) {
-        if (prevState.current && state[key] !== prevState.current[key]) {
-          changedKey = key;
+      if (lastStateSentFromDevtools.current !== state) {
+        for (var key in state) {
+          if (prevState.current && state[key] !== prevState.current[key]) {
+            changedKey = key;
+          }
         }
-      }
 
-      if (changedKey && devtools.current) {
-        devtools.current.send(changedKey, state);
+        if (changedKey && devtools.current) {
+          devtools.current.send(changedKey, state);
+        }
       }
@@ -173,17 +173,25 @@
 
-function createContext(initialState, name) {
-  var Context = React.createContext([initialState, function () {}], function (_ref, _ref2) {
-    var prev = _ref[0];
-    var next = _ref2[0];
-    var changedBits = 0;
+function defaultCalculateChangedBits(prev, next) {
+  var changedBits = 0;
 
-    for (var contextKey in next) {
-      if (prev[contextKey] !== next[contextKey]) {
-        changedBits |= hash(contextKey);
-      }
+  for (var contextKey in next) {
+    if (prev[contextKey] !== next[contextKey]) {
+      changedBits |= hash(contextKey);
     }
+  }
 
-    return changedBits;
-  });
+  return changedBits;
+}
 
+function createContext(initialState, calculateChangedBits) {
+  if (calculateChangedBits === void 0) {
+    calculateChangedBits = defaultCalculateChangedBits;
+  }
+
+  var Context = React.createContext([initialState, function () {}], calculateChangedBits ? function (_ref, _ref2) {
+    var prev = _ref[0];
+    var next = _ref2[0];
+    return calculateChangedBits(prev, next);
+  } : undefined);
+
   var Provider = function Provider(_ref3) {
@@ -197,3 +205,2 @@ var children = _ref3.children,
     useDevtools(state[0], state[1], {
-      name: name,
       enabled: devtools
@@ -200,0 +207,0 @@ });

dist/constate.es.js

@@ -62,9 +62,8 @@ import * as React from 'react';
   return function (contextKey, reducer, initialState, initialAction) {
-    var observedBits = contextKey ? hash(contextKey) : undefined; // @ts-ignore
-
-    var _React$useContext = useContext(contextKey ? context : EmptyContext, observedBits),
+    // @ts-ignore
+    var _React$useContext = useContext(contextKey ? context : EmptyContext, contextKey ? hash(contextKey) : undefined),
         contextState = _React$useContext[0],
         setContextState = _React$useContext[1];
 
-    var _React$useReducer = useReducer(reducer, initialState, contextKey ? undefined : initialAction),
+    var _React$useReducer = useReducer(reducer, initialState, initialAction),
         state = _React$useReducer[0],
@@ -88,3 +87,3 @@ dispatch = _React$useReducer[1];
     useMutationEffect(function () {
-      if (contextKey && contextState[contextKey] == null && (initialState != null || initialAction)) {
+      if (contextKey && contextState[contextKey] == null && state != null) {
         setContextState(function (prevState) {
@@ -94,3 +93,3 @@ if (prevState[contextKey] == null) {
 
-            return Object.assign({}, prevState, (_Object$assign2 = {}, _Object$assign2[contextKey] = initialAction ? reducer(state, initialAction) : state, _Object$assign2));
+            return Object.assign({}, prevState, (_Object$assign2 = {}, _Object$assign2[contextKey] = state, _Object$assign2));
           }
@@ -121,3 +120,2 @@
   var _ref = _temp === void 0 ? {} : _temp,
-      name = _ref.name,
       _ref$enabled = _ref.enabled,
@@ -128,11 +126,11 @@ enabled = _ref$enabled === void 0 ? true : _ref$enabled;
   var prevState = useRef(null);
+  var lastStateSentFromDevtools = useRef(null);
   useEffect(function () {
     if (enabled && devtoolsExtension) {
-      devtools.current = devtoolsExtension.connect({
-        name: name
-      });
+      devtools.current = devtoolsExtension.connect();
       devtools.current.init(state);
       devtools.current.subscribe(function (message) {
         if (message.type === "DISPATCH" && message.state) {
-          setState(JSON.parse(message.state));
+          lastStateSentFromDevtools.current = JSON.parse(message.state);
+          setState(lastStateSentFromDevtools.current);
         }
@@ -154,10 +152,12 @@ });
 
-      for (var key in state) {
-        if (prevState.current && state[key] !== prevState.current[key]) {
-          changedKey = key;
+      if (lastStateSentFromDevtools.current !== state) {
+        for (var key in state) {
+          if (prevState.current && state[key] !== prevState.current[key]) {
+            changedKey = key;
+          }
         }
-      }
 
-      if (changedKey && devtools.current) {
-        devtools.current.send(changedKey, state);
+        if (changedKey && devtools.current) {
+          devtools.current.send(changedKey, state);
+        }
       }
@@ -170,17 +170,25 @@
 
-function createContext$1(initialState, name) {
-  var Context = createContext([initialState, function () {}], function (_ref, _ref2) {
-    var prev = _ref[0];
-    var next = _ref2[0];
-    var changedBits = 0;
+function defaultCalculateChangedBits(prev, next) {
+  var changedBits = 0;
 
-    for (var contextKey in next) {
-      if (prev[contextKey] !== next[contextKey]) {
-        changedBits |= hash(contextKey);
-      }
+  for (var contextKey in next) {
+    if (prev[contextKey] !== next[contextKey]) {
+      changedBits |= hash(contextKey);
     }
+  }
 
-    return changedBits;
-  });
+  return changedBits;
+}
 
+function createContext$1(initialState, calculateChangedBits) {
+  if (calculateChangedBits === void 0) {
+    calculateChangedBits = defaultCalculateChangedBits;
+  }
+
+  var Context = createContext([initialState, function () {}], calculateChangedBits ? function (_ref, _ref2) {
+    var prev = _ref[0];
+    var next = _ref2[0];
+    return calculateChangedBits(prev, next);
+  } : undefined);
+
   var Provider = function Provider(_ref3) {
@@ -194,3 +202,2 @@ var children = _ref3.children,
     useDevtools(state[0], state[1], {
-      name: name,
       enabled: devtools
@@ -197,0 +204,0 @@ });

dist/constate.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.constate={},e.React)}(this,function(e,C){"use strict";var n={};function d(e){if(void 0!==n[e])return n[e];var t=Object.keys(n).length;return n[e]=1<<t,n[e]}function t(o){void 0===o&&(o="useEffect");var c={};return function(e,t,n){var u=e,r=C.useRef(C.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current);null==c[u]&&(c[u]=r.current),C.useMutationEffect(function(){if(u)return function(){c[u]=null}},[u]),C[o](function(){if(!u||c[u]===r.current)return t()},n?[u].concat(n):void 0)}}var v=C.createContext([]);function u(l){return function(u,r,e,n){var t=u?d(u):void 0,o=C.useContext(u?l:v,t),c=o[0],f=o[1],i=C.useReducer(r,e,u?void 0:n),a=i[0],s=i[1];return u&&(null!=c[u]&&(a=c[u]),s=function(n){return f(function(e){var t;return Object.assign({},e,((t={})[u]=r(e[u],n),t))})}),C.useMutationEffect(function(){u&&null==c[u]&&(null!=e||n)&&f(function(e){return null!=e[u]?e:Object.assign({},e,((t={})[u]=n?r(a,n):a,t));var t})},[u]),[a,s]}}function r(e,t){return u=e,"function"==typeof(n=t)?n(u):n;var n,u}var b="undefined"!=typeof window&&window.__REDUX_DEVTOOLS_EXTENSION__;function o(_,E){var e,n,x=C.createContext([_,function(){}],function(e,t){var n=e[0],u=t[0],r=0;for(var o in u)n[o]!==u[o]&&(r|=d(o));return r});return{Context:x,Provider:function(e){var n,t,u,r,o,c,f,i,a,s=e.children,l=e.devtools,d=C.useState(_),v=C.useMemo(function(){return d},[d[0]]);return n=d[0],t=d[1],o=(r=void 0===(u={name:E,enabled:l})?{}:u).name,c=r.enabled,f=void 0===c||c,i=C.useRef(null),a=C.useRef(null),C.useEffect(function(){if(f&&b)return i.current=b.connect({name:o}),i.current.init(n),i.current.subscribe(function(e){"DISPATCH"===e.type&&e.state&&t(JSON.parse(e.state))}),function(){i.current&&(i.current.unsubscribe(),b.disconnect())}},[f]),C.useEffect(function(){if(f&&b){var e;for(var t in n)a.current&&n[t]!==a.current[t]&&(e=t);e&&i.current&&i.current.send(e,n),a.current=n}},[n,f]),C.createElement(x.Provider,{value:v},s)},useContextState:(e=x,n=u(e),function(e,t){return n(e,r,t)}),useContextReducer:u(x),unstable_useContextEffect:t(),unstable_useContextLayoutEffect:t("useLayoutEffect"),unstable_useContextMutationEffect:t("useMutationEffect")}}var c=o({}),f=c.Context,i=c.Provider,a=c.useContextReducer,s=c.useContextState,l=c.unstable_useContextEffect,_=c.unstable_useContextLayoutEffect,E=c.unstable_useContextMutationEffect;e.createContext=o,e.Context=f,e.Provider=i,e.useContextReducer=a,e.useContextState=s,e.unstable_useContextEffect=l,e.unstable_useContextLayoutEffect=_,e.unstable_useContextMutationEffect=E,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.constate={},e.React)}(this,function(e,E){"use strict";var n={};function l(e){if(void 0!==n[e])return n[e];var t=Object.keys(n).length;return n[e]=1<<t,n[e]}function t(o){void 0===o&&(o="useEffect");var c={};return function(e,t,n){var u=e,r=E.useRef(E.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current);null==c[u]&&(c[u]=r.current),E.useMutationEffect(function(){if(u)return function(){c[u]=null}},[u]),E[o](function(){if(!u||c[u]===r.current)return t()},n?[u].concat(n):void 0)}}var d=E.createContext([]);function u(a){return function(u,r,e,t){var n=E.useContext(u?a:d,u?l(u):void 0),o=n[0],c=n[1],f=E.useReducer(r,e,t),i=f[0],s=f[1];return u&&(null!=o[u]&&(i=o[u]),s=function(n){return c(function(e){var t;return Object.assign({},e,((t={})[u]=r(e[u],n),t))})}),E.useMutationEffect(function(){u&&null==o[u]&&null!=i&&c(function(e){return null!=e[u]?e:Object.assign({},e,((t={})[u]=i,t));var t})},[u]),[i,s]}}function o(e,t){return u=e,"function"==typeof(n=t)?n(u):n;var n,u}var x="undefined"!=typeof window&&window.__REDUX_DEVTOOLS_EXTENSION__;function c(e,t){var n=0;for(var u in t)e[u]!==t[u]&&(n|=l(u));return n}function r(v,r){void 0===r&&(r=c);var e,n,_=E.createContext([v,function(){}],r?function(e,t){var n=e[0],u=t[0];return r(n,u)}:void 0);return{Context:_,Provider:function(e){var n,t,u,r,o,c,f,i,s=e.children,a=e.devtools,l=E.useState(v),d=E.useMemo(function(){return l},[l[0]]);return n=l[0],t=l[1],r=(void 0===(u={enabled:a})?{}:u).enabled,o=void 0===r||r,c=E.useRef(null),f=E.useRef(null),i=E.useRef(null),E.useEffect(function(){if(o&&x)return c.current=x.connect(),c.current.init(n),c.current.subscribe(function(e){"DISPATCH"===e.type&&e.state&&(i.current=JSON.parse(e.state),t(i.current))}),function(){c.current&&(c.current.unsubscribe(),x.disconnect())}},[o]),E.useEffect(function(){if(o&&x){var e;if(i.current!==n){for(var t in n)f.current&&n[t]!==f.current[t]&&(e=t);e&&c.current&&c.current.send(e,n)}f.current=n}},[n,o]),E.createElement(_.Provider,{value:d},s)},useContextState:(e=_,n=u(e),function(e,t){return n(e,o,t)}),useContextReducer:u(_),unstable_useContextEffect:t(),unstable_useContextLayoutEffect:t("useLayoutEffect"),unstable_useContextMutationEffect:t("useMutationEffect")}}var f=r({}),i=f.Context,s=f.Provider,a=f.useContextReducer,v=f.useContextState,_=f.unstable_useContextEffect,C=f.unstable_useContextLayoutEffect,b=f.unstable_useContextMutationEffect;e.createContext=r,e.Context=i,e.Provider=s,e.useContextReducer=a,e.useContextState=v,e.unstable_useContextEffect=_,e.unstable_useContextLayoutEffect=C,e.unstable_useContextMutationEffect=b,Object.defineProperty(e,"__esModule",{value:!0})});

dist/ts/src/createContext.d.ts

@@ -6,3 +6,3 @@ import * as React from "react";
 };
-declare function createContext<State>(initialState: State, name?: string): {
+declare function createContext<State>(initialState: State, calculateChangedBits?: (prev: State, next: State) => number): {
     Context: React.Context<[State, import("./types").SetState<State>]>;
@@ -9,0 +9,0 @@ Provider: ({ children, devtools }: ProviderProps) => JSX.Element;

dist/ts/src/useDevtools.d.ts

 import { SetState } from "./types";
-export declare type DevtoolsOptions = {
-    name?: string;
+declare function useDevtools<State>(state: State, setState: SetState<State>, { enabled }?: {
     enabled?: boolean;
-};
-declare function useDevtools<State>(state: State, setState: SetState<State>, { name, enabled }?: DevtoolsOptions): void;
+}): void;
 export default useDevtools;

package.json

 {
   "name": "constate",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "Yet another React state management library that lets you work with local state and scale up to global state with ease",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -14,4 +14,4 @@ <p align="center">
 <p align="center">
-  <a href="https://npmjs.org/package/constate"><img alt="NPM version" src="https://img.shields.io/npm/v/constate.svg?style=flat-square"></a>
-  <a href="https://unpkg.com/constate"><img alt="Gzip size" src="https://img.badgesize.io/https://unpkg.com/constate?style=flat-square&compression=gzip"></a>
+  <a href="https://npmjs.org/package/constate"><img alt="NPM version" src="https://img.shields.io/npm/v/constate/next.svg?style=flat-square"></a>
+  <a href="https://unpkg.com/constate@next"><img alt="Gzip size" src="https://img.badgesize.io/https://unpkg.com/constate@next?style=flat-square&compression=gzip"></a>
   <a href="https://david-dm.org/diegohaz/constate"><img alt="Dependencies" src="https://img.shields.io/david/diegohaz/constate/master.svg?style=flat-square"></a>
@@ -36,6 +36,12 @@ <a href="https://travis-ci.org/diegohaz/constate"><img alt="Build Status" src="https://img.shields.io/travis/diegohaz/constate/master.svg?style=flat-square"></a>
 
+function useCounter(context) {
+  // replacing React.useState(0);
+  const [count, setCount] = useContextState(context, 0);
+  const increment = () => setCount(count + 1);
+  const decrement = () => setCount(count - 1);
+  return { count, increment, decrement };
+}
+
 function DecrementButton() {
-  // const [count, setCount] = React.useState(0);
-  const [count, setCount] = useContextState("counter1", 0);
-  const decrement = () => setCount(count - 1)
+  const { decrement } = useCounter("counter1");
   return <button onClick={decrement}>-</button>;
@@ -45,5 +51,3 @@ }
 function IncrementButton() {
-  // const [count, setCount] = React.useState(0);
-  const [count, setCount] = useContextState("counter1", 0);
-  const increment = () => setCount(count + 1)
+  const { increment } = useCounter("counter1");
   return <button onClick={increment}>+</button>;
@@ -53,4 +57,3 @@ }
 function Count() {
-  // const [count] = React.useState(0);
-  const [count] = useContextState("counter1", 0);
+  const { count } = useCounter("counter1");
   return <span>{count}</span>
@@ -88,2 +91,4 @@ }
 
+> Constate `v1` is in alpha version. If you're looking for `v0`, see [`v0` docs](https://github.com/diegohaz/constate/tree/v0#readme) or read the [migration guide](MIGRATING_FROM_V0_TO_V1.md).
+
 <br>
@@ -246,4 +251,2 @@
 
-`createContext` receives a second argument `name`, which will be displayed in the Redux Devtools when using the `devtools` prop on `Provider`.
-
 <br>
@@ -250,0 +253,0 @@

src/createUseContextReducer.ts

@@ -32,8 +32,6 @@ import * as React from "react";
   ) => {
-    const observedBits = contextKey ? hash(contextKey as string) : undefined;
-
     // @ts-ignore
     const [contextState, setContextState] = React.useContext(
       contextKey ? context : EmptyContext,
-      observedBits
+      contextKey ? hash(contextKey as string) : undefined
     );
@@ -44,3 +42,3 @@
       initialState!,
-      contextKey ? undefined : initialAction
+      initialAction
     );
@@ -63,13 +61,7 @@
       () => {
-        if (
-          contextKey &&
-          contextState[contextKey] == null &&
-          (initialState != null || initialAction)
-        ) {
+        if (contextKey && contextState[contextKey] == null && state != null) {
           setContextState((prevState: State) => {
             if (prevState[contextKey] == null) {
               return Object.assign({}, prevState, {
-                [contextKey]: initialAction
-                  ? reducer(state, initialAction)
-                  : state
+                [contextKey]: state
               });
@@ -76,0 +68,0 @@ }

src/useDevtools.ts

 import * as React from "react";
 import { SetState } from "./types";
 
-export type DevtoolsOptions = {
-  name?: string;
-  enabled?: boolean;
-};
-
 const devtoolsExtension =
@@ -15,3 +10,3 @@ typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION__;
   setState: SetState<State>,
-  { name, enabled = true }: DevtoolsOptions = {}
+  { enabled = true }: { enabled?: boolean } = {}
 ) {
@@ -22,2 +17,3 @@ const devtools = React.useRef<ReturnType<
   const prevState = React.useRef<State | null>(null);
+  const lastStateSentFromDevtools = React.useRef<State | null>(null);
 
@@ -27,7 +23,8 @@ React.useEffect(
       if (enabled && devtoolsExtension) {
-        devtools.current = devtoolsExtension.connect({ name });
+        devtools.current = devtoolsExtension.connect();
         devtools.current.init(state);
         devtools.current.subscribe(message => {
           if (message.type === "DISPATCH" && message.state) {
-            setState(JSON.parse(message.state));
+            lastStateSentFromDevtools.current = JSON.parse(message.state);
+            setState(lastStateSentFromDevtools.current!);
           }
@@ -51,10 +48,12 @@ });
         let changedKey;
-        for (const key in state) {
-          if (prevState.current && state[key] !== prevState.current[key]) {
-            changedKey = key;
+        if (lastStateSentFromDevtools.current !== state) {
+          for (const key in state) {
+            if (prevState.current && state[key] !== prevState.current[key]) {
+              changedKey = key;
+            }
           }
+          if (changedKey && devtools.current) {
+            devtools.current.send(changedKey, state);
+          }
         }
-        if (changedKey && devtools.current) {
-          devtools.current.send(changedKey, state);
-        }
         prevState.current = state;
@@ -61,0 +60,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

45512

increased by2.98%

Lines of code

737

increased by1.66%

Number of lines in readme file

261

increased by1.16%

No dependency changes