eQuantic.UI

Documentação eQuantic.UI

Documentação eQuantic.UI

Infraestrutura

Gestão de Assets

Um sistema declarativo para gerir dependências de CSS e JavaScript. Garanta que os scripts certos são carregados apenas quando os componentes estão na página.

Dependência Declarativa

Em vez de poluir o seu <head> global, os componentes declaram o que precisam. O framework recolhe, remove duplicados e injeta tudo na ordem correta (CSS primeiro, depois 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');");
    }
}

Benefícios Principais

  • Deduplicação Inteligente: Mesmo que use múltiplos componentes do mesmo tipo, o script é carregado apenas uma vez.
  • Otimização de Ordem: Injeção automática na sequência correta para evitar FOUC (Flash of Unstyled Content).

External Asset Providers

Para componentes de terceiros que não implementam IRequireAssets, pode utilizar o padrão IComponentAssetProvider.

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);

Deduplicação por Key

Cada asset tem uma chave única (URL ou Hash). O primeiro componente a declarar o asset "vence".

Hashing Automático

Scripts inline geram hashes de conteúdo automaticamente para deduplicação segura.

Hydration Safe

Atributos como id garantem que os scripts carregados via SSR são reconhecidos pelo cliente.

Dica de Performance

Sempre use o parâmetro defer: true (padrão) para garantir que o JavaScript não bloqueia a renderização do HTML inicial.