Skip to main content

Что нового в 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!