From d0f5874ccf70c29be6dedf6f800aed90abd4432b Mon Sep 17 00:00:00 2001
From: Benoit Lavenier <benoit.lavenier@e-is.pro>
Date: Wed, 29 Nov 2023 14:23:39 +0100
Subject: [PATCH] fix(doc) Add @RxStateXxx annotation in the Developer guide
---
doc/developer_guide.md | 52 ++++++++++++++++++++++++++++--------------
1 file changed, 35 insertions(+), 17 deletions(-)
diff --git a/doc/developer_guide.md b/doc/developer_guide.md
index b2032e6..32e614c 100644
--- a/doc/developer_guide.md
+++ b/doc/developer_guide.md
@@ -2,27 +2,45 @@
## Writing a component
-- Pour chaque composant Angular (v14):
+- Pour chaque composant Angular (v17):
- Utiliser Ionic framework, et si besoin Angular Material. Utiliser la classe Moment pour les dates.
- - Utiliser RxState avec providers: [RxState] dans la déclaration @Component.
- - Juste au-dessus de chaque classe composant, déclarer une interface MonComponentState :
- * En remplaçant "MonComponent" par le nom du composant.
- * Ajouter les attributs dynamiques du composant dans cette interface.
+ - Utiliser `RxState` avec providers: `[RxState]` dans la déclaration `@Component(/*...*/, providers: [RxState])`.
+ - Juste au-dessus de chaque classe composant, déclarer une interface `MonComponentState` (en remplaçant `MonComponent` par le nom du composant) :
+ * Déclarer dans cette interface les propriétés dynamiques du composant.
- Dans le constructeur :
* Limiter les paramètres en utilisant injector: Injector pour faciliter l'héritage.
* Définir tous les paramètres avec une visibilité protected.
- * Ajouter un paramètre state: RxState<MonComposantState>.
- - Pour chaque attribut dynamique du composant :
- * Définir l'attribut avec son type simple dans la classe MonComposantState.
- * Dans le composant, définir un getter et un setter avec @Input qui utilise state :
- ```ts
- get attribute(): string {
- return this.state.get('attribute');
- }
- @Input() set attribute(value: string) {
- this.state.set('attribute', () => value);
- }
- ```
+ - Dans le composant :
+ - Ajouter une propriété `state` avec l'annotation `@RxStateRegister()`
+ ```ts
+ @RxStateRegister() protected state: RxState<MonComposantState> = inject(RxState);
+ ```
+ - Pour chaque attribut dynamique du composant :
+ * Définir l'attribut avec son type simple dans la classe MonComposantState.
+ * Dans le composant, définir chaque propriété avec les annotations `@Input()` et `@RxStateProperty()`
+ ```ts
+ @Input() @RxStateProperty() attribute: string;
+ ```
+ > Pour information, `@RxStateProperty()` va générer automatiquement un code équivalent à :
+ > ```ts
+ > @Input() set attribute(value: string) {
+ > this.state.set('attribute', () => value);
+ > }
+ > get attribute(): string {
+ > return this.state.get('attribute');
+ > }
+ > ```
+
+ * Si besoin, pour observer une propriété, utiliser l'annotation `@RxStateSelect()`
+ ```ts
+ @RxStateSelect() attribute$: Observable<string>;
+ ```
+ > Pour information, `@RxStateSelect()` va générer automatiquement un code équivalent à :
+ > ```ts
+ > get attribute$(): Observable<string> {
+ > return this.state.select('attribute');
+ > }
+ > ```
- Pour les modales (si besoin) :
* Utiliser IonicModal.
* Ne pas définir la modale dans le template HTML (inline) mais dans un composant séparé.
--
GitLab