1.5.0: Optimization on state derivations and side effects

[Tao-VanJS]

Hi fellow VanJSers,

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

✨ What's in the release?

1. Optimization on state derivations

In this release, we made major optimization on how state derivations are being executed. To illustrate the optimization, let's consider an example below:

const a = van.state(3), b = van.state(5)
const s = van.derive(() => a.val + b.val)

Before 1.5.0, if we have:

++a.val
++b.val

s will be derived twice, one triggered by ++a.val, and the other triggered by ++b.val. 1.5.0 changed the execution of state derivations from synchronous to asynchronous, so that only one derivation for s will be executed after both state a and b are updated.

Another benefit of this optimization is that, if we have:

++a.val
--a.val

The derivation of s will be skipped because after ++a.val and --a.val the val of a doesn't change at all.

For state-derived DOM properties and DOM child nodes, we already have this kind of optimization since 0.11.9 (VanJS's first public release). 1.5.0 release expands the optimization to state derivations. Side effects defined by van.derive will also be benefited from this optimization.

Note that in one single derivation cycle, state derivations and side effects are always executed before DOM updates, to ensure DOM re-renderings always have the top-priority to be minimized. For instance, for the component:

const a = van.state(1), b = van.derive(() => a.val * a.val)
const c = van.derive(() => b.val * b.val), d = van.derive(() => c.val * c.val)
const s = van.derive(() => a.val + b.val + c.val + d.val)

return div(() => s.val * s.val)

When the val of a changes, the derivation of s will be executed 4 times (triggered by the updates of state a, b, c, d, respectively). But s^2, the s-derived Text node will be re-rendered only once.

The optimization in 1.5.0 is very crucial for VanX-based apps. For instance, let's say we have the following piece of code to save the reactive object items into localStorage whenever it changes (as in this example):

const items = vanX.reactive([])
van.derive(() => localStorage.setItem("items", JSON.stringify(items.filter(_ => 1))))

Prior to 1.5.0, localStorage.setItem might be called multiple times for updates to items, especially if we update items with vanX.replace(items, ...), leading to significant waste of resources. With the optimization in 1.5.0, localStorage.setItem will be called only once for each update and derivation cycle.

2. rawVal property for State objects

In 1.5.0, we added a new readonly rawVal property for State objects - for getting the current value of the State object (peeking) without registering the state as a dependency of the binding function for the derived state, side effect or DOM node. For instance, the derived state:

van.derive(() => a.rawVal + b.val)

will be updated when b changes, but won't be updated when a changes. Being able to "peek" the value of a state without registering the dependency can be useful for some use cases, such as: #282.

Similarly, we also released VanX to 0.3.0 to introduce a new function vanX.raw for getting the field value of a reactive object without registering the dependency. e.g.:

data.s = vanX.calc(() => vanX.raw(data).a + data.b)

will make data.s updated when data.b changes, but data.s won't be updated when data.a changes.

---

With the optimization, the bundle sizes increases slightly. Gzipped bundle increases to 1055 bytes (1.0kB) from 1012 bytes (1.0kB) (43 bytes increase), while minified bundle increases to 2035 bytes (2.0kB) from 1896 bytes (1.9kB) (139 bytes increase) - still being the smallest reactive UI framework in the world.

❤️ Hope you can enjoy!