[업데이트 중]Svelte 5 출시 관련 소식

티스토리 서식 에러 때문에 벨로그 에서 보시는 걸 강력히 추천드립니다.

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

• 읽어볼만한 마테리얼을 모아보고 간단히 요약하려고 합니다. 이 요약은 11월 20일까지 하루에 한번 정도 업데이트가 될 예정입니다.

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

• 읽어볼만한 마테리얼을 모아보고 간단히 요약하려고 합니다. 이 요약은 11월 20일까지 하루에 한번 정도 업데이트가 될 예정입니다.

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

- 이벤트 모디파이어: `capture` , `passive`, `nonpassive` 세 모디파이어가 존재합니다.
- 다중 이벤트 핸들러: 이제 같은 이벤트에 여러 개의 핸들러를 주지 못합니다. 다음과 같은 형태로 작성하세요.
```jsx
<button
    onclick={(e) => {
        one(e);
        two(e);
    }}
>
    ...
</button>

• Snippet: Slot을 대체하기 위한 기능

• 기본 컨텐트: <slot /> → {@render children?.()}

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

{@render children?.()}

- 여러 컨텐트 다루기: named slot → `{@render ...}`
```jsx
<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

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

버그 및 호환성

• 초기 버전이라 버그 및 업데이트 많습니다. 매일 업데이트가 되고 있다 싶이 하니 계속해서 확인하는 것이 좋겠습니다.

사용 불가능한 라이브러리

• 해당 이슈에 호환이 안되는 라이브러리 소식시 정리되어 있습니다.

그외 읽어볼만한 자료

• 세분화된 반응성: fine-grained reactivty에 대한 설명입니다.

사담

스벨트 봄은 온다.