Мой первый реактивный компонент Svelte5
Добро пожаловать в захватывающую эпоху Svelte 5!
После периода интенсивной разработки появилась бета-версия Svelte 5 (следующая) версия, что стало важной вехой для сообщества Svelte.
С 11 ноября у разработчиков появилась возможность изучить передовые функции и улучшения, представленные в этой последней версии.
Важно отметить, что, хотя Svelte 5 доступен для экспериментов, на данном этапе его не рекомендуется использовать в промышленном использовании. Некоторые аспекты, такие как установщик, все еще дорабатываются и дорабатываются. На сегодняшний день, с выходом «очередной» версии, установщик еще недоступен, что подчеркивает непрерывный характер разработки.
Мы рассмотрим, как вы можете начать изучать новые мощные функции, включая обновленный и мощный механизм реагирования при установке Svelte 5 в вашей локальной среде разработки.
Установите скелетный проект Svelte 5
Поскольку сегодня Svelte 5 еще не завершен, мы собираемся установить скелетный проект с текущей версией Svelte 4 (последней), а затем, как только проект будет создан, мы принудительно обновим Svelte 5 (следующий).
npm create svelte@latest myapp
cd myapp
npm installВо время выполнения npm create svelte@latest команда задаст вам несколько вопросов. Пока можно ответить так:
◇ Which Svelte app template?
│ Skeleton project
│
◇ Add type checking with TypeScript?
│ Yes, using JavaScript with JSDoc comments
│
◇ Select additional options (use arrow keys/space bar)
│ noneПосле того, как вы перейдете в новый каталог проекта и установите все пакеты, вам необходимо принудительно переустановить svelte, следующую версию. Сегодня следующее относится к предварительной версии Svelte 5:
npm i svelte@next Если запустить команду npm list, то можно увидеть версию пакета svelte (на данный момент это svelte@5.0.0-next.1):
➜ my-first-svelte5-app npm list
my-first-svelte5-app@0.0.1 /Users/roberto/my-first-svelte5-app
├── @sveltejs/adapter-auto@2.1.1
├── @sveltejs/kit@1.27.5
├── svelte-check@3.6.0
├── svelte@5.0.0-next.1
├── typescript@5.2.2
└── vite@4.5.0Теперь, если вы запустите npm run dev, вы сможете начать использовать новое свежее приложение Svelte 5, которое обычно по умолчанию предоставляется по адресу http://localhost:5173/.
Теперь мы собираемся создать новый компонент с некоторой реактивностью.
Веб-приложение Roll the dice
Я хочу создать простое веб-приложение roll the dice.
Пользователь может нажать кнопку, чтобы сгенерировать случайное число (от 1 до 6) и обновить текст, показывающий результат и список предыдущих бросков.
Этот пример элементарен, но полезен для ознакомления с основными функциями Svelte 5, понимания основных отличий от Svelte4 и рассмотрения нового механизма реактивности Svelte5 с помощью рун.
Итак, теперь давайте перейдем к коду 🚀.
Создание компонента
Я создам компонент roller.svelte в файле src/lib/comComponents/roller.svelte.
Компонент будет содержать две классические части: первую о логике (раздел скрипта), а затем вторую о шаблоне (часть HTML).
Раздел скрипта:
<script>
/** @type {number} */
let dice = $state(0);
/** @type {Array.<number>} */
let rolls = $state([]);
function draw() {
dice = Math.floor(Math.random() * Math.floor(5)) + 1;
rolls[rolls.length] = dice;
}
function reset() {
dice = 0;
rolls = [];
}
</script>Я определил две реактивные переменные с помощью функции $state().
Затем я реализовал две функции, draw() и reset(), которые воздействуют непосредственно на новые переменные dice и Rolls.
В шаблонной части компонента svelte вы можете использовать переменные и вызывать функции:
<section style="padding-top: 50px;">
<button on:click={draw}> Let's draw </button>
<button on:click={reset}> Let's restart </button>
</section>
<section>
<h2 style="text-align: center">
{dice == 0 ? "Let's start rolling" : dice}
</h2>
{#each rolls as t, index}
<p style="text-align: center">
Rolling number {index + 1}, the dice says {t}
</p>
{/each}
</section>Первая кнопка вызывает функцию draw() в событии щелчка.
Вторая кнопка вызывает функцию reset() в событии щелчка.
В шаблоне я могу использовать две переменные diceи rolls, типичным для Svelte способом (с директивой #each для зацикливания массива бросков).
Выделение объявления переменной
Как вы можете видеть выше, единственное, что мне нужно было сделать, это объявить переменные, которые я хотел сделать реактивными, с помощью функции $state():
/** @type {number} */
let dice = $state(0);
/** @type {Array.<number>} */
let rolls = $state([]);Использование нового компонента
В файле src/routes/+page.svelte я могу использовать новый компонент Svelte:
<script>
import Roller from "$lib/components/roller.svelte";
</script>
<main class="container">
<Roller />
</main>Обеспечение стиля
Для этого быстрого примера я использовал библиотеку PicoCSS, поэтому в src/app.html вам нужно включить ее в раздел head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
Вы играете на новом Svelte 5?
Я написал эту небольшую статью, воодушевленный новым объявлением Рича Харриса о Svelte 5 от 11 ноября:
Пожалуйста, не стесняйтесь поделиться своими мыслями в разделе комментариев ниже, если у вас есть какие-либо отзывы. Я ценю ваш вклад и ценю мнение сообщества. Я стараюсь держать эту статью в курсе последних событий в Svelte 5, поэтому ваш вклад будет значительным в обеспечении ее точности и актуальности. Благодарим вас за участие в этом путешествии, и я с нетерпением жду возможности вместе изучить захватывающие достижения, которые Svelte 5 может предложить. Следите за будущими обновлениями!
