Svelte Notları ve İpuçları

İçindekiler

Bileşenler
Reaktivite
Prop'lar
Mantık
Olaylar
Bağlamalar
Yaşam Döngüsü
Depolar
Hareket
Geçişler
Eylemler
Sınıflar
Slotlar
Bağlam API'si
Özel Öğeler
Modül Bağlamı
Hata Ayıklama
Yönlendirme (SvelteKit)
Sunucu Tarafı Oluşturma
TypeScript Desteği

Bileşenler

Temel Bileşen Yapısı

<script>
  let name = 'dünya';
</script>

<main>
  <h1>Merhaba {name}!</h1>
</main>

<style>
  h1 {
    color: blue;
  }
</style>

Reaktivite

Reaktif Bildirimler

<script>
  let count = 0;
  $: doubled = count * 2;

  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>
  {count} kez {count === 1 ? 'tıklandı' : 'tıklandı'}
</button>

<p>{count}'nin iki katı {doubled}</p>

Reaktif İfadeler

<script>
  let count = 0;

  $: {
    console.log(`Sayaç şu anda ${count}`);
  }

  $: if (count >= 10) {
    alert('Sayaç tehlikeli derecede yüksek!');
    count = 9;
  }
</script>

Prop'lar

Prop Bildirimi

<script>
  export let name;
  export let age = 30; // varsayılan değer
</script>

<p>{name} {age} yaşında.</p>

Prop'ları Yayma

<script>
  import Info from './Info.svelte';
  
  const pkg = {
    name: 'svelte',
    version: 3,
    speed: 'çok hızlı',
    website: 'https://svelte.dev'
  };
</script>

<Info {...pkg} />

Mantık

If Blokları

