Concepts de Base & Architecture

Cycle de Vie

HAL s'initialise automatiquement au chargement de la page. Il parcourt le DOM pour rechercher les directives et les composants à initialiser.

De plus, HAL observe en permanence les changements dans le DOM. Si un élément est ajouté dynamiquement, ou si un attribut contenant une directive est modifié ou ajouté, HAL le détecte automatiquement et initialise ou met à jour le comportement correspondant.

Système de Directives

Les directives sont des attributs HTML spéciaux qui ajoutent du comportement aux éléments. Elles sont préfixées par @.

Syntaxe : *@{verbe}:{decorateur}.{parametre}="{valeur}"*

• Verbe : L'action à effectuer (ex: add-class).
• Paramètre : Arguments supplémentaires pour l'action (ex: .target).
• Décorateur : Modificateurs conditionnels (ex: lg, hover - en développement).

Directives Nommées (Actions Multiples)

Par défaut, une directive est "anonyme". Cela signifie que vous ne pouvez utiliser qu'une seule fois un type de directive (comme @add-class) sur un même élément.

Cependant, il est parfois nécessaire d'exécuter plusieurs fois la même action sur un même événement, mais avec des paramètres différents. Par exemple : ajouter une classe à l'élément cliqué ET ajouter une autre classe à un élément parent.

Pour cela, HAL permet de nommer les directives en ajoutant un préfixe avant le @. Cela crée une instance unique de la directive.

Syntaxe : *{nom}@{verbe}...*

Exemple :

<div @add-class="active" parent@add-class="parent-active" parent@add-class.target="#parent-element">Cliquez-moi</div>

Dans cet exemple :

1. @add-class="active" : Directive standard (anonyme). Ajoute active à l'élément lui-même.
2. parent@add-class="parent-active" : Directive nommée "parent". Elle est traitée indépendamment.
3. parent@add-class.target="#parent-element" : Paramètre associé à la directive nommée "parent".

Grâce à ce mécanisme de nommage, les deux actions add-class sont exécutées indépendamment lors du clic.