Svelte چیست؟ آموزش کامل و جامع Svelte

<script>
  let name = 'دنیا';
</script>

<h1>سلام {name}!</h1>

<style>
  h1 {
    color: #ff3e00;
  }
</style>

<script>
  // منطق و متغیرهای کامپوننت
  let count = 0;
  
  function increment() {
    count += 1;
  }
</script>

<!-- قالب HTML -->
<button on:click={increment}>
  شمارنده: {count}
</button>

<style>
  /* استایل‌های مختص کامپوننت */
  button {
    background: #ff3e00;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
  }
</style>

<!-- Button.svelte -->
<script>
  export let text = 'کلیک کنید';
  export let onClick = () => {};
</script>

<button on:click={onClick}>
  {text}
</button>

<style>
  button {
    /* استایل‌های دکمه */
  }
</style>

<!-- App.svelte -->
<script>
  import Button from './Button.svelte';
  
  function handleClick() {
    alert('دکمه کلیک شد!');
  }
</script>

<Button text="ارسال" onClick={handleClick} />

<script>
  let count = 0;
  $: doubled = count * 2;
  $: if (count >= 10) {
    alert('مقدار از 10 بیشتر شد!');
  }

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

<button on:click={increment}>
  افزایش ({count})
</button>

<p>دو برابر: {doubled}</p>

<script>
  import { writable } from 'svelte/store';

  // متغیر ساده
  let count = 0;

  // store قابل نوشتن
  const userStore = writable({
    name: 'کاربر',
    isLoggedIn: false
  });

  // اشتراک در تغییرات store
  userStore.subscribe(value => {
    console.log('تغییرات:', value);
  });

  function login() {
    userStore.update(user => ({
      ...user,
      isLoggedIn: true
    }));
  }
</script>

{#if $userStore.isLoggedIn}
  <p>خوش آمدید، {$userStore.name}!</p>
{:else}
  <button on:click={login}>ورود</button>
{/if}

<script>
  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte';

  let data = [];

  onMount(async () => {
    // کامپوننت mount شد
    const response = await fetch('https://api.example.com/data');
    data = await response.json();
  });

  beforeUpdate(() => {
    console.log('قبل از به‌روزرسانی DOM');
  });

  afterUpdate(() => {
    console.log('بعد از به‌روزرسانی DOM');
  });

  onDestroy(() => {
    // تمیزکاری قبل از حذف کامپوننت
    console.log('کامپوننت در حال حذف است');
  });
</script>

{#each data as item}
  <div>{item.name}</div>
{/each}

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();

  function handleClick(event) {
    // ارسال رویداد سفارشی
    dispatch('customClick', {
      detail: 'اطلاعات اضافی'
    });
  }

  function handleKeydown(event) {
    if (event.key === 'Enter') {
      console.log('کلید Enter فشرده شد');
    }
  }
</script>

<button 
  on:click={handleClick}
  on:keydown={handleKeydown}>
  کلیک کنید
</button>

<!-- در کامپوننت والد -->
<ChildComponent 
  on:customClick={(event) => {
    console.log(event.detail);
  }} 
/>

<script>
  import { writable, readable, derived } from 'svelte/store';

  // store قابل نوشتن
  const count = writable(0);

  // store فقط خواندنی
  const time = readable(new Date(), set => {
    const interval = setInterval(() => {
      set(new Date());
    }, 1000);

    return () => clearInterval(interval);
  });

  // store مشتق شده
  const elapsed = derived(time, $time => {
    return Math.round(($time - new Date(0)) / 1000);
  });
</script>

<button on:click={() => count.update(n => n + 1)}>
  شمارنده: {$count}
</button>

<p>زمان فعلی: {$time.toLocaleTimeString()}</p>
<p>ثانیه‌های سپری شده: {$elapsed}</p>

<script>
  import { fade, fly, slide } from 'svelte/transition';
  import { spring } from 'svelte/motion';

  let visible = true;
  
  const coords = spring({ x: 0, y: 0 }, {
    stiffness: 0.2,
    damping: 0.4
  });

  function handleMousemove(event) {
    coords.set({ x: event.clientX, y: event.clientY });
  }
</script>

<div on:mousemove={handleMousemove}>
  {#if visible}
    <div transition:fade>
      فید این/اوت
    </div>
  {/if}

  <div
    style="transform: translate({$coords.x}px, {$coords.y}px)">
    👆
  </div>
</div>

src/
├── components/
│   ├── common/
│   │   ├── Button.svelte
│   │   └── Input.svelte
│   └── features/
│       ├── UserProfile.svelte
│       └── Settings.svelte
├── stores/
│   ├── auth.js
│   └── theme.js
├── utils/
│   └── helpers.js
└── App.svelte

# ایجاد پروژه جدید
npm create svelte@latest my-app

# نصب وابستگی‌ها
cd my-app
npm install

# اجرای سرور توسعه
npm run dev

<script>
  import { MetaTags } from 'svelte-meta-tags';
</script>

<MetaTags
  title="عنوان صفحه | نام سایت"
  description="توضیحات صفحه برای موتورهای جستجو"
  openGraph={{
    title: 'عنوان Open Graph',
    description: 'توضیحات Open Graph',
    images: [
      {
        url: 'https://example.com/og-image.jpg',
        width: 800,
        height: 600,
        alt: 'توضیح تصویر'
      }
    ]
  }}
/>

# ساخت برنامه
npm run build

# پیش‌نمایش نسخه ساخته شده
npm run preview

# استقرار در Vercel
vercel deploy

import { render, fireEvent } from '@testing-library/svelte';
import Counter from './Counter.svelte';

test('باید مقدار شمارنده را افزایش دهد', async () => {
  const { getByText } = render(Counter);
  const button = getByText('افزایش');
  
  await fireEvent.click(button);
  
  expect(getByText('1')).toBeInTheDocument();
});