How to wrap reactive object (with array) in custom proxy?

[SpazzMarticus]

In order to show users that some changes were applied to a reactive object (in a child component) I decided to pass a deep-proxy instead and set a reactive-boolean on changes.

This works fine for scalar values and objects, but fails on array functions like push: Vue SFC Playground

Is there a simpler[1] fix for this, or can the whole proxy be avoided[2]?

---

[1] One possible fix would be to check if the object is an Array (Array.isArray(value)) and use VueUse's watchArray to set the reactive-boolean and return the array, instead of a custom proxy.

[2] I could not find a vue way of creating a ref of a ref to watch at, because a ref of a ref won't wrap again.

const x = {};
const r = ref(x);
console.log(r === ref(r)); //true

[jsormaz]

did you ever figure this out?

I am having the same issue and just submitted #9742

[SpazzMarticus]

Hi, sorry for the late reply.

I came up with this and called it stainableProxy. It uses Array.isArray and watchArray. (Date is behaving odd as a Proxy.)

type stainableProxyOptions = {
  onDirty: () => void;
};

export const stainableProxy = <T>(
  value: Ref<T>,
  options: Partial<stainableProxyOptions> = {}
): Ref<T> => {
  const defaultOptions: stainableProxyOptions = {
    onDirty: () => void 0,
  };

  const { onDirty } = { ...defaultOptions, ...options };

  const handler = (path: Array<string> = []) => {
    /**
     * Using WeakMap allows to yield the same proxy
     * for multiple get calls on the same property
     * without cluttering the memory
     */
    const map = new WeakMap();
    return {
      get(obj: any, prop: string): any {
        if (prop in obj) {
          const value = obj[prop as keyof typeof obj];
          if (value === null) return null;
          else if (typeof value === 'object') {
            if (map.has(value)) return map.get(value);
            if (Array.isArray(value)) {
              watchArray(value, onDirty);
              return value;
            } else if (value instanceof Date) {
              return value;
            } else {
              const proxy = new Proxy(value, handler([...path, prop]));
              map.set(value, proxy);
              return proxy;
            }
          }
          return value;
        } else return undefined;
      },
      set(obj: T, prop: string, value: any) {
        if (!(path.length === 0 && prop === 'value')) {
          onDirty();
          obj[prop as keyof typeof obj] = value;
        }
        return true;
      },
    };
  };

  return new Proxy(value, handler()) as Ref<T>;
};

The code could also be rewritten to be a composable.

const { value, dirty } = useStainable(...);