Svelte - 3.x 2023 상반기 업데이트 new feature 하이라이트

필자가 좋아하는 Svelte 가 2023년 상반기에 주요한 업데이트 내용을 정리해 보았다.

현재 5월 기준 아래와 같은 기능 개선이 있었다.

• Improve detection of promises that are also functions (Svelte 3.55.1, #8162)
• Add missing types and properties for the global part attribute and on:submit, respectively (Svelte 3.55.1, #8181)
• Lots of performance and bug fixes (Svelte 3.55.1* and extensions-107.0.x)

2023년 4월에는 대부분 기능 개선의 업데이트만 존재한다.

svelte/elements has been added for Svelte/HTML type definitions (3.55.0, #7649)

svelte/elements 에 HTML의 요소중 element를 가져올 수 있도록 추가하였다.

이는 웹에서 사용자 입력을 받는 항목들에 활용을 svelte/elements 를 지정하여 사용할 수 있다.

{#if selected === 'h1'}

<h1>I'm a h1 tag</h1>

{:else if selected === 'h3'}

<h3>I'm a h3 tag</h3>

{:else if selected === 'p'}

<p>I'm a p tag</p>

{/if}

위 코드를 <svelte:element> 를 사용하면 다음과 같이 변환이 가능하다.

<svelte:element this={selected}>I'm a {selected} tag</svelte:element>

전체 코드는 다음과 같다.

<script>
const options = ['h1', 'h3', 'p'];
let selected = options[0];
</script>

<select bind:value={selected}>
    {#each options as option}
    	<option value={option}>{option}</option>
    {/each}
</select>

<svelte:element this={selected}>I'm a {selected} tag</svelte:element>

The options.direction argument can now be passed to custom transition functions (3.54.0, #3918)

transitions 관련하여,  transition 함수에 direction 을 사용하여 in. out등이 값을 전달 할 수 있도록 수정하였다고 한다.

Variables can now be updated from a @const declared function (3.54.0, #7843)

버그 개선 부분은 @const를 함수로 상태가 무효화 할때 오류가 발생하는 문제를 해결하였다고 한다.