Previously, the keys were displayed separately from the target, on top of being displayed in bold inside the object when unfolded. This is redundant, and in most cases you have to unfold the object anyway because there are more keys observed than can be displayed.
The only "key" that cannot be displayed in bold inside the object is the "key changes" magic key. This commit replaces it by a small +/- badge on the right of the object's short content.
This commit also stops displaying observed object that are nested inside other observed objects at the top level, as it can be confusing, and it also heuristically gives a name to observed objects: if the observed object is a property of the component or one of its props it will be named accordingly, if not it will be named [unknown] (which may happen when reobserving reactive objects inside a service or inside the env, but is pretty rare in practice).
Before:
Notice how nested keys were not highlighted even if observed:
ged-odoo
commented
1 year ago
Previously, the keys were displayed separately from the target, on top of being displayed in bold inside the object when unfolded. This is redundant, and in most cases you have to unfold the object anyway because there are more keys observed than can be displayed.
The only "key" that cannot be displayed in bold inside the object is the "key changes" magic key. This commit replaces it by a small +/- badge on the right of the object's short content.
This commit also stops displaying observed object that are nested inside other observed objects at the top level, as it can be confusing, and it also heuristically gives a name to observed objects: if the observed object is a property of the component or one of its props it will be named accordingly, if not it will be named
[unknown](which may happen when reobserving reactive objects inside a service or inside the env, but is pretty rare in practice).Before:
After: