Study : deprecaction of customisations and usage of module-api

[estellecomment]

Customisations is being deprecated in favor of Module API. element-hq/element-web#25736
For now they're still there, with a deprecated warning message.
We want to avoid a situation where we are blocked from upgrading element-web for more than a sprint because our customisations have become incompatible.

• when will they be deleted ? "later"
• why are they deleted ? "in favor of module API". Can't find more info.
• what can we move to module API ?
• for what we can't move, can we support customisations ourselves, by editing the webpack config (with easy future maintenance as usual) -> yes, see comment below
• for what we can't move to module API, any other existing things we can use ?

[estellecomment]

for what we can't move, can we support customisations ourselves, by editing the webpack config (with easy future maintenance as usual)

It's a cleanly separate block of code : https://github.com/tchapgouv/tchap-web-v4/blob/0a54d6f17a9b19de995a007b497ea70d2d6361c3/webpack.config.js#L61..L100
If it's removed we can add it back with a patch, or move it to a separate file and import it into the webpack config.

The module used, https://webpack.js.org/plugins/normal-module-replacement-plugin/, has a documented version for webpack 5 (element uses 4) and doesn't look like it's being deprecated.

So that looks straightforward, as a temporary measure.

[MarcWadai]

Comment ça marche

Le module api nous fourni un groupe d’outil permettant de créer des modules qui qui vont être appliquer à l’application durant la phase de compilation. Permettant ainsi d’override/catch certain components/evenemment du package matrix-react-sdk.

Ces modules peuvent être installé indépendamment du projet Tchap-web, dans leur prorpre repo github. Dans notre cas, pour plus de simplicité, nous allons directement l’installer dans le projet, ce qui a déjà été fait avec le module de traductions.

Avantages

• Moins de code dans matrix-react-sdk
• Moins de risque de conflits lors d’upgrade
• Une meilleure séparation des différentes features qu’on ajoute sur Tchap
• Peut potentiellement contribuer à la creation de modules pour la communauté et pousser des modifications upstream plus facilement

Inconvénients

• Dans l’utilisation de tchap, les modifications ne seront surement pas accepté upstream car pas assez générique
• Maintenir un fork du repo modul-api (surtout si nos modification ne peuvent pas être accepté upstream
• Rajoute une couche de complexité pour l’implementation de features Tchap
• Comme chaque modules est un package indépendant, on doit s’occuper de bien mettre a jour, installer les dépendances (babel, jest), faire fonctionner le build

---

Module test simple pour les utilisateurs externes

When the external user click to add or explore a room :

→ we just display a popup to indicate that he doesnt have the rights to add or explore new rooms without invitations

Steps

• Get the user homeserver info → external or not (MatrixClientPeg.safeget.getdomain()
• add a new listenner on the button clicked
• display a popup instead of the original action

Développement local

• Vous devez linker linked-dependencies/matrix-react-sdk , tchap-web-v4 et tchap-web-v4/modules/nom-de-votre-module avec matrix-react-sdk-module-api (oui ca fait bcp 😅)
• La première étape est d’ajouter ce que vous souhaitez dans le module-api. des lifecycles, des composants etc
• Puis d’instancier un nouveau module dans tchap web (dans build_config.yaml dt optionalDependencies du package.json)
• Et d’ajouter les modification dans tchap-web pour appeler les nouveaux lifecycle (avec la méthode moduleApi.invoke)

---

Il y a 3 niveaux de code a modifier :

• Module-api → si les lifecycle et composant qu’on veut utiliser n’existe pas encore
• Tchap-web → pour ajouter les modulerunner et lifecycle ajouté
• me Module en lui même qui va contenir la logique du code à appliquer. C’est lui qui va

---

D’autre idées de POC

• Améliorer l’expérience pour les externes (ex: dialog d’info quand on essaie de cliquer sur l’ajout de salon)
• popup lors d’une recherche dans un salon privé indiquant qu’on ne peut pas faire de recherche de messages ici
• Indiquer d’une manière plus claire qu’on est dans un salon public

[MarcWadai]

PR dans tchap-web : #1058
PR dans le fork de module-api : tchapgouv/matrix-react-sdk-module-api#3