Skip to main content

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

Прощай перебор маршрутов, привет валидатор параметров!

Daniel Sandoval

В этом месяце мы почувствовали изменение в том, как 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 🍾

Читать

Смотреть

Библиотеки, инструменты и компоненты

  • 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, чтобы продолжить общение.

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