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 Subscribe¡Sólo quedan dos recetas por actualizar! La siguiente es webpack-encore-bundle. Esta receta ha cambiado bastante a lo largo del último año y medio, así que dependiendo de lo antigua que sea tu versión, esto podría ser fácil.... o quizás no tan fácil. Digamos que puede ser "interesante".
Para ver con qué estamos trabajando, ejecuta:
git status
Vale: tenemos una serie de archivos modificados y eliminados y algunos conflictos. Vamos a revisarlos primero, empezando por assets/app.js. Como puedes ver, he habilitado una funcionalidad personalizada de Collapse desde bootstrap. No estoy seguro de por qué esto entraba en conflicto, pero es una solución fácil.
| ... lines 1 - 13 | |
| // activates collapse functionality | |
| import { Collapse } from 'bootstrap'; |
Lo siguiente es bootstrap.js. Este puede ser un archivo nuevo para ti, dependiendo de la antigüedad de tu receta. La función de este archivo es inicializar la biblioteca JavaScript de Stimulus y cargar todos los archivos del directorio controllers/ como controladores de Stimulus. En este caso, ya tenía este archivo, pero aparentemente la expresión de cómo encuentra los archivos cambió ligeramente. La nueva versión es probablemente mejor, así que vamos a utilizarla.
| ... lines 1 - 3 | |
| export const app = startStimulusApp(require.context( | |
| ... lines 5 - 6 | |
| /\.(j|t)sx?$/ | |
| )); | |
| ... lines 9 - 12 |
El siguiente es controllers.json. Tampoco estoy seguro de por qué está en conflicto... Tengo la sensación de que puede que haya añadido estos archivos manualmente en el pasado... y ahora la actualización de la receta los está volviendo a añadir. Quiero mantener mi versión personalizada.
| { | |
| "controllers": { | |
| "@symfony/ux-chartjs": { | |
| ... lines 4 - 7 | |
| } | |
| }, | |
| "entrypoints": [] | |
| } |
Lo siguiente es styles/app.css. Aquí ocurrió lo mismo. La receta añadió este archivo... hasta el fondo... con sólo un color de fondo del cuerpo. Debo haber añadido este archivo manualmente... ¡tan conflictivo! Mantén todas nuestras cosas personalizadas y... ¡bien!
| @import "~bootstrap"; | |
| body { | |
| font-family: spartan; | |
| color: #444; | |
| } | |
| ... lines 7 - 138 |
El último conflicto está aquí abajo en package.json. Este es un poco más interesante. Mi proyecto ya utilizaba Stimulus: tengo stimulus aquí abajo y también stimulus-bridge de Symfony . La receta actualizada tiene ahora @hotwired/stimulus, y en lugar de "@symfony/stimulus-bridge": "^2.0.0", tiene"@symfony/stimulus-bridge": "^3.0.0".
Entonces, ¿qué ocurre? En primer lugar, se ha lanzado la versión 3 de Stimulus. ¡Sí! Pero... la única diferencia real entre la versión 2 y la 3 es que cambiaron el nombre de la biblioteca destimulus a @hotwired/stimulus. Y para que la versión 3 funcione, también necesitamos la versión 3 de stimulus-bridge... en lugar de la 2.
Así que tomemos esto como una oportunidad de oro para actualizar de Stimulus 2 a Stimulus 3. Como ventaja, después de actualizar, obtendrás nuevos y geniales mensajes de depuración en la consola de tu navegador cuando trabajes con Stimulus localmente.
De todos modos, mantén @hotwired/stimulus... pero muévelo hacia arriba para que esté en orden alfabético. Utiliza la versión 3 de stimulus-bridge... y aunque realmente no importa, ya que esta restricción de versión permite cualquier versión 1, también utilizaré la nueva versiónwebpack-encore... y luego arreglaré el conflicto. Ah, y asegúrate de eliminar stimulus. No queremos que la versión 2 de stimulus ande por ahí confundiendo las cosas.
| { | |
| "devDependencies": { | |
| "@hotwired/stimulus": "^3.0.0", | |
| ... line 4 | |
| "@symfony/stimulus-bridge": "^3.0.0", | |
| ... line 6 | |
| "@symfony/webpack-encore": "^1.7.0", | |
| ... lines 8 - 13 | |
| }, | |
| ... lines 15 - 22 | |
| } |
¡Fantástico! Como acabamos de cambiar algunos archivos en package.json, busca la pestaña de tu terminal que está rockeando a Encore, pulsa "ctrl" + "C", y luego ejecuta:
yarn install
o
npm install
¡Perfecto! Ahora reinicia Encore:
yarn watch
Y... ¡falla!? Es un mensaje de error muy largo... pero al final dice
> `assets/controllers/answer-vote_controller.js contains a reference to the
file "stimulus"`.
La parte más importante, aunque aburrida, de la actualización de Estímulo 2 a 3 es que tienes que entrar en todos tus controladores y cambiarimport { Controller } from 'stimulus' aimport { Controller } from '@hotwired/stimulus'.
| import { Controller } from '@hotwired/stimulus'; | |
| ... lines 2 - 22 |
Pero es así de sencillo. También voy a eliminar hello_controller.js... esto es sólo un controlador de ejemplo que nos dio la receta. En el último controlador, cambia a @hotwired/stimulus.
| import { Controller } from '@hotwired/stimulus'; | |
| ... lines 2 - 15 |
¡Impresionante! Vuelve a parar yarn watch.. y vuelve a ejecutarlo:
yarn watch
¡Diablos! ¡Seguimos obteniendo un error! Esto viene de@symfony/ux-chartjs/dist/controller.js.
En mi proyecto, he instalado uno de los paquetes UX de Symfony, que son paquetes de PHP que también proporcionan algo de JavaScript. Aparentemente, el JavaScript de ese paquete sigue haciendo referencia a stimulus en lugar de al nuevo @hotwired/stimulus. Lo que esto me dice es que probablemente tengo que actualizar ese paquete PHP. Así que, encomposer.json, aquí abajo en symfony/ux-chartjs, si investigas un poco, descubrirás que hay una nueva versión 2 que soporta el Estímulo 3.
| { | |
| ... lines 2 - 5 | |
| "require": { | |
| ... lines 7 - 37 | |
| "symfony/ux-chartjs": "^2.0", | |
| ... lines 39 - 45 | |
| }, | |
| ... lines 47 - 109 | |
| } |
Después de cambiar eso, busca la pestaña principal de tu terminal y ejecuta
composer up symfony/ux-chartjs
para actualizar ese paquete. Y... ¡qué bien! Hemos actualizado a la versión 2.1.0. Ahora quiere que ejecutemos
npm install --force
o
yarn install --force
Esto reinicia el JavaScript del paquete. Una cosa que quiero destacar de este paquete en particular es que cuando actualizamos a la versión 2 en nuestro archivocomposer.json, Flex actualizó nuestra dependencia de chart.js de la versión 2.9 a la 3.4. Esto se debe a que el JavaScript de esta nueva versión está pensado para funcionar conchart.js 3 en lugar de chart.js 2. Flex hizo ese cambio por nosotros. No tenemos que hacer nada aquí, pero es bueno tenerlo en cuenta.
¡Por fin! Deberíamos estar listos para empezar. Ejecuta
yarn watch
y... ¡ya está! ¡Construcción exitosa! En la pestaña principal del terminal, vamos a añadir todo... ya que hemos arreglado todos los conflictos... ¡y a confirmar!
Ahora, queridos amigos, estamos en la última actualización. Se trata de zenstruck/foundry. Ésta es fácil. Ejecuta:
git status
Es, una vez más, la configuración del entorno que va a un archivo principal. Así que vamos a confirmarlo
| when@dev: | |
| # See full configuration: https://symfony.com/bundles/ZenstruckFoundryBundle/current/index.html#full-default-bundle-configuration | |
| zenstruck_foundry: | |
| # Whether to auto-refresh proxies by default (https://symfony.com/bundles/ZenstruckFoundryBundle/current/index.html#auto-refresh) | |
| auto_refresh_proxies: true | |
| when@test: |
Y... ¡hemos terminado! ¡Todas nuestras recetas están actualizadas! Y recuerda que parte de la razón por la que hemos hecho todo esto es porque algunas de esas recetas han sustituido el viejo código obsoleto por el nuevo código brillante. Con suerte, cuando actualicemos la página, nuestro sitio no sólo seguirá funcionando, sino que tendrá menos depreciaciones. En mi proyecto, si refresco unas cuantas veces, parece que me estoy asentando en unas 22. ¡Progreso!
Tenemos que aplastar esas depreciaciones. Pero a continuación, otra cosa que tenemos que hacer es... ¡actualizar nuestro código a PHP 8! ¡Este es otro punto en el que Rector puede ayudar!
Hey thephilosoft!
stimulus-use DOES support Stimulus v3, but they haven't put out a proper tag for it yet :/ (which I think is what you meant by beta version). Version v0.50.0-2 of stimulus-use supports stimulus v3, but that's a beta, so you won't get it automatically. Still, if you put that version directly in your package.json, you can get it.
It's funny, it's taken SO long for them to tag a stable release for v3 that people have just started using v0.50.0-2 anyways. It's now downloaded almost 5x more times than the official stable. Hopefully they'll put out a proper release soon.
Cheers!
Maestro
| posted hace 1 mes
My web profiler toolbar disappeared after these updates, not sure after which update. How do I get it back?
Hey @Maestro
That's odd. Do you get any console errors in your browser? Also, check the "network" tab for errors, there might be a hint
Ok, so the web profiler is not even requested. I'm guessing you don't have installed the WebProfilerBundle, if you don't install it by running composer require symfony/web-profiler-bundle in case you do, double check that you have a web_profiler.yaml file inside the config/routes directory
Dan_M
| posted hace 11 meses
@weaverryan,
After working through this course with your code, I repeated it with my older project based on Symfony 5 and React. After doing all the upgrades, I can't get the NodeJS crypto library to work. Evidently this has to do with a breaking change in Webpack where polyfills were removed. That must be what you meant by "interesting."
Anyway, I've tried adding .addPlugin(new NodePolyfillPlugin()) to my webpack.config.js, and I tried adding fallbacks from crypto to crypto-browserify, and stream to readable-stream. With either of the changes, the project compiles and crypto-browserify is loaded, but then it fails on a problem in crypto-browserify.
How do I overcome this hurdle?
Hey @Dan_M!
Hmm, yes, I vaguely remember this issue - Webpck 5 no longer polyfills crypto. But, I never actually hit any problem with this. My first guess would be "upgrade all of your node dependencies" and try it again. Have you tried that - e.g. a yarn upgrade (but also yarn outdated to see what version in package.json need to be updated)?
Cheers!
Thanks @weaverryan!
Doing yarn upgrade did upgrade an embarrassing number of node modules, and yarn outdated gives me a long list of tasks to go through. (sigh)
It turns out that including .addPlugin(new NodePolyfillPlugin()) to my webpack.config got me really close. I also had to patch cipher-base/index.js to require "readable-stream".Transform instead of "stream".Transform. I suspect there is magic in webpack that I could use to make that happen, but I haven't figured that out yet.
Cheers!
// composer.json
{
"require": {
"php": "^8.0.2",
"ext-ctype": "*",
"ext-iconv": "*",
"babdev/pagerfanta-bundle": "^3.6", // v3.6.1
"composer/package-versions-deprecated": "^1.11", // 1.11.99.5
"doctrine/annotations": "^1.13", // 1.13.2
"doctrine/dbal": "^3.3", // 3.3.5
"doctrine/doctrine-bundle": "^2.0", // 2.6.2
"doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.2
"doctrine/orm": "^2.0", // 2.11.2
"knplabs/knp-markdown-bundle": "^1.8", // 1.10.0
"knplabs/knp-time-bundle": "^1.18", // v1.18.0
"pagerfanta/doctrine-orm-adapter": "^3.6", // v3.6.1
"pagerfanta/twig": "^3.6", // v3.6.1
"sensio/framework-extra-bundle": "^6.0", // v6.2.6
"sentry/sentry-symfony": "^4.0", // 4.2.8
"stof/doctrine-extensions-bundle": "^1.5", // v1.7.0
"symfony/asset": "6.0.*", // v6.0.7
"symfony/console": "6.0.*", // v6.0.7
"symfony/dotenv": "6.0.*", // v6.0.5
"symfony/flex": "^2.1", // v2.1.7
"symfony/form": "6.0.*", // v6.0.7
"symfony/framework-bundle": "6.0.*", // v6.0.7
"symfony/mailer": "6.0.*", // v6.0.5
"symfony/monolog-bundle": "^3.0", // v3.7.1
"symfony/property-access": "6.0.*", // v6.0.7
"symfony/property-info": "6.0.*", // v6.0.7
"symfony/proxy-manager-bridge": "6.0.*", // v6.0.6
"symfony/routing": "6.0.*", // v6.0.5
"symfony/runtime": "6.0.*", // v6.0.7
"symfony/security-bundle": "6.0.*", // v6.0.5
"symfony/serializer": "6.0.*", // v6.0.7
"symfony/stopwatch": "6.0.*", // v6.0.5
"symfony/twig-bundle": "6.0.*", // v6.0.3
"symfony/ux-chartjs": "^2.0", // v2.1.0
"symfony/validator": "6.0.*", // v6.0.7
"symfony/webpack-encore-bundle": "^1.7", // v1.14.0
"symfony/yaml": "6.0.*", // v6.0.3
"symfonycasts/verify-email-bundle": "^1.7", // v1.10.0
"twig/extra-bundle": "^2.12|^3.0", // v3.3.8
"twig/string-extra": "^3.3", // v3.3.5
"twig/twig": "^2.12|^3.0" // v3.3.10
},
"require-dev": {
"doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.1
"phpunit/phpunit": "^9.5", // 9.5.20
"rector/rector": "^0.12.17", // 0.12.20
"symfony/debug-bundle": "6.0.*", // v6.0.3
"symfony/maker-bundle": "^1.15", // v1.38.0
"symfony/var-dumper": "6.0.*", // v6.0.6
"symfony/web-profiler-bundle": "6.0.*", // v6.0.6
"zenstruck/foundry": "^1.16" // v1.18.0
}
}
https://github.com/stimulus... though still does not support stimulus v3 which was heavily advertised in different courses 😅 though beta version is available it's half a year without updates...