Programmation PHP avec Symfony/Stimulus

Programmation PHP avec Symfony

1. Introduction
2. Service
   • Contrôleur
   • Commande
3. Composant
   • HttpClient
   • Évènement
   • Formulaire
   • Mailer
   • Stimulus
4. Bundle
   • Twig
   • Doctrine
   • API

Introduction

Stimulus est le framework JavaScript officiel de Symfony. Il est installé avec Webpack :

composer require symfony/webpack-encore-bundle

Pour utiliser le framework React.js dans Symfony :

composer require symfony/ux-react

Lancer ensuite npm run watch pour que le code JS exécuté soit toujours identique à celui écris. Cela va lancer le npm run build en cours de frappe.

Hello World on ready

Partie Twig

La première étape consiste à connecter un contrôleur Stimulus depuis un fichier Twig, en lui injectant les variables dont il a besoin. Ex :

<div {{ stimulus_controller('ticket', {
    subject: 'Hello World'
} )}}>
</div>

Une syntaxe alternative est :

<div data-controller="ticket"
    data-ticket-subject-value="Hello World"
>
</div>

Partie Stimulus

Dans le fichier assets/controllers/ticket_controller.js, créer une classe héritant de Stimulus :

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
    static values = {
        subject: String,
        body: String,
    };

    connect() {
        alert(this.subjectValue);
    }
}

Rafraichir la page du Twig pour voir le message du code exécuté par Stimulus.

Explication : la fonction connect est un mot réservé désignant une fonction prédéfinie qui s'exécute automatiquement quand le contrôleur Stimulus est connecté au DOM de la page. C'est donc un mécanisme similaire à la méthode magique PHP __contruct. De plus, il existe aussi disconnect comparable à la méthode PHP __destruct.

Si le contrôleur Stimulus est dans un sous-dossier, la syntaxe des séparateurs de dossiers côté Twig n'est pas "/" mais "--".

Ex : stimulus_controller('sousDossier--ticket', ...) connectera le fichier assets/controllers/sousDossier/ticket_controller.js.

Hello World on click

On utilise l'action "click".

Partie Twig

<div {{ stimulus_controller('ticket', {
    subject: 'Hello World'
} )}}>
    <button {{ stimulus_action('ticket', 'onCreate', 'click') }}>
        Créer un ticket
    </button>
</div>

Une syntaxe alternative est :

<div data-controller="ticket"
    data-ticket-subject-value="Hello World"
>
    <button data-action="click->ticket#onCreate" >
        Créer un ticket
    </button>
</div>

Partie Stimulus

Par rapport au premier exemple, on remplace juste "connect" par une méthode maison.

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
    static values = {
        subject: String,
        body: String,
    };

    onCreate() {
        alert(this.subjectValue);
    }
}

Rafraichir la page du Twig et cliquer sur le bouton pour voir le message du code exécuté par Stimulus.

Exemple où Stimulus appelle React

On veut maintenant déclencher l'ouverture d'une fenêtre modale React.js en cliquant sur un bouton de la page du Twig. Il faut donc que le contrôleur Stimulus appelle une classe React.

• ticket_controller.js :

import { Controller } from "@hotwired/stimulus";
import ReactDOM from "react-dom";
import React from "react";
import HelloWorld from "./HelloWorld";

export default class extends Controller {
    static values = {
        subject: String,
        body: String,
    };

    onCreate() {
        ReactDOM.render(<HelloWorld subject={this.subjectValue} />, this.element);
    }
}

• HelloWorld.js :

export default function (props) {
    alert(props.subject);
}

 Pour appeler directement un composant React depuis le Twig, il existe aussi react_component().