Using a new proxy to replace macro

[dalcib]

One of the main issues with using Valtio Is dealing with two mental models: snapshot and state.
The Rule of thumb: read from snapshots in the render function, otherwise use the source (state) to mutate.
It is possible to take advantage of macro to only use the state to mutate and read, but it requires a compilation step.
I was thinking in to use a new proxy to replace the macro but in the runtime.
This is the simplified code:

import { useSnapshot, proxy } from 'valtio'

export function useStore{
  const snapshot = useSnapshot(store)
  const handler = {
    set(obj, prop, value, receiver) {
      store[prop] = value
      return true
    },
    get: function (target, prop, receiver) {
      if (typeof Reflect.get(target, prop, receiver) === 'function') {
        return function (...args) { return target[prop].apply(store, args) }
      }
      return target[prop]
    },
  }
  return new Proxy(snapshot, handler)
}

const state = proxy({
  count: 0,
  reset() {
    this.count = 0
  },
})

function Counter() {
  const store = useStore(state)
  return (
    <div>
      {store.count} <br />
      <button onClick={() => ++store.count}>+1</button> <br />
      <button onClick={() => store.reset()}>Reset</button>
    </div>
  )
}

I would like to know if this approach is valid and possible tradeoffs

[dai-shi]

Have you seen useProxy macro?

[dai-shi]

See #38

You could combine proxy and snapshot using on-change or something, and create a new object. It doesn't fully work as expected, so that's out of the scope of Valtio.