Что нового в Svelte: Октябрь 2020
Новые методы объектов, ресурсы для углубленного изучения и множество примеров интеграции!
Добро пожаловать в первый выпуск нашей серии «Что нового в Svelte»! Мы постараемся сделать это ежемесячным сообщением в блоге, в котором вы будете узнавать о новых функциях, исправлениях ошибок и демонстрации проектов Svelte со всего сообщества.
Новые возможности
use:obj.method
позволяет функциям, определенным в объектах, использоваться в действиях (Пример, 3.26.0, предупреждение удалено в 3.27.0)_
теперь поддерживается как «числовой разделитель», аналогично.
или,
(Пример, 3.26.0)import.meta
теперь работает в шаблонных выражениях (Пример, 3.26.0)- Селекторы CSS с комбинаторами
~
и+
теперь поддерживаются (Пример, 3.27.0, с исправлением компилятора в 3.29.0) - Блок
{#key}
теперь доступен для ввода произвольного содержимого в выражение. При изменении выражения содержимое внутри блока{#key}
будет уничтожено и создано заново. Подробное объяснение, как это реализовано, читайте в статье участника Svelte Team Tan Li Hau. (Подробнее, 3.29.0) - Теперь слоты можно перенаправлять через дочерние компоненты! Раньше это было возможно только с дополнительной оберткой
<div>
(Подробнее, 3.29.0) - При использовании 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:
- Sapper with PostCSS and Tailwind
- PrismJS (Code block syntax highlighting)
- Filepond (Drag-and-drop file upload)
- Ionic (UI Components)
- Pell (WYSIWYG Editor)
- Leaflet (Mapping)
Напоминание: Svelte integrations repo который демонстрирует способы включения Svelte в ваш стек (и наоборот). Если у вас есть вопросы о том, как использовать определенную технологию со Svelte, вы можете найти там свой ответ ... и если у вас есть что-то для работы со Svelte, подумайте об участии!
Чтобы увидеть больше потрясающих проектов Svelte, посетите Svelte Society, Reddit и Discord… и обязательно разместите свой пост!
Увидимся в следующем месяце!
Кстати, у Svelte теперь есть OpenCollective! и все расходы публикуются публично. Узнайте, кто жертвует, сколько, куда идут эти деньги, укажите расходы, получите возмещение и многое другое!