Coralite v0.36.0 Released

Thomas David - 27 May 26

Coralite v0.36.0 is now available, delivering significant architectural updates to the framework. This release shifts the client-side hydration engine to native Web Components (Custom Elements), introduces a strictly separated isomorphic plugin API, and lands a unified styles build pipeline supporting modular CSS and Sass processors. In addition, developers benefit from deterministic component IDs, boolean attribute interception, and performance improvements to SSR rendering.

In this release, Coralite transitions from custom client wrapper abstractions to native Custom Elements. Components now map directly to subclasses of HTMLElement, adopting standard lifecycle callbacks such as connectedCallback and attributeChangedCallback. This native transition facilitates streamlined, scoped reactivity and secure HTML rendering. Hydration mapping has also been redesigned using high-performance tree-path traversing, resulting in O(1) lookups during client startup. To enforce cleaner runtime scoping, the legacy root reference has been completely removed from component and plugin evaluation contexts, standardizing scripts on the { state, signal, refs } context.

  defineComponent({
    setup({ state, signal, refs }) {
      // Access state variables, reactive signals, and resolved element refs
      // 'root' is removed in favor of clean runtime encapsulation
    }
  });

To improve codebase modularity and prevent server-side Node.js logic from leaking into client bundles, the plugin architecture has been split. Under the new definePlugin schema, server-side SSR hooks, components, and server exports are encapsulated within a dedicated server block, keeping browser-facing hydration scripts completely isolated.

  import { definePlugin } from 'coralite';
  
  export default definePlugin({
    name: 'my-custom-plugin',
    server: {
      onBeforePageRender(session) {
        // Executed strictly on the server during SSR
      },
      components: {
        // SSR-only component declarations
      }
    },
    client: {
      onBeforeComponentRender(context) {
        // Runs in the browser prior to component hydration
      }
    }
  });

The styles configuration schema in coralite-scripts has been rewritten from the ground up to support multiple input paths and modular css processors like Sass and PostCSS. A unified styles pipeline now processes raw CSS and SCSS styles, watches partials for hot updates during development, validates configuration schemas, and flags filename collisions. The core engine also gains the ability to automatically inject these global stylesheets as <link> tags in page headers via the new externalStyles option.

A new no-hydration boolean attribute has been introduced to support completely static UI regions. When a component carries the no-hydration attribute, its host wrapper is stripped during SSR (unwrapping its children directly into the parent layout) and it is excluded from client-side hydration. This unwrapping behavior propagates recursively down through all nested elements and helper <c-token> wrappers, producing lightweight, zero-JS HTML.

  <my-static-header no-hydration>
    <nav>
      <a href="/">Home</a>
    </nav>
  </my-static-header>

Coralite now intercepts standard HTML5 boolean attributes (such as disabled, checked, hidden, required, and autoplay) during both server-side SSR and client-side rendering. If an attribute evaluates to a truthy value, it is rendered as an empty attribute; if it is falsy, it is completely removed from the DOM tag, aligning framework behavior with natural HTML specifications.

• Plugin API Restructuring: Server-side lifecycle hooks, components, and exports in definePlugin must now be nested under the server configuration object.
• Removal of root Context: The root reference is no longer exposed in component or plugin contexts. Utilize the refs API or standard document selectors.
• Hook Payload Signature: The onAfterPageRender hook payload signature has been updated to { result, session }.

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

  npm install coralite@0.36.0

  npm install coralite-scripts@0.36.0