본문 바로가기
개발

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

by 개발곰 2024. 10. 23.

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

  • 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() 은 이제 스코프로 적용됩니다.
  • 이 외에도 변경사항이 있습니다.

sv, 새로운 스벨트 CLI 툴

문서화 되어있지 않은 변경사항

버그 및 호환성

  • 초기 버전이라 버그 및 업데이트 많습니다.

사용 불가능한 라이브러리

사파리 버그

  • 리차드 해리스의 트위터에 따르면 현재 사파리에서만 발생하는 버그를 해결 중이라 합니다.
  • (작성 중)

Hackernews 반응

그외 읽어볼만한 자료

사담

스벨트 봄은 온다.