Base Classes

All Moka.Red components derive from a two-level hierarchy rooted in Blazor's own base classes. Understanding these bases makes it straightforward to build new components or override existing behavior.

Class hierarchy

ComponentBase (Blazor)
  └─ MokaComponentBase          — JS interop, CSS composition, disposal, render optimization
       └─ MokaVisualComponentBase  — Size, Color, Variant, Disabled, Margin, Padding, Rounded

InputBase<TValue> (Blazor)
  └─ MokaInputBase<TValue>      — mirrors MokaComponentBase for form inputs
       └─ MokaVisualInputBase<TValue>  — mirrors MokaVisualComponentBase for form inputs

MokaComponentBase

MokaComponentBase is the root for all non-input components. It provides:

• Parameter change tracking — ShouldRender() returns false unless parameters have changed since the last render. Components with internal mutable state call ForceRender() to bypass this guard.
• CSS composition — RootClass (abstract), CssClass (virtual), and CssStyle (virtual) are the three hooks every component implements.
• Safe JS interop — SafeJsInvokeAsync and SafeJsInvokeVoidAsync silently absorb JSDisconnectedException and prerendering InvalidOperationException.
• Lazy JS modules — GetJsModuleAsync(modulePath) imports a collocated .razor.js file once and caches the module reference for the component's lifetime.
• Async disposal — DisposeAsync() is idempotent. Override DisposeAsyncCore() to release component-specific resources; call base.DisposeAsyncCore() at the end.

Parameters

Abstract contract

Every component must declare:

protected abstract string RootClass { get; }

And typically overrides:

protected override string CssClass => new CssBuilder(RootClass)
    .AddClass("moka-button--filled", Variant == MokaVariant.Filled)
    .AddClass(Class)
    .Build();

protected override string? CssStyle => new StyleBuilder()
    .AddStyle("width", WidthValue)
    .AddStyle(Style)
    .Build();

MokaVisualComponentBase

Extends MokaComponentBase with the visual appearance parameters shared by most rendered components.

Additional parameters

Protected helpers

MokaInputBase<TValue> and MokaVisualInputBase<TValue>

Form input components extend Blazor's InputBase<TValue> instead of ComponentBase, so they integrate with EditForm validation out of the box. MokaInputBase<TValue> and MokaVisualInputBase<TValue> mirror the non-input hierarchy exactly, adding the same JS interop, CSS composition, and disposal support.

ComponentCssClass (the CSS composition property on inputs) merges the component's RootClass, Blazor's built-in validation classes (valid, invalid, modified), and the user's Class parameter.

CssBuilder

CssBuilder composes space-separated CSS class strings. Null and whitespace values are skipped automatically.

string classes = new CssBuilder("moka-chip")
    .AddClass("moka-chip--filled",  Variant == MokaVariant.Filled)
    .AddClass("moka-chip--primary", Color == MokaColor.Primary)
    .AddClass("moka-chip--disabled", Disabled)
    .AddClass(Class)      // user-supplied, always last
    .Build();
// → "moka-chip moka-chip--filled moka-chip--primary"

The conditional overload accepts either a bool or a Func<bool> predicate.

StyleBuilder

StyleBuilder composes semicolon-separated inline style strings.

string? style = new StyleBuilder()
    .AddStyle("width",  WidthValue)                             // skipped when null
    .AddStyle("color",  "red",       Color == MokaColor.Error) // conditional
    .AddStyle("margin", ResolvedMargin)
    .AddStyle(Style)    // user-supplied passthrough
    .Build();

IAsyncDisposable pattern

Override DisposeAsyncCore to release resources:

protected override async ValueTask DisposeAsyncCore()
{
    if (_subscription is not null)
    {
        await _subscription.DisposeAsync();
        _subscription = null;
    }

    await base.DisposeAsyncCore();  // always call base
}

DisposeAsync() on MokaComponentBase is idempotent (guarded by a _disposed flag) and automatically disposes any JS module loaded via GetJsModuleAsync.