obzervable - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3-a

dist/index.js

@@ -1857,4 +1857,5 @@ 'use strict';
 */
+const arrayMutators = ['push', 'unshift', 'pop', 'splice', 'reverse', 'fill', 'sort'];
 
-const isArrayMutator = (target, property) => typeof target[property] === 'function' && ['push', 'unshift', 'pop', 'splice'].includes(property);
+const isArrayMutator = (target, property) => typeof target[property] === 'function' && arrayMutators.includes(property);
 /**
@@ -1864,3 +1865,3 @@ * Creates an observable state from an object
 * @param {object} initialState	the initial state
-* @returns {obserableState} observable state
+* @returns {obserableState}
 * @example
@@ -1879,4 +1880,5 @@ * import { createState } from 'obzervable'
       get: (target, property) => {
-        // Handling objects
-        if (typeof target[property] === 'object') {
+        const value = target[property]; // Handling objects
+
+        if (typeof value === 'object' && value !== null) {
           return new Proxy(target[property], handler()); // Handling array mutators
@@ -1897,4 +1899,51 @@ } else if (isArrayMutator(target, property)) {
           });
+        } else if (property === 'apply') {
+          /**
+          * A method to apply multiple changes to the state, any changes are mede on the state will be treated as a single change, can be called on any level of object
+          * @name apply
+          * @param {object} changes	changes to be applyed to the state
+          * @example
+          * import { createState, observe } from 'obzervable'
+          * const State = createState( {
+          *   jedi: {
+          *    	name: 'Obi-Wan Kenobi',
+          *   }
+          * } )
+          *
+          * const jediNameMap = ( { jedi: { name } } ) => ( { name } )
+          *
+          * observe( State, jediNameMap )( ( { name } ) => {
+          *   console.log( name )
+          * } )
+          * // Obi-Wan Kenobi
+          *
+          * State.jedi.apply( { name: 'Yoda' } )
+          * // Yoda
+          *
+          * State.apply( {
+          *   jedi: {
+          *       name: 'Anakin Skywalker',
+          *   }
+          * } )
+          * // Anakin Skywalker
+          */
+          return obj => (modified => {
+            const subscribersCopy = __subscribers.splice(0, __subscribers.length, {
+              __fn: () => {
+                modified = true;
+
+                __subscribers.splice(0, __subscribers.length);
+              }
+            });
+
+            Object.assign(new Proxy(target, handler()), obj);
+
+            __subscribers.splice(0, __subscribers.length, ...subscribersCopy);
+
+            modified && __subscribers.forEach(({
+              __fn
+            }) => __fn(initialState));
+          })(false);
         } else {
-          return target[property];
+          return value;
         }
@@ -1928,3 +1977,3 @@ },
  * @name observe
- * @param {obserableState} state	observable state
+ * @param {obserableState} state
  * @param {function=} mapper	( Optional ) a mapper to observe only certain parts of the state, if not specified it will listen to changes in the whole state
@@ -1931,0 +1980,0 @@ * @returns {function} a function that takes your callback and will call it everytime state changes

package.json

 {
   "name": "obzervable",
-  "version": "0.1.2",
+  "version": "0.1.3a",
   "main": "./dist/index.js",
@@ -15,4 +15,2 @@ "repository": "https://github.com/voodoo-child/obzervable.git",
     "jest": "^23.6.0",
-    "jsdoc": "^3.5.5",
-    "jsdoc-to-markdown": "^4.0.1",
     "lodash.clonedeep": "^4.5.0",
@@ -19,0 +17,0 @@ "rollup": "^0.67.3",

README.md

@@ -9,1 +9,59 @@ # obzervable
 Documentation and usage examples: [documentation](https://github.com/voodoo-child/obzervable/blob/master/DOCUMENTATION.md)
+
+# Example
+
+## Counter
+```javascript
+import { createState, observe } from 'obzervable'
+
+const State = createState( {
+	count: 0,
+	active: false
+} )
+
+const Counter = document.createElement( 'h1' )
+const StartButton = document.createElement('button')
+const ResetButton = document.createElement('button')
+const Body = document.getElementsByTagName('body')[0]
+
+ResetButton.innerText = 'reset'
+Body.appendChild( Counter )
+Body.appendChild( StartButton )
+Body.appendChild( ResetButton )
+
+
+observe( State, ( { count } ) => ( { count } ) )( ( { count } ) => {
+	return Counter.innerText = count
+} );
+
+( ( interval ) => {
+
+	observe( State, ( { active } ) => ( { active } ) )( ( { active } ) => {
+
+		if ( active ) {
+			interval = setInterval( () => State.count += 1, 1000)
+		} else {
+			clearInterval( interval )
+		}
+
+		StartButton.innerText = ( active ) ? 'stop' : 'start'
+
+		return Counter.style.color = ( active ) ? 'green' : 'red'
+
+	} )
+
+} )( null )
+
+StartButton.addEventListener( 'click', ( e ) => {
+	const { active } = State
+	State.active = !active
+} )
+
+ResetButton.addEventListener( 'click', ( e ) => {
+	State.apply( {
+		count: 0,
+		active: false
+	} )
+} )
+
+```

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

430917

increased by0.5%

Dev dependency count

12

decreased by-14.29%

Lines of code

1731

increased by1.64%

Number of high maintenance alerts

0

decreased by-100%

Number of lines in readme file

67

increased by644.44%

Worsened metrics

Number of package files

6

decreased by-33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes