Что нового в Svelte: Май 2021
Работаем над SvelteKit 1.0 и клёвыми примерами сайтов на нём!
На прошлой неделе 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
- Amazing macOS Dock animation in Svelte — демонстрирует, как хорошо смотрятся Svelte и popmotion вместе
- Solving the Tower of Hanoi with recursive Svelte templates — включает элемент
<svelte:self>
в общую задачу информатики - DIY SvelteKit CDK adapter — объединяет SvelteKit и AWS CDK
- Fireship's Svelte in 100 Seconds — это быстрое и легкое введение в основные концепции Svelte
- Tech Downtime — в этом плейлисте погружение в SvelteKit - от начала работы до отладки.
- последние обновления видео lihautan в Svelte 101 и Svelte Store плейлисты охватывают слоты, сторы и контекст - и когда их использовать
- DavidParkerW — изучение Svelte, Sapper и SvelteKit в некоторых реальных сценариях, например отображение списка сообщений в блоге из API
Увидимся в следующем месяце!
Есть, что показать? Присоединяйтесь к нам в Svelte Society, Reddit и Discord!