Découvrez Vex, une modale s’intégrant parfaitement avec Electron

Je suis actuellement sur un projet Électron, et malheureusement toutes les ressources Javascript ne s'adaptent pas tout le temps avec facilité à ce nouveau support. Cela m'amène donc a parfois changé mes ressources de prédilection, comme par exemple les modales de dialogues, pour lesquelles je suis passé à Vex.

Vex

En quelques mots, Vex est un outil permettant de dialoguer avec vos utilisateurs grace à des modale très simple à mettre en place et a configuré. L'API est instinctive, il existe de nombreux thèmes et il est très simple d'en créer de nouveaux, ce qui permet de s'adapter à toutes les identités graphiques et OS sans trop d'efforts.

Vex avec Electron

Le gros avantage de Vex est qu'il s'intègre parfaitement (à l'usage, l'installation c'est une autre paire de manches) avec Électron, ce que toutes les library de modal ne peuvent pas dire !

Pour l'installation et la configuration justement, c'est très simple tant que vous n'utilisez pas webpack et justement, Electron a une très grosse tendance à utiliser webpack, ce n'est pas de bol du coup. Néanmoins, suivez ce petit guide et tout va bien se passer.

Premièrement, installez Vex : yarn add vex-js. Une fois que cela est fait, allez dans votre fichier main, js et posez-y les quelques lignes suivantes.

import Vex from 'vex-js'
import '../../vex-js/dist/css/vex.css'
import '../../vex-js/dist/css/vex-theme-os.css'

Vex.registerPlugin(require('vex-dialog'))
Vex.defaultOptions.className = 'vex-theme-os'

Évidemment, je pense que comme moi mélanger des imports es6 et de require vous fait mal au coeur mais bon, dites-vous qu'une fois que web pack est passé par là il ne reste que des require. Pensez bien évidemment à adapter le css et le classname au thème que vous voulez utiliser.

Maintenant que Vex est installé et configuré, vous n'avez plus qu'à l'importer dans les fichiers (côté renderer uniquement, évidemment) où vous en avez besoin pour l'utiliser ! Pour plus d'informations sur comment l'utiliser et ce que vous pouvez faire avec, je vous propose de faire un tour sur sa documentation.

Vex avec Vuex

Comme je le disais plus haut, Vex peut s'appeler dans n'importe quel fichier cote renderer, ce qui permet de l'appeler directement depuis les stores de Vuex par exemple ! 

Cela est vraiment très utile si vous avez à faire confirmer une action par votre utilisateur.