More readable objects on console

[arshaw]

For example, when I'm using Google Chrome dev console, and I run this:

const dur = Temporal.Duration.from({ months: 11 });
dur.round({ relativeTo: "2023-05-31", smallestUnit: "days", roundingMode: "ceil" });

Here's what's shown for temporal-polyfill:

> Temporal.Duration {}

But @js-temporal/polyfill does it nicer:

> Duration {_repr_: 'Temporal.Duration <P10M30D>'}

TODO: figure out how to do something like this

[fabon-f]

Apparently it's implemented in tc39/proposal-temporal#712 .

[arshaw]

Thanks for the pointer @fabon-f

For browsers, seems like the only way to do this is to add an own-property to the object (_repr_). In Node, you can use Symbol.for('nodejs.util.inspect.custom') (link).

@js-temporal/polyfill uses _repr_ for both browser/Node, and allows for conditional removal via injecting a __debug__ global.

I'm sensitive to people not wanting the upfront computation of _repr_ for all created Temporal objects, and I'd prefer not to force them to jump through hoops with their bundler to set __debug__ in order to strip it out.

I thought of a different solution: detect if the currently executing code is minified, and if it is, skip the _repr_ computation and assignment. You can detect like this:

function explicitlyNamedFunction() {}

function isMinified() {
  return explicitlyNamedFunction.name !== 'explicitlyNamedFunction'
}

For Node, we'd want to avoid all this and just use Symbol.for('nodejs.util.inspect.custom'). We might want to detect the environment using subpath imports.

If _repr_ needs to be computed up-front, we'd want to reuse the same value for future toString calls.