eQuantic.UI

eQuantic.UI Documentation

Infrastructure

Asset Management

A declarative system for managing CSS and JavaScript dependencies. Ensure the right scripts are loaded only when the components are on the page.

Declarative Dependencies

Instead of polluting your global <head>, components declare what they need. The framework collects, deduplicates, and injects everything in the correct order (CSS first, then JS).

public class CodeBlock : StatelessComponent, IRequireAssets
{
    public void ConfigureAssets(AssetBuilder assets)
    {
        // External stylesheet for theming
        assets.AddStylesheet(
            "https://cdn.example.com/prism.css",
            id: "prism-theme");

        // External script with automatic defer
        assets.AddScript("https://cdn.example.com/prism.js");
        
        // Inline script for utility logic
        assets.AddInlineScript("console.log('CodeBlock initialized');");
    }
}

Key Benefits

Smart Deduplication: Even if you use multiple components of the same type, the script is loaded only once.
Order Optimization: Automatic injection in the correct sequence to avoid FOUC (Flash of Unstyled Content).

External Asset Providers

For third-party components that don't implement IRequireAssets, you can use the IComponentAssetProvider pattern.

public class ChartJsAssetProvider : IComponentAssetProvider<ChartCanvas>
{
    public void ConfigureAssets(AssetBuilder assets)
    {
        assets.AddScript("https://cdn.jsdelivr.net/npm/chart.js");
    }
}

// Automatic registration via assembly scan
options.ScanAssembly(typeof(Program).Assembly);

Key Deduplication

Each asset has a unique key (URL or Hash). The first component to declare the asset "wins".

Automatic Hashing

Inline scripts automatically generate content hashes for safe deduplication.

Hydration Safe

Attributes like id ensure that scripts loaded via SSR are recognized by the client.

Performance Tip

Always use the defer: true parameter (default) to ensure JavaScript doesn't block initial HTML rendering.