proxy-compare

What is proxy-compare?

The proxy-compare npm package is a utility for creating proxies that can be used to track changes in objects. It is particularly useful in state management scenarios where you need to detect changes in nested objects efficiently.

What are proxy-compare's main functionalities?

Create Proxies

This feature allows you to create a proxy for an object. Any changes made to the proxy will be tracked, which is useful for state management.

const { createProxy } = require('proxy-compare');

const state = { a: 1, b: { c: 2 } };
const proxyState = createProxy(state);

proxyState.a = 2; // This will be tracked
proxyState.b.c = 3; // This will also be tracked

Track Changes

This feature allows you to track changes made to the proxy and retrieve the untracked state. This is useful for comparing the current state with the previous state.

const { createProxy, getUntracked } = require('proxy-compare');

const state = { a: 1, b: { c: 2 } };
const proxyState = createProxy(state);

proxyState.a = 2;
const untrackedState = getUntracked(proxyState);
console.log(untrackedState); // { a: 2, b: { c: 2 } }

Deep Comparison

This feature allows you to perform a deep comparison between the proxy and the original state to check if any changes have been made.

const { isChanged } = require('proxy-compare');

const state = { a: 1, b: { c: 2 } };
const proxyState = createProxy(state);

proxyState.b.c = 3;
const hasChanged = isChanged(proxyState, state);
console.log(hasChanged); // true

Other packages similar to proxy-compare

immer

Immer is a package that allows you to work with immutable state in a more convenient way. It uses proxies to detect changes and produce a new immutable state. Unlike proxy-compare, Immer focuses on immutability and producing new state rather than just tracking changes.

proxy-memoize

Proxy-memoize is a package that uses proxies to memoize functions based on their input objects. It is similar to proxy-compare in that it uses proxies to track changes, but its primary focus is on memoization rather than state management.

reactive-maps

Reactive-maps is a package that provides reactive data structures using proxies. It is similar to proxy-compare in that it uses proxies to track changes, but it provides more specialized data structures like maps and sets.

README

proxy-compare

Compare two objects using accessed properties with Proxy

Introduction

This is an internal library used in React Tracked.

Install

npm install proxy-compare

Usage

$ node
> const { createDeepProxy, isDeepChanged } = require('proxy-compare')
undefined
> state = { a: 1, b: 2 }
{ a: 1, b: 2 }
> affected = new WeakMap()
WeakMap { [items unknown] }
> proxy = createDeepProxy(state, affected)
Proxy [ { a: 1, b: 2 },
  { r: [Function],
    u: [Function],
    get: [Function],
    has: [Function],
    ownKeys: [Function],
    p: Proxy [ [Object], [Circular] ],
    o: { a: 1, b: 2 },
    t: false,
    a: WeakMap { [items unknown] },
    c: undefined } ]
> proxy.a
1
> isDeepChanged(state, { a: 1, b: 22 }, affected)
false
> isDeepChanged(state, { a: 11, b: 2 }, affected)
true

API

createDeepProxy

create a proxy

It will recursively create a proxy upon access.

Parameters

• obj T
• affected Affected
• proxyCache WeakMap<object, any>?

Examples

import { createDeepProxy } from 'proxy-compare';

const obj = ...;
const affected = new WeakMap();
const proxy = createDeepProxy(obj, affected);

Returns T

isDeepChanged

compare two object

It will compare only with affected object properties

Parameters

• origObj any
• nextObj any
• affected Affected
• cache WeakMap<object, any>?
• mode (optional, default 0)

Examples

import { isDeepChanged } from 'proxy-compare';

const objToCompare = ...;
const changed = isDeepChanged(obj, objToCompare, affected);

Returns boolean

Projects using this library

• react-tracked
• reactive-react-redux
• svelte3-redux

Similar libraries

• proxyequal
• proxy-state-tree
• proxy-watcher

Changelog

[1.0.0] - 2020-03-08

Added

• Initial release