1.1.0: A big improvement on GC

[Tao-VanJS]

Hi fellow VanJSers,

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

The garbage collection mechanism in VanJS was revamped in 1.1.0. In this overhaul, we improved the GC handling for derived states and side effects registered inside DOM binding functions to avoid some unnecessary constraints while defining derived states and side effects.

In particular, prior to VanJS 1.1.0, the code below is not recommended:

const renderPre = van.state(false)
const prefix = van.state("Prefix")
const TextDiv = () => div(() => {
  const suffix = van.state("Suffix")
  const text = van.derive(() => `${prefix.val} - ${suffix.val}`)
  return (renderPre.val ? pre : span)(text)
})

This is because whenever the state renderPre is toggled, the binding function will be called, and then a new instance of derived state text will be created and subscribe to changes its dependencies: prefix and suffix. As state prefix is created outside the scope of the binding function, eventually, prefix will register many derived states if renderPre is toggled many times - for different text instances created inside the binding function whenever it is executed. All of the derived text instances, except for the most recent one, are actually obsolete, as they're no longer part of the document tree.

Prior to VanJS 1.1.0, users are advised to code with the following style to avoid the GC issue:

const renderPre = van.state(false)
const prefix = van.state("Prefix")
const TextDiv = () => div(() => {
  const prefixVal = prefix.val
  const suffix = van.state("Suffix")
  const text = van.derive(() => `${prefixVal} - ${suffix.val}`)
  return (renderPre.val ? pre : span)(text)
})

This works well but it introduces the extra mental overhead for writing memory-leak-free code.

In VanJS 1.1.0, both pieces of code are correct. This is because we're making derived states and side effects registered inside DOM binding functions bound to the lifecycles of DOM nodes that the binding functions return. In other words, if a binding function f returns a DOM node dom, all the derived states and side effects registered while executing f will be garbage collected when dom is disconnected from the document tree. With this release, van.derive can be used much more freely to enable more advanced state derivations and bindings.

With this improvement, the bundle size increases slightly, gzipped bundle remains at 0.9kB (958 bytes from 928 bytes), while minified bundle increases to 1.7kB (1702 bytes from 1630 bytes) - still being the smallest reactive UI framework in the world.

❤️ Hope you can enjoy!

[artydev]

Thank you TAO

[Tao-VanJS]

1.1.3 was just released.

1.1.3 is a minor release. Here are the changes:

• Simplify van.d.ts by using TypeScript built-in types
• Unify the style in van.debug.js

There is no change in the implementation of van.js file.

Version 1.1.1 and 1.1.2 are skipped as the published NPM packages have some minor issues in van.d.ts file.