1. Como funciona

Adicione sw-ajax (URL) ou sw-ajax-src (elemento interno) em qualquer elemento. Ao disparar o trigger, o SWAjax busca o conteúdo, sanitiza e injeta no destino, reinicializa os módulos SW nele contidos e dispara um evento.

2. Triggers

3 modos de disparo — click, load automático e hover prefetch.

3. Efeitos de Entrada

O conteúdo injetado pode receber qualquer classe de animação real do framework — .sw-ani-* (entrada única), .sw-rev-* (reveal) e .sw-loop-* (contínua), ver catálogo completo. Clique num efeito abaixo — a demo usa sw-ajax-src (sem requisição HTTP) e reaplica a classe a cada clique.

Duração · Distância · Atraso

12 entradas únicas — .sw-ani-*

7 reveal — .sw-rev-* (normalmente disparado por scroll, aqui replicado no clique)

7 contínuas — .sw-loop-* (clique de novo pra parar)

Declarativo — direto na tag, zero JavaScript

Os 4 atributos abaixo controlam o efeito de entrada sem escrever nenhum código: sw-ajax-effect, sw-ajax-duration (ms), sw-ajax-distance (com unidade) e sw-ajax-delay (ms). O SWAjax lê tudo isso sozinho ao injetar o conteúdo.

// A demo de botões coloridos acima é só JS local da página — troca o
// conteúdo via SW-AJAX (sw-ajax-src) e reaplica a classe de animação
// escolhida manualmente:
box.classList.remove(efeitoAnterior);
void box.offsetWidth;              // força reflow pra poder repetir a animação
box.classList.add('sw-ani-fade');  // ou qualquer outra .sw-ani-* / .sw-rev-* / .sw-loop-*

// Duração, distância e atraso são tokens CSS — dá pra sobrescrever por elemento:
box.style.setProperty('--sw-spd', '0.8s');    // duração
box.style.setProperty('--sw-dist', '4rem');   // distância percorrida
box.style.setProperty('--sw-delay', '0.2s');  // atraso antes de começar

4. Preload (estado de carregamento)

Enquanto a requisição HTTP está em andamento, o destino recebe automaticamente a classe .sw-ajax-loading: o conteúdo antigo escurece e borra, e um spinner real aparece por cima — assim fica claro que algo está carregando, em vez do conteúdo antigo continuar parado ali sem nenhum aviso. Vem ligado por padrão; dá pra desligar por elemento com sw-ajax-loader="off", pra casos onde a troca é rápida o bastante pra não precisar de indicador (ex.: sw-ajax-src, que nunca faz requisição HTTP e por isso nunca mostra o preload).

Demo — busca de verdade (sw-ajax, mesma origem). No localhost a resposta costuma chegar rápido demais pra ver o spinner com calma; pra observar melhor, abra o DevTools → Network → throttling (ex.: "Slow 3G") antes de clicar. O botão "sem preload" troca o conteúdo sem nenhum aviso visual até a resposta chegar.

5. AJAX Interno

Com sw-ajax-src o conteúdo é copiado de um elemento oculto na própria página — sem requisição HTTP. Ideal pra tabs, accordions e wizards.

Funciona com <template> ou <div hidden> como fonte. Após a injeção, SW.reinit() é chamado automaticamente no destino.

Demo — AJAX Interno

6. API JavaScript

Dispare carregamentos programaticamente, sem HTML declarativo.

// Carregar conteúdo via GET
SWAjax.load('/api/lista', '#resultado');

// Com opções
SWAjax.load('/api/lista', '#resultado', {
    push: true,          // atualiza a URL no navegador (history.pushState)
    extract: '#conteudo' // extrai só um trecho da resposta
});

// POST com dados (objeto vira JSON automaticamente)
SWAjax.post('/api/salvar', { nome: 'João', idade: 30 }, '#resposta');

// POST com FormData (upload de arquivo)
const fd = new FormData(document.querySelector('#meuForm'));
SWAjax.post('/api/upload', fd, '#resultado');

// Eventos disponíveis no elemento trigger
el.addEventListener('sw:ajax:start', ({ detail }) => {
    console.log('Buscando:', detail.url);
});

el.addEventListener('sw:ajax:done', () => {
    console.log('Concluído.');
});

el.addEventListener('sw:ajax:error', ({ detail }) => {
    console.error('Erro:', detail.error);
});

7. Padrões Reais

Casos de uso comuns em aplicações.

8. Reinit Automático

Após cada carregamento, SW.reinit(dest) é chamado automaticamente — todos os módulos SW no novo conteúdo são inicializados sem nenhuma configuração extra.

// Manual: reinicializar módulos em um container específico
SW.reinit(document.querySelector('#meu-container'));