Développement

Insérer une chaîne

Les chaînes utilisées dans les templates doivent pouvoir être traduites : pour ça, on imite le mécanisme natif des extensions navigateurs avec des dictionnaires au format JSON dans le répertoire _locales.

Le service qui gère l’internationalisation est instancié automatiquement. Pour que votre chaîne soit traduite :

1. Dans le template, l’élément HTML qui contiendra la chaîne doit porter un attribut data-i18n avec une valeur en camelCase : la clé de la chaine.
2. Dans chaque dictionnaire (deux pour le moment), le fichier JSON correspondant doit contenir une entrée avec la clé en question, et en valeur un objet avec une clé message.

"mainButton": {
	"message": "Démarrer Confort+"
},

Évidemment, la chaîne en question doit être dans la langue du fichier.

Ajouter un fichier .ts dans app/

Le cœur de l’application est écrit en TypeScript et compilé en JS. Cela étant dit, les fichiers JavaScript sont ensuite concaténés puis minifiés à l’aide de Terser : vous trouverez un fichier de configuration dans build/.

Si votre fichier fait partie de la toolbar, il faut donc l’ajouter à la liste de fichiers dans la première entrée toolbar. Si votre fichier est un service, ou simplement propre à l’extension ou au côté serveur, il faut l’ajouter à la liste de fichiers correspondante.

Ajouter un réglage

Chaque réglage possède son propre service dans app/services/settings et un composant qui inclut un bouton réglage accompagné de son bouton modale dans app/shared/settings. Voici une checklist à respecter pour que le réglage soit correctement implémenté :

• Ajouter le service dans app/services/settings et déclarer son instance dans app/core/services.core.ts.
• Ajouter le composant dans app/shared/settings.
• Ajouter le chemin des nouveaux fichiers dans build/terser.js comme les réglages existants.
• Ajouter le composant dans app/pages/home/components/mode.component.ts dans le template avec la classe sc-mode__setting.
• Ajouter le composant dans le template de la catégorie sans oublier la classe correspondante et l'attribut data-can-edit="true". Exemple : <app-font-family class="c-category__setting" data-can-edit="true"></app-font-family> dans le template de app/pages/settings/categories/text.component.ts.
• Ajouter le nom du réglage et ses valeurs par défauts dans les modes qui utilisent ce réglage à cet emplacement : assets/json/modes-of-use.json.
• Ajouter dans pause.service.ts le nouveau réglage pour brancher son service à la fonctionnalité de pause.

Utiliser une icône Solaris

Les icônes Solaris utilisées sont dans src/assets/icons et sont automatiquement compilées dans un sprite. Dans l’application, vous pouvez les utiliser facilement grâce au composant <app-icon> :

<app-icon data-name="Lightbulb" data-size="5rem"></app-icon>

Note : pas besoin d’indiquer le préfixe ic_, il est automatiquement utilisé. De plus data-size doit avoir une unité — et est pour le moment utilisé dans les attributs width et height (ce qui implique un carré…).

Tester l’extension navigateur

Pour tester l’extension dans Chrome ou Firefox, il faut au préalable faire un npm run build puis npm run zip pour packager l’extension.

Ensuite, vous pouvez tenter le raccourci proposé par web-ext, via npm run load:firefox et npm run load:chrome — mais qui sont relativement instables :

• sur Ubuntu, la version Firefox ne fonctionnera pas si vous utilisez la version snap de Firefox.
• le script pour chrome lance Chromium : vous pouvez changer dans le script l’argument target. Dans mon cas j’ai systématiquement un warning au chargement, mais ça fonctionne.

Si jamais ces scripts ne fonctionnent pas, on repasse en mode manuel/

Dans Firefox

• Ouvrir un nouvel onglet sur about:debugging#/runtime/this-firefox,
• Actionner « Charger un module complémentaire temporaire » et sélectionnez l’archive orange-confort-plus-x.x.x-firefox.zip,
• Pour inspecter le service worker : cliquez sur le bouton « Examiner » pour ouvrir la console du navigateur,
• Et voilà, allez surfer sur le web !

Dans Chrome / Edge / Chromium

• Aller dans « Gérer les extensions »,
• Actionner « Charger l’extension décompressée »,
• Choisir le répertoire dist/extension/ (en vous assurant que le fichier manifeste est celui de Chrome),
• Pour inspecter le service worker : cliquez sur le lien « Travailleur du service » pour ouvrir la console du navigateur,
• Et voilà !

Trucs chelous dans les extensions

• Les méthodes de classe ne fonctionnent pas : il faut les déclarer explicitement comme des fonctions avec la syntaxe des fonctions fléchées, par exemple toggleToolbar = () => { … } au lieu de toggleToolbar() { … }.
• La mise à jour des attributs data-* via l’API dataset ne déclenche pas les attributeChangedCallback() dans Chrome : il faut utiliser setAttribute('data-*', '').
  • Même chose pour l’accès aux propriétés DOM : .title ou .hidden par exemple doivent être évités et remplacés par .setAttribute().

Handlers et AbortController

Dans un projet Web Component avec TypeScript, on peut rencontrer les handlers et les AbortController dans des contextes différents, mais ils ont des fonctions distinctes et des avantages spécifiques.

Handlers

• Les handlers sont souvent utilisés pour gérer des événements ou des actions déclenchées par l'utilisateur, tels que des clics de souris, des soumissions de formulaires, etc.
• En TypeScript, on peut définir des types forts pour vos handlers, ce qui améliore la sécurité et la clarté du code.
• Avantages :

1. Facilité de gestion des événements utilisateur
2. Types forts avec TypeScript pour une meilleure détection des erreurs
3. Facilité d'intégration dans les composants Web

• Inconvénients :

1. Les handlers sont plus adaptés pour les interactions utilisateur directes plutôt que pour la gestion de tâches asynchrones ou de requêtes réseau

AbortController

• L'AbortController est utilisé pour contrôler et annuler les opérations asynchrones telles que les requêtes réseau
• Il fournit une méthode simple et efficace pour annuler des requêtes HTTP ou d'autres opérations asynchrones en cours
• Avantages :

1. Contrôle précis sur les opérations asynchrones, ce qui permet d'éviter les fuites de mémoire et d'améliorer les performances
2. Facilite la gestion des annulations de requêtes, ce qui peut être crucial dans les applications réactives
3. Compatible avec les promesses et les fetch API

• Inconvénients :

1. Peut nécessiter un peu plus de configuration et de gestion que les handlers simples, en particulier lorsqu'il s'agit de gérer les erreurs et les retours d'annulation

En résumé, les handlers sont mieux adaptés pour gérer les interactions utilisateur directes, tandis que l'AbortController est plus approprié pour contrôler les opérations asynchrones telles que les requêtes réseau. Dans un projet Web Component avec TypeScript, on peut utiliser les deux selon les besoins spécifiques de l'application.