Имейте в виду, что это не исчерпывающий список.
Основные понятия
Svelte — это феноменальный компилятор JavaScript, который создает молниеносные и высокоинтерактивные приложения.
Реактивность
Она измеряет, как DOM синхронизируется с обновлениями текущего состояния. Большинство Javascript-фреймворков, таких как React, добавляют для этого промежуточный слой. В React это виртуальный DOM. В Svelte это время сборки.
Выглядит знакомо?
Svelte довольно близок к чистому HTML, CSS и Js. Однако он добавляет несколько расширений для экономии времени и создания ультра-оптимизированного пакета ванильного JavaScript.
Файлы .svelte
Компоненты — это файлы .svelte
, которые используют супермножество HTML.
Типичная структура
project
│
├── .gitignore
├── node_modules/
├── src/
│ ├── App.svelte
│ └── main.js
│
├── scripts/
│ └── special-script.js (optional)
│
├── public/
│ ├── global-styles.css
│ ├── index.html
│ └── favicon.png
│
├── LICENSE
├── README.md
├── rollup.config.js
└── package.json
Без виртуального DOM
Виртуальный DOM — это чистые накладные расходы для любителей Svelte, но я не думаю, что вам стоит концентрироваться на этом моменте. Наоборот, самое интересное, что вы можете получить ту же модель и возможности, которые предоставляет React и другие фреймворки, без алгоритма diff и его ограничений.
Источник: виртуальный DOM — это чистые накладные расходы
Компиляция Svelte
Прочитайте руководство по компиляции
(довольно трудно найти лучшее объяснение!)
Стили Svelte
Скопированные стили
Пусть вас не смущает типичная структура. Хотя вы можете иметь глобальные стили, каждый компонент имеет свои собственные автоматически масштабируемые стили:
// section.svelte
<style>
section {
background-color: limegreen;
color: black;
}
</style>
<section>
<slot/>
</section>
Svelte автоматически генерирует классы, например, svelte-1kxxubc
, который является хэшем стилей ваших компонентов.
Пользовательские классы CSS
// paragraph.svelte
<style>
.para {
background-color: limegreen;
color: black;
}
.graph {
letter-spacing: -.1em;
}
</style>
<p class:para class:graph>
<slot/>
</p>
Динамический CSS
<script>
export let color = "fuschia";
</script>
<style>
p {
color: {color}
}
</style>
<p>I'm a FBI agent</p>
Переменные
Основы
<script>
export let a = 'a';
</script>
<p>It's {a}</p>
Деструктуризация
$:
(метка доллара) — это магия Svelte для того, чтобы заставить вещи реагировать автоматически:
<script>
export let article;
$: ({ title, excerpt, url } = article);
</script>
<article>
<h2><a href="{url}">{title}</a></h2>
<p>{excerpt}</p>
</article>
Импортировать
<script>
import z from 'external';
</script>
<p>It's {z}</p>
Петля, петля, петля…
<script>
export let items = [
'item1',
'item2',
'item3',
];
</script>
<ol>
{#each items as item}
<li>{item}</li>
{/each}
</ol>
Деструктуризация и цикл
<script>
export let articles;
</script>
{#each articles as {title, url, excerpt }}
<article>
<h2><a href="{url}">{title}</a></h2>
<p>{excerpt}</p>
</article>
{/each}
Условия
{#if CONDITION1}
<p>case 1</p>
{:else if CONDITION2}
<p>case 2</p>
{:else}
<p>everything else</p>
{/if}
События
Вы можете использовать on:EVENT
, например, on:click
или on:mouseup
.
<script>
let count = 1;
const increment = () => {
count += 1
}
</script>
<p>counter: {count}
<button on:click={increment}>Increment</button>
Жизненный цикл onmount
После первого рендеринга:
<script>
import { onMount } from 'svelte';
let data = [];
onMount(async () => {
const res = await fetch(`https://myapi.com/endpoint`);
data = await res.json();
});
</script>
Диспетчер
Диспетчер предназначен для пользовательских событий (не таких как классические события DOM). Svelte предоставляет для этого createEventDispatcher
:
// Button.svelte
<button on:click={fireStarter}>
Custom click event
</button>
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
export let fireStarter = () => dispatch("fireStarter");
</script>
<script>
import Button from './Button.svelte';
</script>
<Button on:fireStarter={() => console.log('fire starter')} />
Передача реквизитов
// ChildComponent.svelte
<script>
export let text = "no one" // default value
</script>
<h1>Cotton-eyed {text}</h1>
// App.svelte
<script>
import ChildComponent from './ChildComponent.svelte'
</script>
<ChildComponent text="joe" /> // <h1>Cotton-eyed joe</h1>
Привязка
Svelte позволяет прикреплять обработчики событий к элементам с очень удобным и читаемым синтаксисом.
bind:value
<script>
let guy = "cotton-eyed joe"
</script>
<input bind:value={guy}>
<p>Where did you come from? Where did you go? {guy}</p>
bind:checked
<script>
let show = false;
</script>
<label>
<input type="checkbox" bind:checked="{show}" />
Show
</label>
{#if show}
Hello
{:else}
Bye
{/if}
bind:group
Практическое использование — для радиовходов
bind:this
<script>
import { onMount } from 'svelte';
let canvasElement;
onMount(() => {
const ctx = canvasElement.getContext('2d');
drawStuff(ctx);
});
</script>
Хранилища
Хранилища помогают передавать данные между компонентами, когда в иерархии компонентов нет только отношений «родитель-ребенок».
Вы можете прочитать это Введение.
Переходы
Svelte обрабатывает переходы естественным образом. Вы даже можете передавать параметры.
Слоты
Элементы slot
позволяют вложить один или несколько компонентов друг в друга. Вы также можете передавать данные от дочерних компонентов к родительскому.
<script>
import Article from "./Article.svelte";
</script>
<Article>
<span slot="title">Title1</span>
<span slot="excerpt">excerpt1</span>
</Article>
// Article.svelte
<article>
<h2>
<slot name="title">
<span class="error">No title</span>
</slot>
</h2>
<slot name="excerpt">
<span class="error">No excerpt</span>
</slot>
</article>
Отладка
Для проверки значения лучше всего использовать {@debug VAR}
:
{@debug post}
<h1>{post.title}</h1>
Это проверит переменную и приостановит выполнение.
Продуманные фреймворки
Существуют полезные ресурсы, облегчающие разработку:
Sveltekit
npm init svelte@next my-app
cd my-app
npm install
npm run dev -- --open
Источник: kit.svelte.dev
Plenti
Что такое Plenti?