Coralite v0.41.0 Released

Thomas David - 5 July 26

Coralite v0.41.0 has been released. This update introduces a first-class, zero-config testing mode optimized for end-to-end and integration testing. In addition, this release refines component attribute handling with support for shorthand attribute type schemas, native HTML boolean attribute toggling, and comprehensive testing infrastructure updates.

To simplify integration and end-to-end testing, Coralite v0.41.0 introduces a dedicated testing environment mode. When running under mode: 'testing', Coralite acts as a static build target and injects a suite of diagnostic, mocking, and telemetry features without production overhead:

• Deterministic Auto-Selectors: The rendering engine automatically generates and applies structured data-testid attributes on interactive elements, facilitating robust Playwright or Cypress selectors.
• Velocity Engine: Automatically disables all CSS transitions and animations to eliminate timing-related test flakiness.
• Server Block Mocking: Allows developers to override component-level server() data fetchers directly through the configuration.
• Glass Box & Telemetry: Exposes reactive component states globally via window.__coralite__.components and logs custom events to window.__coralite__.events.
• Fail-Fast Guards: Triggers immediate fatal errors and visual overlays for hydration mismatches or unhandled client errors.

  // coralite.config.js
  import { defineConfig } from 'coralite';
  
  export default defineConfig({
    mode: 'testing',
    testing: {
      mocks: {
        // Mock server-side component data fetching
        'user-profile': {
          server: () => ({ name: 'Test User', role: 'Tester' })
        }
      }
    }
  });

Defining component attributes is now cleaner. CoraliteElement has been updated to support shorthand constructors in attribute schemas. You can now specify constructors like Number, Boolean, or String directly instead of wrapping them in a { type: Type } schema configuration object.

  import { CoraliteElement } from 'coralite';
  
  class UserProfile extends CoraliteElement {
    static attributes = {
      // New shorthand schema definition
      active: Boolean,
      userId: Number,
      role: String,
      
      // Longhand configuration is still supported
      theme: { type: String, default: 'light' }
    };
  }

Template interpolation now handles native HTML boolean attributes (such as disabled, checked, and readonly) intelligently. When binding state to these attributes, Coralite automatically adds or removes the attribute from the DOM element based on truthiness, matching native HTML behavior. Custom attributes continue to render their bound values as standard string representations.

Under the hood, the test suites have been restructured into tests/e2e/core (for framework validation in dev/prod) and tests/e2e/testing-mode (for application features). Playwright configuration now includes separate projects for core development, production, and testing mode, providing cleaner execution and better test isolation.

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

  npm install coralite@0.41.0

  npm install coralite-scripts@0.41.0