Что нового в Svelte: Декабрь 2020
Улучшенный инструментарий, экспорт карт и улучшения слотов и контекста
Это последнее «Что нового в Svelte» в этом году, и есть что отпраздновать! Обзор этого месяца включает обновления от rollup-plugin-svelte
, Sapper
и SvelteKit
а также множество демонстраций от сообщества Svelte!
Новые возможности и багфиксы
$$props
,$$restProps
, и$$slots
все теперь поддерживаются в пользовательских веб-компонентах (3.29.5, Пример) иslot
компонентов теперь поддерживают rest props:<slot {...foo} />
(3.30.0)- Новая функция жизненного цикла
hasContext
позволяет легко проверить, был ли установленkey
в контексте родительского компонента (3.30.0 & 3.30.1, Docs) - Теперь существует новый класс
SvelteComponentTyped
который упрощает добавление строго типизированных компонентов, расширяющих базовые компоненты Svelte. Авторы библиотеки компонентов и фреймворка радуются! Пример:export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {}
(3.31.0, RFC) - Переходы внутри
{:else}
блока теперь должны успешно завершаться (3.29.5, Example) - Svelte теперь включает карту экспорта, в которой явно указано, какие файлы можно импортировать из его пакета npm (3.29.5 с некоторыми исправлениями в 3.29.6, 3.29.7 и 3.30.0)
rollup-plugin-svelte
был новый 7.0.0 release. Самым большим изменением является удаление опцииcss
. Пользователи, которые использовали эту опцию, должны добавить еще один плагин, напримерrollup-plugin-css-only
как показано in the template
Что с Sapper?
Множество новых улучшений определений TypeScript, которые делают редактирование приложений Sapper еще проще! CSS для динамического импорта теперь также должен работать в файлахclient.js
files. (Unreleased)
В чем дело со SvelteKit?
Мы рады, что вы спросили! Если вы не видели сообщение в блоге Рича в начале прошлого месяца, вы можете найти его тут!
Чтобы узнать обо всех функциях и исправлениях, см. CHANGELOGs Svelte и Sapper.
Community Showcase
Apps & Sites
- narration.studio (Только для Chrome) - это платформа для автоматической записи и редактирования звука в браузере для озвучивания.
- Vippet инструмент для записи и редактирования видео в браузере.
- Pattern Monster простой онлайн-генератор шаблонов для создания повторяемых шаблонов SVG.
- Plant-based diets веб-сайт Всемирного фонда дикой природы (WWF), созданный с помощью Svelte.
- johnells.se шведский сайт электронной коммерции модной одежды, созданный с помощью Crown - фреймворка на базе Svelte.
- sentence-length инструмент обучения и анализа, чтобы показать, как одни авторы играют с разной продолжительностью, в то время как другие придерживаются одной.
- svelte-presenter позволяет быстро создавать красивые презентации с помощью Svelte и mdsvex.
Demos
- u/loopcake got SSR working in Java Spring Boot для всех магазинов Java, которые хотят рендерить Svelte на стороне сервера.
- svelte-liquid-swipe демонстрирует причудливый шаблон взаимодействия с использованием путей svg.
- Crossfade Link Animation демонстрирует, как анимировать между навигационными ссылками с помощью кроссфейда (made by Blu, from the Discord community)
- Clip-Path Transitions демонстрирует, как использовать траектории клипа и пользовательские переходы для создания волшебных входов и выходов (made by Faber, from the Discord community)
Learning Resources
- lihautan делает простые видеоролики, чтобы поделиться своими глубокими знаниями о Svelte.
- Lessons From Building a Static Site Generator делится предысторией и идеями, лежащими в основе Elder.js, а также дизайнерскими решениями, принятыми на этом пути.
- Svelte Tutorial and Projects Course это udemy курс Джона Смилги, в котором студенты изучают Svelte.js, создавая интересные проекты.
- Building Pastebin on IPFS - with FastAPI, Svelte, and IPFS объясняет, как сделать распределенное приложение, подобное pastebin.
Components, Libraries & Tools
- svelte-crossword настраиваемый компонент кроссворда для Svelte.
- svelte-cloudinary упрощает интеграцию Cloudinary со Svelte (включая поддержку Typescript и SSR)
- Svelte Nova расширяет новый редактор Nova для поддержки Svelte
- saos небольшой изящный компонент для анимации ваших элементов при прокрутке.
- Svelte-nStore замена стора общего назначения, которая выполняет контракт стора Svelte и добавляет функции получения и вычисления.
- svelte-slimscroll Svelte Action, который преобразует любой div в прокручиваемую область с красивой полосой прокрутки.
- svelte-typewriter простой и многоразовый эффект пишущей машинки для ваших приложений Svelte
- svelte-store-router маршрутизатор на основе хранилища для Svelte, который предполагает, что маршрутизация - это просто еще одно глобальное состояние, а изменения History API - просто необязательные побочные эффекты этого состояния.
- Routify только что выпустила версию 2 своего роутера Svelte.
- svelte-error-boundary предоставляет простой компонент границы ошибок для Svelte, который можно использовать как с DOM, так и с целями SSR.
- svelte2dts генерирует файлы d.ts из файлов svelte, создавая по-настоящему совместимые и хорошо типизированные компоненты.
Увидимся в следующем месяце!
Есть, что показать? Хотите больше участвовать в Svelte? Мы всегда ищем сопровождающих, участников и фанатиков ... Ознакомьтесь с Svelte Society, Reddit и Discord!
Вот и все на год, ребята! Увидимся в январе 😎