Skip to content

There is a bit more smart way to compare things, than a shallow equal.

License

Notifications You must be signed in to change notification settings

theKashey/proxyequal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Apr 22, 2020
c0e167b · Apr 22, 2020
Nov 2, 2019
Apr 28, 2019
Apr 18, 2020
Aug 28, 2019
Feb 19, 2018
Aug 28, 2019
Feb 20, 2018
Aug 28, 2019
Feb 11, 2018
May 24, 2019
Jul 22, 2018
Jul 22, 2018
Apr 22, 2020
Sep 8, 2019
Aug 28, 2019

Repository files navigation

proxyequal

CircleCI status Greenkeeper badge

Shallow equal is a good thing, but it compares thing you don't need.

Proxy equal - "MobX"-like solution, which will "magically" compare only used keys.

NPM

Usage

  • Wrap an object with proxyState

  • Run some computations using providing proxyObject. proxyState returns object with shape

    • state - a double of provided state, with tracking enabled
    • affected - list of used keys in a state.
    • seal - disables tracking
    • unseal - enabled tracking
    • replaceState(newState) - replaces top level state, maintaining rest of data.
    • reset - resets tracked keys
  • proxy will collect all referenced or used keys

  • proxyEqual will compare all used "endpoint" keys of 2 objects

  • proxyShallow will compare all used NON "endpoint" keys of 2 objects.

The difference between proxyEqual and proxyShallow is in expectations.

  • proxyShallow is similar to shallowEqual, it compares the top level objects. Might be they are still the same.
  • proxyEqual working on variable-value level, performing (very) deep comparison of objects.

Extra API

  • spreadGuardsEnabled(boolean=[true]) - controls spread guards, or all-keys-enumeration, which makes proxyEqual ineffective.
  • sourceMutationsEnabled(boolean=[false]) - controls set behavior. By default proxied state is frozen.

When to use proxyequal

When you have a big state, for example redux state, but some function (redux selector, or mapStateToProps) uses just a small subset.

Here proxyequal can shine, detecting the only used branches, and comparing only the used keys.

Example

import {proxyState, proxyEqual, proxyShallow} from 'proxyequal';

// wrap the original state
const trapped = proxyState(state);

// use provided one in computations
mapStateToProps(trapped.state);

// first shallow compare
proxyShallow(state, newState, trapped.affected);

// next - deep compare
proxyEqual(state, newState, trapped.affected);

Don't forget to disable

const trapped = proxyState(state);
// do something
workWith(trapped.state);

trapped.seal();

// now tracking is disabled

trapped.unseal();
// and enabled

Speed

Uses ES6 Proxy underneath to detect used branches(as MobX), and search-trie to filter out keys for shallow or equal compare.

So - it is lighting fast.

Limitations

Unfortunately, due to Proxy wrappers all objects will be unique each run.

 shallowEqual(proxyState(A), proxyState(A)) === false

There is a undocumented way to solve it, used internally in memoize-state library. Once it will be proven to work stable - we will expose it.

Compatibility

Requires Proxy support, so the proxy-polyfill is included in the common bundle for Internet Explorer 11. How this works may change in future, see issue #15 "ProxyPolyfill is unconditionally imported" for details.

Licence

MIT

About

There is a bit more smart way to compare things, than a shallow equal.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published