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…

2 « 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:

@b_b, (je me rends compte que je ne t’ai pas répondu directement, désolé) ; oui, il s’agit bien du code que tu as pointé.

L’avis de @cerdic serait en effet éclairant.

Une autre modification qu’il semble nécessaire d’apporter : c’est nommer explicitement l’export de « config.js »
En pratique ça veut dire ecrire import { spip } from "config.js"; et non plus import { default as spip } from "config.js"; (C’est plus court, c’est un détail, et cela s’avère nécessaire pour faire un mock du module durant les tests).

Quand au nom du module « à la carte / extra »… On peut dire que l’on n’en a pas besoin immédiatement. À méditer donc.

La verif async json des formulaires fonctionne toujours très bien, et je m’en sers par exemple sur le formulaire de création de site d’un hébergeur douillet pour SPIP. Tu peux le voir en action en remplissant le formulaire, si tu mets n’importe quoi dans le nom de sous domaine et que tu tabules pour aller sur le champ suivant l’erreur apparait automatiquement. C’est pas fait en JS, mais via cette feature : on post le form et on récupère les erreurs éventuelles en JSON.

Alors oui c’est pas très connu, mais ça mériterait car une fois implémenté ça permet d’avoir un feedback d’erreur bien dynamique sur les formulaires, sans avoir à double coder en JS ET en PHP ce qui finit toujours par des bugs car l’un évolue et pas l’autre…

Donc ça serait bien de garder la feature, si il faut je peux prendre le temps de faire une maquette pour le test/debug…

1 « J'aime »

Et je complète : ça n’a rien à voir avec le plugin saisies ! Et en relisant le commit je vois que j’avais proposé une class pour une activation facile mais on a jamais mis ça en place

1 « J'aime »

Je pense aussi qu’il s’agit d’une fonctionnalité intéressante et qui mériterait d’être mise davantage en avant.
Est-on d’accord sur le fait de la déplacer dans un module « à la carte » (module référencé dans importmap, non chargé par défaut, mais appelable depuis le composant qui en fait la demande ) ?
On pourrait automatiser le chargement avec la présence un input[hidden] qui provoquerait l’insertion directe d’une balise <script> à la suite du formulaire, à la manière de ce que fait jquery.autosave.js ?

Si tu veux bien regarder la réécriture naïve (parce que peu testée) de la version ESM … en effet, ça peut aider.

Et oui, je sais bien que c’est totalement indépendant de saisies, mais les 2 fonctionnalités ne s’excluent pas, et c’est tant mieux.

Resterait la question du nommage :

  • module « à la carte » [ cvt | alacarte | form_extra | extra | … ] ?
  • sous-module « cvt_verifier » [ « verif_asynchro » | « input_verif » | « input_json_verif » | … ] ?
1 « J'aime »

J’ignorais complètement 0_o
Ce serait cool d’avoir une petite démo ou une doc, effectivement (sur programmer ?).
Le message de commit est déjà bien détaillé, il n’y aurait pas grand chose à ajouter.

1 « J'aime »

Est ce que tu as commencé à rédiger une doc de tout ça ?

Je vois qu’il y a par exemple ce commit assez détaillé avec des features intéressantes :

Ça serait bien de regrouper tout ça, même en vrac dans un pad temporaire, pour mettre en forme une future doc développeur·euses.

@documentation

Tu pourrais détailler un peu ce point ?

« config.js » désigne un module qui renvoie l’objet de configuration globale de spip et ses plugins.

Le module « ajaxCallback.js » le nécessite pour fonctionner (il doit a minima résoudre l’adresse associée à son nom)

En environnement de production, cela se fait via la balise importmap qui lie le nom « config.js » à l’adresse de la ressource calculée via #PRODUIRE (car on utilise des balises telles que #CONFIG, #CONST, voire d’autres filtres persos dans le squelette config.js.html).

Or, en mode test, ce fichier dynamique de configuration issu du serveur n’est pas accessible. Pour éviter une erreur, on fait un « mock » de ce fichier, c’est-à-dire qu’on intercepte l’importation du module et qu’on en sert une version statique et partielle, mais suffisante pour l’exécution du test.

Voir ce commit pour la mise en pratique

Ok, merci !

Est-ce que quelqu’un qui comprend assez bien la chose fera un jour une doc ?

Car si ce sont ces posts sur discourse qui sont censé faire office de documentation et d’uniques repères pour les futurs développements, alors il serait vivement bienvenu et assez urgent même de créer un tag #documentation_ici sur les posts qui servent de doc.

Ça pourrait servir pour toutes les transformatives évolutions devant mener à spip 5 : des bribes d’explications peuvent parfois être trouvées dans les forums au milieu d’autres discussions et débats, comme autant de loots dans un jeu d’exploration… mais si ce n’est pas un jeu, l’étiquette #documentation_ici permettrait de les retrouver.

Je m’interroge aussi sur la façon de pérenniser ces bouts de doc / d’informations, qui passent soit ici soit dans des logs de commits détaillés.

De mon côté, je tagge ces mails contenant des explications dans Thunderbird avec une étiquette spécifique, faute de mieux, pour pouvoir les retrouver facilement.

J’utilise aussi en local Obsidian, une appli (non libre) qui gère une arborescence de dossiers / fichiers markdown. C’est rapide et facile à utiliser pour copier/coller.
Il existe un équivalent open source : https://quartz.jzhao.xyz/

On pourrait créer un dépôt git de ces bouts de docs, avec l’avantage du versionning.

Bref, il y a des outils, mais je m’interroge sur la méthode.

Je redonne le lien que @marcimat avait publié :

Et ce lien en rapport, intéressant aussi :

Doc as code, petit guide illustré pour mieux se lancer

https://dev.to/onepoint/doc-as-code-petit-guide-illustre-pour-mieux-se-lancer-2m2k

Salut @cerdic ,

J’ai entamé la réorganisation des modules comme évoqué plus haut.

Reste la question du module pour la verif asynchrone JSON.
Est-ce que tu as eu le temps de faire quelques tests ?

Si des personnes curieuses veulent découvrir/tester depuis la branche master (à ce jour) , l’appel se fait ainsi sur un formulaire ( certains champs doivent avoir des vérifications effectives, au sens CVT ) :

<div class="wrapper">
	<div class="ajax">
	#FORMULAIRE_FOOBAR
	</div>
</div>
<script type="module">
import { formulaire_activer_verif_auto } from "ajaxCallback.js";
const form = document.querySelector("form");
formulaire_activer_verif_auto(form);
</script>

Et comme je l’avais déjà proposé : pour moi ce module a plutôt vocation à rester dans le core, mais de manière autonome (c-à-dire hors de ajaxCallBack.js).

En pratique, ça voudrait dire insérer automatiquement, via le pipeline formulaire_fond, un bout de code assez proche à la suite de chaque formulaire ayant déclaré une clé typique (_activer_verif_auto ?!) dans sa section _charger.

Dans l’idée :

<script type="module">
import { formulaire_activer_verif_auto } from "#IMPORT_JS{cvt_verifier.js}";
const form = document.querySelector("#ENV{form}");
formulaire_activer_verif_auto(form);
</script>

Avec l’avantage d’un chargement « automatique », et « à la demande ».

Et la délicate question du nommage est toujours en suspens.

3 « J'aime »