Flexilla を構築する私の旅: ヘッドレス対話型コンポーネント ライブラリ

初めての JavaScript ライブラリを作成する過程は変革的なものであり、私を成長させてくれました。どうやってここに来たの？最初から始めましょう。

UnifyUI ブロックと Flexiwind ブロックのベータ版を完了した後、友人と私は、ドロップダウン、折りたたみ、タブなどのインタラクティブなコンポーネントを追加するという課題に直面しました。

UnifyUI と Flexiwind は異なるため、一方は UnoCSS で動作し、もう一方は TailwindCSS で動作するため、最初はそれぞれに別個のスクリプトを作成しました。しかし、これは理想的とは言えない解決策であることがすぐに明らかになりました。

TailwindCSS 用に調整された専用の JavaScript プラグインとの対話を Preline がどのように処理するかを研究した結果、CSS フレームワークに依存しないソリューションの必要性がわかりました。

CSS フレームワークに依存しない理由

CSS フレームワークに依存しないライブラリの作成は、Flexilla があらゆる CSS フレームワーク、または 純粋な CSS とシームレスに連携できるようにしたいと考えていたため、私たちにとって不可欠でした。 UnoCSS、TailwindCSS、さらには Bootstrap を使用する開発者を含む多くの開発者は、制限なくコンポーネントを強化できる柔軟性を備えている必要があります。

Flexilla を特定のフレームワークから独立させることで、さまざまなタイプのプロジェクトで機能する多用途ツールを提供できます。また、これは、柔軟性が重要である UnifyUI および Flexiwind ブロックで既に行った作業とも一致しています。

解決

Preline および Flowbite プラグインに触発されて、完全にオープンソースの Flexilla を作成することにしました。

Flexilla は、特定の CSS フレームワークに依存せずに、インタラクションを独立して管理するように設計されたスタンドアロン ライブラリです。 TailwindCSS、UnoCSS、またはその他の CSS テクノロジーとスムーズに統合できる柔軟性を提供します。

私たちの目標は、特定の CSS 環境に制限されない方法でコンポーネントを強化することでした。

課題

最初はどこから始めればよいのか分かりませんでした。 Preline をクローンして適応させるべきでしょうか?いいえ、それは私の助けにはなりませんでした。私の目標は、このプロジェクトを通じて学ぶだったからです。

コードの構成

最初、私のコードはめちゃくちゃで、読みにくく、従うのが困難でした。

「パッケージ」フォルダーがありましたが、それは大惨事でした。このため、特定のパッケージを個別に公開することが困難になったので、解決策が必要でした。

解決策

Lerna に関する記事を見つけたので、すぐに興味を引きました。数日間ドキュメントを読み、コードを再構築した後、私は誇りに思う組織を手に入れることができました。 Lerna のおかげで、更新を効率化し、モノ リポジトリで複数のパッケージを管理し、それらを個別に公開することができました。

ポッパー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. 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 中国語 Web サイトの他の関連記事を参照してください。