Svelte е проста рамка, която е лесна за използване и последните промени трябва да я направят още по-лесна.

През юни 2023 г. Svelte обяви най-новата си стабилна версия, версия 4. Актуализацията на Svelte 4 е основно версия за поддръжка на Svelte 3, целяща да постави началото на следващото поколение на Svelte, което да бъде пуснато като Svelte 5.

Svelte 4 добавя различни подобрения към екосистемата Svelte, включително редизайн на уебсайт, задаване на локални преходи по подразбиране, подобряване на поддръжката на уеб компоненти и преминаване от TypeScript към JSDoc.

1. Изящен редизайн на сайта

Svelte 4 пристигна заедно с подобрения на официалния Уеб сайт на Velte. Новият облик на сайта е фантастичен, с подобрени TypeScript документи, опция за тъмен режими като цяло подобрено потребителско изживяване на всички устройства.

Сайтът на Svelte вече има подобрен REPL, който ви позволява да експериментирате с кода на Svelte директно в браузъра.

Освен това всички връзки към уроци на Svelte вече сочат към новото изживяване на учащите в Svelte, докато старите уроци са достъпни за потребители на Safari 16.3 и по-стари версии.

instagram viewer

2. Локалните преходи са по подразбиране

Представете си болезненото изживяване да се задоволите с CSS преходи, след като сте гледали как страницата ви се зарежда по-дълго от очакваното, защото сте използвали преходи Svelte.

Обикновено преходът се възпроизвежда, когато унищожите родителски блок. Можете да отмените това поведение с |местен модификатор. Това кара преходът да се изпълнява само когато унищожите блока, съдържащ целевия компонент. В Svelte 4 това |местен модификаторът е зададен по подразбиране за преходи.

Във фрагмента по-долу преходът към слайд е добавен локално към див елемент:

 {вещ}

3. Подобрена поддръжка на уеб компоненти

Svelte винаги е насърчавал възможността за повторна употреба и поддръжка, оттук и непрекъснатата му поддръжка за уеб компоненти. Уеб компонентите ви позволяват да създавате потребителски HTML елементи за многократна употреба с инжектирани стилове и поведение.

Svelte 4 променя начина, по който генерира уеб компоненти, като премахва грешки и несъответствия. Тези промени включват:

  • Експортиране създава проп за компонент, което го прави достъпен за потребителите на компоненти.
  • Заданията са реактивни. За да промените състоянието на компонент и да задействате повторно изобразяване, присвоете го на локално декларирана променлива.
  • Използвай $ символ в началото на изявление, за да го маркирате като реактивно изявление. Реактивните изрази се изпълняват след друг скриптов код и преди рендирането на маркирането на компонента, когато зависимите стойности се променят.
  • Когато създавате обекти на магазин, добавете префикс към магазина с $ за разрешаване на реактивен достъп до стойност.
  • Задаване на контекстния атрибут на маркер на скрипт на модул кара скрипта да се изпълнява веднъж, когато модулът първо оценява, а не за всеки екземпляр на компонент.

4. Преминаването от TypeScript към JSDoc

JSDoc е инструмент за документиране, който поддържа добавяне на пояснения за типове и коментари към JavaScript кодове.

Като се има предвид, че JSDoc заблуждава разработчиците да документират своите кодове, тази миграция има за цел да насърчи повече разработчици на Velte да изградят навика да документират правилно своите кодове. Адекватно документирана кодова база на JavaScrpt би изисквала малко или никаква проверка на типа.

Ако сте нов в TypeScript, трябва изследвайте TypeScript и открийте защо разработчиците го предпочитат.

Мигриране към Svelte 4

Svelte 4 има подобрена производителност и рационализирана разработка, което е отлично за изграждане на високопроизводителни уеб приложения. Тази нова версия също трябва да насърчи по-добра документация на кода с преминаването към JSDoc.

Svelte продължава да се подобрява и въпреки че не е рамка, с която всеки разработчик е запознат, онези, които го правят, го хвалят силно.