Что нового в Svelte: Октябрь 2020

Новые методы объектов, ресурсы для углубленного изучения и множество примеров интеграции!

Daniel Sandoval

Добро пожаловать в первый выпуск нашей серии «Что нового в Svelte»! Мы постараемся сделать это ежемесячным сообщением в блоге, в котором вы будете узнавать о новых функциях, исправлениях ошибок и демонстрации проектов Svelte со всего сообщества.

Новые возможности

  1. use:obj.method позволяет функциям, определенным в объектах, использоваться в действиях (Пример, 3.26.0, предупреждение удалено в 3.27.0)

  2. _ теперь поддерживается как «числовой разделитель», аналогично . или , (Пример, 3.26.0)

  3. import.meta теперь работает в шаблонных выражениях (Пример, 3.26.0)

  4. Селекторы CSS с комбинаторами ~ и + теперь поддерживаются (Пример, 3.27.0, с исправлением компилятора в 3.29.0)

  5. Блок {#key} теперь доступен для ввода произвольного содержимого в выражение. При изменении выражения содержимое внутри блока {#key} будет уничтожено и создано заново. Подробное объяснение, как это реализовано, читайте в статье участника Svelte Team Tan Li Hau. (Подробнее, 3.29.0)

  6. Теперь слоты можно перенаправлять через дочерние компоненты! Раньше это было возможно только с дополнительной оберткой <div> (Подробнее, 3.29.0)

  7. При использовании TypeScript теперь вы можете использовать метод createEventDispatcher:

    <script lang="ts">
 import { createEventDispatcher } from 'svelte';

 const dispatch = createEventDispatcher<{
     /**
      * you can also add docs
      */
     checked: boolean; // Will translate to `CustomEvent<boolean>`
     hello: string;
 }>();

 // ...
</script>

    Это гарантирует, что вы можете вызывать отправку только с указанными именами событий и их типами. Расширение Svelte для VS Code также было обновлено с учетом этой новой функции. Оно обеспечит строгую типизацию для этих событий, а также подсказки для автодополнения и при наведении курсора.

Новое в Sapper! Только что вышел Sapper 0.28.9. Основные новшества: лучшая поддержка атрибута nonce для CSP, поддержка предварительной загрузки ресурсов для экспортированных страниц и сведения об ошибках, которые теперь доступны в хранилище $page на страницах ошибок.

Кроме того, переписана обработка CSS, чтобы исправить существующие ошибки, теперь CSS обрабатывается отдельным плагином Rollup, что устранило необходимость внутренней регистрации CSS в системе маршрутизации. Поздравляем и благодарим всех, кто работает над Sapper, за их солидную работу!

Багфиксы

  • Компиляция CSS больше не удаляет правила для атрибута open в элементах <details> (Пример, 3.26.0)
  • prettier-plugin-svelte теперь будет лучше справляться с пробелами, особенно вокруг встроенных элементов. Он также сохранит форматирование внутри тегов <pre> и больше не будет форматировать языки, которые не поддерживаются Prettier, такие как SASS, Pug или Stylus.

Скоро

  • Svelte Summit, Вторая глобальная онлайн-конференция Svelte состоится 18 октября! Зарегистрируйтесь бесплатно, чтобы получать напоминания и обсуждать обновления!

Чтобы узнать обо всех функциях и исправлениях, см. CHANGELOG для Svelte и Sapper.

Svelte Showcase

  • This CustomMenu example демонстрации того, как заменить контекстное меню браузера
  • Github Tetris тетрис, в истории коммитов git
  • Who are my representatives? веб-сайт, созданный с помощью Svelte, чтобы помочь жителям США получить больше информации о своих представителях в Конгрессе
  • Pick Palette крутой менеджер цветовой палитры, созданный с помощью Svelte!

Обучение:

  • Svelte 3 Up and Running новая книга о создании готовых к работе статических веб-приложений с помощью Svelte 3
  • Sapper Tutorial (Crash Course) подробно рассказывает о Sapper, фреймворке для приложений на базе Svelte.
  • Svelte Society Day France 27 сентября мы обсудили самые разные темы на французском языке! Вы можете найти полную запись здесь.

Переиспользуемые компоненты:

  • svelte-zoom обеспечивает "почти родное" панорамирование и масштабирование изображений на компьютерах и мобильных устройствах.
  • svelte-materialify библиотека Material компонентов для Svelte с более чем 50 компонентами
  • svelte-undoable упрощает операции отмены и повтора с помощью bind:
  • This Tilt component при наведлении мыши элемент наклоняется в перспективе следуя за мышью

В этом месяце появилось множество примеров использования технологии JS:

Напоминание: Svelte integrations repo который демонстрирует способы включения Svelte в ваш стек (и наоборот). Если у вас есть вопросы о том, как использовать определенную технологию со Svelte, вы можете найти там свой ответ ... и если у вас есть что-то для работы со Svelte, подумайте об участии!

Чтобы увидеть больше потрясающих проектов Svelte, посетите Svelte Society, Reddit и Discord… и обязательно разместите свой пост!

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

Кстати, у Svelte теперь есть OpenCollective! и все расходы публикуются публично. Узнайте, кто жертвует, сколько, куда идут эти деньги, укажите расходы, получите возмещение и многое другое!