Что нового в Svelte: Апрель 2021
SvelteKit beta и новый путь использовать слоты
Два проекта, на создание которых ушли месяцы (или даже годы), увидели свет. 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 и ряд других примеров шаблонов на сайте сообщества sveltesociety.dev
Learning Resources
- Как создавать сайты на Svelte и SvelteKit — пошаговое руководство по настройке SvelteKit.
- Хранилище Svelte для prefers-reduced-motion — демонстрирует, как создать собственное хранилище Svelte, значение которого будет указывать, запросил ли пользователь уменьшение движения и улучшение доступности.
- Поддержка TypeScript в Svelte — руководство MDN по использованию TypeScript в Svelte.
- Как объединить ячейки с помощью svelte-window пошаговое руководство по svelte-window, порту популярного инструмента react-window для объединения ячеек таблицы. Подробнее об этой миграции от react-window 1:1 к svelte-window.
- Легковстраиваемые компоненты Svelte — объясняет, как использовать Rollup и тег
<script>
для встраивания компонентов Svelte в любое место. - Перевод Svelte проекта с Rollup на Snowpack — демонстрирует распространенную схему миграции на видео.
- Как интернационализировать маршрутизацию в Svelte и Sapper — объясняет, как leaf.cloud перевел свой сайт на голландский.
- Svelte Store: реактивный контекст с использованием Svelte Store — видеоответ на вопрос: «Как сделать значение контекста [a] реактивным?»
- Создание изображений для обмена в социальных сетях с помощью Cloudinary и Svelte — видео от Cloudinary, демонстрирующее, как динамически создавать изображения Open Graph и карты Twitter для веб-сайта JAMstack.
Увидимся в следующем месяце!
Есть, что показать? Присоединяйтесь к нам в Svelte Society, Reddit и Discord!