My Journey to Building Flexilla: Headless interactive component library

The journey of creating my very first JavaScript library has been transformative, helping me grow. How did I get here? Let's start from the beginning.

After completing the beta versions of UnifyUI Blocks and Flexiwind Blocks, my friend and I faced a challenge: adding interactive components like dropdowns, collapses, and tabs.

Since UnifyUI and Flexiwind are different : one works with UnoCSS and the other with TailwindCSS, we initially wrote separate scripts for each. But it soon became apparent that this was a less-than-ideal solution.

After studying how Preline handles interactions with dedicated JavaScript plugins tailored for TailwindCSS, we saw the need for a CSS framework-agnostic solution.

Why CSS Framework-Agnostic?

Creating a CSS framework-agnostic library was essential for us because we wanted Flexilla to work seamlessly with any CSS framework or even with Pure CSS. Many developers, including those using UnoCSS, TailwindCSS, or even Bootstrap, should have the flexibility to enhance their components without limitations.

By making Flexilla independent of a specific framework, we can provide a versatile tool that works for many different types of projects. It also aligns with the work we've already done on UnifyUI and Flexiwind Blocks, where flexibility is key.

Solution

Inspired by the Preline and Flowbite plugin, we decided to create Flexilla which is fully open-source .

Flexilla is a standalone library designed to manage interactions independently, without relying on any specific CSS framework. It offers the flexibility to integrate smoothly with TailwindCSS, UnoCSS, or any other CSS technology.

Our aim was to enhance components in a way that wasn’t restricted to a particular CSS environment.

Challenges

At first, I had no idea where to start. Should I clone Preline and adapt it? No, that wouldn’t have helped me, as my goal was to learn through this project.

Code Organization

In the beginning, my code was a mess: unreadable and hard to follow.

I had a "packages" folder, and it was a disaster! This made it difficult to publish certain packages separately, so I needed a solution.

Solution

I found an article about Lerna, which immediately caught my interest. After a few days of reading documentation and restructuring my code, I had an organization I was proud of. Lerna allowed me to streamline my updates, manage multiple packages in a mono repository, and publish them independently.

PopperJS?

Yes, I faced this dilemma: should I use PopperJS or not?

It was a big challenge, but I’ll save that story for a future article.

Versioning

This was a major stumbling block. I initially published the library and all its packages with version 1.0.0… and after publishing, I realized there were issues in some packages. So for every fix, I would publish a new version of the library and its packages. Bad idea! Eventually, a friend suggested I read an article about SEMVER, and suddenly, versioning made sense—though I was a bit late to the game.

That’s how I ended up with the library at version 2.x.x. From that point, I stopped making those mistakes. With Lerna, I no longer have to worry about changing package versions that haven’t been updated; Lerna takes care of that for me.

Features

1. CSS Framework Agnosticism

Flexilla doesn’t rely on any specific CSS framework, making it compatible with TailwindCSS, UnoCSS, or even plain CSS. This flexibility ensures that you can integrate it with your project regardless of the CSS framework you’re using.

2. Modular Components

Flexilla offers modular components like dropdowns, tabs, and collapses. These components are built to be lightweight and easy to include as needed, so you only add what you’re going to use, which helps with performance and bundle size.

3. Simple API

The library features an easy-to-use API that requires minimal configuration. Here’s a simple example of how to set up a dropdown component:

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

This example shows how you can quickly initialize a dropdown with just a few lines of code, making it highly accessible for developers of all levels.

4. Headless Architecture

Inspired by headless UI libraries, Flexilla allows you to control the styles completely, so you’re not limited by predefined designs or themes. This makes it easy to integrate into custom-styled projects and ensures it won’t conflict with existing styles.

5. Customizable Events

Flexilla components come with customizable events. For example, you can add actions to respond to user actions or customize behaviors for specific interactions, like on dropdown open or tab change.

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")
})

When and Where to Use the Library?

Use Flexilla when you're working on a project where you don't want to use a JavaScript framework but need interactive components with accessibility in mind. (Recommended: AstroJS, PHP and PHP frameworks, Static Websites)
It can work well with VueJS, but it's not recommended. With ReactJS, don't even try!

What’s Next for Flexilla?

Flexilla will continue to evolve. I plan to add more components, improve the existing ones, and refine the documentation. In addition to existing components, I plan to introduce other common components like notifications and toasts. This will allow Flexilla to support a wider range of interactive needs.

Conclusion

According to my needs, Flexilla has proven to be a valuable tool for creating interactive components in my projects.
Starting out can be scary. I was afraid no one would appreciate my work, afraid it wouldn't serve any purpose. But I assure you, not trying is the biggest mistake. Today, I have no regrets about creating this library. It has allowed me to learn so much : code organization, versioning, managing npm packages… Don’t hesitate to share your solution with the world and be open to feedback, whether positive or negative. It will help you grow!

If you have ideas, suggestions, or code improvements, don’t hesitate to fork the repository, submit a pull request, or open an issue. Together, we can enhance the library and create a valuable resource for developers everywhere.

On that note, take care, and don’t forget to check out Flexilla and let me know what you think!

The above is the detailed content of My Journey to Building Flexilla: Headless interactive component library. For more information, please follow other related articles on the PHP Chinese website!