Coralite v0.38.1 Released

Thomas David - 19 June 26

Coralite version v0.38.1 has been released. This release introduces support for dynamically loading custom elements when HTML is modified via client-side DOM insertion APIs. It also improves TypeScript definition accuracy for plugin lifecycle contexts and refines the configuration provided to client-side plugins.

In previous versions, custom elements inserted into the DOM dynamically through properties like innerHTML, outerHTML, or methods like insertAdjacentHTML were not automatically processed by the Coralite runtime. Coralite v0.38.1 introduces a build-time compiler transformation that wraps these assignments with a new runtime utility, processHTML().

This runtime utility scans the inserted HTML string, detects custom elements, and dynamically loads their corresponding dependencies. The extraction logic has been updated to scan string and template literals to ensure custom element tags are identified as dependencies during compile time.

  // Before: Inserting HTML directly did not trigger component resolution
  element.innerHTML = '<my-dynamic-card title="Hello"></my-dynamic-card>';
  
  // After v0.38.1: Compiler transforms the assignment to load 'my-dynamic-card'
  element.innerHTML = processHTML('<my-dynamic-card title="Hello"></my-dynamic-card>');

This release addresses a typing issue where the instanceContext parameter in the second phase of Coralite plugin context resolvers (the instance context resolver phase) was typed as any. We have introduced formal type definitions to ensure type safety during this phase of the plugin lifecycle.

Specifically, the following types have been defined and integrated into the signature of context functions in CoralitePluginServer and ScriptPlugin:

• CoralitePluginServerPhase2Context and CoralitePluginServerPhase2Callback for server-side plugins.
• ScriptPluginPhase2Context and ScriptPluginPhase2Callback for client-side (script) plugins.

Additionally, Phase 2 contexts now support namespaced plugin access via Object.<string, any> to facilitate clean communication and access patterns between plugin modules.

  import { CoralitePluginServer, CoralitePluginServerPhase2Context } from 'coralite';
  
  export const myPlugin: CoralitePluginServer = {
    name: 'my-plugin',
    async context(phase1Context) {
      // Phase 1 initialization
      return {
        name: 'resolved-context',
        resolve(phase2Context: CoralitePluginServerPhase2Context) {
          // Correctly typed instanceContext and namespaced plugins are accessible here
          const config = phase2Context.config;
          return { config };
        }
      };
    }
  };

We fixed an issue in the client runtime where client-side plugins were not properly supplied with their configuration object, and internal placeholder values were not correctly removed. Plugins executed on the client-side now receive the correct initial configuration settings declared in the project settings.

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

  npm install coralite@0.38.1

  npm install coralite-scripts@0.38.1