1.6.0: Use microtask queue for state derivation and DOM binding

This release changed to use microtask queue (via queueMicrotask) instead of macrotask queue (via setTimeout) for state derivation and DOM binding.

See the release announcement: #466

1.5.5: Allow `DocumentFragment` as the first parameter of `van.add`

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.

See the release announcement: #290 (comment)

1.5.3: Support specifying `options` of `document.createElement` in tag functions

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())

See the release announcement: #290 (comment)

1.5.2: Further size optimization

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.

See the release announcement: #290 (comment)

1.5.1: Further size optimization

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.

See the release announcement: #290 (comment)

1.5.0: Optimization on state derivations and side effects

1. Optimization on state derivations

Major optimization on how state derivations are being executed. For instance, with the code:

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

If we have:

++a.val
++b.val

s will be derived only once.

And if we have:

++a.val
--a.val

The derivation of s will be skipped since a remains unchanged after ++a.val and --a.val.

2. rawVal property for State objects

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 instance, the derived state: van.derive(() => a.rawVal + b.val) will be updated when b changes, but won't be updated when a changes.

See the release announcement: #290

1.4.1: Fix the minor type issue of van.state in van.d.ts

See the release announcement: #280 (comment)

1.4.0: API simplification (less is more)

Simplify VanJS API by deprecating 4 rarely used functions:

• van.tagsNS is merged into van.tags
• van._ can be replaced by van.derive
• van.val and van.oldVal are deprecated and can be replaced by client-side solution like: https://vanjs.org/tutorial#polymorphic-binding
• Support van.state() in TypeScript to create dummy or uninitialized State objects

See the release announcement: #280

1.3.0: More robust dependency detection in binding functions

Improve the dependency detection in binding functions to avoid self-referencing side effect triggering infinite loop.

With this release, the following code will work perfectly:

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

See the release announcement: #275

1.2.8: Add support for custom event handlers.

In this release, we changed the implementation of event handlers in VanJS. Instead of registering event handlers via on... property, we changed to use addEventListener and removeEventListener to register and unregister event handlers.

As a result of the change, you can set custom event handlers via tag functions:

const {button, div, p} = van.tags

const dom = div(button({oncustom: () => van.add(dom, p("Event triggered!"))}, "Button"))
van.add(document.body, dom)

dom.querySelector("button").dispatchEvent(new Event("custom"))

See the release announcement: #246