1.3.0: More robust dependency detection in binding functions

[Tao-VanJS]

Hi fellow VanJSers,

I'm happy to announce the release of VanJS 1.3.0. 🎉🎉🎉

This release improves the dependency detection mechanism in binding functions. Specifically, before the 1.3.0 release, things could be very tricky if we define a self-referencing side effect (i.e.: setting the val of a state while reading the state val in the same side effect). To illustrate the problem, let's consider this side effect defined with van.derive:

van.derive(() => {
  if (checked.val) ++numChecked.val
})

The intention of the side effect is to increment state numChecked whenever state checked is true. However, this definition is problematic prior to 1.3.0 release. The problem is: ++numChecked.val, which de-sugars to numChecked.val = numChecked.val + 1, makes the side effect depend on numChecked state (as it reads the val of numChecked in the binding function). Thus, whenever numChecked is set elsewhere, it will trigger the side effect defined above, which will increment the numChecked state, and then trigger the side effect again, and increment the numChecked again, ... - an endless loop. Eventually a stack overflow error will occur to stop the loop, leaving numChecked state ending in an arbitrary number.

VanJS 1.3.0 adjusts the dependency detection mechanism in this situation to avoid the problem. That is, if we're setting the val property of some state inside a binding function (be it in van.derive, for state-derived properties, or for state-derived child nodes), that state will not be considered as a dependency of the binding function, even if its val property is being read there. The adjustment is aimed to avoid the self-referencing problem discussed above, making it impossible to trigger an side effect to update a state that re-triggers the same side effect again. Thus in VanJS 1.3.0 or later, setting numChecked will always lead to deterministic behavior, without triggering the self-referencing side effect.

You can read more about the new dependency detection mechanism here: https://vanjs.org/advanced#self-referencing-in-side-effects.

The new dependency detection mechanism also fixes a problem in VanX. vanX.replace in a side effect causes an infinite loop in prior VanJS versions but now works perfectly in VanJS 1.3.0. The piece of code below will have the correct behavior in VanJS 1.3.0:

const {div, input, li, ul} = van.tags

const countries = [
  "Argentina", "Bolivia", "Brazil", "Chile", "Colombia", "Ecuador", "Guyana",
  "Paraguay", "Peru", "Suriname", "Uruguay", "Venezuela",
]

const filter = van.state("")
const filteredCountries = vanX.reactive([])
van.derive(() => vanX.replace(filteredCountries, () => countries.filter(
  c => c.toLowerCase().includes(filter.val.toLowerCase()))))

van.add(document.body,
  div(
    "Countries in South America. Filter: ",
    input({type: "text", value: filter, oninput: e => filter.val = e.target.value})
  ),
  vanX.list(ul, filteredCountries, v => li(v)),
) 

Try on jsfiddle (problematic with VanJS 1.2.8)
Try on jsfiddle (perfect with VanJS 1.3.0)

With the improvement, the bundle size increases slightly. Gzipped bundle increases to 1049 bytes (1.0kB) from 1021 bytes (1.0kB) (28 bytes increase), while minified bundle increases to 1923 bytes (1.9kB) from 1831 bytes (1.8kB) (92 bytes increase) - still being the smallest reactive UI framework in the world.

❤️ Hope you can enjoy!

[HEAVYPOLY]

Amazing, thank you for the fast update!

[madil4]

Great news! I had some workarounds when first used it here but glad that I can remove these ugly hacks with 1.3.0. Keep inspiring us (: