placido/prive | 2 commits
Par placido, le 26 septembre 2024 à 14h05min :
feat : Méthode de chargement alternative des ressources javascript
ref : #spip/5566
Principe : Dissocier le chargement des « libs » et le code d’initialisation
Les ressources externes (libs) sont chargées, au choix :
- via insert_head et concaténées par le compresseur (méthode classique, lorque cela concerne toutes les pages)
- occasionnellement, depuis un squelette via une directive import {fn} from #IMPORT_JS{module_foo}; si compatible (esm)
Les codes d’initialisation :
- [CONCIS] : dans la mesure du possible, on n’y fait que :
*- compléter l’objet de configuration global (anciennement spipConfig)
*- cibler les éléments
*- attacher des écouteurs d’événements
*- lancer l’exécution (et sa persistance via onAjaxLoad) ; de préférence une seule fonctionnalité à la fois
- [GLOBAL] : s’applique sur toutes les pages (repose sur #INSERT_HEAD)
- [AUTOMATIQUE] : insertion automatique du contenu au sein d’une balise <script[type="module"]/> si le chemin du fichier contient javascript/_inits/ (un peu à la manière dont les plugins peuvent présenter une feuille de style dynamique pour l’espace privé style_prive_plugin_foo.html )
- [POLYMORPHE] : fichiers statiques (.js) et dynamiques (.js.html) sont possibles.
- [ORDONNÉ] : on peut choisir dans quel ordre de la file ce code sera chargé en préfixant le nom du fichier d’un numéro (facultatif) qui fait office d’index ex : javascript/_inits/20_popup.js sera inséré (et exécuté) avant javascript/_inits/30_alert.js
- [SURCHARGEABLE] : la logique spipienne d’un plugin pouvant surcharger un fichier d’un plugin qu’il nécessite, demeure (l’index, et l’extension, sont ignorés pour la surcharge)
- [SOUPLE] : un fichier d’initialisation dont le path contient (‹ prive/ ›) ne sera appelé que pour l’espace privé.
En complément, s’il existe, pour la partie publique, un fichier d’initialisation vide (dont le nom correspond à un fichier disponible depuis prive/) alors on charge le contenu de ce dernier (un peu à la manière d’un gabarit vide de formulaire ayant déclaré des saisies)
Les avantages de cette méthode :
- Un bien meilleur contrôle sur l’enchaînement et l’ordre d’exécution dans la page (
?var_mode=debug_jsoffrant même un contrôle visuel direct). - Le bénéfice inhérent à la balise
<script[type="module"]/>qui opère de manière différée : plus la peine de s’assurer qu’une lib est bien chargée avant de lancer l’exécution. - Simplifie la déclaration des variables de configuration, jusqu’ici déclarées en ligne dans le
<head>via#INSERT_HEAD_CSS(exwindow.mediabox_settings) - Vitesse de déploiement : Pas la peine de déclarer X entrées dans le pipeline
insert_head - Réemploi possible espace privé <=> partie publique
Quelques exemples (pas si) farfelus rendus possibles :
- Je suis hyperoptimiste et j’estime que mon tout nouveau site n’a besoin pas besoin de supporter les usages
legacy
echo '// neant' > squelettes/javascript/_inits/retrocompat.js
- Je veux redéfinir le style embarqué des éléments lors d’une animation de chargement (
.loading)
touch squelettes/javascript/_inits/15_style_anim.js
Puis dans le fichier :
import { default as spip } from "config.js";
spip.css.animateLoading = 'background-color:red;';
etc…
Ajouté
javascript/_init.js.html
javascript/_init.js_fonctions.php
javascript/_inits/03_prive_config.js.html
javascript/_inits/05_retrocompat.js.html
javascript/_inits/20_ajaxbloc.js
javascript/_inits/30_ajaxform.js
Modifié
squelettes/inclure/head.html
==============================
Par placido, le 26 septembre 2024 à 13h36min :
change : ajaxCallback.js réécrit en javascript natif
ref : #spip/5566
- Le fichier gère notamment le rechargement des inclures ajaxés, des formulaires et des boutons d’action
- Il devient un module ESM dont les fonctions utilitaires (
onAjaxLoad,parametre_url, …) doivent désormais être appelées via la syntaxeimporttypique des modules. - Le fichier est ventilé en sous-modules pour faciliter lisibilité et maintenabilité, ce qui requiert une étape de compilation ou « build » : (ex :
bun run buildoubun run watchdepuis le dossierprive/javascript/ajaxCallback.js) - Exit les dépendances à
jQueryetjquery.form.js - Un fichier
retrocompat.jsest dévolu à assurer une certaine retro-compatibilité.
Changements notables :
Migration de l’objet spipConfig
Ce dernier n’est plus une propriété directe de window (spipConfig.core) ; mais se trouve localisé dans un module JS (config.js.html). Étant déclaré dans le pipeline importmap, on peut y accéder et modifier les valeurs de façon persistante comme ceci :
<script type="module">
import { default as spip } from "config.js";
console.log(spip);
spip.ajax_image_searching = "⌛";
</script>
Autres changements :
- On peut activer le mode verbeux (log) simplement grâce au paramètre d’url
?var_mode=debug_js. Des modules tiers peuvent s’appuyer sur ce dernier :
import {log} from "ajaxCallBack.js";
log('quelque_chose');
- Les fonctions d’animations . Pour l’heure, seule
animateLoading()est personnalisable via l’objet de config (spip.css.animateLoading) - La fonction
positionner()implémente désormais scrollIntoView, et l’ajustement de la marge verticale est à personnalisée manuellement via la règle CSS :scroll-margin - Les fonctions
jQuery.spip.intercepted.xxx, sont considérées totalement dépréciées, et supprimées. - Les fonctions
jQuery.uaMatch, etjQuery.browsersont considérées dépréciées, mais demeurent dans le fichier résidueljquery.browser.jsle temps d’opérer la transition avec les fonctions de l’espace privé qui les nécessitent.
Ajouté
javascript/ajaxCallback.min.js
javascript/ajaxCallback/package.json
javascript/ajaxCallback/src/ajaxbloc.js
javascript/ajaxCallback/src/ajaxform.js
javascript/ajaxCallback/src/anim.js
javascript/ajaxCallback/src/cvt_verifier.js
javascript/ajaxCallback/src/history.js
javascript/ajaxCallback/src/log.js
javascript/ajaxCallback/src/main.js
javascript/ajaxCallback/src/reader.js
javascript/ajaxCallback/src/url.js
javascript/config.js.html
javascript/jquery.browser.js
javascript/retrocompat.js
javascript/retrocompat.min.js
squelettes/inclure/importmap.html
squelettes/inclure/importmap_fonctions.php
Modifié
CHANGELOG.md
javascript/ajaxCallback.js