BaseComponent

La librairie base-component fournit une classe abstraite en TypeScript qui va vous permettre la création de composants HTML. A vous de définir la complexité de vos composants et des interactions possibles.

Ce n'est pas un framework, il n'y a pas de dépendances (donc pas de CVE), mais cela vous laisse la possibilité de créer des applications WEB structurées et facilement maintenables, car c'est du HTML de base !

A vous de créer votre projet single page en vanilla-js 😊

Installation

Assurez-vous d'avoir un environnement TypeScript configuré.

npm install --save-dev @diyfr/base-component

Utilisation

Hériter de BaseComponent Pour utiliser BaseComponent, vous devez créer une nouvelle classe qui hérite de BaseComponent et implémente la propriété element.

importBaseComponentfrom'@diyfr/base-component';classMyComponentextendsBaseComponent{element: HTMLElement;constructor(){super();this.element=document.createElement('div');this.element.textContent='Hello, world!';}}

ou en utilisant conjointement avec la librairie @diyfr/quickdom

importBaseComponentfrom'@diyfr/base-component';import{qd}from'@diyfr/quickdom';classMyComponentextendsBaseComponent{element: HTMLElement;constructor(){super();this.element=qd('div',{className: 'mydiv',textContent: 'Hello, world!'});}}

Un exemple avec plusieurs éléments HTML est disponible sur ce repo, ici, vous y trouverez comment builder votre projet Vanilla, comment créer des interfaces evenementielles.
(Voir le composant HorizontalTab et l'utilisation de l'évènement onChangeici )

Méthodes

Ajout d'un élément

render(parent?: HTMLElement|BaseComponent): Promise<void>

Affiche l'élément dans le DOM. Si aucun parent n'est spécifié, l'élément est ajouté au body par défaut. Cette méthode est asynchrone. Ici MySecondComponent hérite aussi de BaseComponent

letdiv:HTMLDivElement=document.createElement('div');letmyCpnt:MySecondComponent=newMySecondComponent();myCpnt.render(this.element);// C'est une promessethis.element.appendChild(div);// sera ajouté à this.element avant myCpnt

Suppression d'un élément

remove(parent?: HTMLElement|BaseComponent): Promise<void>

Supprime l'élément du DOM. Si aucun parent n'est spécifié, l'élément est supprimé du body par défaut.

myComponent.remove().then(()=>{console.log('Composant supprimé');});

Initialisation

onInit: ()=>void

Cette méthode est déclenchée par votre composant après que l'élément ait été rendu dans le DOM.

classMyComponentextendsBaseComponent{element: HTMLElement;constructor(){super();this.element=document.createElement('div');this.element.textContent='Hello, world!';this.element.onInit=()=>{console.log('Composant initialisé');}}}

🚧 Cette librairie inclut également une méthode pour la mise à jour des classes CSS des éléments et une pour attendre que les éléments soient effectivement rendus dans le DOM.

MAJ Classe CSS 🚧

classListUpdate(element: HTMLElement,className: string,add: boolean)

Ajoute ou supprime une classe CSS de l'élément spécifié. Le boolean permet de définir l'ajout ou la suppression !WIP!

myComponent.classListUpdate(myComponent.element,'data-active',true);

Attendre la production d'un élément HTML 🚧

waitForRendering(itemId: string): Promise<HTMLElement|null>

Attend que l'élément avec l'ID spécifié soit rendu dans le DOM.

myComponent.waitForRendering('myElementId').then(element=>{console.log('Élément rendu :',element);});

Licence

Ce projet est sous licence MIT. Consultez le fichier LICENSE pour plus d'informations.