アーキテクチャ¶
コンポーネント¶
フロントエンドはウェブコンポーネントで構成されています。これらは src ディレクトリ内のJavascriptファイルで定義されています。
通常、各ファイルは1つのコンポーネントを定義し、次のように始まります。
class GrampsjsSomeElement extends LitElement
customElements.define('grampsjs-some-element', GrampsjsSomeElement)`
grampsjs-some-element が定義され、他の場所で使用できるようになります。
メインエントリーポイントは index.html に含まれており、GrampsJs.js で定義された gramps-js 要素です。これには、すべての個別ページの定義（これは単にルート/URLに基づいて表示または非表示にされる要素に対応します）、メニュー、およびルーティングが含まれています。
src/views ディレクトリ内のコンポーネントは通常、バックエンドからデータを取得するフルページコンポーネントに対応しており（例：人々のリストビュー）、src/components 内のコンポーネントは通常、親要素から提供される属性からデータを取得する小さなビルディングブロックとして使用されます。ただし、この分離は厳密ではありません。
データフロー¶
データは src/api.js 内の apiGet、apiPut、および apiPost メソッドを介してバックエンド/APIと交換され、これにより自動的に認証が処理されます。
データはプロパティを介して親コンポーネントから子コンポーネントに渡されます（例： Litのドキュメント を参照）。
データを子コンポーネントから親コンポーネントにフィードバックする必要がある場合は、src/api.js 内の fireEvent 関数を使用して発火できるカスタムイベントが使用され、Litの @ 構文を使用してリッスンされます (docs)。
認証¶
リフレッシュトークンと認証トークンは、ブラウザのローカルストレージに保存されます。API呼び出しが行われ、トークンが期限切れになると、保存されたリフレッシュトークンが使用されて新しいアクセストークンを取得し、API呼び出しが繰り返されます。
ユーザーの認可スコープは、アクセストークンのクレームに保存され、getPermissions 関数を使用して取得され、トップレベルの GrampsJs 要素でブールプロパティ canAdd、canEdit、canManageUsers を設定するために使用され、これらは子要素に流されて認可特有の機能を実装します。