Slimmed deep proxy

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Change Log
 
 ## [Unreleased]
+### Changed
+- New deep proxy instead or proxyequal
 
 ## [2.0.1] - 2019-04-15
 ### Changed

README.md

@@ -154,6 +154,31 @@ You can also try them in codesandbox.io:
 [09](https://codesandbox.io/s/github/dai-shi/reactive-react-redux/tree/master/examples/09_thunk)
 [10](https://codesandbox.io/s/github/dai-shi/reactive-react-redux/tree/master/examples/10_selectors)
 
+## Limitations
+
+By relying on Proxy,
+there are some false negatives (failure to trigger re-renders)
+and some false positives (extra re-renders) in edge cases.
+
+### Proxied states are referentially equal only in per-hook basis
+
+```javascript
+const state1 = useReduxState();
+const state2 = useReduxState();
+// state1 and state2 is referentially not equal
+// even if the underlying redux state is referentially equal.
+```
+
+### An object referential change doesn't trigger re-render if at least one object property is accessed in previous render
+
+```javascript
+const state = useReduxState();
+const foo = useMemo(() => state.foo, [state]);
+const bar = state.bar;
+// if state.foo is not evaluated in render,
+// it won't trigger re-render if only state.foo is changed.
+```
+
 ## Blogs
 
 - [A deadly simple React bindings library for Redux with Hooks API](https://medium.com/@dai_shi/a-deadly-simple-react-bindings-library-for-redux-with-hooks-api-822295857282)

__tests__/01_basic_spec.js

@@ -46,9 +46,9 @@ describe('basic spec', () => {
         </ReduxProvider>
       </StrictMode>
     );
-    const { getByText, container } = render(<App />);
+    const { getAllByText, container } = render(<App />);
     expect(container).toMatchSnapshot();
-    fireEvent.click(getByText('+1'));
+    fireEvent.click(getAllByText('+1')[0]);
     expect(container).toMatchSnapshot();
   });
 });

__tests__/02_selectors_spec.js

@@ -113,14 +113,14 @@ describe('selectors spec', () => {
         </ReduxProvider>
       </StrictMode>
     );
-    const { getByText, container } = render(<App />);
+    const { getAllByText, container } = render(<App />);
     expect(numOfRenders1).toBe(4); // doubled because of StrictMode
     expect(container).toMatchSnapshot();
-    fireEvent.click(getByText('inc1'));
+    fireEvent.click(getAllByText('inc1')[0]);
     expect(numOfRenders1).toBe(4);
-    fireEvent.click(getByText('inc1'));
+    fireEvent.click(getAllByText('inc1')[0]);
     expect(numOfRenders1).toBe(4);
-    fireEvent.click(getByText('inc1'));
+    fireEvent.click(getAllByText('inc1')[0]);
     expect(numOfRenders1).toBe(8);
     expect(container).toMatchSnapshot();
   });

__tests__/10_deep_proxy_spec.js

