RSTUDIO-539: Better visualization for mixed and dictionaries

[gagik]

Closes #1662.

After:

Before:

Data Used

class Car extends Realm.Object {
  static schema = {
    name: "Car",
    properties: {
      car: "Car?",
      mixedField: "mixedField",
      hashMapField: "mixed{}",
    },
  };
}
...
realm.write(() => {
  realm.deleteAll();

  new Car(realm, { mixedField: [[123]], car: null });
  const car = new Car(realm, {
    mixedField: [],
    car: null,
  });
  new Car(realm, {
    mixedField: [[123]],
    car: null,
    hashMapField: { test: "nice", a: { b: "whatever" }, c: [1, 2, 3, {}] },
  });
  new Car(realm, { mixedField: [[123]], car: null });

  new Car(realm, { mixedField: [[123], car], car });
});

[gagik]

this is a bit hacky but helps clean things up... mainly symbols appearing in the output.

[kraenhansen]

I'd be interested to learn what symbols are appearing, we might want to fix that by ensuring these aren't defined as enumerable by the SDK.

[kraenhansen]

If you're interested in a less hack'y way for doing this:

const simplifiedObject = object && typeof object === "object" && "toJSON" in object && typeof object.toJSON === "function";

https://www.typescriptlang.org/play/?#code/CYUwxgNghgTiAEYD2A7AzgF3kgRgK3AwC54BXFAaxSQHcUBuAKEeXSzQEsBbABwg4BmHEMADy+QvAC82CWCwAyBfAwBPHiCQDZBedKkyARLl0ZD8JfEMYkAKQDKogHLmOKHZMtqNWj-IB0Ng7O+kYC5PIcqIZMQA

[kraenhansen]

Suggested change

	import { InspectOptions, inspect } from 'util';
	import { InspectOptions, inspect } from 'node:util';

[gagik]

Is there an advantage to this import over the other, is it to make it explicit this is from part of node? We actually also import util directly in an earlier file (which I chose to leave untouched to avoid unnecessary side effects) so I could also change it there

realm-studio/src/ui/RealmBrowser/display.ts

Line 19 in 48b64e1

import util from 'util';

[kraenhansen]

Is there an advantage to this import over the other, is it to make it explicit this is from part of node?

Yes. The most obvious is to avoid loading a node_modules/util which might have been installed by some mis-behaving dependency.

We actually also import util directly in an earlier file

It's most likely because it predates the introduction of the node: prefix for the built-in modules.

[kneth]

It is more human readable.

[kraenhansen]

👍