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 increase 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!

[Tao-VanJS]

1.5.1 was just released.

1.5.1 was a minor release. In this release, we further optimized the bundle size of VanJS. Gzipped bundle decreases to 1050 bytes (1.0kB) from 1055 bytes (1.0kB) (5 bytes decrease), while minified bundle decreases to 2028 bytes (2.0kB) from 2035 bytes (2.0kB) (7 bytes decrease). There is no behavior change in this release.

[Tao-VanJS]

1.5.2 was just released.

1.5.2 was a minor release. In this release, we further optimized the bundle size of VanJS. Gzipped bundle decreases to 1048 bytes (1.0kB) from 1050 bytes (1.0kB) (2 bytes decrease), while minified bundle decreases to 2022 bytes (2.0kB) from 2028 bytes (2.0kB) (6 bytes decrease). There is no behavior change in this release.

Thanks @pearmini a lot for the contribution!

[Tao-VanJS]

1.5.3 was just released.

1.5.3 was a minor release. This release adds the support of specifying options of document.createElement or document.createElementNS in props argument of tag functions.

Below is an example of using this feature to create a custom button element:

const {button} = van.tags

class MyButton extends HTMLButtonElement {
  connectedCallback() {
    this.addEventListener("click", () => alert("MyButton clicked!"))
  }
}
customElements.define("my-button", MyButton, {extends: "button"})

const CustomButton = () => button({is: "my-button"}, "Click me")

van.add(document.body, CustomButton())

With this feature, the bundle sizes increase slightly. Gzipped bundle increases to 1059 bytes (1.0kB) from 1048 bytes (1.0kB) (11 bytes increase), while minified bundle increases to 2046 bytes (2.0kB) from 2022 bytes (1.9kB) (24 bytes increase) - still being the smallest reactive UI framework in the world.

Thanks @maburdi94 a lot for the contribution!

[Tao-VanJS]

1.5.5 was just released.

1.5.5 was a minor release. This release allows DocumentFragment as the first parameter of van.add. Prior to this release, this should be already possible, but this release makes sure the DocumentFragment argument passes the TypeScript type-checking and sanity checks in van.debug.js.

There is no implementation change in van.js in this release.

Thanks @carlosmintfan for reporting the issue!

[carlosmintfan]

Thanks! Why has there been no 1.5.4? :)

[Tao-VanJS]

Ha, you're observant! I just don't like the number :-)