Skip to main content

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

Приглашаем спикеров Svelte Summit! Улучшенный SSR, цели компиляции, отличные от HTML5, и поддержка ESLint TypeScript.

Daniel Sandoval

В этом месяце есть что рассказать о выпусках по всей экосистеме 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

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

Есть, что показать? Хотите больше участвовать в Svelte? Мы всегда ищем сопровождающих, участников и фанатиков ... Ознакомьтесь с Svelte Society, Reddit и Discord!