How to define cyclic dependencies?

[ceving]

xx should be the square of x and x should be the square root of xx.

Example:

window.x  = van.state(() => 0);
window.xx = van.derive(() => window.x.val * window.x.val);
window.x  = van.derive(() => Math.sqrt(window.xx.val));

This works but only one-way:

xx.val = 4 ;
x.val // => 2
x.val = 3;
xx.val // => 4

[Tao-VanJS]

Try this: https://codepen.io/taoxin/pen/KKEpyQR?

[Tao-VanJS]

My take is: circular dependencies among states are inherently error-prone. This is not something I would recommend. Oftentimes the code will be easier to maintain with alternative solutions. Even the solution like https://codepen.io/taoxin/pen/wvOavEp is less error prone than direct circular dependencies among states.

For the example like https://codepen.io/taoxin/pen/LYapVXJ to work, we need to guarantee that: whenever b changes (driven by a UI event), it will trigger a to change which will lead the derivation of b, but this time, the derivation of b must be EXACTLY the same as its prior value (post UI-driven change), which effectively ends the recursive derivation. The same needs to be true whenever a changes as well. Failing to guarantee that means bugs in your app.

As an unopinionated framework, VanJS doesn't want to ban a certain feature or a certain coding style if it's possible to build apps this way. That said, we have to acknowledge that some features might be harder to use correctly and oftentimes there could be alternatives that can serve your need in an easier way. For the case of circular dependencies among states, you have to know exactly what you're doing to use it correctly.

[ceving]

It is necessary to allow a state to modify itself, if you want to allow recursion. But recursion normally requires, that you can define an arbitrary termination condition. VanJS seems to allow recursion but only with a very specific termination condition: $y(x-1) = y(x)$. On the other hand it would be possible to disallow recursion at all: an impact of a state change can not change the same state. This would makes the Pythagoras example pretty simple. I am wondering what is the benefit of allowing this somehow crippled kind of recursion? Which UI use-case would need it?

[Tao-VanJS]

In general, a state derivation represents an invariant. For instance:

const b = van.derive(() => 10 - a.val)

represents the invariant of $b = 10 - a$.

It would be possible to define derivations in VanJS that triggered from both directions. But these derivations must represent invariants that are consistent with each other. For instance, in the example: https://codepen.io/taoxin/pen/LYapVXJ, the invariant $b = 10 - a$ and $a = 10 - b$ are consistent (as they are both equivalent to $a + b = 10$). Failing to ensure the consistency among invariants will cause problems, one way or another. This is the extra care you have to take if you want to trigger derivations from both derivations.

Detecting derivation loop and stopping at the loop, even if it's possible (which I'm not quite sure), will not lead to desirable outcome, either. Let's say in a hypothetical example with inconsistent invariants: $b = 10 - a$, $a = 9 - b$. If some UI event changes b, which lead to the re-derivation of a, which can potentially lead to the re-derivation of b. If we stop the re-derivation of b at the point of the loop detection, we're essentially breaking the invariant $b = 10 - a$. Thus, the root cause of the problem is inconsistent invariants, no solution will provide a reasonable behavior if inconsistent invariants are introduced to the program.

[ceving]

Is it possible to customize equivalence? This will not work: $b = a^2, a = \sqrt{b}$. For the equivalence it might be sufficient to say "the numbers are the same if they are the same up to the nth decimal place", but for any additional computation you typically do not want to throw away the remaining digits, because this would make the error even worse.

[Tao-VanJS]

Equality comparison for floating point numbers is always tricky. Thus it's probably not a great idea to pair it with another tricky feature - cyclic derivations.