Is $inspect.trace() meant to colorize in blue the states that triggered the reactive block? If yes, it seems buggy.

[webJose]

Describe the bug

Hello! I started this topic out as a discussion (#14717), and by playing a bit more, I think the coloring is meant to show which signal or signals triggered the reactive block. If this is the case, then:

1. The documentation has no mention of this.
2. The functionality seems to be buggy (see repro).
3. Colorblind people will have an issue with this, as they might not be able to perceive the color change.

Furthermore, the documentation seems inaccurate. It reads:

information will be printed to the console about which pieces of reactive state caused the effect to fire.

This doesn't seem to be the case only. It seems that it also shows the signals that were recorded last for the effect, whether they contributed to the firing or not. When I read the documentation, I imagined the output was going to be exclusively comprised of the signals that changed its value.

Reproduction

REPL

<script>
  let count = $state(0);
  let now = $state(false);

  $effect(() => {
    $inspect.trace('My Effect');
    if (count >= 5 || now) {
      alert('Stop the madness.');
    }
  });
</script>
  
<button type="button" onclick={() => ++count}>
    Click me
</button>
<input type="checkbox" bind:checked={now} />

The image shows the console output after clicking the button once. The first output (marked 1) looks OK: The count and now signals were read, and the entries are blue because it is the effect's first run.

However, once the button is clicked, only one of the signals change its value, as clearly seen in the console output, yet both are colored blue (marked 2).

Further clicking the button will produce console output that seems to be consistent: Only the numerical state is marked blue.

Logs

No response

System Info

REPL

Severity

annoyance

[paoloricciuti]

You are correct, opening a PR in a minute