Краткий обзор фреймворка Svelte29.02.2024 09:30

Привет, Хабр!

Svelte, в его сущности, предлагает нам подход меньше значит больше. Вместо того чтобы полагаться на виртуальный DOM, как большинство фреймворков, Svelte переносит эту работу на этап сборки. Результат? Более чистый и эффективный код, который выполняется непосредственно в браузере. Каждый компонент в Svelte компилируется в самодостаточный JavaScript.

Установка

Svelte требует Node.js версии не ниже 10.

Самый простой способ начать работу с Svelte — использовать оф.шаблон Svelte, который можно склонировать с помощью degit:

npx degit sveltejs/template svelte-app

Команда создаст новую директорию svelte-app с базовой структурой проекта Svelte.

Установим зависимости в директории:

cd svelte-app
npm install

Запуск сервера:

npm run dev

Серв доступен в браузере по адресу http://localhost:5000, все изменения автоматом применяются

Основные файлы проекта находятся в директории src, App.svelte является основным компонентом приложения.

Основной синтаксис

Компонент в Svelte оформляется как отдельный файл с расширением .svelte. Внутри этого файла можно определить разметку, скрипты и стили, которые будут применены к компоненту.

Пример простого компонента Greeting.svelte:

<script>
  export let name = 'world';
</script>



Hello {name}!

Компонент принимает проп name и отображает приветствие. Стили внутри компонента изолированы.

Для использования компонента в другом компоненте или приложении его нужно импортировать и затем разместить в разметке как тег:

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

Компоненты в Svelte могут реагировать на изменения своих пропсов и внутренних переменных, автоматически переписываясь при их изменении:

<script>
  export let count = 0;
</script>

 count += 1}>
  Clicked {count} {count === 1 ? 'time' : 'times'}

Компонент отображает кнопку, которая увеличивает счетчик при каждом клике.

Слоты позволяют компонентам принимать произвольный контент, который может быть определен в момент использования компонента:

Использование компонента Modal с пользовательским содержимым:

  
This is a modal window

Svelte имеет хуки жизненного цикла компонента, такие как onMount, onDestroy, beforeUpdate и afterUpdate, т.е можно выполнять код в определенные моменты жизни компонента:

<script>
  import { onMount } from 'svelte';
  onMount(() => {
    console.log('Компонент был примонтирован');
  });
</script>

Маршрутизация и управление состоянием

SvelteKit использует файловую систему для определения маршрутов. Каждый файл в директории src/routes становится частью маршрутизации приложения. Например, файл src/routes/about.svelte автоматически соответствует маршруту /about:

<script context="module">
  export async function load({ fetch }) {
    const res = await fetch('/api/data');
    const data = await res.json();

    return {
      props: { data }
    };
  }
</script>

<script>
  export let data;
</script>

{data.message}

Функция load юзается для загрузки данных до рендеринга компонента

Управление состоянием обычно достигается с помощью реактивных хранилищ:

<script>
  import { writable } from 'svelte/store';

  const count = writable(0);
</script>


  Clicked {$count} { $count === 1 ? 'time' : 'times' }

Создали реактивное хранилище count, которое изменяется при каждом клике на кнопку.

Реализацию аутентификации и обработки форм на svetle предоставляет интеграцию на стороне сервера и клиента:

<script>
  let email = '';
  let password = '';

  async function handleSubmit() {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    });

    if (response.ok) {
      // oбработка успешного входа
    } else {
      // oбработка ошибок
    }
  }
</script>


  
  
  Login

При отправке формы выполняется функция handleSubmit, которая отправляет данные на сервер для аутентификации пользователя.

Логические блоки

Блок if позволяет отображать части интерфейса в зависимости от выполнения определенного условия:

<script>
  let loggedIn = true;
</script>

{#if loggedIn}
  
Welcome back!
{:else}
  
Please log in.
{/if}

Текст »Welcome back! » будет отображаться, если loggedIn истина; иначе, будет отображаться »Please log in.».

Блок each используется для итерации по массивам или объектам и отображения элементов списка:

<script>
  let cats = ['Whiskers', 'Bob', 'Tom'];
</script>


  {#each cats as cat}
    
{cat}
  {/each}

Для каждого элемента массива cats создается элемент списка

<script>
  async function fetchData() {
    const res = await fetch('https://api.example.com/data');
    return res.json();
  }

  let promise = fetchData();
</script>

{#await promise}
  
Loading...
{:then data}
  
{data.message}
{:catch error}
  
Error: {error.message}
{/await}

<script>
  let user = { id: 1, name: 'cat' };
</script>

{#key user.id}
  
{user.name}
{/key}

<script>
  export let depth = 1;
</script>

{#if depth > 0}
  
{/if}

<script>
  import ComponentA from './ComponentA.svelte';
  import ComponentB from './ComponentB.svelte';
  let whichComponent = Math.random() > 0.5 ? ComponentA : ComponentB;
</script>