shallowProxy - similar to vue's shallowRef

[dts]

It would be nice to be able to create a shallow proxy, something that only does a reactive transform to the first level. Vue's "shallowRef" (https://vuejs.org/api/reactivity-advanced.html#shallowref) has this behavior - and it makes it easier to "ingest" large/weird objects. Sometimes I only care about dependency tracking at the top level, because the rest of it is tracked/managed elsewhere. I think this would give a good path forward in cases similar to #782.

[dai-shi]

Our solution is ref() in Valtio. It requires you to mark all properties you want ignore about tracking, but does it work for you?

[dts]

This has been sufficient for my case, for what it's worth.

[dai-shi]

It's not too surprising, but I would like to understand the problem and the limitation better. Can you share some code snippets to elaborate?

[dts]

Using File objects inside a valtio store. Here's a snippet of code that enforces this rule:

  const p = proxy(new FileUploadStore());

  subscribe(p, () => {
    p.files.some((f) => {
      if (getVersion(f)) {
        const error = new Error("Do not add Files directly, use ref(), addFiles, or setFiles.");

        if (p.attached) p.error ??= error;
        else throw error;
      }
    });
  });

  return p;
};

[dai-shi]

Interesting. Thanks for sharing!

[megazazik]

Hello. In our case, shallowProxy would be very useful. We use objects where one field should be tracked, and the rest of the fields should not. And new fields are periodically added. We have to constantly make sure that all new fields are wrapped in a ref. It is inconvenient, and it could be easy forgotten.

[dai-shi]

@overthemike Any thougths?

[megazazik]

This example does not take into account changing and adding fields. In these cases, the new values ​​must also be wrapped in the ref.

About syntax - our code may look like this. I am not sure we could use function like addPropToP

class A { 
  propA1 =  proxy({});
  propA2 = ref({});
}

class B extends A {
  propB1 = proxy({});
  propB2 = ref({});
}

const b = proxy(new B());

[dai-shi]

My question was if ref could technically solve you problem.

Anyway, the challenge that Valtio solves is deep proxy and deep snapshot. If the requirement is shallow proxy, it should be much easier.

const SNAPSHOT = Symbol();
const LISTENERS = Symbol();

export const proxy = (baseObj) => {
  let snap = { ...baseObj };
  const listeners = new Set();
  return new Proxy(baseObj, {
    set(target, prop, value, receiver) {
      const result = Reflect.set(target, prop, value, receiver);
      snap = { ...target };
      listeners.forEach((fn) => fn());
      return result;
    },
    get(target, prop, receiver) {
      if (prop === SNAPSHOT) {
        return snap;
      }
      if (prop === LISTENERS) {
        return listeners;
      }
      return Reflect.get(target, prop, receiver);
    },
  });
};

export const snapshot = (p) => p[SNAPSHOT];

export const subscribe = (p, fn) => {
  const listeners = p[LISTENERS];
  listeners.add(fn);
  return () => listeners.delete(fn);
};

import { useCallback, useSyncExternalStore } from 'react'

export const useSnapshot = (p) => useSyncExternalStore(
  useCallback((fn) => subscribe(p, fn), [p]),
  () => snaphost(p),
);

[megazazik]

My question was if ref could technically solve you problem.

yes, it could
we solve the problem via ref now, but we have to manually wrap each field in ref.

is your example - how we could implement swallowProxy outside valtio? or what implementation inside valtio could look like?

[dai-shi]

but we have to manually wrap each field in ref.

Good to hear. That's what I mean by missing nice syntax.

I think double proxy should be the easiest userland solution.

import { proxy, ref } from 'valtio';

export const shallowProxy = (baseObj) => {
  Object.values(baseObj).forEach((value) => ref(value));
  const p = proxy(baseObj);
  return new Proxy(p, {
    set(target, prop, value, receiver) {
      ref(value);
      return Reflect(target, prop, value, receiver);
    },
  });
};

[megazazik]

ok, thank you.
I will try it.