====== Alpine.js ======

  * https://alpinejs.dev/
  * https://github.com/alpinejs/alpine/

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/

  * [[https://www.weblogin.fr/blog/119-alpinejs-le-framework-js-entre-jquery-et-vuejs|AlpineJS le framework JS entre JQuery et VueJS]]
  * [[https://laravel-news.com/alpine-js-intersect-persist-trap|New Alpine.js Plugins: Intersect, Persist, and Trap]]
    * [[https://alpinejs.dev/plugins/intersect|Intersect plugin]] attribute to an element with a callback that should be ran whenever that element "intersects" with the user's viewport.
    * [[https://alpinejs.dev/plugins/persist|Persist plugin]] provides a new magic method for integrating your Alpine dataset with localStorage.
    * The [[https://alpinejs.dev/plugins/trap|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.
  * [[https://www.alpinetoolbox.com/|alpinetoolbox]] quick start, examples, tools are all open source and built using Alpine.js and mostly [[informatique/web/tailwind_css|Tailwind CSS]].
  * [[https://github.com/alpine-collective/awesome|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
  * [[https://github.com/markmead/alpinejs-component|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 =====

  * https://dev.to/lynphp/alpinejs-to-jurisjs-migration-pure-debuggable-islandable-solution-4hp
  * https://jurisjs.com/

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'' :
<code html>
<div class="mb-3">
 <label for="rirSelect" class="form-label">Select RIR(s):</label>
 <select id="rirSelect" class="form-select" multiple
    @change="filterRirs($event.target.selectedOptions)">
  <template x-for="rir in guiData.rirs" :key="rir.key">
   <option x-bind:value="rir.key" x-text="rir.attributes.label"></option>
  </template>
 </select>
</div>
</code>

Version avec bouton pour supprimer la sélection et désactiver ce bouton quand aucune sélection ; utilise un ''x-data'' :
<code html>
<div class="mb-3" x-data="{selectedOptions:[]}">
 <label for="rirSelect" class="form-label">Select RIR(s):</label>
 <button class="btn btn-outline-primary btn-sm"
   x-bind:disabled="selectedOptions.length==0"
   @click="selectedOptions=[];filterRirs()"
   >All</button>
 <select id="rirSelect" class="form-select" multiple
   x-model="selectedOptions" @change="filterRirs(selectedOptions)"
   >
  <template x-for="rir in guiData.rirs" :key="rir.key">
   <option x-bind:value="rir.key" x-text="rir.attributes.label"></option>
  </template>
 </select>
</div>
</code>