Svelte — это внешний компилятор, популярность которого резко возросла благодаря простоте использования и отличной производительности. В прошлом месяце был выпущен Svelvet 1.0, который получил большой отклик от сообщества Svelte. Svelvet — это библиотека компонентов, которая позволяет разработчикам Svelte создавать интерактивный пользовательский интерфейс на основе узлов. Мы рады объявить о выпуске Svelvet 2.0, который включает в себя множество новых функций и исправляет существующие ошибки.
Введите Svelvet 2.0
Svelvet — это библиотека компонентов Svelte с открытым исходным кодом, которая позволяет разработчикам создавать интерактивные диаграммы на основе узлов и пользовательский интерфейс. Это включает в себя рендеринг пользовательских узлов, краев, масштабирования и панорамирования. С Svelvet отображение идей и определение функциональных возможностей приложения стало проще, чем когда-либо!
Установка
Svelvet доступен как в виде пакета npm, так и в виде пакета yarn. Чтобы установить Svelvet в свое приложение, вам просто нужно ввести одну из следующих команд:
npm install svelvet
or
yarn add svelvet
Теперь, когда вы установили Svelvet в свое приложение Svelte, вам нужно импортировать его в ту часть кода, которая будет его использовать, вот так:
import Svelvet from 'svelvet';
Новые функции Svelvet 2.0
- Левая и правая опорные точки для ребер
- Смешанная функциональность ребер (исходный узел сверху/снизу к целевому узлу слева/справа)
- Добавление изображений к узлам
- Новые типы ребер (шаг и плавный шаг) )
-Настройка краев
-Настройка меток краев
-Интегрированная мобильная функциональность
-Исправлены нерешенные проблемы и ошибки GitHub
Недавно обновленная документация (www.svelvet.io) включает всю обновленную информацию, а также добавленный Svelvet REPL. Теперь пользователи могут создавать прототипы своих узловых диаграмм прямо с веб-сайта Svelvet и сохранять свои диаграммы как в настольном, так и в мобильном браузере.
Пример
Библиотека компонентов Svelvet состоит из узлов и ребер, эти узлы и ребра будут отображаться в соответствии со значениями, которые вы назначаете им в своем приложении. В этом примере мы будем отображать узлы и ребра с информацией ниже:
Как только вы визуализируете компонент Svelvet с только что инициализированной информацией, вы увидите диаграмму ниже:
После рендеринга пользователь сможет выбирать и перемещать узлы, увеличивать масштаб и панорамировать.
Как внести свой вклад
Svelvet продолжит работу. Если функциональность, встроенная в эту библиотеку, представляет для вас интерес, пожалуйста, не стесняйтесь вносить свой вклад!
Проверьте Svelvet на GitHub: github.com/open-source-labs/Svelvet
Заключительные мысли
Мы хотели бы поблагодарить всех вас за вашу поддержку, и мы продолжим добавлять новые функции, которые запрашиваются. Если вам нравится наш продукт, поставьте нам звездочку на GitHub и следите за обновлениями в LinkedIn. Ваша поддержка очень ценится!
Проверьте Svelvet на LinkedIn: https://www.linkedin.com/company/Svelvet
Команда Svelvet
Ану Шарма
LinkedIn: https://www.linkedin.com/in/anu-sharma-6936a686/
Github: https://github.com/anulepau
Эндрю Виджаджа
LinkedIn: https://www.linkedin.com/in/andrew-widjaja/
Github: https://github.com/andrew-widjaja
Аарон Уиллетт
LinkedIn: https://www.linkedin.com/in/awillettnyc/
Github: https://github.com/awillettnyc
Александр Замбрано
LinkedIn: https://www.linkedin.com/in/alexander-z-8b7716b0/
Github: https://github.com/azambran21
Али Адамс
LinkedIn: https://www.linkedin.com/in/alimadams/
Github: https://github.com/AliA12336
Дамиан Лим
LinkedIn: https://www.linkedin.com/in/lim-damian/
Github: https://github.com/limd96
Джастин Воутерс
LinkedIn: https://www.linkedin.com/in/justinwouters/
Github: https://github.com/justinwouters
Фон Гарсия
LinkedIn: https://www.linkedin.com/in/vongarcia97
Github: https://github.com/vongarcia97
Уолтер ДеВолт
LinkedIn: https://www.linkedin.com/in/walter-devault/
Github: https://github.com/TensionCoding
Документация
https://www.svelvet.io
