Svelte 5 출시 관련 소식

Gaebalgom·2024년 10월 23일

svelte 스벨트

2024년 10월 20일 스벨트 5가 드디어 출시 되었습니다.

Svelte 5 is alive

공식 블로그
스벨트 역사상 가장 큰 변화
🤦🏻기존 스벨트의 문제점
- 컴파일러로만 확인하는 반응성이 시그널에 기반한 fine-grained reactivity 보다 안 좋음
- sloted content 와 이벤트 핸들러를 컴포넌트에 전달되는 prop과 별개로 취급
  - web component 에 맞춘 설계
- $: 은 멋진 트릭이나, 파생 상태(derived state)와 부가 효과(Side effect)를 같이 취급함
  - 컴파일 타임에서 종속성 계산이 복잡해지게 됨.
🆕 스벨트 5의 변경 사항
- Rune: 반응적 상태를 표현. 함수나 객체 같은 게 아니라 값임.
```
let count = $state(0);
```
  - 재사용성이 높음(.svelte.js, svelte.ts, .svelte 파일 사용 가능)
- 이벤트 핸들러는 이제 그냥 prop임.
- slot 메커니즘은 이제 {#snippet} 으로 대체됨.
  - let: 과 <svelte:fragment>도 제거.
⬆️ 업그레이드 하기
- 스벨트 4 코드가 호환되므로, 업그레이드 바로 가능
- 컴포넌트 업데이트
  - VS Code 확장 기능의 'Migrate Component to Svelte 5 Syntax' 사용
  - 자세한 내용은 Svelte 5 migration guide 가이드 참고
  - npx sv migrate svelte-5 로 바로 업데이트 가능
🛠 새로운 CLI 도구, sv 출시
- 발표 비디오

사이트 통합

svelte.dev 아래에 있던 사이트들이 통합되었습니다.
🤦🏻 기존 사이트의 문제점
- 사이트 간 검색 불가
- 사이트 별 네비게이션 차이
- 사이트간 설정 공유 불가
- 외부 링크가 깨져 있을 수 있음.
디자인 업데이트
폰트 업데이트
오픈 소스

Svelte 5 migration guide

4 → 5 공식 가이드
스크립트로 마이그레이션 하기 : npx sv migrate svelte-5
-svelte/legacy 에 있는 함수를 사용하는 식으로 변환되는 경우도 있습니다. (이펙트 및 이벤트 관련)
- createEventDispatcher, beforeUpdate/afterUpdate 은 자동 변황 되지 않습니다.
변경사항에 대한 상세 내용을 알고 싶으면 각 항목의 Why we did this 를 보면 됩니다.
반응성 표현: let → $state

<script>
  let count = $state(0);
</script>

파생상태: $: → $derived

<script>
    let count = $state(0);
    const double = $derived(count * 2);
</script>

부수 효과: $: → $effect()
이제 부수효과는 콜백 함수를 이용합니다.

<script>
let count = $state(0);
$effect(() => {
    if (count > 5) {
        alert('Count is  too high!');
    }
})
</script>

컴포넌트 프로퍼티: export let → $props

<script>
    let { optional = 'unset', required } = $props();
</script>

이벤트 리스터: :을 지우세요.
- 이제 이벤트 리스터는 프로퍼티입니다.

<button onclick={() => count++}>
    clicks: {count}
</button>
<button {onclick}>
    clicks: {count}
</button>

컴포넌트 이벤트: 콜백 함수를 prop으로 넣으세요.

<Pump
    inflate={(power) => {
        // blahblah
    }}
/>
<!-- Pump.svelte -->
<script>
    let { inflate, deflate } = $props();
</script>

<button onclick={() => inflate(power)}>
    inflate
</button>

이벤트 버블링: 요소에 명시적으로 on:click 을 넣는 대신에, 콜백 프롭을 받게 변경되었습니다.

<script>
	let props = $props();
</script>

<button {...props}>
	click me
</button>

이벤트 모디파이어: capture , passive, nonpassive 세 모디파이어가 존재합니다.
다중 이벤트 핸들러: 이제 같은 이벤트에 여러 개의 핸들러를 주지 못합니다. 다음과 같은 형태로 작성하세요.

<button
	onclick={(e) => {
		one(e);
		two(e);
	}}
>
	...
</button>

Snippet: Slot을 대체하기 위한 기능
기본 컨텐트: <slot /> → {@render children?.()}

<script>
	let { children } = $props();
</script>

{@render children?.()}

여러 컨텐트 다루기: named slot → {@render ...}

<script>
	let { header, main } = $props();
</script>

<header>
	{@render header()}
</header>

<main>
	{@render main()}
</main>

데이터 다시 전달하기: let: → 스니펫으로 처리

<script>
	import List from './List.svelte';
</script>

<List items={['one', 'two', 'three']}>
	{#snippet item(text)}
		<span>{text}</span>
	{/snippet}
	{#snippet empty()}
		<span>No items yet</span>
	{/snippet}
</List>

<script>
	let { items, item, empty } = $props();
</script>

{#if items.length}
	<ul>
		{#each items as entry}
			<li>
				<slot item={entry} />
				{@render item(entry)}
			</li>
		{/each}
	</ul>
{:else}
	<slot name="empty" />
	{@render empty?.()}
{/if}

컴포넌트는 더 이상 클래스가 아닙니다. : bind:this 도 이제 클래스를 반환하지 않아요.
서버 API 변경 사항: 이제 App.render() 대신 render(App, ...) 형식입니다.
Component 타입이 도입되었습니다.
(작성중)
-:is() 와 :where() 은 이제 스코프로 적용됩니다.
이 외에도 변경사항이 있습니다.

Introducing the new Svelte CLI

이제 Tailwind, Typescript, prettier, storybook과 같은 기능들을 손쉽게 프로젝트에 애드온으로 추가할 수 있게 되었습니다.
npx sv create 로 인터액티브하게 프로젝트를 구성할 수 있습니다.
npx sv add 로 기존 프로젝트에 애드온을 추가할 수 있습니다.
커뮤니티 애드온에 관한 계획은 Community add-on-support 이슈를 참고해 주세요.