Aller au contenu

Programmation PHP avec Symfony/Stimulus

Un livre de Wikilivres.

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

composer require symfony/webpack-encore-bundle

Pour utiliser le framework React.js dans Symfony[2] :

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

[modifier | modifier le wikicode]

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

[modifier | modifier le wikicode]

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[3]. 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.

Logo

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

[modifier | modifier le wikicode]

On utilise l'action "click"[4].

<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

[modifier | modifier le wikicode]

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

[modifier | modifier le wikicode]

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().