SymfonyCasts stands united with the people of Ukraine
If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeAhora podemos crear controladores Stimulus personalizados con facilidad. La otra mitad de StimulusBundle es la posibilidad de obtener más controladores Stimulus gratuitos instalando un paquete UX. ¡Añadamos uno y veamos cómo funciona!
Empecemos por añadir Turbo. En tu terminal, di:
composer require symfony/ux-turbo
Ésta es la parte más jugosa: al igual que cuando añadimos Stimulus, no necesitas hacer absolutamente nada más para configurarlo. Actualiza y... ¡simplemente funciona! Turbo elimina la necesidad de actualizar toda la página. Ve a tus herramientas de Red y haz clic en "Fetch/XHR". Despejemos esto para poder verlo todo. Perfecto. Entonces, si hacemos clic aquí arriba... ¡podrás ver que esto procede de una llamada AJAX! Sí, ya no se actualiza la página. Así que Turbo simplemente funciona. No hay ningún sistema de construcción que se interponga, y eso es hermoso.
En la práctica, esto funciona porque se carga un nuevo archivo JavaScript llamadoturbo_controller.js. Filtra las llamadas de red a JavaScript... y actualiza, porque las he borrado. ¡Ya está! Nuestra página carga turbo_controller.js y eso importa @hotwired/turbo, que inicia Turbo.
Abre importmap.php. Cuando instalamos el paquete UX Turbo, su receta añadió esta nueva entrada @hotwired/turbo.
| ... lines 1 - 15 | |
| return [ | |
| ... lines 17 - 29 | |
| '@hotwired/turbo' => [ | |
| 'url' => 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm', | |
| ], | |
| ]; |
Este es un patrón muy común con los paquetes UX: si un paquete UX depende de un paquete de terceros, su receta añadirá ese paquete a tu importmap automáticamente. El resultado es que, cuando se hace referencia a ese paquete -como import '@hotwired/turbo' -, simplemente funciona.
La verdadera pregunta es: ¿quién carga turbo_controller.js, que vive en las profundidades del paquete PHP symfony/ux-turbo?
La respuesta es: el mismo truco que aprendimos hace un momento. Busca controllers y abre ese archivo en una pestaña nueva. Éste es el archivo dinámico que construye StimulusBundle. Resulta que busca paquetes en nuestro directorio assets/controllers/, que son estos dos, y lee el archivo assets/controllers.json. Cuando instalamos UX Turbo, añadió esta nueva sección aquí, que es donde activamos los distintos controladores. Activó uno llamado turbo-core con "enabled": true y añadió otro desactivado con "enabled": false. Así que cuando se construye este archivo, analiza el archivo assets/controllers.json, encuentra los controladores que hemos activado y los añade aquí.
| { | |
| "controllers": { | |
| "@symfony/ux-turbo": { | |
| "turbo-core": { | |
| "enabled": true, | |
| "fetch": "eager" | |
| }, | |
| "mercure-turbo-stream": { | |
| "enabled": false, | |
| "fetch": "eager" | |
| } | |
| } | |
| }, | |
| "entrypoints": [] | |
| } |
El resultado final es que importa ese archivo de controladores aquí y lo exporta para que el archivo loader.js pueda registrarlo en Stimulus. Así, cualquier controlador enassets/controllers/ o en este archivo se registra automáticamente.
Vuelve a base.html.twig. Cuando instalamos StimulusBundle, su receta venía con regalos, uno de los cuales era este ux_controller_link_tags(). Ahora mismo, eso no hace nada. Sin embargo, algunos paquetes UX vienen con archivos CSS. Los encontrarás bajo una clave llamada autoimport, que la receta añadirá bajo el controlador. Este ux_controller_link_tags() encuentra todos los archivos CSS de todos los controladores que tengas activados, y los emite. Nada demasiado sofisticado.
A continuación: vamos a aprender una cosa más sobre Stimulus, que resulta ser una de mis cosas favoritas: cómo hacer que nuestros controladores sean perezosos.
Hey,
It looks like something is not fully configured, or maybe some services are cached. It will be better to double-check a version of StimulusBundle and maybe try to re-install or update it.
Did you get it on the course code?
Cheers!
I've reinstalled symfony/stimulus-bundle, same issue.
I do have webpack encore installed, though -- could there be a conflict? Can both be used simultaneously?
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{{ ux_controller_link_tags() }}
{% endblock %}
there could be a version conflict, can you please share what exact version of bundles you have installed (stimulus one and encore)?
cheers!
// composer.json
{
"require": {
"php": ">=8.1",
"ext-ctype": "*",
"ext-iconv": "*",
"babdev/pagerfanta-bundle": "^4.0", // v4.2.0
"doctrine/doctrine-bundle": "^2.7", // 2.10.0
"doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.4
"doctrine/orm": "^2.12", // 2.15.2
"knplabs/knp-time-bundle": "^1.18", // v1.20.0
"pagerfanta/doctrine-orm-adapter": "^4.0", // v4.1.0
"pagerfanta/twig": "^4.0", // v4.1.0
"stof/doctrine-extensions-bundle": "^1.7", // v1.7.1
"symfony/asset": "6.3.*", // v6.3.0
"symfony/asset-mapper": "6.3.*", // v6.3.0
"symfony/console": "6.3.*", // v6.3.0
"symfony/dotenv": "6.3.*", // v6.3.0
"symfony/flex": "^2", // v2.3.1
"symfony/framework-bundle": "6.3.*", // v6.3.0
"symfony/http-client": "6.3.*", // v6.3.0
"symfony/monolog-bundle": "^3.0", // v3.8.0
"symfony/proxy-manager-bridge": "6.3.*", // v6.3.0
"symfony/runtime": "6.3.*", // v6.3.0
"symfony/stimulus-bundle": "^2.9", // v2.9.1
"symfony/twig-bundle": "6.3.*", // v6.3.0
"symfony/ux-turbo": "^2.9", // v2.9.1
"symfony/web-link": "6.3.*", // v6.3.0
"symfony/yaml": "6.3.*", // v6.3.0
"twig/extra-bundle": "^2.12|^3.0", // v3.6.1
"twig/twig": "^2.12|^3.0" // v3.6.1
},
"require-dev": {
"doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.4
"symfony/debug-bundle": "6.3.*", // v6.3.0
"symfony/maker-bundle": "^1.41", // v1.49.0
"symfony/stopwatch": "6.3.*", // v6.3.0
"symfony/web-profiler-bundle": "6.3.*", // v6.3.0
"zenstruck/foundry": "^1.21" // v1.33.0
}
}
This is great, I didn't know about the ux_controller_link_tags().
Alas, when I try to use it I get
Unable to load the "Symfony\UX\StimulusBundle\Twig\UxControllersTwigRuntime" runtime
I think all my bundles and recipes are current, any idea where to look to solve this?