Devtools

[artalar]

Hi there! We finally found a way to build simple and powerful dev tools to increase DX without huge extra complexity. The idea is to print one-line logs (JavaScript is not a parallel language and all updates sequential) and draw lines to show the cause.

Prototype: https://codesandbox.io/s/reatomasync-graph-test-96hthv

Sources: https://github.com/artalar/reatom/blob/v3/packages/logger/src/graphView.ts

Tasks

• The connectLogger function should accept an optional devtools?: boolean option, which is false by default.
• If the option is enabled, the devtools icon should be displayed in the user application viewport with the following CSS properties: position: fixed; bottom: 1rem; left: 1rem (or something similar).
• Each node of the timeline should show a JSON viewer (@observablehq/inspector) with the corresponding AtomPatch displayed when hovering over the node. Additionally, all related lines should be highlighted.
• The most important aspect for a good developer experience (DX) is the set of filters. Users should have the ability to add multiple filters, each containing JavaScript code with predicate logic. Each filter should have a checkbox labeled "persisted" which is enabled by default. This checkbox indicates whether the filter should be saved and persisted between page reloads. An example of a filter input is !name.includes('abort'). Here, name refers to AtomProto['name'] and is available in the script scope.

[BANOnotIT]

How would you show atoms inactivity for example when atom is disconnected? Will it remove node from the graph? Don't you think that having something like composed-nodes is good? Like if we have atom with name someModule.requestAtom.dataAtom we could create a someModule atom with ellipsis (...) that'll take all dependencies of someModule.* atoms and will show them inside itself when we click on it?

Something like composite state here:

[artalar]

Collapsing a group of atoms and actions by it names is a good thing, but I don't think we should have some "live overview" of current connected atoms. First of all we need visual log of transaction, which is persisted.

[BANOnotIT]

I would say that in application with 50 atoms that visualisation will be unusable because of visual overload.

[artalar]

Yes, for that reason there is no sense to show all atoms at one time, only scrollable log of small updates