Programmation PHP avec Symfony/Stimulus
Introduction modifier
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
Partie Twig modifier
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
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.
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
On utilise l'action "click"[4].
Partie Twig modifier
<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
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
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); }
react_component()
.Références modifier
- ↑ https://symfony.com/blog/new-in-symfony-the-ux-initiative-a-new-javascript-ecosystem-for-symfony#symfony-ux-building-highly-interactive-applications-by-leveraging-javascript-giants
- ↑ https://symfony.com/bundles/ux-react/current/index.html
- ↑ https://stimulus.hotwired.dev/reference/lifecycle-callbacks
- ↑ https://stimulus.hotwired.dev/reference/actions