Set array items display incorrectly

[lbogdan]

Brace yourselves, issues from CodeSandbox incoming! 😃

Consider this code:

const testSet = new Set();

testSet.add(1);
testSet.add(2);
testSet.add({ foo: 'bar' });
testSet.add([3, 4]);

console.log(testSet);

Expected output (from Chrome's console):

Actual output:

(note that objects are handled fine)

Reproduction sandbox: https://codesandbox.io/s/console-feed-set-array-item-f3dmn

Related CodeSandbox issue: codesandbox/codesandbox-client#5493

[samdenty]

I believe this stems from the underlying react-inspector library. With all the past issues opened though from styling/virtualization, I'm tempted more towards a rewrite.

I saw that https://github.com/facebook/flipper started using it too a while back. I briefly played around with it locally and it looked amazing - not sure if they ran into perf issues & are still using it CC @mweststrate I'm curious to learn more

[samdenty]

we'd need a new transform similar to the promise one #86.

console-feed/src/Component/react-inspector/index.tsx

Line 86 in 0405ab2

<span style={{ opacity: 0.6 }}>{`<pending>`}</span>

though the promise state can't update due to lack of virtualization