{#if user.loggedIn}
  <button on:click={logout}>Çıkış yap</button>
{:else}
  <button on:click={login}>Giriş yap</button>
{/if}

Each Blokları

<ul>
  {#each items as item, index (item.id)}
    <li>{index + 1}: {item.name}</li>
  {/each}
</ul>

Await Blokları

{#await promise}
  <p>...bekleniyor</p>
{:then number}
  <p>Sayı: {number}</p>
{:catch error}
  <p style="color: red">{error.message}</p>
{/await}

Olaylar

Olay İşleme

<script>
  function handleClick() {
    alert('Düğmeye tıklandı!');
  }
</script>

<button on:click={handleClick}>Bana tıkla</button>

Olay Değiştiricileri

<button on:click|once|preventDefault={handleClick}>Bana tıkla</button>

Bileşen Olayları

<script>
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  function sayHello() {
    dispatch('message', {
      text: 'Merhaba!'
    });
  }
</script>

<button on:click={sayHello}>Merhaba de</button>

Bağlamalar

İki Yönlü Bağlama

<script>
  let name = 'dünya';
</script>

<input bind:value={name}>

<h1>Merhaba {name}!</h1>

Onay Kutusu Bağlama

<script>
  let checked = false;
</script>

<label>
  <input type="checkbox" bind:checked>
  İşaretli mi: {checked}
</label>

Yaşam Döngüsü

onMount

<script>
  import { onMount } from 'svelte';

  let data = [];

  onMount(async () => {
    const res = await fetch('https://api.example.com/data');
    data = await res.json();
  });
</script>

onDestroy

<script>
  import { onDestroy } from 'svelte';

  let interval = setInterval(() => {
    console.log('Tik');
  }, 1000);

  onDestroy(() => {
    clearInterval(interval);
  });
</script>

Depolar

Yazılabilir Depo

import { writable } from 'svelte/store';

export const count = writable(0);

Depoları Kullanma

<script>
  import { count } from './stores.js';

  function increment() {
    count.update(n => n + 1);
  }
</script>

<h1>Sayaç: {$count}</h1>
<button on:click={increment}>+</button>

Hareket

Tweened

<script>
  import { tweened } from 'svelte/motion';
  import { cubicOut } from 'svelte/easing';

  const progress = tweened(0, {
    duration: 400,
    easing: cubicOut
  });
</script>

<progress value={$progress}></progress>

<button on:click={() => progress.set(0)}>
  %0
</button>

<button on:click={() => progress.set(1)}>
  %100
</button>

Geçişler

Solma Geçişi

<script>
  import { fade } from 'svelte/transition';
  let visible = true;
</script>

<label>
  <input type="checkbox" bind:checked={visible}>
  görünür
</label>

{#if visible}
  <p transition:fade>Yavaşça belirir ve kaybolur</p>
{/if}

Eylemler

use Yönergesi

<script>
  function pannable(node) {
    let x;
    let y;

    function handleMousedown(event) {
      x = event.clientX;
      y = event.clientY;

      node.dispatchEvent(new CustomEvent('panstart', {
        detail: { x, y }
      }));

      window.addEventListener('mousemove', handleMousemove);
      window.addEventListener('mouseup', handleMouseup);
    }

    function handleMousemove(event) {
      const dx = event.clientX - x;
      const dy = event.clientY - y;
      x = event.clientX;
      y = event.clientY;

      node.dispatchEvent(new CustomEvent('panmove', {
        detail: { x, y, dx, dy }
      }));
    }

    function handleMouseup(event) {
      x = event.clientX;
      y = event.clientY;

      node.dispatchEvent(new CustomEvent('panend', {
        detail: { x, y }
      }));

      window.removeEventListener('mousemove', handleMousemove);
      window.removeEventListener('mouseup', handleMouseup);
    }

    node.addEventListener('mousedown', handleMousedown);

    return {
      destroy() {
        node.removeEventListener('mousedown', handleMousedown);
      }
    };
  }
</script>

<div use:pannable
  on:panstart={handlePanStart}
  on:panmove={handlePanMove}
  on:panend={handlePanEnd}>
  Beni sürükle!
</div>

Sınıflar

Sınıf Yönergesi

<script>
  let active = true;
  let danger = false;
</script>

<div class:active class:danger>
  Sınıf örneği
</div>

Slotlar

Varsayılan Slot

<!-- Card.svelte -->
<div class="card">
  <slot></slot>
</div>

<!-- App.svelte -->
<Card>
  <h2>Kart Başlığı</h2>
  <p>Kart içeriği</p>
</Card>

İsimli Slotlar

<!-- Layout.svelte -->
<div class="layout">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

<!-- App.svelte -->
<Layout>
  <h1 slot="header">Sayfa Başlığı</h1>
  <p>Ana içerik</p>
  <p slot="footer">Telif Hakkı 2023</p>
</Layout>

Bağlam API'si

Bağlam Ayarlama

<script>
  import { setContext } from 'svelte';

  setContext('theme', {
    primaryColor: 'blue',
    textColor: 'white'
  });
</script>

Bağlam Alma

<script>
  import { getContext } from 'svelte';

  const { primaryColor, textColor } = getContext('theme');
</script>

Özel Öğeler

svelte:head

<svelte:head>
  <title>Svelte Uygulamam</title>
  <meta name="description" content="Bu benim Svelte uygulamam">
</svelte:head>

svelte:window

<script>
  let y;

  function handleScroll(event) {
    y = window.scrollY;
  }
</script>

<svelte:window on:scroll={handleScroll}/>

<p>{y} kadar kaydırıldı</p>

Modül Bağlamı

Modül Scripti

<script context="module">
  let count = 0;

  export function incrementCount() {
    count += 1;
  }
</script>

<script>
  import { incrementCount } from './Counter.svelte';
</script>

<button on:click={incrementCount}>
  Tıklamalar: {count}
</button>

Hata Ayıklama

@debug

<script>
  let user = { name: 'Ahmet', age: 30 };
</script>

{@debug user}

<h1>{user.name}</h1>

Yönlendirme (SvelteKit)

Temel Yönlendirme

// src/routes/+page.svelte
<h1>Ana Sayfa</h1>

// src/routes/about/+page.svelte
<h1>Hakkında</h1>

// src/routes/[slug]/+page.svelte
<script>
  export let data;
</script>

<h1>{data.title}</h1>
<div>{@html data.content}</div>

Sunucu Tarafı Oluşturma

Yükleme Fonksiyonu

// src/routes/blog/[slug]/+page.server.js
export async function load({ params }) {
  const post = await getPostFromDatabase(params.slug);
  return { post };
}

TypeScript Desteği

Svelte'de TypeScript

<script lang="ts">
  let count: number = 0;
  
  function increment(): void {
    count += 1;
  }
</script>

<button on:click={increment}>
  Tıklamalar: {count}
</button>