Что нового в Svelte: Февраль 2022
Rapid-Fire Replivest через Svelte, Sveltekit и сообщество
Всем счастливого Февраля! За последний месяц или около того, мы увидели как быстро развивались Svelte и Sveltekit, новые правила сообщества в Reddit, GitHub и Discord, и довольно много удивительных приложений, учебников и библиотек.
Посмотрим...
Основные моменты в Svelte ChangeLog
- 3.45.0 новый a11y warning
a11y-no-redundant-roles
, исправлена деструктуризация и кеширование - 3.46.0
{@const}
tag иstyle:
directive - В версиях 3.46.1 - 3.46.3 исправлены баги тега
{@const}
и директивыstyle:
, вместе с рядом исправлений к анимациям - AST output is now available in the Svelte REPL
Что нового в 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
Изменения в конфиге
Критические изменения
- использование объектов 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 Бена Макканна
- [Сборник рассказов для Vite] (https://storybook.js.org/blog/storybook-for-vite/)
- Давайте изучим SvelteKit, создав с нуля статический блог Markdown Джоша Коллинсворта.
- Создание приложения для iOS с помощью Svelte, Capacitor и Firebase, Гарри Херсковиц.
- Изменение параметров запроса в SvelteKit без перезагрузки страницы или навигации и Обходной путь для Всплывающие пользовательские события в Svelte Мохамада Харита
- Как создать бессерверное приложение полного стека с помощью Svelte и GraphQL Шадида Хака
- Как развернуть приложения SvelteKit на страницах Github
- Создание dApp с помощью SvelteKit Энтони Райли
- Сравнение параметров реактивности Svelte Стива Ли.
Посмотреть Интеграция сборника рассказов со SvelteKit и Интеграция FaunaDB со Svelte от Стройные сирены
- [Учебное пособие по ускоренному курсу SvelteKit] (https://www.youtube.com/watch?v=9OlLxkaeVvw&list=PL4cUxeGkcC9hpM9ARM59Ve3jqcb54dqiP) от The Net Ninja
- Svelte для начинающих от Joy of Code
- SvelteKit для начинающих | Учебное пособие по приложению для фильмов от Dev Ed
- SvelteKit $app/stores от lihautan
- Sveltekit - Получить все маршруты/страницы от WebJeda
Послушать
- Новый год, новый Svelte!? от Svelte Radio
- So much Sveltey goodness (с участием Рича Харриса) от JS Party
- Другая сторона технологий: документальная перспектива (со Стефаном Кингхэмом) от Purrfect. .dev
Библиотеки, инструменты и компоненты
- 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.
Увидимся в следующем месяце!