Coralite v0.31.3 Released

Thomas David - 9 Apr 26

Coralite v0.31.3 is now available. This release focuses on improving client-side reactivity for computed slots and imperative web components, ensuring dynamic logic is preserved during runtime updates. Additionally, we have introduced explicit TypeScript type definitions for module token and slot options to improve developer ergonomics.

With this release, Coralite Web Components support client-side reactivity inside computed slots. Previously, slot functions defined on components were not fully dynamic after initial compilation. We updated the compiler to bundle original slot functions at results.__script__.slots and serialize them on the component manifest. At runtime, the client-side renderer dynamically re-evaluates these slot functions during component updates, using the projected light DOM nodes and reactive state (this._values) to generate updated node arrays.

  defineComponent({
    name: 'my-reactive-card',
    slots: {
      header: (slotNodes, values) => {
        return `<h3>Card Title: &#x24;{values.title}</h3>`;
      }
    }
  });

We resolved an issue where computed tokens in imperative web components were evaluated into static strings on the server. By modifying defineComponent to populate the __script__.defaultValues object directly with token functions, the framework preserves them as executable client-side logic. This ensures that dynamically attached components correctly re-evaluate tokens on client-side attribute alterations.

Furthermore, computed tokens are now successfully passed to dynamically loaded components even when the client configuration lacks a script property. Component element generation has also been updated to support primitive values in the default properties array, preventing token data loss across component lifecycles.

To replace generic function type annotations, we introduced explicit TypeScript interfaces in types/module.js and exported them through the main entry point:

• CoraliteModuleTokenFunction: Formally types the tokens option in defineComponent, specifying that it receives values and returns either a direct value or a Promise.
• CoraliteModuleSlotFunction: Formally types the slots option in defineComponent, accommodating slotNodes and values as inputs, and returning an array of nodes, an HTML string, or void.

To upgrade to the latest version, update your project dependencies:

  npm install coralite@0.31.3

  npm install coralite-scripts@0.31.3