Путь создания моей самой первой библиотеки JavaScript изменил меня и помог мне расти. Как я сюда попал? Начнем с самого начала.

После завершения бета-версий блоков UnifyUI и блоков Flexiwind мы с другом столкнулись с проблемой: добавление интерактивных компонентов, таких как раскрывающиеся списки, свертывания и вкладки.

Поскольку UnifyUI и Flexiwind разные: один работает с UnoCSS, а другой с TailwindCSS, мы изначально написали отдельные скрипты для каждого. Но вскоре стало очевидно, что это далеко не идеальное решение.

Изучив, как Preline обрабатывает взаимодействие со специальными плагинами JavaScript, адаптированными для TailwindCSS, мы увидели необходимость в решении, независимом от платформы CSS.

Почему CSS не зависит от фреймворка?

Создание библиотеки CSS, не зависящей от фреймворка, было для нас важно, потому что мы хотели, чтобы Flexilla беспрепятственно работала с любой фреймворком CSS или даже с Pure CSS. Многие разработчики, в том числе те, кто использует UnoCSS, TailwindCSS или даже Bootstrap, должны иметь возможность расширять свои компоненты без ограничений.

Сделав Flexilla независимым от конкретной платформы, мы можем предоставить универсальный инструмент, который подойдет для самых разных типов проектов. Это также соответствует работе, которую мы уже проделали над блоками UnifyUI и Flexiwind, где гибкость является ключевым моментом.

Решение

Вдохновленные плагинами Preline и Flowbite, мы решили создать Flexilla с полностью открытым исходным кодом.

Flexilla — это отдельная библиотека, предназначенная для независимого управления взаимодействиями, не полагаясь на какую-либо конкретную структуру CSS. Он обеспечивает гибкость и плавную интеграцию с TailwindCSS, UnoCSS или любой другой технологией CSS.

Нашей целью было усовершенствовать компоненты таким образом, чтобы они не ограничивались конкретной средой CSS.

Проблемы

Поначалу я понятия не имел, с чего начать. Стоит ли мне клонировать Preline и адаптировать его? Нет, это бы мне не помогло, поскольку моей целью было обучиться посредством этого проекта.

Организация кода

Вначале мой код был беспорядочным: нечитаемым и трудным для понимания.

У меня была папка «пакеты», и это была катастрофа! Из-за этого было сложно публиковать отдельные пакеты по отдельности, поэтому мне нужно было решение.

Решение

Я нашел статью о Лерне, которая сразу меня заинтересовала. После нескольких дней чтения документации и реструктуризации моего кода у меня появилась организация, которой я гордился. Лерна позволила мне оптимизировать обновления, управлять несколькими пакетами в моно-репозитории и публиковать их независимо.

ПопперJS?

Да, я столкнулся с дилеммой: использовать PopperJS или нет?

Это был большой вызов, но я приберегу эту историю для следующей статьи.

Управление версиями

Это было главным камнем преткновения. Первоначально я опубликовал библиотеку и все ее пакеты в версии 1.0.0… а после публикации я понял, что в некоторых пакетах есть проблемы. Поэтому для каждого исправления я публиковал новую версию библиотеки и ее пакетов. Плохая идея! В конце концов друг посоветовал мне прочитать статью о SEMVER, и внезапно создание версий обрело смысл, хотя я немного опоздал с игрой.

Вот так у меня появилась библиотека версии 2.x.x. С этого момента я перестал совершать эти ошибки. С Lerna мне больше не нужно беспокоиться об изменении версий пакетов, которые не были обновлены; Лерна позаботится об этом за меня.

Функции

1. Агностицизм CSS-фреймворка

Flexilla не опирается на какую-либо конкретную структуру CSS, что делает ее совместимой с TailwindCSS, UnoCSS или даже с простым CSS. Такая гибкость гарантирует, что вы сможете интегрировать его со своим проектом независимо от используемой вами платформы CSS.

2. Модульные компоненты

Flexilla предлагает модульные компоненты, такие как раскрывающиеся списки, вкладки и свертывания. Эти компоненты созданы так, чтобы они были легкими и легко подключались по мере необходимости, поэтому вы добавляете только то, что собираетесь использовать, что помогает повысить производительность и размер пакета.

3. Простой API

Библиотека имеет простой в использовании API, требующий минимальной настройки. Вот простой пример того, как настроить компонент раскрывающегося списка:

   import { Dropdown } from '@flexilla/flexilla';
   Dropdown.init("#myDropdown");

В этом примере показано, как можно быстро инициализировать раскрывающийся список с помощью всего нескольких строк кода, что делает его доступным для разработчиков всех уровней.

4. Безголовая архитектура

Вдохновленная библиотеками безголового пользовательского интерфейса, Flexilla позволяет вам полностью управлять стилями, поэтому вы не ограничены предопределенными дизайнами или темами. Это упрощает интеграцию в проекты со специальным стилем и гарантирует, что он не будет конфликтовать с существующими стилями.

5. Настраиваемые события

Компоненты Flexilla поставляются с настраиваемыми событиями. Например, вы можете добавить действия для реагирования на действия пользователя или настроить поведение для определенных взаимодействий, например при открытии раскрывающегося списка или смене вкладки.

const myDropdown = new Dropdown('#myDropdown', {
  onShow: () => console.log('Dropdown is shown!'),
  onHide: () => console.log('Dropdown is hidden!'),
});

const myAccordionEl = document.querySelector("#myAccordion")
const myAccordion = Accordion.init(myAccordionEl)
myAccordionEl.addEventListener("change-item",()=>{
   console.log("Accordion item changed")
})

Когда и где использовать библиотеку?

Используйте Flexilla, когда вы работаете над проектом, в котором вы не хотите использовать среду JavaScript, но вам нужны интерактивные компоненты с учетом доступности. (Рекомендуется: AstroJS, PHP и PHP-фреймворки, статические веб-сайты)
Он может хорошо работать с VueJS, но это не рекомендуется. С ReactJS даже не пытайтесь!

Что будет дальше с Flexilla?

Flexilla будет продолжать развиваться. Я планирую добавить больше компонентов, улучшить существующие и доработать документацию. В дополнение к существующим компонентам я планирую представить другие распространенные компоненты, такие как уведомления и тосты. Это позволит Flexilla поддерживать более широкий спектр интерактивных потребностей.

Заключение

Согласно моим потребностям, Flexilla оказалась ценным инструментом для создания интерактивных компонентов в моих проектах.
Начинать может быть страшно. Я боялся, что никто не оценит мою работу, боялся, что она не принесет никакой пользы. Но уверяю вас, не попробовать – самая большая ошибка. Сегодня я не жалею о создании этой библиотеки. Это позволило мне многому научиться: организации кода, управлению версиями, управлению пакетами npm… Не стесняйтесь делиться своим решением со всем миром и будьте открыты для отзывов, как положительных, так и отрицательных. Это поможет вам расти!

Если у вас есть идеи, предложения или улучшения кода, не стесняйтесь создать форк репозитория, отправить запрос на включение или открыть проблему. Вместе мы сможем улучшить библиотеку и создать ценный ресурс для разработчиков во всем мире.

В этой связи будьте осторожны и не забудьте проверить Flexilla и сообщить мне, что вы думаете!