valtio-observe: observe and useObserve

[artelk]

Hi guys. I created a library valtio-observe with two functions: observe and useObserve.
The observe works about like watch from valtio-reactive but it is implemented differently.
I implemented a property-level subscription logic (the notification aren't propagated to parent objects).

observe<T>(func: () => T, consume: (value: T) => void, inSync?: boolean): () => void

The observe excecutes the func and passes its result to the consume function.
It subscribes to all proxy properties which getters were accessed while calling the func.
Additianally it searches for proxies in the returned value and subscribes to them.
The observe returns a function that should be called to stop the process.
Note: If the reference to the stop function is lost the obrerving will be stoped on the next GC run.

Test

const state1 = proxy({ x: 0 });
const state2 = proxy({ a: { y: 0, ignore: 'ignore' } });
const state3 = proxy({ b: { c: { z: 0 } } });
const state4 = proxy({ v: 0 });

let result = '';
const stop = observe(
  () => {
    const x = state1.x;
    const {
      a: { y },
    } = state2; // implicitly calls getters for a and y
    const xy = `${x}:${y}`;
    const p = state3.b.c;
    return { xy, p, s: state4 }; // p and s are proxies returned as a whole
  },
  ({ xy, p: { z }, s }) => {
    result = `${xy}:${z}:${s.v}`;
  },
  true, // sync
);

expect(result).toEqual('0:0:0:0');
state1.x++;
expect(result).toEqual('1:0:0:0');
state2.a.y++;
expect(result).toEqual('1:1:0:0');
state3.b.c.z++;
expect(result).toEqual('1:1:1:0');
state4.v++;
expect(result).toEqual('1:1:1:1');

result = '';
state2.a.ignore = '';
expect(result).toEqual(''); // ignored

state2.a = { y: state2.a.y + 1, ignore: '' };
expect(result).toEqual('1:2:1:1');
state3.b.c = { z: state3.b.c.z + 1 };
expect(result).toEqual('1:2:2:1');
state3.b = { c: { z: state3.b.c.z + 1 } };
expect(result).toEqual('1:2:3:1');

stop();

Vanilla js example

import { proxy } from 'valtio';
import { observe } from 'valtio-observe/vanilla';

let stop = observe(
  () => {
    const x = state1.x;
    const {
      a: { y },
    } = state2; // implicitly calls getters for a and y
    const xy = `${x}:${y}`;
    const p = state3.b.c;
    return { xy, p }; // p is a proxy returned as a whole
  },
  ({ xy, p }) => {
    console.log(`${new Date().toLocaleTimeString()} - ${xy}:${p.z}`);
  },
);
//stop = null; // don't lose the reference to the returned stop function otherwise it will be auto-stopped on the next GC run!

setInterval(() => {
  state1.x++;

  if (state1.x % 2 == 0) {
    if (state2.a.y % 2 == 0) {
      state2.a.y++;
    } else {
      state2.a = { y: state2.a.y + 1 };
    }
  }

  if (state1.x % 5 == 0) {
    if (state3.b.c.z % 2 == 0) {
      state3.b.c.z++;
    } else {
      state3.b.c = { z: state3.b.c.z + 1 };
    }
  }
}, 1000);

setTimeout(stop, 60_000);

useObserve with React

useObserve<T>(func: () => T, inSync?: boolean): T

import { useObserve } from 'valtio-observe';

const state1 = proxy({ x: 0 });
const state2 = proxy({ a: { y: 0 } });
const state3 = proxy({ b: { c: { z: 0 }, ignore: 0 } });

const Test = () => {
  const {
    xy,
    p: { z },
  } = useObserve(() => {
    const x = state1.x;
    const {
      a: { y },
    } = state2;
    const xy = `${x}:${y}`;
    const p = state3.b.c;
    return { xy, p }; // p is a proxy returned as a whole
  });

  console.log('render');

  return (
    <div>
      <button onClick={() => state1.x++}>state1.x++</button>
      <button onClick={() => state2.a.y++}>state2.a.y++</button>
      <button onClick={() => state3.b.c.z++}>state3.b.c.z++</button>
      <button onClick={() => (state2.a = { y: state1.x })}>
        state2.a = {'{'}y: state1.x{'}'}
      </button>
      <button onClick={() => state3.b.ignore++}>state3.b.ignore++</button>
      <div>{`${xy}:${z}`}</div>
    </div>
  );
};

[artelk]

Added batch and sync functions, improved array handling: https://www.npmjs.com/package/valtio-observe