Webpack Encore 1.0 & Stimulus Bridge 2.0 Released!

Webpack Encore 1.0 & Stimulus Bridge 2.0 Released!

We’ve been busy with the Symfony UX Initiative. Today I’m excited to share the next round of updates.

Encore 1.0 Released (Webpack 5 Support)¶

        Contributed by 
        Vincent Le Biannic 
        in #645.

After 4 years (of already being stable), we’re proud to welcome Webpack Encore 1.0 to the family. What’s new? Excellent question!

Encore now uses Webpack 5, which itself introduces a lot of features. Persistent build cache: thanks to a new Encore.enableBuildCache() method, you can enjoy faster “subsequent” builds. See Encore’s index.js file for more details.

To upgrade, run: 1$ yarn upgrade "@symfony/webpack-encore@^1.0.0"

When you next execute Encore, it will probably notify you of other dependencies that you should upgrade. See the full 1.0.0 CHANGELOG.

symfony/stimulus-bridge 2.0¶ At the heart of the Symfony UX Initiative is Stimulus and the stimulus-bridge, which helps you automatically load controllers from the UX Packages as well as your own custom controllers. 2.0 brings a few awesome updates. If you want to go deeper, we’ll talk about Stimulus in detail in a Stimulus Tutorial on SymfonyCasts soon.

Lazy Controllers¶

        Contributed by 
        Ryan Weaver 
        in #15.

First, in controllers.json, the webpackMode key has been replaced by fetch. This enables a powerful new feature: if you set fetch to lazy for a package, that package’s JavaScript won’t be downloaded until it’s needed! How is that possible? Internally (by leveraging Stimulus & Webpack), the controller code is split into its own JavaScript file. Then, the moment a matching data-controller= appears on the page, the file will be downloaded and executed. A great use-case is ux-chartjs. By setting fetch: 'lazy', you can build a Chart in PHP and render it on any page… but without incurring any extra code in the JavaScript that’s downloaded on page load.

Laziness for Your Controllers¶ This “lazy controllers” feature is so neat that we wanted to allow you to use it for your own controllers. By default, if you put a controller file in assets/controllers, it will be automatically loaded but included on every page. What if you only need that controller in rare situations? You can now tell the stimulus-loader to load your controller “lazy” by decorating it with a special comment: 1 2 3 4 5 6 7// assets/controllers/hello_controller.js import { Controller } from 'stimulus';

/ stimulusFetch: 'lazy' / export default class extends Controller { // ... }

By including the / stimulusFetch: 'lazy' / comment, this entire controller file (and its dependencies) won’t be downloaded until a matching data-controller element appears on the page.

Upgrading to stimulus-bridge 2.0¶ To upgrade, make sure you have 2.0 of the package and at least 1.0 of Encore: 1 2$ yarn upgrade "@symfony/stimulus-bridge@^2.0.0" $ yarn upgrade "@symfony/webpack-encore@^1.0.0"

Also make sure you have the latest symfony/flex so it sets the new fetch option in controllers.json: 1$ composer up symfony/flex

Finally, in assets/bootstrap.js, make the following changes: 1 2 3 4 5 6 7 8 9import { startStimulusApp } from '@symfony/stimulus-bridge';

  • import '@symfony/autoimport';

  • export const app = startStimulusApp(require.context('./controllers', true, /.(j|t)sx?$/));

  • export const app = startStimulusApp(require.context(

  • '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',

  • true,

  • /.(j|t)sx?$/

  • ));

Version 2 also changed the format of the third party controller names. For example, the ux-chartjs controller was previously @symfony/ux-chartjs/chart and is now called symfony--ux-chartjs--chart.

Note Version 2 also changed the format of the third party controller names. For example, the ux-chartjs controller was previously @symfony/ux-chartjs/chart and is now called symfony--ux-chartjs--chart. If you’re using any UX library version 1.2 or higher (e.g. symfony/ux-chart-js), make sure to upgrade to the latest version of stimulus-bridge.

That’s it! Keep watching the blog and Symfony UX for more updates!

                Sponsor the Symfony project.

http://feedproxy.google.com/~r/symfony/blog/~3/RycI780uPYY/webpack-encore-1-0-and-stimulus-bridge-2-0-released

Établi 5y | 3 févr. 2021, 12:20:15


Connectez-vous pour ajouter un commentaire

Autres messages de ce groupe

A Week of Symfony #967 (July 7–13, 2025)

This week, Symfony unveiled the Symfony AI initiative, a set of components and bundles designed to bring powerful AI capabilities directly into your PHP applications. In addition, we published travel

13 juil. 2025, 09:20:11 | Symfony
Kicking off the Symfony AI Initiative

Today we are happy to announce a new Symfony initiative called Symfony AI - with the goal to provide a comprehensive set of components and bundles designed to bring powerful AI capabilities directly i

11 juil. 2025, 13:20:27 | Symfony
SymfonyCon Amsterdam 2025: Travel & Lodging Tips

SymfonyCon Amsterdam 2025, our next annual international Symfony conference, will take place on:

November 25 & 26: 2 workshops days with several topics to learn, practice and improve your skills

11 juil. 2025, 08:40:20 | Symfony
A Week of Symfony #966 (June 30 – July 6, 2025)

This week, development on the upcoming Symfony 8.0 version continued with the removal of deprecated features and the marking of several classes as final. In addition, we published two new case studies

6 juil. 2025, 08:10:15 | Symfony
Case study: Modernizing Audi France’s Digital Ecosystem with Symfony 6

At Wide, Micropole’s digital agency, they help leading brands modernize their digital infrastructures while ensuring scalability, security, and performance. When Audi France approached them to migrate

4 juil. 2025, 09:40:14 | Symfony
Case study: A Long-Term Powerhouse Behind Vente-unique.com's E-Commerce Success (Zero Churn, All Wins!)

Vente-unique.com, a leading European online retailer of furniture and home decor, operates in 11 countries, powered by a team of 400 professionals and serving more than 3 million customers. From 15 ye

2 juil. 2025, 09:10:03 | Symfony
A Week of Symfony #965 (June 23–29, 2025)

This week, Symfony 6.4.23, 7.2.8 and 7.3.1 maintenance versions were released. Meanwhile, the upcoming Symfony 7.4 version continued adding new features such as better controller helpers, more precisi

29 juin 2025, 09:10:15 | Symfony