Skip to main content

Что нового в Svelte: Февраль 2022

Rapid-Fire Replivest через Svelte, Sveltekit и сообщество

Daniel Sandoval

Всем счастливого Февраля! За последний месяц или около того, мы увидели как быстро развивались Svelte и Sveltekit, новые правила сообщества в Reddit, GitHub и Discord, и довольно много удивительных приложений, учебников и библиотек.

Посмотрим...

Основные моменты в Svelte ChangeLog

Что нового в SvelteKit

  • inlineStyleThreshold позволяет указать, куда встроенные таблицы стилей вставляются на страницу (Docs, #2620)
  • Функции жизненного цикла beforeNavigate/afterNavigate позволяют добавлять функциональность до или после навигации по странице (Docs, #3293)
  • Контекст платформы теперь может передаваться с адаптеров (Docs, #3429)
  • Хуки теперь имеют параметр ssr в resolve, чтобы облегчить пропуск SSR, когда это необходимо (Docs, #2804
  • $page.stuff предоставляет страницам механизм передачи данных «вверх» на макеты (Docs, #3252)
  • Перебор маршрутов позволяет указать, куда маршрутизировать, когда маршрут не может быть загружен (Docs, #3217)

Новое в конфиге

  • Политика безопасности контента (CSP) теперь поддерживается для повышения безопасности при использовании встроенных javascript или таблиц стилей (Docs, #3499)
  • Конфигурация kit.routes позволяет настраивать публичные/частные модули во время сборки (Docs, #3576)
  • Конфигурация prerender.createIndexFiles позволяет предварительно рендерить файлы index.html в качестве имени их подпапки (Docs, #2632)
  • Методы HTTP теперь можно переопределить с помощью kit.methodOverride (Docs, [#2989](https://github.com/sveltejs/kit/pu

Изменения в конфиге

  • config.kit.hydrate и config.kit.router теперь вложены в config.kit.browser (Docs, 3578)

Критические изменения

  • использование объектов Request и Response в эндпоинтах и хуках (#3384)

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

Приложения и сайты

  • timb(re) — среда программирования живой музыки.
  • Music for Programming представляет собой серию миксов, предназначенных для прослушивания во время ${task}, чтобы сосредоточить мозг и вдохновить его.
  • Team Tale позволяет двум авторам написать одну и ту же историю в стиле команды тегов.
  • Puzzlez — онлайн-площадка для игры в судоку и Wordle.
  • Closed Caption Creator позволяет легко добавлять субтитры к вашему видео в Windows, Mac и Google Chrome.
  • SC3Lab — генератор кода для экспериментов с svelte-cubed и three.js.
  • Donkeytype — это минималистичный и легкий тест набора текста, вдохновленный Monkeytype.
  • Above — это визуальный таймер, созданный для людей с СДВГ/аутизмом.
  • base.report — современная исследовательская платформа для серьезных инвесторов
  • String превращает ваш телефон в безопасный портативный диктофон, позволяя легко записывать и делиться личными заметками, семейными моментами, лекциями в классе и многим другим.
  • The Raytracer Challenge REPL предоставляет интерфейс живого редактора для настройки сцены с трассировкой лучей и визуализации ее в реальном времени в любом современном браузере.
  • awesome-svelte-kit — список замечательных примеров использования SvelteKit в дикой природе.
  • Map Projection Explorer позволяет исследовать различные картографические проекции и объясняет их различия.
  • Rubiks — симулятор кубика Рубика.
  • Pianisto - рабочее пианино, созданное с помощью SVG, ToneJS и большого терпения.

Хотите работать над сайтом SvelteKit вместе с другими попробуйте внести свой вклад в сайт Svelte Society!

Обучение

Почитать Ускорение разработки Svelte Бена Макканна

Посмотреть Интеграция сборника рассказов со SvelteKit и Интеграция FaunaDB со Svelte от Стройные сирены

Послушать

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

  • threlte — это библиотека компонентов из трех.js для Svelte.
  • svelte-formify — это библиотека для управления и проверки форм, которая использует декораторы для определения проверок.
  • [gQuery] (https://github.com/leveluptuts/gQuery) — это сборщик и кеширование GraphQL для Svelte Kit.
  • Unlock-protocol — это интеграция, помогающая войти в систему с помощью клиентов MetaMask, Firebase и платного доступа.
  • AgnosticUI представляет собой набор примитивов пользовательского интерфейса, которые начинают свою жизнь в чистом HTML и CSS.
  • [Vitebook] (https://github.com/vitebook/vitebook) — это быстрая и легкая альтернатива Storybook на базе Vite.
  • [SwyxKit] (https://swyxkit.netlify.app/) — это самоуверенная стартовая площадка для блогов SvelteKit + Tailwind + Netlify. Обновление к 2022 году!
  • svelte-themes — это абстракция для тем в вашем приложении SvelteKit.
  • svelte-transition — это компонент Svelte, упрощающий использование переходов на основе классов CSS — идеально подходит для использования с TailwindCSS.
  • Svelte Inview — это действие Svelte, которое отслеживает, как элемент входит или выходит из области просмотра/родительского элемента.
  • svelte-inline-compile — это преобразование babel, которое обеспечивает гораздо более приятный опыт тестирования компонентов svelte с использованием Jest и @testing-library/ стройный
  • @feltcoop/svelte-mutable-store — это хранилище Svelte для изменяемых значений с параметром компилятора immutable.
  • headless-svelte-ui — это группа безголовых компонентов, которые можно использовать при создании приложений Svelte.

Мы что-то пропустили? Нужна помощь в реализации вашей следующей идеи в Svelte? Присоединяйтесь к нам на Reddit или Discord.

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