Skip to main content

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

Молниеносные интеграции и улучшения ...

Daniel Sandoval

С приближением самого короткого месяца в году сопровождающие 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 теперь должны соответствовать тому, как большинство пользователей предпочитают упорядочивать блоки кода. Кроме того, теперь поддерживается настройка Prettier htmlWhitespaceSensitivity. 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!