TypeError: handler argument of Proxy must be an object, got null on Set and Map

[Mingun]

Does petite-vue reactivity system supports Set and/or Map objects? I've got an error when trying to use them:

const store = PetiteVue.reactive({ set: new Set(), map: new Map(), array: [], object: {} });
store.set    // got TypeError: `handler` argument of Proxy must be an object, got null
store.map    // got TypeError: `handler` argument of Proxy must be an object, got null
store.array  // no errors
store.object // no errors

[sqllyw]

from the source code, you can't use those belong to type 2, that is : Map,Set, WeakMap, WeakSet,

const proxy = new Proxy(target, targetType === 2 ? collectionHandlers : baseHandlers);

but collectionHandlers is always null, that will get the error:

return createReactiveObject(target, false, mutableHandlers, null, reactiveMap);

function targetTypeMap(rawType) {
  switch (rawType) {
    case "Object":
    case "Array":
      return 1;
    case "Map":
    case "Set":
    case "WeakMap":
    case "WeakSet":
      return 2;
    default:
      return 0;
  }
}
function reactive(target) {
  if (target && target["__v_isReadonly"]) {
    return target;
  }
  return createReactiveObject(target, false, mutableHandlers, null, reactiveMap);
}

function createReactiveObject(target, isReadonly2, baseHandlers, collectionHandlers, proxyMap) {
  if (!isObject(target)) {
    return target;
  }
  if (target["__v_raw"] && !(isReadonly2 && target["__v_isReactive"])) {
    return target;
  }
  const existingProxy = proxyMap.get(target);
  if (existingProxy) {
    return existingProxy;
  }
  const targetType = getTargetType(target);
  if (targetType === 0) {
    return target;
  }
  const proxy = new Proxy(target, targetType === 2 ? collectionHandlers : baseHandlers);
  proxyMap.set(target, proxy);
  return proxy;
}

[Mingun]

So petite-vue reactivity is not based on @vue/reactivity after all?

---

Where did you see such a code? In the source code of petite-vue I see the following:

// src/index.ts, line 3
export { reactive } from '@vue/reactivity'

Package @vue/reactivity refers to https://github.com/vuejs/core, in which he lives in catalog packages/reactivity. And it has a different createReactiveObject implementation than the one you cited:

// packages/reactivity/src/reactive.ts, lines 248-285
function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  // target is already a Proxy, return it.
  // exception: calling readonly() on a reactive object
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // target already has corresponding Proxy
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // only specific value types can be observed.
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}

The value of mutableCollectionHandlers eventually comes to collectionHandlers:

// packages/reactivity/src/reactive.ts, lines 8-13
import {
  mutableCollectionHandlers,
  readonlyCollectionHandlers,
  shallowCollectionHandlers,
  shallowReadonlyCollectionHandlers
} from './collectionHandlers'

// packages/reactivity/src/reactive.ts, lines 83-95
export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (isReadonly(target)) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

// packages/reactivity/src/collectionHandlers.ts, lines 366-368
export const mutableCollectionHandlers: ProxyHandler<CollectionTypes> = {
  get: /*#__PURE__*/ createInstrumentationGetter(false, false)
}

No null here.

[Mingun]

After a careful reading of README.md, I found mention that Map, Set and other collections have been removed to reduce the size:

Not Supported

• Reactivity for Collection Types (Map, Set, etc., removed for smaller size)

However, I think that this important information is hidden too deep and moreover, at the beginning of README it says in two whole places that petite-vue is based on @vue/reactivity, but it doesn't say anything about any restrictions! (That's why those phrases mislead me.)

The very first paragraph:

Driven by @vue/reactivity

Global State Management section (emphasis by mine):

You can use the reactive method (re-exported from @vue/reactivity) to create global state singletons:

And I still don't understand how this «removing» works, since the source code says otherwise…

[sqllyw]

I downloaded the petite-vue source code, then do a :

npm run build
dist/petite-vue.es.js   38.97 KiB / gzip: 10.27 KiB
dist/petite-vue.umd.js   16.72 KiB / gzip: 6.93 KiB
dist/petite-vue.iife.js   16.54 KiB / gzip: 6.85 KiB

petite-vue.es.js has the code I mentioned, never noticed this line in the doc:

    Reactivity for Collection Types (Map, Set, etc., removed for smaller size)

but that explains why there is a null (collectionHandlers) in the call:

function reactive(target) {
  if (target && target["__v_isReadonly"]) {
    return target;
  }
  return createReactiveObject(target, false, mutableHandlers, null, reactiveMap);
}