Kdu v3.2 "Lion"

We are excited to announce the release of Kdu.js v3.2 "Lion"! This release includes many significant new features and performance improvements, and contains no breaking changes.

New SFC Features ​

Two new features for Single File Components (SFCs, aka *.kdu files) have graduated from experimental status and are now considered stable:

• <script setup> is a compile-time syntactic sugar that greatly improves the ergonomics when using Composition API inside SFCs.

• <style> k-bind enables component state-driven dynamic CSS values in SFC <style> tags.

Here is an example component using these two new features together:

<script setup>
import { ref } from 'kdu'

const color = ref('red')
</script>

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>

<style scoped>
button {
  color: k-bind(color);
}
</style>

Try it out in the SFC Playground, or read their respective documentations:

• <script setup>
• <style> k-bind

Web Components ​

Kdu v3.2 introduces a new defineCustomElement method for easily creating native custom elements using Kdu component APIs:

import { defineCustomElement } from 'kdu'

const MyKduElement = defineCustomElement({
  // normal Kdu component options here
})

// Register the custom element.
// After registration, all `<my-kdu-element>` tags
// on the page will be upgraded.
customElements.define('my-kdu-element', MyKduElement)

This API allows developers to create Kdu-powered UI component libraries that can be used with any framework, or no framework at all. We have also added a new section in our docs on consuming and creating Web Components in Kdu.

Performance Improvements ​

v3.2 includes some significant performance improvements to Kdu's reactivity system. Specifically:

• More efficient ref implementation (~260% faster read / ~50% faster write)
• ~40% faster dependency tracking
• ~17% less memory usage

The template compiler also received a number of improvements:

• ~200% faster creation of plain element KNodes
• More aggressive constant hoisting

Finally, there is a new k-memo directive that provides the ability to memoize part of the template tree. A k-memo hit allows Kdu to skip not only the Virtual DOM diffing, but the creation of new KNodes altogether. Although rarely needed, it provides an escape hatch to squeeze out maximum performance in certain scenarios, for example large k-for lists.

Server-side Rendering ​

The @kdujs/server-renderer package in v3.2 now ships an ES module build which is also decoupled from Node.js built-ins. This makes it possible to bundle and leverage @kdujs/server-renderer for use inside non-Node.js runtimes such as CloudFlare Workers or Service Workers.

We also improved the streaming render APIs, with new methods for rendering to the Web Streams API.

Effect Scope API ​

v3.2 introduces a new Effect Scope API for directly controlling the disposal timing of reactive effects (computed and watchers). It makes it easier to leverage Kdu's reactivity API out of a component context, and also unlocks some advanced use cases inside components.