我的 Flexilla 建置之旅：無頭互動式元件庫

創建我的第一個 JavaScript 庫的旅程是變革性的，幫助我成長。我是怎麼到這裡的？讓我們從頭開始。

完成 UnifyUI Blocks 和 Flexiwind Blocks 的測試版後，我和我的朋友面臨著一個挑戰：添加下拉清單、折疊和選項卡等互動元件。

由於 UnifyUI 和 Flexiwind 不同：一個使用 UnoCSS，另一個使用 TailwindCSS，我們最初為兩者編寫單獨的腳本。但很快我們就發現這是一個不太理想的解決方案。

在研究了 Preline 如何處理與為 TailwindCSS 定制的專用 JavaScript 插件的交互後，我們發現需要一個與 CSS 框架無關的解決方案。

為什麼 CSS 框架無關？

建立一個與 CSS 框架無關的函式庫對我們來說至關重要，因為我們希望 Flexilla 能夠與任何 CSS 框架甚至與純 CSS無縫協作。許多開發人員，包括使用 UnoCSS、TailwindCSS 甚至 Bootstrap 的開發人員，應該能夠靈活地不受限制地增強其組件。

透過讓 Flexilla 獨立於特定框架，我們可以提供適用於許多不同類型專案的多功能工具。它也與我們在 UnifyUI 和 Flexiwind Blocks 上所做的工作保持一致，其中靈活性是關鍵。

解決方案

受到 Preline 和 Flowbite 外掛程式的啟發，我們決定建立完全開源的 Flexilla。

Flexilla 是一個獨立的函式庫，旨在獨立管理交互，而不依賴任何特定的 CSS 框架。它提供了與 TailwindCSS、UnoCSS 或任何其他 CSS 技術順利整合的靈活性。

我們的目標是以不限於特定 CSS 環境的方式增強元件。

挑戰

一開始，我不知道從哪裡開始。我應該克隆 Preline 並對其進行調整嗎？不，那對我沒有幫助，因為我的目標是透過這個計畫學習。

代碼組織

一開始，我的程式碼一團糟：不可讀且難以理解。

我有一個“packages”資料夾，這是一場災難！這使得單獨發布某些套件變得困難，所以我需要一個解決方案。

解

我發現了一篇關於勒納的文章，這立即引起了我的興趣。經過幾天的閱讀文件和重組程式碼後，我擁有了一個令我自豪的組織。 Lerna 允許我簡化更新、管理單一儲存庫中的多個套件並獨立發布它們。

波普JS？

是的，我面臨這樣的困境：我是否應該使用 PopperJS？

這是一個很大的挑戰，但我會把這個故事留到以後的文章。

版本控制

這是一個主要的絆腳石。我最初以 1.0.0 版本發布了該庫及其所有套件……發布後，我意識到某些套件存在問題。因此，對於每次修復，我都會發布該庫及其包的新版本。壞主意！最終，一位朋友建議我閱讀一篇關於 SEMVER 的文章，突然間，版本控制變得有意義了——儘管我有點晚了。

這就是我最終得到版本 2.x.x 的函式庫的原因。從那時起，我就不再犯這些錯誤了。有了Lerna，我不再需要擔心更改尚未更新的軟體包版本； Lerna 幫我處理這件事。

特徵

1. CSS 框架不可知論

Flexilla 不依賴任何特定的 CSS 框架，使其與 TailwindCSS、UnoCSS 甚至 plain CSS 相容。這種靈活性確保您可以將其與您的專案集成，無論您使用什麼 CSS 框架。

2. 模組化組件

Flexilla 提供模組化組件，例如下拉式選單、選項卡和折疊。這些組件是輕量級的，易於根據需要添加，因此您只需添加要使用的組件，這有助於性能和捆綁包大小。

3. 簡單的API

該程式庫具有易於使用的 API，只需最少的配置。這是如何設定下拉元件的簡單範例：

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

此範例展示如何僅用幾行程式碼即可快速初始化下拉列表，從而使各個層級的開發人員都可以輕鬆存取它。

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!

以上是我的 Flexilla 建置之旅：無頭互動式元件庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！