Comparing version 0.1.2 to 0.1.3
@@ -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 |
{ | ||
"name": "obzervable", | ||
"version": "0.1.2", | ||
"version": "0.1.3", | ||
"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", |
@@ -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 ) | ||
} | ||
Button.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 | ||
} ) | ||
} ) | ||
``` |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
430911
12
1731
67
6