Alpine.js

AlpineJs permet de créer/gérer des composants falicement avec Javascript sans se lancer dans une SPA, très léger (<10ko gzippé et minifié) et n'utilise pas de DOM virtuel. Sa syntaxe est similaire à VueJS. C'est un bon outil pour remplacer jQuery et moins complexe que VueJs / React / Angular.

Présentation des principes d'AlpineJs : https://codewithhugo.com/alpine-tips/

AlpineJS le framework JS entre JQuery et VueJS
New Alpine.js Plugins: Intersect, Persist, and Trap
- Intersect plugin attribute to an element with a callback that should be ran whenever that element “intersects” with the user's viewport.
- Persist plugin provides a new magic method for integrating your Alpine dataset with localStorage.
- The Trap plugin provides a simple way to “trap” focus inside elements like modals and and other dialogue elements. Trapping focus is very beneficial for users using screen readers or navigating via keyboard in general.
alpinetoolbox quick start, examples, tools are all open source and built using Alpine.js and mostly Tailwind CSS.
alpine-collective / awesome pour une curation de ressources sur AlpineJs
Quelques composants https://js.hyperui.dev dont un datepicker
https://alpine-ajax.js.org/ Fourni un raccourci pour charger dynamiquement du HTML dans un élément du DOM à partir d'un appel Ajax
alpinejs-component permet de gérer des composants réutilisables.
- le tag x-component est modifiable. Voir la PR/MR https://github.com/markmead/alpinejs-component/pull/28

Comparaison avec Juris JS

Alpine.js Limitations:

Template-bound logic - Business logic mixed with HTML attributes
Debugging challenges - Hard to debug x-data and x-show in DevTools
No true islands - Global Alpine state affects entire page
Limited composability - Difficult to share logic between components
Opaque reactivity - Can't easily inspect state changes

Juris.js Advantages:

Pure JavaScript - All logic in debuggable JS functions
True islands - Each enhancement is completely isolated
Transparent state - Clear state management with full debugging support
Service injection - Clean dependency injection pattern
Selector targeting - Precise DOM targeting without attribute pollution

Tips

Select multiple

Version simple ; utilise directement l'event $event.target.selectedOptions :

<div class=&quot;mb-3&quot;>
 <label for=&quot;rirSelect&quot; class=&quot;form-label&quot;>Select RIR(s):</label>
 <select id=&quot;rirSelect&quot; class=&quot;form-select&quot; multiple
    @change=&quot;filterRirs($event.target.selectedOptions)&quot;>
  <template x-for=&quot;rir in guiData.rirs&quot; :key=&quot;rir.key&quot;>
   <option x-bind:value=&quot;rir.key&quot; x-text=&quot;rir.attributes.label&quot;></option>
  </template>
 </select>
</div>

Version avec bouton pour supprimer la sélection et désactiver ce bouton quand aucune sélection ; utilise un x-data :

<div class=&quot;mb-3&quot; x-data=&quot;{selectedOptions:[]}&quot;>
 <label for=&quot;rirSelect&quot; class=&quot;form-label&quot;>Select RIR(s):</label>
 <button class=&quot;btn btn-outline-primary btn-sm&quot;
   x-bind:disabled=&quot;selectedOptions.length==0&quot;
   @click=&quot;selectedOptions=[];filterRirs()&quot;
   >All</button>
 <select id=&quot;rirSelect&quot; class=&quot;form-select&quot; multiple
   x-model=&quot;selectedOptions&quot; @change=&quot;filterRirs(selectedOptions)&quot;
   >
  <template x-for=&quot;rir in guiData.rirs&quot; :key=&quot;rir.key&quot;>
   <option x-bind:value=&quot;rir.key&quot; x-text=&quot;rir.attributes.label&quot;></option>
  </template>
 </select>
</div>