Modules ESM : inventaire des outils ; les nommer ; les ranger

Les personnes qui ont suivi ce chantier sont peut-être déjà un peu au courant de la nouvelle approche par module pour l’usage de fonctions javascript.

Les choses se stabilisent, et avant qu’elles ne soient inscrites plus officiellement avec la sortie de SPIP5, je vous soumets une validation/réorganisation des modules et sous-modules :

En l’état nous avons donc 4 modules distincts, (dont 2 font l’objet d’une compilation de sous-modules).

- config.js
- ajaxCallback.js
	├── ajaxbloc.js
	├── ajaxform.js
	├── anim.js
	├── css.js
	├── cvt_verifier.js
	├── history.js
	├── log.js
	├── reader.js
	└── url.js
- retrocompat.js
- presentation.js
	├── depliants.js
	├── dom-slide.js
	├── hoverClass.js
	├── logo.js
	├── perf.js
	├── puces.js
	└── reloadExecPage.js

ajaxCallback.js (15kiB minifié) a vocation à être chargé côtés public/privé
presentation.js (6kiB minifié pour l’instant) rassemble des fonctions pour le privé (mais reste appelable optionnellement pour le public)

L’idée maîtresse, est d’avoir un fichier ajaxCallback.js le plus léger possible, mais qui se suffit à lui-même pour la plupart des opérations impliquant des requêtes ajax, et les animations liées.

Je vous propose la réorganisation suivante, avant la sortie de SPIP5

- config.js
- ajaxCallback.js
	├── ajaxbloc.js
	├── ajaxform.js
	├── anim.js
	├── css.js
	├── dom-slide.js +++
	├── perf.js +++
	├── history.js
	├── log.js
	├── reader.js
	└── url.js
- retrocompat.js
- cvt.js
	├── cvt_verifier.js
	└── autosave.js (refactor depuis jquery.autosave.js)
- presentation.js
	├── depliants.js
	├── hoverClass.js
	├── logo.js
	├── puces.js
	└── reloadExecPage.js

A) Créer un nouveau module cvt.js avec outils spécifiques destinés aux formulaires (appel « à la carte » depuis chaque formulaire qui le nécessite explicitement).
Il recevrait dans un premier temps le code de cvt_verifier qui était historiquement lié à ajaxCallback.js, mais qui (je peux me tromper), semble ne jamais avoir été réellement utilisé in situ (car non documenté). Il faudrait probablement le reprendre, le tester, et s’assurer qu’il est pleinement compatible (avec le multi-étapes notamment).
Il paraît naturel d’y adjoindre la future version remaniée de jquery.autosave.js.
Une autre possibilité est d’abandonner tout bonnement ce code (quitte à le proposer plus tard, ou bien au sein du plugin saisies ?)

B) Transférer 2 sous-modules de presentation.js vers ajaxCallback.js

Car leur rôle me semble suffisamment générique/pratique pour justifier une inclusion privé/public systématique.

Dans le détail :

  • dom-slide.js : les fonctions slideUp, slideDown, slideToggle (dans une version sans jQuery), s’avère très souvent utiles ; et je me dis que les garder dans presentation.js induirait que ce dernier devienne de facto une dépendance systématique pour le public, ce qui gâche tout le principe.

  • perf.js : 2 petites fonctions throttle() et debounce() qui permettent de limiter/réguler les événements (répétitions de clics souris, resize de window,…)

Autre remarque :
presentation.js va s’étoffer avec le temps, au fur et à mesure du remaniement du code historique. Le prochain jalon étant probablement de proposer un composant bouton_toggle un peu générique…
Le sous-module depliants.js serait renommé depliants_legacy

Voilà.

Point A), point B) … à vos avis.
Si vous avez d’autres remarques (nommage, classement), c’est le moment… car la release approche…

1 « J'aime »

très bien :slight_smile:

Ça m’a l’air bien. Juste un peu dubitatif sur la partie CVT à part, ou bien par le nommage je sais pas.

En effet CVT c’est… 100% des formulaires maintenant. Et les formulaires il peut y en avoir pour tout et n’importe quoi. Si dedans, vu le nom générique « cvt » on y met tout ce qui peut être utile aux formulaires, in fine il n’y aura sûrement pas que des fonctionnalités à appeler un par un à la carte, mais parfois valant pour l’ensemble de CVT d’un coup non ? (Et au passage dans ajaxcallback ya des trucs propres aux CVT aussi pour l’ajax des formulaires il me semble, donc ça ne sera pas tous les trucs pour CVT dans ce nom « cvt ».)

Oui, c’est juste. Il faudrait trouver un nom qui suppose cette notion de « à la carte ». L’idée c’est que ce module contient des fonctionnalités qui ne s’appliquent pas d’office à tous les éléments (formulaires) , mais chacun doit individuellement l’invoquer au besoin (et rendre facultatif le chargement de cette ressource)

Typiquement, un date/time-picker renové y aurait sa place.

Après, tout ceci est de l’optimisation. Si par commodité, les membres de la communauté préfèrent n’avoir que 2 noms de modules à retenir (ajaxCallBack et presentation), ça se défend aussi.

Merci pour la récap et le plan de route !

Concernant le point A, c’est bien le code de jQuery.fn.formulaire_verifier & jQuery.fn.formulaire_activer_verif_auto & function formulaire_actualiser_erreurs qui est concerné ?

Perso j’avais complètement oublié l’existence de cette fonctionnalité, qui a été introduite par Verification asynchrone json des formulaires ajax. (1b6b72f0) · Validations · spip / spip · GitLab qu’on peut lire pour en avoir les détails d’implémentation.

Je ne suis pas certain que grand monde s’en serve, et il faudrait vérifier que ça fonctionne encore. Peut-être @cerdic pourra nous en dire plus à propos de l’utilité de garder ça.

Ça me semble une bonne piste, et ça pourrait être mis à dispo dans un plugin dédié (reste à voir comment la partie « serveur » dans public/aiguiller pourrait être déportée dans un plugin).

À propos de la question du nommage cvt, pourquoi ne pas simplement nommer ça forms ou formulaires ?

Concernant le point B, je te fais pleinement confiance :slight_smile: