minor #16323 Adding docs for Stimulus, Turbo & Symfony UX (weaverryan)

This PR was squashed before being merged into the 5.4 branch.

Discussion
----------

Adding docs for Stimulus, Turbo & Symfony UX

Hi!

A long overdue PR to update the Encore section to reflect Stimulus & Symfony UX.

Cheers!

Commits
-------

4c5ed02 Adding docs for Stimulus, Turbo & Symfony UX

Author: javiereguiluz

.github/workflows/ci.yaml

@@ -118,7 +118,7 @@ jobs:
 
           - name: Install dependencies
             if: ${{ steps.find-files.outputs.files }}
-            run: composer create-project symfony-tools/code-block-checker _checker
+            run: composer create-project symfony-tools/code-block-checker:@dev _checker
 
           - name: Install test application
             if: ${{ steps.find-files.outputs.files }}

_build/redirection_map

@@ -513,6 +513,7 @@
 /components/stopwatch https://github.com/symfony/stopwatch
 /service_container/3.3-di-changes https://symfony.com/doc/3.4/service_container/3.3-di-changes.html
 /frontend/encore/shared-entry /frontend/encore/split-chunks
+/frontend/encore/page-specific-assets /frontend/encore/simple-example#page-specific-javascript-or-css
 /testing/functional_tests_assertions /testing#testing-application-assertions
 /components https://symfony.com/components
 /components/index https://symfony.com/components

frontend.rst

@@ -40,7 +40,7 @@ Getting Started
 ...............
 
 * :doc:`Installation </frontend/encore/installation>`
-* :doc:`First Example </frontend/encore/simple-example>`
+* :doc:`Using Webpack Encore </frontend/encore/simple-example>`
 
 Adding more Features
 ....................
@@ -67,7 +67,6 @@ Guides
 ......
 
 * :doc:`Using Bootstrap CSS & JS </frontend/encore/bootstrap>`
-* :doc:`Creating Page-Specific CSS/JS </frontend/encore/page-specific-assets>`
 * :doc:`jQuery and Legacy Applications </frontend/encore/legacy-applications>`
 * :doc:`Passing Information from Twig to JavaScript </frontend/encore/server-data>`
 * :doc:`webpack-dev-server and Hot Module Replacement (HMR) </frontend/encore/dev-server>`

frontend/encore/installation.rst

@@ -82,15 +82,13 @@ is the main config file for both Webpack and Webpack Encore:
         /*
          * ENTRY CONFIG
          *
-         * Add 1 entry for each "page" of your app
-         * (including one that's included on every page - e.g. "app")
-         *
          * Each entry will result in one JavaScript file (e.g. app.js)
          * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
          */
         .addEntry('app', './assets/app.js')
-        //.addEntry('page1', './assets/page1.js')
-        //.addEntry('page2', './assets/page2.js')
+
+        // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
+        .enableStimulusBridge('./assets/controllers.json')
 
         // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
         .splitEntryChunks()
@@ -112,6 +110,10 @@ is the main config file for both Webpack and Webpack Encore:
         // enables hashed filenames (e.g. app.abc123.css)
         .enableVersioning(Encore.isProduction())
 
+        .configureBabel((config) => {
+            config.plugins.push('@babel/plugin-proposal-class-properties');
+        })
+
         // enables @babel/preset-env polyfills
         .configureBabelPresetEnv((config) => {
             config.useBuiltIns = 'usage';
@@ -124,16 +126,15 @@ is the main config file for both Webpack and Webpack Encore:
         // uncomment if you use TypeScript
         //.enableTypeScriptLoader()
 
+        // uncomment if you use React
+        //.enableReactPreset()
+
         // uncomment to get integrity="..." attributes on your script & link tags
         // requires WebpackEncoreBundle 1.4 or higher
         //.enableIntegrityHashes(Encore.isProduction())
 
         // uncomment if you're having problems with a jQuery plugin
         //.autoProvidejQuery()
-
-        // uncomment if you use API Platform Admin (composer require api-admin)
-        //.enableReactPreset()
-        //.addEntry('admin', './assets/admin.js')
     ;
 
     module.exports = Encore.getWebpackConfig();
@@ -154,10 +155,8 @@ Next, open the new ``assets/app.js`` file which contains some JavaScript code
     // any CSS you import will output into a single css file (app.css in this case)
     import './styles/app.css';
 
-    // Need jQuery? Install it with "yarn add jquery"(or "npm install jquery"), then uncomment to import it.
-    // import $ from 'jquery';
-
-    console.log('Hello Webpack Encore! Edit me in assets/app.js');
+    // start the Stimulus application
+    import './bootstrap';
 
 And the new ``assets/styles/app.css`` file:
 
@@ -168,7 +167,37 @@ And the new ``assets/styles/app.css`` file:
         background-color: lightgray;
     }
 
+You should also add an ``assets/bootstrap.js`` file, which initializes Stimulus:
+a system that you'll learn about soon:
+
+.. code-block:: javascript
+
+    // assets/bootstrap.js
+    import { startStimulusApp } from '@symfony/stimulus-bridge';
+
+    // Registers Stimulus controllers from controllers.json and in the controllers/ directory
+    export const app = startStimulusApp(require.context(
+        '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
+        true,
+        /\.(j|t)sx?$/
+    ));
+
+    // register any custom, 3rd party controllers here
+    // app.register('some_controller_name', SomeImportedController);
+
+And finally, create an ``assets/controllers.json`` file, which also fits into
+the Stimulus system:
+
+```json
+{
+    "controllers": [],
+    "entrypoints": []
+}
+```
+
 You'll customize and learn more about these files in :doc:`/frontend/encore/simple-example`.
+When you execute Encore, it will ask you to install a few more dependencies based
+on which features of Encore you have enabled.
 
 .. caution::