Skip to main content

Что нового в Svelte: Май 2022

Динамическое переключение тегов HTML-элемента со <svelte:element>

Daniel Sandoval

После вчерашнего саммита Svelte, у нас есть много новостей! Ознакомьтесь со всеми на Svelte Society YouTube Channel и остальными обновлениями этого месяца ниже...

Что нового в Svelte

  • Элемент <svelte:element> позволяет визуализировать элемент динамически заданного типа. Это полезно, например, при рендеринге контента форматированного текста из CMS. Проверьте docs или tutorial для получения дополнительной информации (3.47.0)!

Обновления Language Tools

  • Теперь поддерживаются svelte:element и sveltekit:reload
  • Недействительные пути импорта Svelte теперь будут автоматически обнаружены - см. PR для возвращения старого поведения (#1448)
  • source.sortImports позволяет сортировать импорт без удаления неиспользуемого импорта (#1338)
  • Наведении курсора на атрибуты HTML теперь будет отображаться информация о HTML вместо информации о TS (#1447)
  • В VS Code теперь вы можете обернуть существующие блоки кода в теги потока управления с помощью команды Insert Snippet (#1373)

Что нового в SvelteKit

  • Файлы и каталоги теперь можно назвать __tests__ и __test__ в каталоге маршрутов (#4438)
  • Функции Netlify Edge (#4657) и выходной API сборки Vercel (#4663) теперь поддерживаются
  • Пользовательские зависимости load, массив строк, представляющих URL-адреса, от которых зависит страница, теперь доступны при загрузке маршрутов (Docs, #4536)

Breaking Changes

  • Валидаторы теперь называются "matchers" (Docs, #4358)
  • __layout.reset был заменен именованными макетами, которые имеют большую настраиваемость для общих элементов макета (Docs, #4388)
  • Предварительный рендеринг теперь пропущен для ссылок rel="external" (#4545)
  • maxage теперь cache в LoadOutput (#4690)

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

Приложения и сайты, созданные с помощью Svelte

  • polySpectra AR позволяет создавать прототип более быструю 3D-печать с бесшовной передачей AR-файлов (видеодемонстрация)
  • Pixel Art Together - это бесплатный многопользовательский редактор пиксельного искусства на базе Liveblocks
  • Менеджер инструментов позволяет сравнить ваш технологический стек JavaScript с стандартными шаблонами отрасли
  • Легкое портфолио генерирует портфолио на основе вашего профиля GitHub
  • FLOAT - это программа отслеживания посещаемости мероприятий
  • The Coin Perspective - это трекер цен на криптовалюту и инструмент управления портфелем
  • Locutionis - это небольшой онлайн-ссылка на фигуры речи (на французском языке)
  • ASM Editor - это все в одном веб-редакторе для M68K и MIPS
  • Otium - это бесплатный менеджер книг с открытым исходным кодом и органайзер книжных полок, который поможет вам управлять своими книгами и теми, которые вы хотели бы прочитать.
  • Sinwaver - это генератор синусоидальных волн SVG

Хотите внести свой вклад в современный сайт SvelteKit? Помогите создать сайт Svelte Society!

Образовательные ресурсы

Читать

Смотреть и слушать

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

  • KitDocs - это интеграция документации для SvelteKit, например, VitePress for Svelte.
  • Svelte Copy - это библиотека click/tap-to-copy, которая облегчает копирование в буфер обмена
  • Svend3r предоставляет красивые визуализации, которые используют мощь D3, чтобы оживить ваши данные, абстрагируя их императивный код
  • Svelte Hamburgers - это простой в использовании компонент меню Hamburger для Svelte
  • Svelte Droplet - это зона удаления файлов для Svelte
  • Svelte MP3 - это легкий пылающий быстрый, но простой минималистичный аудиоплеер для Svelte
  • SvelteUI - это библиотека компонентов для создания полнофункциональных и доступных веб-приложений быстрее, чем когда-либо
  • svelte-spotlight - это компонент прожектора без головы, который поможет вам создать глобальное поле поиска вашего сайта за считанные минуты
  • svelte-pdf-simple - это простая библиотека svelte для отображения PDF-файлов и предоставления вам всего контроля
  • persistent-svelte-store - это общее постоянное записываемое хранилище, построенное с нуля в TypeScript в соответствии с контрактом хранилищ Svelte
  • svelte-exmarkdown - это компонент Svelte для динамического отображения разметки
  • Bookit - это среда рендеринга компонентов, похожая на сборник рассказов - тонко настроенная на работу непосредственно в ваших проектах SvelteKit

Присоединяйтесь к нам на Reddit или Discord, чтобы продолжить разговор.

Если вы предпочитаете присоединиться к нам лично, Svelte Summit переходит в реальный мир. Присоединяйтесь к нам на два дня потрясающего контента Svelte! Получите билеты сейчас!

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