Study : deprecaction of customisations and usage of module-api

estellecomment commented 1 year ago

Customisations is being deprecated in favor of Module API. https://github.com/vector-im/element-web/pull/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.

[x] when will they be deleted ? "later"
[x] why are they deleted ? "in favor of module API". Can't find more info.
[ ] what can we move to module API ?
[x] 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 commented 10 months ago

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 commented 2 months ago

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 :

Untitled

→ 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 commented 2 months ago

PR dans tchap-web : https://github.com/tchapgouv/tchap-web-v4/pull/1058 PR dans le fork de module-api : https://github.com/tchapgouv/matrix-react-sdk-module-api/pull/3

tchapgouv / tchap-web-v4