@@ -0,0 +1,277 @@
+import { createDeepProxy, isDeepChanged } from '../src/utils';
+
+const noop = () => {};
+
+describe('shallow object spec', () => {
+  it('no property access', () => {
+    const s1 = { a: 'a', b: 'b' };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1);
+    noop(p1);
+    expect(isDeepChanged(s1, { a: 'a', b: 'b' }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: 'a2', b: 'b' }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: 'a', b: 'b2' }, a1)).toBe(false);
+  });
+
+  it('one property access', () => {
+    const s1 = { a: 'a', b: 'b' };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1);
+    noop(p1.a);
+    expect(isDeepChanged(s1, { a: 'a', b: 'b' }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: 'a2', b: 'b' }, a1)).toBe(true);
+    expect(isDeepChanged(s1, { a: 'a', b: 'b2' }, a1)).toBe(false);
+  });
+});
+
+describe('deep object spec', () => {
+  it('intermediate property access', () => {
+    const s1 = { a: { b: 'b', c: 'c' } };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1);
+    noop(p1.a);
+    expect(isDeepChanged(s1, { a: s1.a }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: { b: 'b2', c: 'c' } }, a1)).toBe(true);
+    expect(isDeepChanged(s1, { a: { b: 'b', c: 'c2' } }, a1)).toBe(true);
+  });
+
+  it('leaf property access', () => {
+    const s1 = { a: { b: 'b', c: 'c' } };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1);
+    noop(p1.a.b);
+    expect(isDeepChanged(s1, { a: s1.a }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: { b: 'b2', c: 'c' } }, a1)).toBe(true);
+    expect(isDeepChanged(s1, { a: { b: 'b', c: 'c2' } }, a1)).toBe(false);
+  });
+});
+
+describe('reference equality spec', () => {
+  it('simple', () => {
+    const proxyCache = new WeakMap();
+    const s1 = { a: 'a', b: 'b' };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1, proxyCache);
+    noop(p1.a);
+    const s2 = s1; // keep the reference
+    const a2 = new WeakMap();
+    const p2 = createDeepProxy(s2, a2, proxyCache);
+    noop(p2.b);
+    expect(p1).toBe(p2);
+    expect(isDeepChanged(s1, { a: 'a', b: 'b' }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: 'a2', b: 'b' }, a1)).toBe(true);
+    expect(isDeepChanged(s1, { a: 'a', b: 'b2' }, a1)).toBe(false);
+    expect(isDeepChanged(s2, { a: 'a', b: 'b' }, a2)).toBe(false);
+    expect(isDeepChanged(s2, { a: 'a2', b: 'b' }, a2)).toBe(false);
+    expect(isDeepChanged(s2, { a: 'a', b: 'b2' }, a2)).toBe(true);
+  });
+
+  it('nested', () => {
+    const proxyCache = new WeakMap();
+    const s1 = { a: { b: 'b', c: 'c' } };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1, proxyCache);
+    noop(p1.a.b);
+    const s2 = { a: s1.a }; // keep the reference
+    const a2 = new WeakMap();
+    const p2 = createDeepProxy(s2, a2, proxyCache);
+    noop(p2.a.c);
+    expect(p1).not.toBe(p2);
+    expect(p1.a).toBe(p2.a);
+    expect(isDeepChanged(s1, { a: { b: 'b', c: 'c' } }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: { b: 'b2', c: 'c' } }, a1)).toBe(true);
+    expect(isDeepChanged(s1, { a: { b: 'b', c: 'c2' } }, a1)).toBe(false);
+    expect(isDeepChanged(s2, { a: { b: 'b', c: 'c' } }, a2)).toBe(false);
+    expect(isDeepChanged(s2, { a: { b: 'b2', c: 'c' } }, a2)).toBe(false);
+    expect(isDeepChanged(s2, { a: { b: 'b', c: 'c2' } }, a2)).toBe(true);
+  });
+});
+
+describe('array spec', () => {
+  it('length', () => {
+    const s1 = [1, 2, 3];
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1);
+    noop(p1.length);
+    expect(isDeepChanged(s1, [1, 2, 3], a1)).toBe(false);
+    expect(isDeepChanged(s1, [1, 2, 3, 4], a1)).toBe(true);
+    expect(isDeepChanged(s1, [1, 2], a1)).toBe(true);
+    expect(isDeepChanged(s1, [1, 2, 4], a1)).toBe(false);
+  });
+
+  it('forEach', () => {
+    const s1 = [1, 2, 3];
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1);
+    p1.forEach(noop);
+    expect(isDeepChanged(s1, [1, 2, 3], a1)).toBe(false);
+    expect(isDeepChanged(s1, [1, 2, 3, 4], a1)).toBe(true);
+    expect(isDeepChanged(s1, [1, 2], a1)).toBe(true);
+    expect(isDeepChanged(s1, [1, 2, 4], a1)).toBe(true);
+  });
+
+  it('for-of', () => {
+    const s1 = [1, 2, 3];
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1);
+    // eslint-disable-next-line no-restricted-syntax
+    for (const x of p1) {
+      noop(x);
+    }
+    expect(isDeepChanged(s1, [1, 2, 3], a1)).toBe(false);
+    expect(isDeepChanged(s1, [1, 2, 3, 4], a1)).toBe(true);
+    expect(isDeepChanged(s1, [1, 2], a1)).toBe(true);
+    expect(isDeepChanged(s1, [1, 2, 4], a1)).toBe(true);
+  });
+});
+
+describe('keys spec', () => {
+  it('object keys', () => {
+    const s1 = { a: { b: 'b' }, c: 'c' };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1);
+    noop(Object.keys(p1));
+    expect(isDeepChanged(s1, { a: s1.a, c: 'c' }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: { b: 'b' }, c: 'c' }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: s1.a }, a1)).toBe(true);
+    expect(isDeepChanged(s1, { a: s1.a, c: 'c', d: 'd' }, a1)).toBe(true);
+  });
+
+  it('for-in', () => {
+    const s1 = { a: { b: 'b' }, c: 'c' };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1);
+    // eslint-disable-next-line no-restricted-syntax, guard-for-in
+    for (const k in p1) {
+      noop(k);
+    }
+    expect(isDeepChanged(s1, { a: s1.a, c: 'c' }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: { b: 'b' }, c: 'c' }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: s1.a }, a1)).toBe(true);
+    expect(isDeepChanged(s1, { a: s1.a, c: 'c', d: 'd' }, a1)).toBe(true);
+  });
+
+  it('single in operator', () => {
+    const s1 = { a: { b: 'b' }, c: 'c' };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1);
+    noop('a' in p1);
+    expect(isDeepChanged(s1, { a: s1.a, c: 'c' }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: s1.a }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { c: 'c', d: 'd' }, a1)).toBe(true);
+  });
+});
+
+
+describe('special objects spec', () => {
+  it('object with cycles', () => {
+    const proxyCache = new WeakMap();
+    const s1 = { a: 'a' };
+    s1.self = s1;
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1, proxyCache);
+    const c1 = new WeakMap();
+    noop(p1.self.a);
+    expect(isDeepChanged(s1, s1, a1, c1)).toBe(false);
+    expect(isDeepChanged(s1, { a: 'a', self: s1 }, a1, c1)).toBe(false);
+    const s2 = { a: 'a' };
+    s2.self = s2;
+    expect(isDeepChanged(s1, s2, a1, c1)).toBe(false);
+    const s3 = { a: 'a2' };
+    s3.self = s3;
+    expect(isDeepChanged(s1, s3, a1, c1)).toBe(true);
+  });
+
+  it('object with cycles 2', () => {
+    const proxyCache = new WeakMap();
+    const s1 = { a: { b: 'b' } };
+    s1.self = s1;
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1, proxyCache);
+    const c1 = new WeakMap();
+    noop(p1.self.a);
+    expect(isDeepChanged(s1, s1, a1, c1)).toBe(false);
+    expect(isDeepChanged(s1, { a: s1.a, self: s1 }, a1, c1)).toBe(false);
+    const s2 = { a: { b: 'b' } };
+    s2.self = s2;
+    expect(isDeepChanged(s1, s2, a1, c1)).toBe(true);
+  });
+
+  it('frozen object', () => {
+    const proxyCache = new WeakMap();
+    const s1 = { a: { b: 'b' } };
+    Object.freeze(s1);
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1, proxyCache);
+    noop(p1.a.b);
+    expect(isDeepChanged(s1, s1, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: { b: 'b' } }, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: { b: 'b2' } }, a1)).toBe(true);
+  });
+});
+
+describe('builtin objects spec', () => {
+  // we can't track builtin objects
+
+  it('boolean', () => {
+    /* eslint-disable no-new-wrappers */
+    const proxyCache = new WeakMap();
+    const s1 = { a: new Boolean(false) };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1, proxyCache);
+    noop(p1.a.valueOf());
+    expect(isDeepChanged(s1, s1, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: new Boolean(false) }, a1)).toBe(true);
+    /* eslint-enable no-new-wrappers */
+  });
+
+  it('error', () => {
+    const proxyCache = new WeakMap();
+    const s1 = { a: new Error('e') };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1, proxyCache);
+    noop(p1.a.message);
+    expect(isDeepChanged(s1, s1, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: new Error('e') }, a1)).toBe(true);
+  });
+
+  it('date', () => {
+    const proxyCache = new WeakMap();
+    const s1 = { a: new Date('2019-05-11T12:22:29.293Z') };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1, proxyCache);
+    noop(p1.a.getTime());
+    expect(isDeepChanged(s1, s1, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: new Date('2019-05-11T12:22:29.293Z') }, a1)).toBe(true);
+  });
+
+  it('regexp', () => {
+    const proxyCache = new WeakMap();
+    const s1 = { a: /a/ };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1, proxyCache);
+    noop(p1.a.test('a'));
+    expect(isDeepChanged(s1, s1, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: /a/ }, a1)).toBe(true);
+  });
+
+  it('map', () => {
+    const proxyCache = new WeakMap();
+    const s1 = { a: new Map() };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1, proxyCache);
+    noop(p1.a.entries());
+    expect(isDeepChanged(s1, s1, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: new Map() }, a1)).toBe(true);
+  });
+
+  it('typed array', () => {
+    const proxyCache = new WeakMap();
+    const s1 = { a: Int8Array.from([1]) };
+    const a1 = new WeakMap();
+    const p1 = createDeepProxy(s1, a1, proxyCache);
+    noop(p1.a[0]);
+    expect(isDeepChanged(s1, s1, a1)).toBe(false);
+    expect(isDeepChanged(s1, { a: Int8Array.from([1]) }, a1)).toBe(true);
+  });
+});

dist/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "useReduxState", {
     return _useReduxState.useReduxState;
   }
 });
+Object.defineProperty(exports, "useReduxStateRich", {
+  enumerable: true,
+  get: function get() {
+    return _useReduxState.useReduxStateRich;
+  }
+});
 Object.defineProperty(exports, "useReduxStateSimple", {
   enumerable: true,
   get: function get() {