further refactoring most documentation to StimulusBundle

Author: weaverryan

frontend/ux.rst

@@ -3,7 +3,7 @@ Stimulus & Symfony UX
 
 .. tip::
 
-    Check out live demos of Symfony UX at `https://ux.symfony.com`_!
+    Check out live demos of Symfony UX at https://ux.symfony.com!
 
 Symfony UX is an initiative and set of libraries to seamlessly
 integrate JavaScript tools into your application. For example,
@@ -17,41 +17,14 @@ your page.
 Installing Symfony UX
 ---------------------
 
-To install Symfony UX, either install :doc:`Webpack Encore </frontend/encore/installation>`
-or :doc:`Asset Mapper </frontend/asset-mapper>` - see
-:doc:`Encore vs AssetMapper </frontend>` to
-learn which is best for your project.
+Installing Symfony UX actually means installing StimulusBundle: a bundle that
+offers helper functions for the `Stimulus`_ JavaScript library and helps
+integrate extra Stimulus controllers from the UX packages.
 
-Once that's set up, run:
+Read: `Installing StimulusBundle`_.
 
-.. code-block:: terminal
-
-    $ composer require symfony/stimulus-bundle
-
-The last steps depend on which asset management tool you chose:
-
-.. tabs::
-
-    .. group-tab:: Webpack Encore
-
-        Webpack Encore stuff!
-
-    .. group-tab:: AssetMapper
-
-        AssetMapper stuff!
-
-Then, install any of the UX packages listed below. For example, to install
-
-Before you install any specific UX library, make sure you've installed
-
-
-If you already have it installed, make sure you have an
-``assets/bootstrap.js`` file (this initializes Stimulus & the UX packages),
-an ``assets/controllers.json`` file (this controls the 3rd party UX packages that
-you've installed) and ``.enableStimulusBridge('./assets/controllers.json')`` in
-your ``webpack.config.js`` file. If these are missing, try upgrading the
-``symfony/webpack-encore-bundle`` Flex recipe. See
-:ref:`Upgrading Flex Recipes <updating-flex-recipes>`.
+Then, `create your own Stimulus controllers`_ or install one of the
+Symfony UX packages below.
 
 .. _ux-packages-list:
 
@@ -72,106 +45,10 @@ exist beyond the UX packages:
 * `stimulus-components`_ A large number of pre-made Stimulus controllers, like for
   Copying to clipboard, Sortable, Popover (similar to tooltips) and much more.
 
-How does Symfony UX Work?
--------------------------
-
-When you install a UX PHP package, Symfony Flex will automatically update your
-``package.json`` file to point to a "virtual package" that lives inside the
-PHP package. For example:
-
-.. code-block:: json
-
-    {
-        "devDependencies": {
-            "...": "",
-            "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/assets"
-        }
-    }
-
-This gives you a *real* Node package (e.g. ``@symfony/ux-chartjs``) that, instead
-of being downloaded, points directly to files that already live in your ``vendor/``
-directory.
-
-The Flex recipe will usually also update your ``assets/controllers.json`` file
-to add a new Stimulus controller to your app. For example:
-
-.. code-block:: json
-
-    {
-        "controllers": {
-            "@symfony/ux-chartjs": {
-                "chart": {
-                    "enabled": true,
-                    "fetch": "eager"
-                }
-            }
-        },
-        "entrypoints": []
-    }
-
-Finally, your ``assets/bootstrap.js`` file - working with the `@symfony/stimulus-bridge`_ -
-package will automatically register:
-
-* All files in ``assets/controllers/`` as Stimulus controllers;
-* And all controllers described in ``assets/controllers.json`` as Stimulus controllers.
-
-The end result: you install a package, and you instantly have a Stimulus
-controller available! In this example, it's called
-``@symfony/ux-chartjs/chart``. Well, technically, it will be called
-``symfony--ux-chartjs--chart``. However, you can pass the original name
-into the ``{{ stimulus_controller() }}`` function from WebpackEncoreBundle, and
-it will normalize it:
-
-.. code-block:: html+twig
-
-    <div {{ stimulus_controller('@symfony/ux-chartjs/chart') }}>
-
-    <!-- will render as: -->
-    <div data-controller="symfony--ux-chartjs--chart">
-
-Lazy Controllers
-----------------
-
-By default, all of your controllers (i.e. files in ``assets/controllers/`` +
-controllers in ``assets/controllers.json``) will be downloaded and loaded on
-every page.
-
-Sometimes you may have a controller that is only used on some pages, or maybe
-only in your admin area. In that case, you can make the controller "lazy". When
-a controller is lazy, it is *not* downloaded on initial page load. Instead, as
-soon as an element appears on the page matching the controller (e.g.
-``<div data-controller="hello">``), the controller - and anything else it imports -
-will be lazyily-loaded via Ajax.
-
-To make one of your custom controllers lazy, add a special comment on top:
-
-.. code-block:: javascript
-
-    import { Controller } from '@hotwired/stimulus';
-
-    /* stimulusFetch: 'lazy' */
-    export default class extends Controller {
-        // ...
-    }
-
-To make a third-party controller lazy, in ``assets/controllers.json``, set
-``fetch`` to ``lazy``.
-
-.. note::
-
-    If you write your controllers using TypeScript, make sure
-    ``removeComments`` is not set to ``true`` in your TypeScript config.
-
-More Advanced Setup
--------------------
-
-To learn about more advanced options, read about `@symfony/stimulus-bridge`_,
-the Node package that is responsible for a lot of the magic.
-
 .. _`Chart.js`: https://www.chartjs.org/
 .. _`UX Chart.js`: https://symfony.com/bundles/ux-chartjs/current/index.html
 .. _`Stimulus`: https://stimulus.hotwired.dev/
-.. _`@symfony/stimulus-bridge`: https://github.com/symfony/stimulus-bridge
 .. _`stimulus-use`: https://stimulus-use.github.io/stimulus-use
 .. _`stimulus-components`: https://stimulus-components.netlify.app/
-.. _`https://ux.symfony.com`: https://ux.symfony.com
+.. _Installing StimulusBundle: https://symfony.com/bundles/StimulusBundle/current/index.html#installation
+.. _create your own Stimulus controllers: https://symfony.com/bundles/StimulusBundle/current/index.html#usage