easy-state - npm Package Compare versions

Comparing version 0.2.0 to 1.0.0

lib/createStateTree.js

@@ -19,2 +19,3 @@ 'use strict';
   var currentState = initialState;
+  var previousState = currentState;
   var listeners = [];
@@ -43,8 +44,10 @@
     if (nextState) {
+      previousState = currentState;
+
       if ((0, _utils.isPlainObject)(nextState)) {
-        (0, _utils.checkForUndefinedKeys)(currentState, nextState);
+        (0, _utils.checkForUndefinedKeys)(previousState, nextState);
         currentState = Object.assign({}, initialState, nextState);
       } else if (typeof nextState === 'function') {
-        (0, _utils.checkForUndefinedKeys)(currentState, nextState(currentState));
-        currentState = Object.assign({}, initialState, nextState(currentState));
+        (0, _utils.checkForUndefinedKeys)(previousState, nextState(previousState));
+        currentState = Object.assign({}, initialState, nextState(previousState));
       } else {
@@ -60,3 +63,3 @@ throw new Error('Expected nextState to be a plain object or a callback function.');
       listeners.forEach(function (listener) {
-        return listener();
+        return listener(currentState, previousState);
       });
@@ -81,9 +84,2 @@
     /**
-     * Running the listener at once for
-     * setting the initial state.
-     */
-
-    listener();
-
-    /**
      * make the listeners available
@@ -90,0 +86,0 @@ * to setState and run them.

lib/index.js

@@ -6,3 +6,2 @@ 'use strict';
 });
-exports.combineStores = exports.createStateTree = undefined;
 
@@ -13,9 +12,4 @@ var _createStateTree = require('./createStateTree');
 
-var _combineStores = require('./combineStores');
-
-var _combineStores2 = _interopRequireDefault(_combineStores);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.createStateTree = _createStateTree2.default;
-exports.combineStores = _combineStores2.default;
+exports.default = _createStateTree2.default;

package.json

 {
   "name": "easy-state",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "Simple state manipulation without any frameworks.",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

@@ -9,3 +9,3 @@ # EasyState
 ```js
-import { createStateTree } from 'easy-state';
+import createStateTree from 'easy-state';
 ```
@@ -30,37 +30,79 @@ To get you started, initialize a state tree with the function `createStateTree`.
 ```js
-store.subscribe(() => {
-  myDOMElement.innerHTML = store.getState().counter
+store.subscribe((prevState, nextState) => {
+  DOMElement.innerHTML = nextState.counter;
 });
 ```
 
-The beauty of the subscribe-method is that you only need to define your UI-rendering once, and <strong>not</strong> on every state change you want to do in your application.
-
 > For larger applications you can divide your stores into
 > smaller pieces, to get more control over certain parts.
 
-
-If you want to have more control over your applications state with multiple
-stores, you can use the function `combineStores` that `easy-state` provides.
+Counter-example:
 ```js
-import { createStateTree, combineStores } from 'easy-state';
+const store = createStateTree({ counter: 0 });
 
-const storeOne = createStateTree({ hello: 'world' });
-const storeTwo = createStateTree({ foo: 'bar' });
+const initEventListeners = () => {
+  myIncrementButton.addEventListener('click', handleIncrement);
+  myDecrementButton.addEventListener('click', handleDecrement);
+};
 
-// init rootStore and pass the other stores to it.
-const store = combineStores({
-  storeOne,
-  storeTwo
-});
+const handleIncrement = () => {
+  const counter = store.getState().counter;
+  store.setState({ counter: counter + 1 });
+}
 
-// Then you can use it like this:
-store.storeOne.getState();
-store.storeOne.setState({ hello: 'something new' });
+const handleDecrement = () => {
+  const counter = store.getState().counter;
+  store.setState({ counter: counter - 1 });
+}
 
-// and you can listen to the store you want:
-store.storeTwo.subscribe(() => {
-  // render some HTML here and it will only listen to storeTwo.
+const renderCounter = (counter) => {
+  myDOMCounterElement.innerHTML = counter;
+}
+
+initEventListeners();
+renderCounter(store.getState().counter);
+
+store.subscribe((prevState, nextState) => {
+  renderCounter(nextState.counter);
 });
 ```
 
+### Developing easy-state
+
+Install
+```sh
+$ git clone https://github.com/oyvindhermansen/easy-state.git
+$ cd easy-state
+$ yarn install
+```
+
+Run the demo whitch is powered by webpack and webpack dev-server.
+The dev-server listens for changes in both `demo/` and `src/`, so you can write module implementation and testing it in the browser at the same time.
+```sh
+$ yarn dev
+```
+
+Unit testing
+```sh
+$ yarn test
+$ yarn test:watch
+```
+
+Test coverage
+```sh
+$ yarn coverage
+```
+
+Prettier
+```sh
+# Targets src, demo and __tests__ folders.
+$ yarn prettier
+```
+
+Build for production
+```sh
+$ yarn build
+```
+
+
 ### Motivation
@@ -67,0 +109,0 @@ I've often come across projects that needed to use plain jquery or vanilla JavaScript instead of any frameworks e.g React or VueJS, and there is one thing I've missed: Possibilty to have application state in sync with my UI without any hassle.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

146410

increased by1.64%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

111

increased by60.87%

Worsened metrics

Lines of code

120

decreased by-5.51%

No dependency changes