Options for Set and Map types

[flexsurfer]

it would be useful to have an option to render Set just with Entries array, without additional data

only this part

[flexsurfer]

actually customResolver works great, hope it's ok from performance pov

// Custom resolver for Set - renders as plain array of values
const setResolver: ResolverFn<Set<any>> = (set, _cb, next) => {
    // Delegate to array renderer - shows values directly without key/value wrapper
    next(Array.from(set));
};

// Custom resolver for Map - renders as plain array of [key, value] entries
const mapResolver: ResolverFn<Map<any, any>> = (map, _cb, next) => {
    // Delegate to array renderer - shows entries as [key, value] tuples
    next(Array.from(map.entries()));
};

const customResolver = new Map<any, ResolverFn>([
    [Set, setResolver],
    [Map, mapResolver],
]);

[vothanhdat]

actually customResolver works great, hope it's ok from performance pov

// Custom resolver for Set - renders as plain array of values
const setResolver: ResolverFn<Set<any>> = (set, _cb, next) => {
    // Delegate to array renderer - shows values directly without key/value wrapper
    next(Array.from(set));
};

// Custom resolver for Map - renders as plain array of [key, value] entries
const mapResolver: ResolverFn<Map<any, any>> = (map, _cb, next) => {
    // Delegate to array renderer - shows entries as [key, value] tuples
    next(Array.from(map.entries()));
};

const customResolver = new Map<any, ResolverFn>([
    [Set, setResolver],
    [Map, mapResolver],
]);

All good then—your custom resolver is the right approach to hide the extra Set/Map fields. Performance-wise it’s just Array.from(...), so it’s negligible unless you’re feeding truly huge collections (and even then it’s no worse than rendering them). No code changes are needed in core. If you want this to be easier for others, we could add a short recipe to the docs showing the Set/Map “array-only” resolver option.

[flexsurfer]

honestly im not sure how others will use this library, so i think that's fine, you already have customResolver in the documentation. thank you

[vothanhdat]

@flexsurfer
Just a small tip for performance: since Array.from(set) creates a new array reference every time the resolver runs (which happens during every render/traversal), it might trigger unnecessary re-renders for children if the set is large.

You can use the stableRef argument to cache the converted array so it's only created when the Set instance actually changes.

Here is an optimized version using Symbol keys to safely store state on the node:

const source = Symbol("source");
const arrayView = Symbol("arrayView");

const setResolver: ResolverFn<Set<any>> = (set, _cb, next, _preview, _config, stableRef: any) => {
    // Cache the array conversion, updating only if the Set reference changes
    if (stableRef[source] !== set) {
        stableRef[source] = set;
        stableRef[arrayView] = Array.from(set);
    }
    // Delegate to array renderer using the cached instance
    next(stableRef[arrayView]);
};

const mapResolver: ResolverFn<Map<any, any>> = (map, _cb, next, _preview, _config, stableRef: any) => {
    if (stableRef[source] !== map) {
        stableRef[source] = map;
        stableRef[arrayView] = Array.from(map.entries());
   }
   next(stableRef[arrayView]);
};

[flexsurfer]

thanks @vothanhdat , I think skipping the cache is safer by default. Identity-based caching assumes immutable Set/Map instances, but in practice they’re often mutated in place, which would make cached array views stale.

[flexsurfer]

i'll reopen this issue for now, just found a side effect, when folding or unfolding nodes of map or set it highlights all subnodes as changed

[vothanhdat]

The highlighting side effect occurs because the flash updates are triggered by reference changes. When a resolver returns a new array or object (like Array.from(map)) on every call, the viewer detects a new identity and triggers the "updated" animation.

Since react-obj-view uses identity-based checks for performance, it does not detect in-place mutations of Map or Set. Therefore, caching the "view" of the collection based on its reference is the most efficient approach.

You can use the built-in CustomIterator helper, which uses a WeakMap cache to ensure stable references across renders:

import { RESOLVER, type ResolverFn } from 'react-obj-view';

// Custom resolver for Set - renders values directly
const setResolver: ResolverFn<Set<any>> = (set, _cb, next) => {
    // RESOLVER.CustomIterator.getIterator(set) returns a cached wrapper
    // that maintains the same reference until the Set itself changes.
    next(RESOLVER.CustomIterator.getIterator(set));
};

// Custom resolver for Map - renders entries as [key, value] tuples
const mapResolver: ResolverFn<Map<any, any>> = (map, _cb, next) => {
    next(RESOLVER.CustomIterator.getIterator(map));
};