> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kazzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bileşenler

> UI ve işlem bileşenleri.

# Bileşenler

Bileşenler, uygulamanızın çalıştırılabilir parçalarıdır. Her bileşenin nasıl çalıştığını belirleyen bir `type` özelliği vardır.

## UI bileşenleri

UI bileşeni, bir web ön ucu — React, Vue, Svelte, düz HTML veya bir port üzerinde çalışan herhangi bir çerçeve.

```typescript theme={"theme":"material-theme-darker"}
{ name: 'Dashboard', type: 'ui', path: '.', runtime: { dev: { command: 'bun run dev' } } }
```

* **Uygulama başına en fazla 1** — Kazzle her uygulama için tek bir önizleme URL'si atar
* `runtime.dev.command` — geliştirme sunucusu komutu ("Önizlemeyi başlat" tarafından kullanılır)
* `runtime.prod.build` — üretim görüntüsünü oluşturma komutu
* `runtime.prod.command` — üretim işlem bileşenini başlatma komutu

`runtime.dev.command` ayarlanmamışsa, önizleme sistemi `package.json` dosyanızdan `bun run dev` komutunu çalıştırır.

## İşlem bileşenleri

İşlem bileşeni, bir arka uç hizmeti, çalışan veya zamanlanmış görevdir.

```typescript theme={"theme":"material-theme-darker"}
{ name: 'API', type: 'process', path: './server/index.ts' }
```

### Yaşam döngüsü: `processMode`

İşlem bileşeninin iki yaşam döngüsünden biri vardır:

* `processMode: 'persistent'` (varsayılan) — uzun süreli HTTP sunucusu. Tetikleyiciler, çalışan sunucuya bildirilen `path` konumuna POST edilir.
* `processMode: 'triggered'` — giriş betiği tetikleyici başına oluşturulur ve çıkar. Üretimde boş makineler yok.

### Tetikleyiciler

Zamanlama ve webhook tetikleyicileri bileşen üzerinde bildirilir. Bir bileşen birçok tetikleyici taşıyabilir. Her tetikleyicinin bir `name` (bileşen içinde benzersiz) ve bir `kind` özelliği vardır.

```typescript theme={"theme":"material-theme-darker"}
{
  name: 'events',
  type: 'process',
  path: './components/events/index.ts',
  processMode: 'persistent',
  triggers: [
    { name: 'cleanup', kind: 'schedule', schedule: '0 * * * *', path: '/cron/cleanup' },
    { name: 'stripe',  kind: 'webhook',                          path: '/webhook/stripe' },
  ],
}
```

`path` özelliği `processMode: 'persistent'` için gereklidir. `processMode: 'triggered'` için atlanır — betik bunun yerine ortam değişkeninden `TRIGGER_NAME` okur.

Tam tetikleyici modeli, ortam değişkeni sözleşmesi ve HTTP kimlik doğrulama başlığı için [Otomasyonlar](/work/automations) bölümüne bakın.

## Çalışma zamanı komutları

| Aşama                  | Ne zaman çalışır            | Örnek                                  |
| ---------------------- | --------------------------- | -------------------------------------- |
| `runtime.dev.command`  | Taslak önizlemesi sırasında | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | Üretimde                    | `bun run start`, `node dist/server.js` |

Taslak önizleme paket betikleri `kazzle run -- <command>` kullanabilir, böylece Kazzle yerel portları ve kardeş bileşen URL'lerini enjekte edebilir. Üretim işlem bileşenleri, dağıtım bu komutu üretim görüntüsünde çalıştırdığından, gerçek komutu `runtime.prod.command` içinde bildirmelidir.