Что нового в Svelte: Апрель 2021

SvelteKit beta и новый путь использовать слоты

Daniel Sandoval

Два проекта, на создание которых ушли месяцы (или даже годы), увидели свет. SvelteKit сейчас находится в стадии публичной бета-версии, а компоненты со слотами теперь доступны в Svelte!

Что там со SvelteKit?

SvelteKit - Универсальный фреймворк Svelte для создания SSR, бессерверных приложений или SPA теперь официально находится в стадии публичной бета-версии. Ожидайте ошибок! Подробнее об этом можно прочитать в в предыдущем посте. Хотите знать, когда выйдет версия 1.0? Смотрите статус здесь github.

Хотите узнать больше о том, как начать работу, чем отличается от Sapper, какие есть новые функции и пути миграции? Послушайте новый эпизод на Svelte Radio для глубокого погружения с Antony, Kev и Swyx.

Новое в Svelte & Language Tools

  • Компоненты со слотами, в том числе <svelte:fragment slot="..."> позволяют потребителям компонентов наполнять указанные слоты содержимым, у котрого нет корневого элемента (Svelte 3.35.0, Language Tools 104.5.0, подробнее в документации и учебнике)
  • Связанное редактирование теперь работает для HTML в Svelte файлах (Language Tools, 104.6.0)
  • Типы определенные в *.svelte.d.ts файлах теперь учитываются и имеют приоритет перед связанными с ними *.svelte файлами, что позволяет авторам библиотек предоставлять определения типов рядом со своими Svelte файлами. (Language Tools, 104.7.0)
  • vite-plugin-svelte доступен для использования Svelte в Vite. npm init @vitejs/app включает параметры Svelte, используя этот плагин.

Крутые примеры сообщества

Apps & Sites

  • Nagato — инструмент управления задачами, который объединяет популярные инструменты отслеживания времени и текущих дел в одном месте.
  • type-kana — викторина, помогающая изучить ひらがな (хигарана) и カタカナ (катакана), японские слоговые азбуки.
  • Pittsburgh Steps — интерактивная карта из более чем 800 общественных открытых лестниц в Питтсбурге, штат Пенсильвания.
  • Music Mode Wheels — веб-сайт, на котором музыкальные режимы отображаются в виде интерактивных колес.
  • Critical Notes — помогает мастерам игр и игрокам отслеживать свои кампании и приключения в ролевых играх.
  • Svelte Game of Life — образовательная реализация Conway's Game of Life на TypeScript + Svelte
  • foxql — одноранговая система полнотекстового поиска, работающая в вашем браузере.

Demos, Libraries, Tools & Components

  • svelte-nodegui — это способ создавать производительные, нативные и кроссплатформенные настольные приложения с помощью Node.js и Svelte.
  • Svelte Story Format — позволяет вам писать свои «истории» в Storybook, используя синтаксис Svelte. Больше информации в Storybook blog
  • SelectMadu — замена нативного селекта с поддержкой поиска, множественного выбора, асинхронной загрузки данных и многого другого.
  • Svelte Checklist — настраиваемый контрольный список, созданный с помощью Svelte.
  • Suspense for Svelte — компонент Svelte, реализующий основную идею React <Suspense>.
  • MiniRx — RxJS Redux Store который работает со Svelte и TypeScript
  • svelte-formly — генерирует динамические формы для Svelte и Sapper
  • 7ty — генератор статических сайтов, который использует Svelte, поддерживает частичную гидратацию компонентов и использует файловую маршрутизацию, похожую на Sapper и 11ty.

Хотите поделиться своим компонентом? Отправьте Компонент на сайт Svelte Society, сделав PR.

Starters

  • sveltekit-electron — стартовый набор для Electron с использованием SvelteKit
  • sveltekit-tailwindcss-external-api — это все, что вам нужно для создания проекта Svelte с помощью TailwindCSS и внешнего API, основанного на create-svelte.
  • Sapper Netlify — это проект Sapper, который может работать с функцией Netlify.

Ищете конкретный стартер? Посмотрите svelte-adders и ряд других примеров интеграции на sveltejs/integrations

Learning Resources

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

Есть, что показать? Присоединяйтесь к нам в Svelte Society, Reddit и Discord!