> For the complete documentation index, see [llms.txt](https://akyos.gitbook.io/book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://akyos.gitbook.io/book/js/vanilla.md).

# Vanilla

* [ ] Définir une structure
  * [ ] Explication de chaque dossier
  * [ ] Bootstrap.js 
  * [ ] Common => header, footer, global
  * [ ] Components => tous les components de type réutilisable
  * [ ] utils => toutes nos functions qui sont réutilisable type `getMousePos, wrapAll` ou initialisation/config de modules 
  * [ ] Utilisation des functions fléchées
* [ ] Import des dépendances
* [ ] Utiliser les clones et les balises templates.
* [ ] Dans le constructor
  * [ ] Check si l'élement est définit sinon return => exemple

```
├── common
├── components
├   ├ components.js
├   ├── Preact
├   └── Vue
├── utils
├─ bootstrap.js ???
└─ main.js
```

{% hint style="info" %}
Utilisation des functions fléchées
{% endhint %}

{% hint style="info" %}
Utilisation des classes
{% endhint %}

{% hint style="info" %}
Import des dépendances
{% endhint %}

java

### Structure

Dans la plupart des cas, le JS utlisé dans les Wordpress sera du JS Vanilla, nous avons donc définit une structure afin d'organiser le code JS des sites qui est la suivante.

```
├── common
├── components
├ ├── Preact
├ └── Vue
├── utils
├─ bootstrap.js
└─ main.js
```

**Common**

Le dossier common regroupe tout les scripts utilisé dans le front du site, on pourra y retrouver des fichiers qui gèreront une seule fonctionnalité, comme un fichier gérant le chargement en Ajax de nouveau posts, ou encore un fichier gérant un Slider.

La structure de base d'une de ces classes sera la suivante :

{% code title="MyClass.js" %}

```javascript
export class MyClass {

	constructor() {
		let mainElement = document.querySelector("#my-element")
		if(!mainElement){ return }
		this.init()
	}
	
	init() {
		// code here
	}

}
```

{% endcode %}

> Note: à chaque initialisation d'une nouvelle classe, il est important de vérifier que l'élement sur lequel on va effectuer notre traitement existe, premièrement car cela permet d'éviter toute erreur js si l'élément n'existe pas, et deuxièmement cela permet de ne pas charger le code sur la page si cela n'est pas nécessaire, et donc d'éviter des baisses de performances inutiles.

**Components**

Dans certain cas assez spécifique, il est possible qu'il soit nécessaire d'utiliser un composant [Vue](https://vuejs.org/) ou [React](https://fr.reactjs.org/) afin d'intégrer une fonctionnalité sur le site. Dans ce cas, vous pouvez créer un composant à l'aide de [Petite Vue](https://github.com/vuejs/petite-vue) ou de [Preact](https://preactjs.com/), qui sont seulement des alternatives moins lourdes à Vue et React.

Vous devrez mettre vos composants dans le dossier Vue pour les composants `.vue`, et Preact pour les composants `.jsx`

Pour enregistrer vos composants, vous devrez vous rendre le fichier `components/components.js` et définir un nouveau composant.

#### Utilisation de petite-vue

Premièrement, il faudra créer dans votre template blade la vue de votre composant :

{% code title="exemple.blade.php" %}

```php
<div id="my-component">
  <span> Count : @{{ count }} </span>
  <button @click="increment"> Increment counter </button>
</div>
```

{% endcode %}

> Note : ici on utilise `@{{ count }}` plutot que `{{ count }}` afin d'indiquer à Blade de ne pas toucher notre expression et de la laisser tel qu'elle pour un traitement antièrieur par un framework js. [Plus d'infos](https://laravel.com/docs/9.x/blade#blade-and-javascript-frameworks)

Ensuite, créer un fichier pour votre composant dans `components/Vue` et définissez la logique de votre composant

Exemple :

{% code title="MyComponent.js" %}

```javascript
export function MyComponent()  
{  
    return {  
        data() {  
            return {  
                count: 0  
            }  
        },
        increment() {  
            this.count++  
        },  
        mounted() {  
            console.log(`I'm mounted!`)  
        }    
    }
}
```

{% endcode %}

Puis finalement, rendez vous dans `components/components.js` puis enregistrer votre composant

{% code title="components.js" %}

```javascript
import { MyComponent } from '@js/components/Vue/MyComponent'

export const vue = [  
    new VueComponent("MyComponent", "#my-component", MyComponent)
]
```

{% endcode %}

> **Attention** : ici le nom de votre composant doit matcher avec le nom de la fonction exporté !

#### Utilisation de Preact