Categories
JavaScriptStencil
Stencilは、アプリやリッチな機能を持つWebコンポーネントを作成する際に、@stencil/storeを使用してストア機能を追加することができます。この記事では、@stencil/storeを使用したストアの作成方法や使用例が紹介されています。ストアを作成するためには、createStore関数を使用し、グローバル変数のようにストアを扱うことができます。また、onChange関数を使用して非同期処理を実装する方法や、setやget関数を使用してイベントを設定する方法も紹介されています。ストアを使用することで、コンポーネントの表示と処理を切り分けることができます。
JavaScriptStencilTypeScript
Stencil.jsのメジャーアップデートで、ライブラリの更新を忘れていたため、エラーが発生。具体的には、非推奨になった出力ターゲット`dist-custom-elements-bundle`を使用していたため、`dist-custom-elements`に変更する必要があった。また、TypeScriptのバージョンが合わなかったため、アップグレードも必要だった。依存関係のエラーを解決し、ビルドしていけば、問題なく動作した。
Stencilを使用してWebコンポーネントを作る場合に、テストの書き方について整理しました。サンプルコンポーネントModalの表示・非表示を制御するコンポーネントにテストを追加する方法を説明しています。@Methodと@Eventをテストする方法についても述べられています。また、スナップショットテストを使用することもできます。Jestを使ったモックについても説明があります。さらに、参考記事のリンクも掲載されているので、Stencilでテストをする際に役立つでしょう。