// Svelte 4 (기존 방식)
let count = 0;

function increment() {
  count++; // 컴파일러가 변경을 감지하고 업데이트
}

// Svelte 5 Runes
let count = $state(0); // count는 반응형 상태
let user = $state({ name: CodePick, age: 5 }); // 객체도 반응형으로 선언

function increment() {
  count++; // count 값을 직접 변경해도 반응
}

function updateUserName(newName) {
  user.name = newName; // 객체 내부 값 변경에도 반응 (재할당 필요 없음!)
}

// Svelte 4 (기존 방식)
let count = 0;
$: doubled = count * 2; // count가 변경되면 doubled도 다시 계산

// Svelte 5 Runes
let count = $state(0);
let doubled = $derived(count * 2); // count가 변경되면 doubled도 다시 계산

let firstName = $state(Code);
let lastName = $state(Pick);
let fullName = $derived(`${firstName} ${lastName}`); // 여러 상태에 의존 가능

// Svelte 4 (기존 방식)
let count = 0;
$: console.log(Count changed:, count); // 부수 효과로 사용

onMount(() => {
  const handler = () => console.log(Mounted!);
  window.addEventListener(resize, handler);
  return () => window.removeEventListener(resize, handler); // 클린업
});

// Svelte 5 Runes
let count = $state(0);

$effect(() => {
  console.log(Count changed:, count); // count가 변경될 때마다 실행
});

$effect(() => {
  // DOM 조작이나 외부 API 호출 등
  const handler = () => console.log(Window resized!);
  window.addEventListener(resize, handler);

  return () => { // 클린업 함수 반환
    window.removeEventListener(resize, handler);
    console.log(Effect cleaned up);
  };
});

// Svelte 4 (기존 방식)
// MyComponent.svelte
export let name;
export let age = 0; // 기본값

// Svelte 5 Runes
// MyComponent.svelte
let { name, age = 0 } = $props(); // name은 필수, age는 기본값 0

// App.svelte
// <MyComponent name="Alice" age={30} />

# 프로젝트 디렉토리에서
npm install svelte@next svelte-kit@next
# 또는 yarn
yarn add svelte@next svelte-kit@next

// svelte.config.js
import adapter from @sveltejs/adapter-auto;

/** @type {import(@sveltejs/kit).Config} */
const config = {
  compilerOptions: {
    runes: true // 이 부분을 추가하여 Runes 모드 활성화
  },
  kit: {
    adapter: adapter()
  }
};

export default config;

<!-- src/lib/components/Counter.svelte (Svelte 4) -->
<script>
  let count = 0;

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

<button on:click={increment}>
  Count: {count}
</button>

<!-- src/lib/components/Counter.svelte (Svelte 5 Runes) -->
<script>
  let count = $state(0); // $state()로 감싸 반응형으로 선언

  function increment() {
    count++; // 직접 변경해도 반응
  }
</script>

<button on:click={increment}>
  Count: {count}
</button>

<!-- src/lib/components/ProductDisplay.svelte (Svelte 4) -->
<script>
  export let price = 100;
  export let quantity = 1;

  $: totalPrice = price * quantity; // 파생 상태
  $: if (totalPrice > 200) {
    console.log("Discount eligible!");
  }
</script>

<p>Price: ${price}</p>
<p>Quantity: {quantity}</p>
<p>Total: ${totalPrice}</p>

<!-- src/lib/components/ProductDisplay.svelte (Svelte 5 Runes) -->
<script>
  let { price = 100, quantity = 1 } = $props(); // $props()로 props 선언

  let totalPrice = $derived(price * quantity); // $derived()로 파생 상태 선언

  // $: 를 사용한 부수 효과는 $effect()로 전환
  $effect(() => {
    if (totalPrice > 200) {
      console.log("Discount eligible!");
    }
  });
</script>

<p>Price: ${price}</p>
<p>Quantity: {quantity}</p>
<p>Total: ${totalPrice}</p>

<!-- src/lib/components/Timer.svelte (Svelte 4) -->
<script>
  import { onMount, onDestroy } from svelte;

  let seconds = 0;
  let intervalId;

  onMount(() => {
    intervalId = setInterval(() => {
      seconds++;
    }, 1000);
  });

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

<p>Elapsed: {seconds}s</p>

<!-- src/lib/components/Timer.svelte (Svelte 5 Runes) -->
<script>
  let seconds = $state(0);

  $effect(() => {
    // 이펙트는 컴포넌트 마운트 시점에 실행
    const intervalId = setInterval(() => {
      seconds++;
    }, 1000);

    // 클린업 함수를 반환하여 컴포넌트 언마운트 시 또는 이펙트 재실행 시 정리
    return () => {
      clearInterval(intervalId);
    };
  });
</script>

<p>Elapsed: {seconds}s</p>

<!-- src/lib/stores/countStore.js -->
import { writable } from svelte/store;
export const countStore = writable(0);

<!-- src/lib/components/GlobalCounter.svelte (Svelte 5 Runes) -->
<script>
  import { countStore } from $lib/stores/countStore;

  // $state()로 스토어 값을 래핑하여 반응형으로 사용
  // Svelte 5에서는 $storeName 문법이 기본적으로 지원되지 않으므로,
  // 직접 구독하거나, $state로 래핑하는 방식을 사용합니다.
  let currentCount = $state(0);

  $effect(() => {
    const unsubscribe = countStore.subscribe(value => {
      currentCount = value;
    });
    return unsubscribe; // 클린업 함수 반환
  });

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

<p>Global Count: {currentCount}</p>
<button on:click={incrementGlobal}>Increment Global</button>

let user = { name: Alice, age: 30 };
function updateAge() {
  user.age++;
  user = user; // Svelte에 변경을 알리기 위해 재할당
}

let user = $state({ name: Alice, age: 30 });
function updateAge() {
  user.age++; // 직접 변경해도 반응!
}

let items = $state([apple, banana]);
function addItem(item) {
  items.push(item); // push, pop, splice 등 배열 메서드도 직접 사용 가능
}

let userId = $state(1);
let userData = $state(null);
let isLoading = $state(false);

$effect(() => {
  if (!userId) return;

  isLoading = true;
  userData = null; // 이전 데이터 초기화

  const abortController = new AbortController();

  async function fetchUser() {
    try {
      const response = await fetch(`https://api.example.com/users/${userId}`, {
        signal: abortController.signal
      });
      userData = await response.json();
    } catch (error) {
      if (error.name === AbortError) {
        console.log(Fetch aborted);
      } else {
        console.error(Failed to fetch user:, error);
      }
    } finally {
      isLoading = false;
    }
  }

  fetchUser();

  return () => {
    // userId가 변경되거나 컴포넌트가 언마운트될 때 이전 요청 취소
    abortController.abort();
  };
});

// parent.svelte
<script>
  import { setContext } from svelte;
  import Child from ./Child.svelte;

  let theme = $state(dark);
  setContext(theme, theme); // 반응형 값을 컨텍스트로 제공
</script>

<Child />

// child.svelte
<script>
  import { getContext } from svelte;

  let theme = getContext(theme); // 컨텍스트에서 반응형 값 가져오기
</script>

<p>Current theme: {theme}</p>

<!-- src/lib/components/Button.svelte -->
<script>
  let { label = Click Me, ...rest } = $props(); // label prop과 나머지 props
</script>

<button {...rest}>
  {label}
</button>

<!-- App.svelte -->
<script>
  import Button from $lib/components/Button.svelte;

  function handleClick() {
    alert(Button clicked!);
  }
</script>

<Button label="Submit" class="primary" on:click={handleClick} />
<Button title="Info button" />