Что нового в Svelte: Ноябрь 2021
Более 5000 звезд осветили крутые примеры сообщества
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!