Coralite v0.43.0 Released

Thomas David - 9 July 26

Coralite v0.43.0 is now available. This release introduces support for explicit state observation side-effects, a restyled testing mock configuration schema, and a new AST-based dependency scanner for dynamic component tracking. These updates enhance component reactivity, improve testing capabilities, and refine build-time dependency analysis.

The client block context now provides a local observe(propertyName, callback) function to register explicit state side-effects. When properties on the reactive state Proxy change, observers trigger automatically following DOM updates.

This implementation includes automatic garbage collection and lifecycle cleanup for registered callbacks via AbortSignal. Additionally, dev-mode infinite loop protection warns developers if state mutations are attempted directly inside callbacks.

  export default defineComponent({
    client({ state, observe }) {
      observe('count', (newValue) => {
        console.log(`Count updated to: ${newValue}`);
      });
    }
  });

The testing.mocks schema in coralite.config.js has been redesigned to use discrete components and plugins namespaces. This allows shallow merging of plugin context mocks on both server and client, while ensuring component-level mocks retain absolute precedence.

The update prevents server-side mock leakage to the client by filtering serialized data and introduces warnings for non-registered plugin mocks. In addition, standard context variables such as page, app, and id are injected into mock servers alongside coerced attribute states.

  // coralite.config.js
  export default defineConfig({
    testing: {
      mocks: {
        components: {
          'user-profile': {
            server({ page, app, id, userId }) {
              return { id: userId, name: 'Mock User' };
            }
          }
        },
        plugins: {
          'auth-provider': {
            context: {
              user: { loggedIn: true }
            }
          }
        }
      }
    }
  });

To improve dependency resolution, a new AST dependency scanner tracks dynamic component imports and creations. The scanner implements scope tracing for document.createElement and createCoraliteElement, resolving ternary operators and explicit string declarations defined under the dependencies option of components.

The scanner utilizes walk.ancestor to preserve scope context during analysis and safely bails out on complex concatenations or cross-file references to maintain performance.

  export default defineComponent({
    dependencies: ['dynamic-card', 'custom-button'],
    server() {
      // Component server logic
    }
  });

• Structured Testing Mocks: The flat structure for testing.mocks is no longer supported. Mocks must now be nested under components or plugins.

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

  npm install coralite@0.43.0

  npm install coralite-scripts@0.43.0