Что нового в Svelte: Февраль 2021
Молниеносные интеграции и улучшения ...
С приближением самого короткого месяца в году сопровождающие Svelte и члены сообщества были заняты в прошлом месяце - от больших изменений в svelte-loader
, prettier-plugin-svelte
, rollup-plugin-svelte
и language-tools
до устойчивого прогресса в Sapper и svelte-preprocess
. Между тем, многие люди были заняты интеграцией Svelte с другими популярными фреймворками.
Новые возможности компилятора
- Роли Aria из WAI-ARIA Graphics Module теперь распознаются как допустимые роли aria в компонентах Svelte (3.31.1)
- Предупреждения компилятора для общих атрибутов React,
className
иhtmlFor
, теперь упрощают перенос компонентов React в Svelte. (3.31.1)
У вас есть предложение относительно функции компилятора или вы хотите помочь реализовать новые функции / исправления ошибок? Проверьте "triage: good first issue" tag for Svelte
Новые биты в языковых инструментах
- Предложения по автоматическому импорту, отключенные пользователем, больше не отображаются в VS Code (103.0.0)
- Переименование переменной теперь безопаснее с умным добавлением префикса / суффикса к переименованным переменным (104.0.0)
- Выделение семантики (токена) для пользователей TypeScript позволяет разработчикам тем применять семантический стиль в своих темах, если они его поддерживают (104.0.0)
- "Extract Component" был добавлен в контекстное меню, что позволяет извлекать компоненты из файлов без необходимости открывать командное окно для ввода "Svelte: Extract Component"(104.0.0)
- Расширение VS Code теперь прослушивает изменения файлов JavaScript / TypeScript - вам больше не нужно сохранять файлы, чтобы изменения были заметны (104.1.0)
Полный список изменений можно найти в языковых инструментах Releases page.
Отличный способ опробовать языковые инструменты - загрузить Svelte Extension for VSCode. Это расширение обеспечивает подсветку синтаксиса и богатый интеллект для компонентов Svelte в VS Code с использованием сервера svelte language. Проверьте источники расширений вашего редактора, чтобы узнать, есть ли плагин Svelte для вашей IDE или создайте свой собственный (см. coc-svelte например)!
Значительные улучшения в экосистеме Svelte
- svelte-loader выпустила основную версию 3.0.0 с поддержкой Webpack 5 и Node 14, улучшенной горячей перезагрузкой и новыми параметрами
compilerOptions
для соответствияrollup-plugin-svelte
. Критические изменения включают прекращение поддержки Svelte 2 и Node 8 More info in the changelog - rollup-plugin-svelte теперь имеет версию 7.x - с поддержкой относительных имен файлов, улучшенной обработкой исходных карт и согласованными
compilerOptions
. Обязательно внесите критические изменения при обновлении checkout the changelog - svelte-preprocess В этом месяце был реализован ряд выпусков 4.6.x для улучшения обработки postcss и scss и исправления преобразования исходной карты для пользователей машинописного текста. More info in the changelog
- Sapper получили некоторые улучшения в отслеживании прокрутки и обработке параметров запроса кодирования. Динамический импорт теперь также работает должным образом в браузерах, не поддерживающих модули ES. Эти изменения с версии 0.29.0 и пошаговое руководство по миграции можно найти in the changelog
- prettier-plugin-svelte вышла версия 2. Он подвергся капитальному ремонту, и в нем переработано форматирование HTML. Вывод теперь намного больше соответствует тому, как стандартный Prettier форматирует HTML. Улучшенные значения по умолчанию для
svelteBracketNewLine
иoptions-scripts-markup-styles
теперь должны соответствовать тому, как большинство пользователей предпочитают упорядочивать блоки кода. Кроме того, теперь поддерживается настройка PrettierhtmlWhitespaceSensitivity
. More info in the changelog
Новые изменения на веб-сайте Svelte Society включают в себя a new cheat sheet для легкого доступа к полезным шаблонам кода и некоторые небольшие визуальные исправления по всему сайту. Хотите помочь подготовить сайт Svelte Society к работе в прайм-тайм? Checkout the GitHub repo!
Community Showcase
Apps & Sites
- The official German vaccination dashboard отслеживает текущее внедрение вакцины против COVID и содержит несколько хорошо выполненных датавизов
- La neuva era de la educatión conectada сайт Vodaphone, на котором рассказывается о том, как технологии и COVID-19 изменили образовательный ландшафт
- sho.rest сокращенный URL-адрес, размещаемый на собственном хостинге
- night.fm радиостанция на тему киберпанка
Demos, Libraries & Components
- Svelte Reactive Debugger способ отслеживать реактивные операторы Svelte в инструментах разработчика Firefox
- svelte-actions is представляет собой набор прототипов действий Svelte для включения в официальные акции в будущем. See RFC и Discuss High Level Policy.
- This css grid gallery сделанный @joja (в Svelte Discord), показывает переходы сетки в зависимости от положения мыши пользователя.
- Patchcab модульный синтезатор в стиле Eurorack, созданный с использованием Web Audio.
- svelte-knob ручка для визуализации в стиле спидометра
- descent-ripple астраиваемая анимация пульсации javascript для кнопок
- makeItSnow действие Svelte, созданное @MrPoule (в Svelte Discord), которое можно использовать для добавления ❄️снега❄️ в любой компонент (Demo)
- svelte-video-player настраиваемый компонент
VideoPlayer
- svelte-readonly очень маленький стор, который предоставляет только читаемый интерфейс.
New Integrations & Starters
- svelte-derver-starter стартер для запекания полнофункционального приложения с клиентом на основе Svelte и серверной частью на основе Derver
- eleventy-plugin-embed-svelte позволяет легко встраивать компоненты Svelte в сайт 11ty
- svelte-tailwind-extension-boilerplate является хорошей основой для расширения Chrome, использующего JavaScript или TypeScript, Svelte для внешнего интерфейса, Tailwind CSS для стилизации, Jest для тестирования и Rollup в качестве системы сборки.
- snowpack-ui позволяет запускать и управлять проектами Snowpack из браузера вместо терминала
- Svelte for Appwrite объясняет, как интегрироваться с Appwrite, автономной альтернативой Firebase. Github Repo
- here-maps-svelte позволяет легко включать карты HERE в приложение Svelte
- p5-svelte абсолютно простой способ добавить творческий инструмент кодирования / рисования p5 в проект.
- svelte-windicss-preprocess препроцессор Svelte для компиляции tailwindcss во время сборки на основе компилятора windicss
- MitzaCoder/svelte-boilerplate бойлерплейт Typescript, TailwindCSS, совместимость с IE11 (с Babel) и модули с отложенной загрузкой
У вас есть компонент, которым вы хотите поделиться? Посетите страницу Components на сайте Svelte Society. Вы можете внести свой вклад, сделав a PR to this file.
Learning Resources
- lihautan's Svelte Actions Playlist учит, как работают действия и как они могут помочь в решении типичных проблем при разработке приложений Svelte.
- One-click Portfolio/Personal blog generator from dev.to API проходит через создание сайта Sapper, который также получает ваши статьи с DEV.to с помощью API.
- How to Code a VSCode Extension предлагает Svelte как способ визуализации пользовательского интерфейса в VSCode
- This YouTube series on Plenti подробно ознакомится с новым генератором статических сайтов
Увидимся в следующем месяце!
Есть, что показать? Хотите больше участвовать в Svelte? Мы всегда ищем сопровождающих, участников и фанатиков ... Ознакомьтесь с Svelte Society, Reddit и Discord!