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.

[bisubus]

I don't want to to hijack, it seems it's more about Vue's shallowReactive in general and not specifically shallowRef.

I stumbled upon this topic while trying to do the thing that the title suggests and also implement Vue unwrapping . I don't think doing this automagically was a good move any way because it causes too much surprises, explicit unwrapping is easier to implement including TS.

Btw Valtio's ref is similar to Vue's markRaw and not refs themselves, the naming can cause confusion in this context.

I'm trying to make proxies work with react-like refs, which seems reasonable for the integration. I've tried to hook into proxy through internal api instead of a double proxy:

import { type RefObject, useRef } from 'react';
import { proxy, ref as raw, unstable_replaceInternalFunction } from 'valtio';

const UNWRAP = Symbol.for('unwrap');

function unwrap<T>(value: RefObject<T>): T {
  return Object.assign(value, { [UNWRAP]: true }) as T;
}

unstable_replaceInternalFunction('canProxy', (prevFn) => {
  return (value: any) => {
    if (value?.[UNWRAP]) {
      return false;
    }

    return prevFn(value);
  };
});

unstable_replaceInternalFunction('createHandler', (prevFn) => {
  return (...args) => {
    const handler = prevFn(...args);

    handler.get = (target, prop, receiver) => {
      const value = Reflect.get(target, prop, receiver)

      return value?.[UNWRAP] ? value.current : value;
    }

    return handler;
  };
});

const wrappedRawRef = useRef({ a: { b: 1 } });
const rawRef = useRef({ a: { b: 1 } });
const shallowRef = useRef(raw(({ a: { b: 1 } })));
const deepRef = useRef({ a: { b: 1 } });

const state = useRef(proxy(
  {
    wrappedRawRef: raw(wrappedRawRef),
    rawRef: unwrap(raw(rawRef)),
    shallowRef: unwrap(shallowRef),
    deepRef: unwrap(proxy(deepRef))
  })).current;

It appears to work as expected so far:

@dai-shi What do you think about this approach? It seems that get trap is a good place to do this

I'm hesitating about unstable_replaceInternalFunction, and it doesn't look right to me to modify a global for local purpose. Are there plans to make these hooks public, could proxy() and other core api accept options for customization?

I've seen valtio-plugin. It seems to be generally aimed at higher level ops, what's the status of it?

[overthemike]

@bisubus That's a great idea. I'm currently working on an implementation for canProxy so that it can be applied to instances rather than globally overwriting the canProxy function. While I'm at it, I'll take your suggestion as well. Much appreciated.

[overthemike]

@bisubus I've pushed up a new version of valtio-plugin (1.10.2) that now also handles scoped canProxy as well as adding in transformGet and transformSet (and making onGet return void again). You can now do something like this:

import { proxy } from 'valtio-plugin'

const UNWRAP = Symbol.for('unwrap');

const plugin = {
  id: 'unwrap',
  transformGet: (path, value) => {
    if (value?.[UNWRAP]) {
      return value.current
    }
  },
  canProxy: (value, prevFn) => {
    if (value?.[UNWRAP]) {
      return false;
    }
    return prevFn(value)
  }
}

// create an instance - this is optional as you can also just apply this globally with proxy.use()
const proxyInstance = proxy.createInstance()
proxyInstance.use(plugin)

or you can use the transformSet method like you mentioned earlier to accomplish basically the same thing. Let me know if this works out.

[bisubus]

@overthemike Thanks, this looks usable. I was thinking about something with (target, prop, value, receiver, originalFn) signature for transformSet, but this one will probably work better for most cases.

I'm not sure what were the original cases for onGet that made it appear but probably it needs to go after transformGet to receive the final value

[overthemike]

@bisubus The onGet is just a hook into when the user calls a property. I put it before transformGet because I would want it receive the original value before it can be transformed. You can just use transformGet otherwise. Right?

If you have anymore insights for it, I've gone ahead and opened up the discussion tab on the valtio-plugin repo. Let's move anymore discussions over there so we don't pollute this page. I'm really wanting to hunt down some feedback on how it's working and also always looking for contributions!

[bisubus]

@overthemike I was thinking the opposite way about it, onGet can access the final value because it cannot affect it, and intermediate value can be accessed in transformGet if needed. Not that it matters much. I'll provide more feedback as I put it into action