JavaScript

Seed gera HTML estático puro — não há JavaScript global obrigatório. JS vem de três fontes: assets do tema, scripts de componente e scripts do projeto.

Assets do tema

O tema pode incluir um arquivo .js em themes/<nome>/assets/. Ele é referenciado no front matter do layout padrão:

```yaml
# front matter do default.layout
js: /static/seed-ui.js
```

Entregue como <script src> (modo file) ou <script> inline (modo inline), conforme configurado no seed.yaml.

Scripts de componente

Um arquivo .js com o mesmo nome do componente, no mesmo diretório, é auto-descoberto e bundlado automaticamente em dist/static/seed.js:

```
components/
  tabs/
    tabs.yaml
    tabs.js    ← bundlado automaticamente em seed.js
```

O seed.js é injetado automaticamente em todas as páginas via {component_scripts} no template base — sem nenhuma configuração adicional. No dev, o arquivo é gerado a cada rebuild. No build, contém apenas os scripts dos componentes registrados.

Quando criar um .js de componente:

• O componente depende de interatividade que não existe nativamente no HTML (ex: tabs, dropdown, modal)
• A lógica é específica daquele componente e não faz sentido em outro contexto
• Componentes que funcionam com HTML nativo (<details>, <dialog>) não precisam de JS

Convenções para scripts de componente:

• Use data-* como seletores (ex: data-tabs) — evita conflitos com CSS e é semântico
• Envolva em DOMContentLoaded
• Use element.hidden para controle de visibilidade

Exemplo — tabs com um painel ativo por vez:

```javascript
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('[data-tabs]').forEach(function(root) {
    var items = root.querySelectorAll('[data-tabs-group] button');
    var panels = root.querySelectorAll('[data-tabs-panel]');
    function activate(i) {
      items.forEach(function(btn, j) { btn.dataset.active = i === j ? 'true' : ''; });
      panels.forEach(function(p, j) { p.hidden = i !== j; });
    }
    items.forEach(function(btn, i) { btn.addEventListener('click', function() { activate(i); }); });
    if (items.length) activate(0);
  });
});
```

Scripts do projeto

Via front matter js::

```seed
---
title: Minha Página
js:
  - /static/meu-script.js
  - /static/outro-script.js
---
```

Arquivos devem estar em src/assets/ e são servidos em /static/....

Modo inline vs. file (seed.yaml)

```yaml
js: file     # <script src="static/arquivo.js"> — padrão
js: inline   # conteúdo injetado diretamente em <script>
```

Scripts de componente são bundlados em seed.js e entregues como <script src>, independente dessa configuração.

Alpine.js

Para comportamento reativo, Alpine.js integra naturalmente com o HTML estático do Seed:

```seed
@script: src=https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js, defer
```

Feito com ❤️ e Seed