fluid effect not re-running when it should

[trusktr]

Check out this example:

import {state, effect, memo} from '@fluid/core'

const count1 = state(0)
setInterval(() => count1.val++, 1000)

const count2 = state(0)
setInterval(() => count2.val++, 100)

const bool = state(true)
setInterval(() => bool.val = !bool.val, 2000)

console.log('start ----------------------------- ')

effect(() => {
	if (bool.val) {
		count1.val
		console.log('a')		
	} else {
		count2.val
		console.log('b')
	}
})

When the conditional branch changes to the false side, count2 should be the new dependency triggering the effect.

CodePen:

https://codepen.io/trusktr/pen/KwPjOWo/ea2c637ac0b6661ff4fbe6458984a338

The Solid.js version shows the expected behavior:

https://codepen.io/trusktr/pen/qEWzePW/3cd3eb4ea0e34551a597c9d3b08047c4

[WorriedArrow]

Hello!
First off, thank you for opening this issue!
This is a limitation with the super tiny runtime-based reactivity system. Since Fluid only tracks dependencies the first time an effect is run, and, in this case, the first branch is taken on the first call. This means that count2.val is not reached the first time. A simple workaround would be something like the following:

...
effect(() => {
	count1.val
	count2.val
	if (bool.val) {
		count1.val
		console.log('a')
	} else {
		count2.val
		console.log('b')
	}
})

This ensures that both count1.val and count2.val are tracked. However, this comes with an issue: whenever either is updated, the correct but mistimed branch is taken.

A better solution would be to extrapolate each branch into a dedicated effect:

...
effect(() => {
	count1.val
	if (bool.val) {
		console.log('a')
	}
})
effect(() => {
	count2.val
    if (!bool.val) {
		console.log('b')
	}
})

Let me know how this goes!