Programmation PHP avec Symfony/Stimulus
Introduction
modifierStimulus 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
modifierPartie Twig
modifierLa 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
modifierDans 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
modifierOn 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
modifierPar 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
modifierOn 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