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

Самый любимый веб-фреймворк на StackOverflow

Daniel Sandoval 1 Сентября 2021

В этом месяце Svelte стал самым любимым веб-фреймворком на StackOverflow, Тан Ли Хау разговорился на Svelte Radio о своем Svelte-filled YouTube-канале, а SvelteKit добился еще большего прогресса к выпуску версии 1.0!

Новое в Svelte

• use:actions теперь может использоваться на <svelte:body> (3.42.0)
• HTMLElement, SVGElement (3.42.2) и BigInt (3.42.3) теперь известны как глобальные переменные
• В выходных данных Svelte меньше кода благодаря следующим улучшениям в 3.42.2:
  • Пробелы теперь сворачиваются в атрибутах класса и стиля
  • Гидратированные компоненты были обновлены, чтобы полагаться только на хелперы для создания типов элементов, присутствующих в компоненте
• Масштабирование теперь учитывается в анимации flip (3.42.2)
• Все <option> в <select> теперь отменяются, когда связанное значение не соответствует ни одному из них (3.42.2)

Полный список функций и исправлений ошибок см. в Svelte changelog.

Обновления в SvelteKit

Мантейнеры Svelte ищут помощь в доведении SvelteKit до 1.0. Мы закрыли более 100 вопросов, которые были на этапе 1.0. Осталось всего пару десятков, и мы хотели бы, чтобы этот список был немного короче!

Если вы хотите помочь, пожалуйста, рассмотрите возможность работы по любому из 1.0 milestone issues.

В прошлом месяце основное внимание уделялось шлифовке кода, это позволило принять более 100 пул-реквестов. Также появились несколько новых функций...

• SvelteKit теперь определит, пытается ли предварительно отрендеренное приложение получить доступ к параметру запроса и вернуть ошибку вместо молчаливого сбоя. (#2104)
• adapter-node теперь позволяет добавить мидлвары Kitа на свой собственный сервер для использования с другими мидлварами. Вы также можете добавить мидлвары в режиме разработки с дополнительными улучшениями в этой области
• Новый хелпер sequence позволяет объединить несколько вызовов handle
• Новый хук handleError дает вам возможность отправить данные в службу отслеживания ошибок или настроить форматирование перед печатью ошибки в консоли.
• adapter-node теперь может слушать по пути сокета (#2048)

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

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

Apps & Sites

• macos-web от @puruvjdev был переписан c улучшениями с React на Svelte.Проверьте все детали в этом Twitter thread
• Brave Search использует Svelte
• exatorrent селф-хостед, простой в использовании, легкий и современный торрент-клиент написанный на Go и Svelte
• json2TsTypes это простой инструмент, который преобразует ваш JSON в Typescript Types/Interfaces
• Histogram.dev генерирует гистограммы для каждой функции в CSV
• cybernetic.dev коллекция ориентированных на данные UI экспериментов сделанных в процессе изучения Svelte
• LunaNotes раширение Chrome помогающее собирать заметки с YouTube video
• theia.games's встроенный редактор 3D-среды позволяет создать VR World с меню, построенным на Svelte
• Ferrum музыкальная библиотека и плеер для Mac, Windows или Linux
• Fluid Earth это интерактивное приложение WebGL для визуализации атмосферы Земли и океанов

Ищете проект Svelte для работы? Заинтересованы в помощи сделать Свелте в Интернете лучше? Посмотрите список открытых issues если вы хотели бы внести свой вклад в сообщество Svelte, и помочь переписать на Sveltekit.

Educational Content

• Tauri with Standard Svelte or SvelteKit как настроить SVELTE с Tauri, для разработки кроссплатформенных гибридных настольных приложений
• Svelte - Web App Development Reimagined [An Intro to Svelte] это великое вступление от GOTO Conferences
• LevelUpTuts - Even More 5 Things I Like More In Svelte Than React Подчеркивает подход Svelte к рефам(они не нужны), метатегам и многому другому
• State Management in Svelte Applications учебное пособие о том, как использовать сторы для управления состоянием в приложениях Svelte
• Migrating from Sapper to SvelteKit Это обзор и ретроспектива миграции ShipBit с Sapper

Libraries, Tools & Components

• svelte-stripe-js все, что вам нужно, чтобы добавить Stripe в ваш проект Svelte. 100% совместимость со SvelteKit
• svelte-steps настраиваемый компонент шагов, написанный на Svelte
• simple-optics-module онлайн-инструмент с открытым исходным кодом для экспериментов и обучения геометрической оптике
• inlang инструмент интернационализации (i18n) для приложений SvelteKit
• Sveno траняпилятор React компонентов в Svelte
• svelte-useactions полностью типизированная библиотека для actions в компонентах
• Svelte-Element-Query 322b library/action имитирующая container-query
• svelte-meta-tags плагин, который облегчает управление SEO в проектах Svelte
• svelte-domtree позволяет визуализировать DOM - похож на дерево DOM в Chrome devtools
• Diffx, независимый от фреймворков стейт-менеджер, добавил поддержку Svelte
• svelte-ionic-starter шаблон приложения iOS/Android - Svelte + Ionic + CapacitorJS с live reload
• demo-sveltekit-sanity стартер SvelteKit и Sanity(open source React CMS)

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

Увидимся в следующем месяце!

Хотите больше обновлений? Присоединяйтесь к нам на Reddit или в Discord!