web-ui-pack

web-ui-packは、高い拡張性を備えたWeb Componentsとヘルパーユーティリティを提供する汎用Webパッケージで、開発者体験を重視しています。TypeScriptで記述されており、充実したJSDocドキュメントが同梱されているため、エディター上でインテリセンスを通じてプロパティ、オプション、使用方法の詳細を確認できます。 READMEに記載されている主な特徴: - フレームワーク非依存:ロジックがブラウザネイティブで外部ランタイムを必要としないため、Angular、React、Vue、または素のHTMLとJavaScriptで利用可能。 - フォームコントロールは組み込みのバリデーションロジック付きでそのまま使え、プロジェクトはWebアクセシビリティのベストプラクティスへの注力を掲げている。 - コンポーネントは継承とカスタマイズを前提に設計されており、デフォルト値はクラス単位または要素単位で変更可能。プロトタイプやサブクラス化によって動作をオーバーライドできる。 - CSS変数によるカスタムカラーテーマに対応しており、`wupdark`属性を追加するとダークカラースキームが利用できる。 - TypeScript型に加え、React/Preact向けの`.jsx/.tsx`サポートも含まれる。 - ローカライズは`localeInfo`ヘルパーで処理され、グローバル関数経由でメッセージを上書きできる。 - side-effectsオプションによりwebpackのtree-shakingに最適化されており、パッケージは依存関係ゼロ。 - ユニットテストとe2eテストによる100%のテストカバレッジを謳っており、パフォーマンスと低メモリ消費への注力を表明している。 利用可能なコンポーネントとして、DropdownElement、SortElement、SpinElement、CircleElement、PopupElement、ModalElement(modal-in-modal、confirm modal、confirm hook、modal form付き)、Notify、FormElement、および一連のコントロール(SwitchControl、CheckControl、RadioControl、TextControl(mask/pattern付き)、TextareaControl、PasswordControl、NumberControl、SelectControl、SelectManyControl、TimeControl、DateControl、CalendarControl)が挙げられている。SliderControl、FileControl、ImageControl、ColorControl、MediaPlayer、InfiniteScroll、VirtualScroll、CarouselElement、TableElementなど、いくつかの項目は未完成と明記されている。 ヘルパーは分野ごとにグループ化されている:アニメーション(animateDropdown、animateStack)、DOM(findScrollParent、focusFirst、isIntoView、scrollIntoView、WUPScrolled)、日付(dateCompareWithoutTime、dateCopyTime、dateFromString、dateToString)、数学(mathFixFP、mathScaleValue、mathRotate)、オブジェクト(nestedProperty、objectClone、objectToFormData、observer)、イベント(onEvent、onFocusGot、onScroll、onScrollStop、onFocusLost、onSpy)、文字列(stringLowerCount、stringUpperCount、stringPrettify)、その他(promiseWait、localeInfo、TimeObject)、ファイル(zip、exportToExcel、saveAsFile、csv)。 インストールはnpm経由で行い、その後コンポーネントをインポートして静的な`$use()`メソッドを呼び出すことでカスタム要素を登録する。READMEには、HTMLカスタムデータ用のVSCode設定のほか、ライブラリがESNextにコンパイルされており古いブラウザ向けにはbabel-loaderへの組み込みが必要になる可能性があるという注意点、タグが認識されない場合のトラブルシューティングのガイダンスも記載されている。