Что нового в Svelte: Ноябрь 2021

Более 5000 звезд осветили крутые примеры сообщества

Daniel Sandoval 1 Ноября 2021

SvelteKit пересекает 80% отметку готовности, набирает более 5000 звезд на GitHub, и уже используется больше, чем Sapper, похоже самое время, чтобы попробовать его! В сообществе появилось много крутых примеров в этом месяце.....

20 ноября не пропустите 👀 SVELTE Summit - с участием докладчиков со всего мира!

Теперь о новшествах!

Новое в Svelte и SvelteKit

Svelte.dev теперь работает на SvelteKit вместе с sveltesociety.dev. svelte.dev - относительно сложный сайт с редактированием кода в реальном времени, аутентификацией и блогом на основе md файлов – отличный тест для SvelteKit
Новая опция компилятора, enableSourcemap, обеспечивает больший контроль над выводом компилятора для исходных карт JS и CSS (3.44.0). С помощью этой новой функции SvelteKit и плагин Vite Svelte теперь могут правильно обрабатывать переменные среды в шаблонах .svelte (см. sveltejs/kit#720 и sveltejs/vite-plugin-svelte#201)
Инструменты языка Svelte теперь поддерживают чтение конфигурации настроек CSS в VS Code (#1219)
vite-plugin-svelte добавил новую опцию experimental.prebundleSvelteLibraries, которая значительно ускоряет загрузку библиотек Svelte со многими компонентами, такими как библиотеки иконок и фреймворки пользовательского интерфейса. Опция может быть установлена в корне svelte.config.js. Пожалуйста, проверьте это и дайте нам обратную связь!
SvelteKit будет маршрутизировать эндпоинты только на клиенте, если не помечено как rel="external" – уменьшит размер клиентского JS и упростит рефакторинг маршрутизатора в будущем (2656)
SvelteKit больше не поддерживает node12 (2604)
SvelteKit был обновлен с Vite 2.6.0 до Vite 2.6.12, устранена проблема, из-за которой Vite мог повредить среду выполнения Svelte (https://github.com/vitejs/vite/issues/4306). Он также включает два исправления от команды SvelteKit, чтобы избежать или упростить диагностику проблем Vite в шаблонах SvelteKit (https://github.com/vitejs/vite/pull/5192 и https://github.com/vitejs/vite/pull / 5193). Vite 2.7 в настоящее время доступен в бета-версии с дополнительными исправлениями для SSR

Чтобы увидеть все обновления для Svelte и SvelteKit, проверьте Svelte и Sveltekit ChangeLog, соответственно.

Крутые примеры сообщества

Apps & Sites

Tangent - чистое и мощное приложение для заметок для Mac и Windows.
The Pudding - цифровая публикация, которая объясняет идеи, обсуждаемые в культуре, с помощью визуальных эссе. Перестроено в SvelteKit.
Power Switcher - интерактивный обзор развития электроснабжения в Швейцарии по мере перехода источников энергии к более чистым.
Sublive - новый способ создания музыки, объединяющий музыкантов со всего мира с помощью высококачественной аудиосети с низкой задержкой.
Vibify - поможет вам найти скрытые плейлисты в вашей музыке, используя историю прослушивания Spotify.
Обзор Marvel Unlimited по годам - сайт SvelteKit, на котором можно узнать, какие выпуски доступны на Marvel Unlimited за данный год.
Files - современный файловый менеджер для Windows, имеет новый сайт, перестроенный с помощью SvelteKit.
lil-hash - простой инструмент сокращения URL-адресов, который создает легко-запоминаемые сокращенные URL-адреса.
PWA Haven - набор небольших, быстрых и простых PWA для замены собственных приложений ОС.
DottoBit - многоцветная 16-битная программа для рисования со встроенным URL-адресом
Бывший Fast Document for Print - генератор счетов с красивым дизайном, возможностью работы с международными языками и автоматическим расчетом.
Helvetikon - словарь швейцарского немецкого языка, поддерживаемый сообществом.
Приложение Palitra - генератор цветовой палитры на основе поиска.

Podcasts Featuring Svelte

Svelte Radio погружается в технологию, лежащую в основе недавно выпущенного веб-сайта Svelte Summit и еще нескольких других забавных вещей!
PodRocket, подкаст LogRocket, беседует о Svelte с Ричем Харрисом.
PodRocket также углубился в Elder.js с Ником Ризом
Web Rush и Рич Харрис рассказывают о различиях между SPA и MPA, какую роль играет серверный рендеринг, какая гидратация на стороне клиента и состояние современных инструментов для разработки SPA или MPA.
devtools.fm беседует с Ричем Харрисом о разработке привлекательных визуализаций данных и создании инструментов завтрашнего дня.

Educational Content

Have Single-Page Apps Ruined the Web? Рич Харрис отвечает на спорный вопрос на конференции Jamstack Conf в этом году
Svelte vs SvelteKit - What's The Difference? LevelUpTuts предоставляет краткое руководство, объясняющее взаимосвязь между двумя проектами. Вы можете ознакомиться с остальными руководствами Скотта Толински по Svelte в его новой серии, "Weekly Svelte"
WebJeda's SvelteKit Hooks - в этом месяце серия продолжается частью 3 - Аутентификация сеанса файлов cookie.
Writing Context Aware Styles in a Svelte App - руководство по написанию автономных компонентов, которые могут динамически адаптироваться к их родителю
A Beginner’s Guide to SvelteKit дает удобный для новичков взгляд на Svelte и SvelteKit и создает простое веб-приложение, показывающее профиль. страницы воображаемых пользователей
Svelte vs React: Ending the Debate - исторический взгляд на многовековой аргумент.
Svelte Snacks | Custom Events for Modal Actions проходит через надежную реализацию удобной системы настраиваемых событий Svelte.
What Svelte's accessibility warnings won't tell you объясняет, как работают предупреждения Svelte, и почему вы не должны рассчитывать на них, чтобы сделать ваше приложение доступным.

Libraries, Tools & Components

svelte-adapter-azure-swa - адаптер для приложений Svelte, который создает статическое веб-приложение Azure с использованием функции Azure для динамического сервера. рендеринг
Inlang - набор инструментов для локализации и интернационализации, который теперь поддерживает SvelteKit.
svelte-translate-tools - извлечение/создание/компиляция файлов перевода для вашего приложения Svelte во время сборки
@egjs/svelte-infinitegrid - позволяет реализовать различные сетки, состоящие из разных элементов карты, размеры которых различаются
svelte-reactive-css-preprocess - упрощает обновление значений переменных css при изменении состояния вашего компонента.
Sveltegen - интерфейс командной строки для простого и легкого создания действий, компонентов и маршрутов.
svelte-advanced-multistep-form - помогает обернуть элементы формы, передавая стили к компоненту для визуализации, а также представляет каждый шаг формы упорядоченным и стильным образом
gQuery - сборщик и кэш GraphQL для SvelteKit
date-picker-svelte - средство выбора даты и времени для Svelte.
TwelveUI - библиотека компонентов Svelte со встроенными функциями специальных возможностей.
svelte-outclick - компонент Svelte, который позволяет вам отслеживать клики вне элемента, предоставляя вам событие outclick.
svelte-zero-api - позволяет использовать API-интерфейсы SvelteKit как клиентские функции - с поддержкой Typescript
svelte-recaptcha-v2 - реализация Google reCAPTCHA v2 для статических сайтов Svelte SPA, SSR и sveltekit.
Svelte Body - позволяет применять стили к body в маршрутах - разработан для работы с SvelteKit и Routify.
svelte-debug-console - реализация debug.js для статических сайтов Svelte SPA, SSR и sveltekit, которая позволяет просматривать операторы отладки в браузере. .
SVEO - свободный от зависимостей подход к объявлению метаданных на страницах SvelteKit.
@svelte-drama/Suspense - компонент Svelte, который реализует основную идею React <Suspense>. Также ознакомьтесь с SWR для Svelte, чтобы упростить повторное получение.
sveltekit-adapter-browser-extension - это адаптер для SvelteKit, который превращает ваше приложение в кроссплатформенное расширение браузера.

Проверьте сайт сообщества sveltesociety.dev для получения дополнительных шаблонов, дополнений и адаптеров со всей экосистемы Svelte.

Ищете больше Svelte-добра? Присоединяйтесь к нам на Reddit или Discord!