Что нового в Svelte: Декабрь 2020

Улучшенный инструментарий, экспорт карт и улучшения слотов и контекста

Daniel Sandoval

Это последнее «Что нового в Svelte» в этом году, и есть что отпраздновать! Обзор этого месяца включает обновления от rollup-plugin-svelte, Sapper и SvelteKit а также множество демонстраций от сообщества Svelte!

Новые возможности и багфиксы

  1. $$props, $$restProps, и $$slots все теперь поддерживаются в пользовательских веб-компонентах (3.29.5, Пример) и slot компонентов теперь поддерживают rest props: <slot {...foo} /> (3.30.0)
  2. Новая функция жизненного цикла hasContext позволяет легко проверить, был ли установлен key в контексте родительского компонента (3.30.0 & 3.30.1, Docs)
  3. Теперь существует новый класс SvelteComponentTyped который упрощает добавление строго типизированных компонентов, расширяющих базовые компоненты Svelte. Авторы библиотеки компонентов и фреймворка радуются! Пример: export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {} (3.31.0, RFC)
  4. Переходы внутри {:else} блока теперь должны успешно завершаться (3.29.5, Example)
  5. Svelte теперь включает карту экспорта, в которой явно указано, какие файлы можно импортировать из его пакета npm (3.29.5 с некоторыми исправлениями в 3.29.6, 3.29.7 и 3.30.0)
  6. 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!

Вот и все на год, ребята! Увидимся в январе 😎