Что нового в Svelte: Апрель 2022
Прощай перебор маршрутов, привет валидатор параметров!
В этом месяце мы почувствовали изменение в том, как SvelteKit обрабатывает свойства страницы. Последний вариант использования, требующий перебора маршрутов и проверки свойств параметров, был заменен более конкретным решением.
Подробнее об этом и о том, что еще нового в Svelte, мы погружаемся в...
Что нового в SvelteKit
- Сопоставление параметров позволяет вам проверять, соответствует ли параметр URL-адреса перед отображением страницы - заменяя необходимость в обходных маршрутах для этой цели (Документы, #4334)
- Явные перенаправления теперь можно обрабатывать непосредственно с эндпоинтов (#4260)
svelte-kit sync
(#4182), TypeScript 4.6 (#4190) и Vite 2.9 - добавлена неблокирующая оптимизация зависимостей и экспериментальные исходные карты CSS в режиме разработки, а также ряд исправлений ошибок, внесенных командой SvelteKit (#4468)
Новые параметры конфигурации
outDir
исправляет проблемы с путями в монорепозиториях и других ситуациях, когда желаемый выходной каталог находится за пределами каталога проекта (Docs, #4176)endpointExtensions
предотвращает обработку файлов, отличных от файлов .js и .ts, в качестве эндпоинтов, если только вы не укажете endpointExtensions (Docs, #4197)prerender.default
позволяет выполнять предварительную отрисовку каждой страницы без необходимости писатьexport const prerender = true
в каждом файле страницы (Docs, #4192)
Breaking Changes
- Перебор маршрутов был удален. Советы по миграции см. в PR (#4330)
tabindex="-1"
добавляется к<body>
только во время навигации (#4140 и #4184)- Адаптеры теперь требуются для предоставления функции getClientAddress (#4289)
InputProps
иOutputProps
теперь можно вводить отдельно в сгенерированномLoad
(#4305)- Символ
\$
больше не разрешен в динамических параметрах (#4334) - Пакет
svelte-kit
помечен как экспериментальный, поэтому изменения в нем после Kit 1.0 не будут считаться нарушением (#4164)
Новое в экосистеме Svelte
- Svelte: множество новых типов для пользователей плагинов TypeScript и Svelte, включая директивы
style:
и действия Svelte (3.46.4 и 3.46.5) - Языковые инструменты: файлы проекта Svelte теперь можно импортировать/находить по ссылкам без их импорта в файл TS (105.13.0)
- Языковые инструменты: свертывание регионов теперь поддерживается в html с помощью
<!--#region-->
/<!--#endregion-->
(105.13.0)
Крутые примеры сообщества
Приложения и сайты, созданные с помощью Svelte
- Launcher — это средство запуска приложений с открытым исходным кодом на базе SvelteKit, Prisma и Tailwind.
- Paaster — это безопасный по умолчанию сквозной зашифрованный pastebin, созданный с помощью Svelte, Vite, Typescript, Python, Starlette, rclone и Docker.
- Simple AF Video Converter — это оболочка Electron вокруг ffmpeg.wasm, упрощающая конвертирование видео разных форматов.
- Streamchaser стремится упростить поиск фильмов, сериалов и документальных фильмов с помощью централизованной платформы развлекательных технологий.
- Svelte Color Picker — простая палитра цветов, созданная с помощью Svelte.
- ConcertMash — это небольшой веб-сайт, который взаимодействует с API Spotify и создает новые списки воспроизведения на основе предстоящих концертов, которые вы посещаете.
- Modulus — это аналитический центр Design+Code, созданный с целью развития дизайна и технологий.
- Multiply — интегрированное агентство по связям с общественностью и социальным сетям, развивающееся со скоростью культуры.
- yia! — конкурс молодых новаторов в Новой Зеландии.
- Write to Russia — это платформа для написания электронных писем сообщества для общения с общедоступными адресами электронной почты
.ru
- Markdown Playground — это онлайн-площадка, предназначенная для ваших экспериментов с Markdown.
- RatherMisty — простое погодное приложение с данными о погоде от Open-Meteo.
- Minecraft Profile Pic (MCPFP) — это сайт для удобного создания изображений профиля Minecraft.
- WebGL Fluid Simulation — это настраиваемая симуляция жидкости, созданная с помощью Svelte и WebGL.
- This @NobelPeaceOslo exhibition была построена с использованием печатной графики, проекционной графики движения, анимации частиц и генеративного звукового дизайна.
Не терпится внести свой вклад в современный веб-сайт SvelteKit? Помогите создать сайт Svelte Society!
Образовательные ресурсы
Посещать
- Svelte Summit: Spring состоится 30 апреля 2022 года! Присоединяйтесь к нам на 5-й виртуальной конференции Svelte на YouTube и Discord 🍾
Читать
- Svelte(Kit) TypeScript Showcase + общие советы по TypeScript от Хофера Ивана
- Локальные константы в Svelte с тегом @const Джеффа Рича
- Шаблоны проектирования для создания переиспользуемых компонентов Svelte Эрика Лю.
- Svelte лучше, чем React Гамильтона Грина.
- Буквальное создание визуализаций с помощью Svelte и D3 Коннора Ротшильда.
- Координация нескольких элементов с отложенными переходами Svelte Дэниела Имфельда
- Анимация при прокрутке с помощью Svelte Inview — Little Bits от Maciek Grzybek
- Отложенная загрузка Firebase с помощью SvelteKit и Компоненты HeadlessUI с помощью Svelte от Captain Codeman
- Тестирование доступности SvelteKit: автоматизированные тесты CI A11y от Rodney Lab.
- Начало работы с KitQL и GraphCMS Скотта Спенса.
- React ⇆ Svelte Cheatsheet перечисляет сходства и различия между двумя библиотеками - Джошуа Нуссбаум
Смотреть
- Стройная феерия | Асинхронный от pngwn
- 6 пакетов Svelte, которые вы должны знать и Основное преобразование React To Svelte. ) от LevelUpTuts
- Конечная точка страницы/тени в SvelteKit от WebJeda
- Custom Svelte Store: Higher Order Store от lihautan
- SvelteKit для начинающих (плейлист) от Joy of Code - следуйте руководству по блогу
- Полная авторизация SvelteKit 🔐 с Firebase и Magic Links! 🪄 Джонни Магрипписа
- Аутентификация Firebase в SvelteKit! Приложение Full Stack Райана Бодди
Библиотеки, инструменты и компоненты
- SvelTable — многофункциональный компонент таблицы данных, созданный с помощью Svelte.
- svelte-cyberComp — мощная и легкая библиотека компонентов, написанная на Svelte и Typescript
- Flowbite Svelte — неофициальная библиотека компонентов Flowbite для Svelte.
- Svelte-Tide-Project — начальный шаблон для интерфейсных приложений Svelte с внутренним сервером Rust Tide.
- Fetch Inject реализует метод оптимизации производительности для управления асинхронными зависимостями JavaScript — теперь с поддержкой Svelte.
- svelte-utterances — легкий виджет комментариев, созданный на основе проблем GitHub.
- Liquivelte позволяет создать тему Shopify с компонентами, подобными Svelte.
- @storyblok/svelte — Svelte SDK, необходимый для взаимодействия с Storyblok API и обеспечения возможности визуального редактирования в реальном времени.
- @svelte-on-solana/wallet-adapter — это модульный адаптер кошелька TypeScript и компоненты пользовательского интерфейса для приложений Solana/Anchor, использующих SvelteJS в качестве фреймворка.
- svelte-lookat создает div, который заставляет все его дочерние элементы следовать за курсором мыши или лицом пользователя при использовании мобильного телефона.
Присоединяйтесь к нам на Reddit или Discord, чтобы продолжить общение.
Увидимся в следующем месяце!