Skip to main content

Что нового в Svelte: Май 2021

Работаем над SvelteKit 1.0 и клёвыми примерами сайтов на нём!

Daniel Sandoval

На прошлой неделе Svelte Summit поразил нас горой контента! Просмотрите полную запись или аудиообзор на Svelte Radio. А теперь перейдем к новостям этого месяца...

Новые возможности компилятора Svelte

  • :global() теперь поддерживается как часть составных селекторов CSS (3.38.0, Пример)
  • Пользовательские свойства CSS теперь можно передавать компонентам для таких случаев использования, как темизация (3.38.0, Документы скоро появятся)

Новое в SvelteKit

  • kit.svelte.dev выглядит по-новому, а Демо-сайт SvelteKit получил свежий набор иллюстраций и красок. Проверьте это, запустив npm init svelte@next
  • Теперь вы можете использовать @sveltejs/adapter-static для создания одностраничного приложения или SPA, указав резервную страницу (PR, Документы)
  • Отключить рендеринг на стороне сервера (SSR) для всего приложения или постранично (PR, Документы)
  • Сообщения об ошибках, выдаваемые во время предварительного рендеринга, теперь гораздо более информативны и читабельны (PR, Документы)
  • Макеты теперь можно сбрасывать, чтобы страницы не наследовали корневой макет. Это полезно, если у вас есть конкретный макет для страницы или вариант i18n (PR, Документы)
  • fetch в коде SvelteKit теперь будет использовать реализацию, предоставленную окружением, когда это возможно. Если fetch недоступен, он будет заполифиллен адаптерами (PR, Документы)

Новое в Svelte & Language Tools

  • svelte-preprocess теперь поддерживает поле "extends" файла tsconfig.json (4.7.2)
  • Атрибуты HTML style теперь имеют ховер и автозаполнение. Внешние пространства имен и конфигурации ESM теперь поддерживаются в языковом сервере и расширениях Svelte.
  • Языковые инструменты Svelte теперь могут определять типы слотов/событий из своих свойств, если между ними была определена общая связь.

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

Apps & Sites

  • gitpod.io — недавно переписал свой сайт с помощью SvelteKit
  • highlight eel — это веб-редактор, позволяющий отмечать ваши любимые части любого видео YouTube, чтобы вырезать их и поделиться с кем угодно
  • The Far Star Mission — интерактивная аудиокнига, дополняющая альбом The Far Star by Apotheus.
  • JavaScript quiz — небольшая викторина, которая сохраняет ваши ответы локально
  • ExtensionPay — позволяет разработчикам принимать безопасные платежи в расширениях браузера без бэкенд-сервера.
  • mk48.io — военно-морская игра, созданная с помощью SvelteKit 👍🏻
  • Frog Safety - это руководство по африканским карликовым лягушкам и основной набор API для пресноводных животных.
  • Stardew Valley Character Preview — загружает атрибуты вашего персонажа из файла сохранения Stardew Valley и позволяет вам поиграть с различными нарядами, цветами и аксессуарами.

Demos, Libraries, Tools & Components

  • svelte-parallax — компонент параллакса с применением Svelte технологии spring
  • @svelte-plugins/viewable — простой подход к отслеживанию видимости элементов, основанный на правилах.
  • Sveltekit-JUI — набор компонентов пользовательского интерфейса для Svelte и Svelte Kit.
  • EZGesture — упрощает добавление функций жестов с помощью простых собственных событий DOM

Хотите поделиться своим компонентом? Отправьте Компонент на сайт Svelte Society, сделав PR.

Starters

  • How to use Vercel Analytics with SvelteKit — учит, как отслеживать Web Vitals на устройствах ваших пользователей.
  • Asp.NETCore + Svelte + Vite — связывает три фреймворка с SpaCliMiddleware (VS2019)
  • Add CoffeeScript to Svelte — экспериментальная команда для добавления CoffeeScript в ваш проект SvelteKit или приложение Svelte на базе Vite.
  • Adds Supabase to Svelte — экспериментальная команда для добавления Supabase в ваш проект SvelteKit
  • svelte-babylon — позволяет использовать BabylonJS как A-Frame через реактивные компоненты Svelte

Ищете конкретный стартер? Посмотрите svelte-adders и ряд других примеров шаблонов на сайте сообщества sveltesociety.dev

Learning Resources

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

Есть, что показать? Присоединяйтесь к нам в Svelte Society, Reddit и Discord!