Что нового в Svelte: Март 2021
Приглашаем спикеров Svelte Summit! Улучшенный SSR, цели компиляции, отличные от HTML5, и поддержка ESLint TypeScript.
В этом месяце есть что рассказать о выпусках по всей экосистеме Svelte. Самое главное, что у Svelte Summit Spring 2021 есть Open Call for Speakers. Крайний срок - 14 марта, так что если у вас есть идея для выступления, отправьте ее сейчас!
Погрузимся в новости 🐬
Что нового в sveltejs/svelte
- Обработка хранилища SSR была переработана для подписки и отказа от подписки, в режиме DOM. SSR-сторы теперь должны работать намного более стабильно (3.31.2, see custom stores and Server-side component API )
- Теперь для элемента разрешено несколько экземпляров одного и того же действия (3.32.0, example)
- Новое
foreign
пространство имен должно упростить использование альтернативных целей компиляции (таких как Svelte Native и SvelteGUI) за счет отключения определенного специфичного для HTML5 поведения и проверок. (3.32.0, more info) - Поддержка встроенных исходных карт комментариев в коде препроцессоров (3.32.0)
- Деструктурированные значения по умолчанию теперь могут ссылаться на другие переменные (3.33.0, example)
- Пользовательские элементы теперь будут вызывать функции
onMount
при подключении и очищать при отключении. this PR для интересного разговора о том, как люди используют Svelte с веб-компонентами) - Параметр
cssHash
был добавлен в параметры компилятора для управления именем класса, используемым для области видимости CSS. (3.34.0, docs) - Постоянное улучшение определений TypeScript
Полный список изменений, включая исправления ошибок и ссылки на PR, см. в CHANGELOG
Новинки от sveltejs/language-tools
- Для клиентов языковых серверов, которые не поддерживают
didChangeWatchedFiles
, вместо этого будет использоваться средство отслеживания резервных файлов. - Новые правила выделения для аксессоров хранилища и директив элементов (например,
bind:
иclass :
) - HTML-теги теперь можно переименовывать вместе
- Синтаксический анализ тегов Mustache tags стал более надежным и обеспечит лучший интеллект в большем количестве ситуаций.
Еще не пробовали языковые инструменты? Проверьте Svelte Extension for VSCode или найдите плагин для своей любимой IDE!
Другие изменения от sveltejs/*
- eslint-plugin-svelte3 теперь поддерживает TypeScript с версии 3.1.0
- prettier-plugin-svelte выпустил ряд второстепенных версий для устранения проблем с обрезкой пробелов и комментариев.
- svelte-preprocess bug fixes this month include fixes to postcss transformations and support for both v2 and v3 of
postcss-load-config
- sapper's В выпуске 0.29.1 исправлены некоторые неправильные импорты в определениях типов, обновлены типизации для совместимости с экспресс / полькой и восстановлено хеширование всех имен файлов CSS.
Community Showcase
Apps & Sites
- Tracking the Coronavirus от NYTimes - это пример SvelteKit в производстве
- Budibase платформа с открытым исходным кодом и низким уровнем кода, помогающая разработчикам и ИТ-специалистам создавать, автоматизировать и поставлять внутренние инструменты в 50 раз быстрее в своей собственной инфраструктуре
- Track the Parcel универсальный инструмент для отслеживания статуса посылки со всеми основными отправителями посылок.
- Memo замена электронной почты, которая использует Svelte для современного обмена сообщениями.
- Userscripts Safari редактор пользовательских скриптов с открытым исходным кодом для Safari ... нативное приложение Svelte для Mac OS!
- SVGX "настольный SVG-менеджер ресурсов, которого хотели бы видеть дизайнеры и разработчики".
- Armoria генератор и редактор процедурной геральдики
- FictionBoard представляет собой платформу виртуальной столешницы (VTT), которая только что выпустила заполняемые и отзывчивые листы персонажей
- Castles & Crusades Treasure Generator генератор сокровищ для настольной ролевой игры: Castles and Crusades.
- NESBit Studio набор инструментов, помогающий разрабатывать самодельные игры для NES.
- ElectroBlocks онлайн-среда разработки Arduino со встроенным симулятором (только для Chrome)
- Goblin.life конструктор трехмерного мира, пользовательский интерфейс которого построен с помощью Svelte.
- farmbox служба доставки продуктов в ОАЭ
- heroeswearmasks.fun инструмент машинного обучения на стороне клиента, который определяет, носите ли вы маску или нет.
- weatherify очень красивое (и open source) погодное приложение
- DSN Live позволяет отслеживать связи между NASA / JPL и миссиями межпланетных космических кораблей в режиме реального времени.
Demos, Libraries, Tools & Components
- spc компонент выбора специальных символов для Интернета
- svelte-injector позволяет внедрять компоненты Svelte в React, Angular, Vue, jQuery, Vanilla JS.
- Felte библиотека форм для Svelte с простой проверкой отчетов.
- svelte-use-form s, которая «проста в использовании и не имеет шаблонов».
- Formula предоставляет «Реактивные формы с нулевой конфигурацией для Svelte».
- Houdini «исчезающий клиент GraphQL, созданный для Sapper и Sveltekit»
- svelte-split-pane перетаскиваемый компонент с разделенной панелью
- svelte-virtualized-auto-sizer компонент высшего порядка, который автоматически регулирует ширину и высоту одного дочернего элемента.
- svelte-window компоненты для эффективной визуализации больших прокручиваемых списков и табличных данных.
- Svelte Persistent store стор Svelte, который сохраняет свои значения через страницы и перезагружает
- Svelte Dark тема VSCode, вдохновленная REPL svelte.dev
- Import Cost был обновлен, чтобы поддерживать библиотеки Svelte и помогать разработчикам контролировать размер своих пакетов.
- Tree-sitter-svelte предоставляет древовидную грамматику для svelte
- Svelte Ripple эффект пульсации в материальном дизайне, который не зависит от
@material/ripple
(made by @karakara in the Svelte Discord) - Analog SVG Clock отличный пример функций ослабления (made by @tonmcg in the Svelte Discord)
- Console Log Styler позволяет создавать стилизованный консольный журнал с использованием псевдо-HTML и CSS. (made by @EmNudge in the Svelte Discord)
- svelte-heroicons удобная оболочка для библиотеки значков Heroicons
- supabase-ui-svelte компоненты пользовательского интерфейса для аутентификации Supabase
У вас есть компонент, которым вы хотите поделиться? Посетите страницу Components на сайте Svelte Society. Вы можете внести свой вклад, сделав a PR to this file.
Learning Resources & Starters
- The unofficial SvelteKit docs были созданы с использованием SvelteKit и open for contributions
- 📦 Svelte Store курс lihautan охватывает основы Svelte Stores и передовой опыт.
- Svelte Events WebJeda объясняет, как директивы вроде
on:
могут использоваться для прослушивания событий DOM. - How to Set Up Protected Routes in Your Svelte Application описывает, как аутентифицировать ваших пользователей для доступа к вашим маршрутам
- Using Fauna's streaming feature to build a chat with Svelte демонстрирует, как установить и настроить Fauna для создания интерфейса чата в реальном времени с помощью Svelte.
- Using TakeShape with Sapper демонстрирует, как подключить TakeShape CMS к Sapper
- YastPack еще один пакет шаблонов Snowpack-Svelte-TailwindCss-Routify
- S2T2 шаблон Snowpack + Svelte + TailwindCSS + Typescript
- tonyketcham/sapper-tailwind2-template шаблон Sapper с Tailwind 2.0, TypeScript, ESLint и Prettier
Увидимся в следующем месяце!
Есть, что показать? Хотите больше участвовать в Svelte? Мы всегда ищем сопровождающих, участников и фанатиков ... Ознакомьтесь с Svelte Society, Reddit и Discord!