diff --git a/src/Autocomplete/doc/index.rst b/src/Autocomplete/doc/index.rst
index 8240b432710..ddcb0bc10a3 100644
--- a/src/Autocomplete/doc/index.rst
+++ b/src/Autocomplete/doc/index.rst
@@ -30,6 +30,10 @@ needed if you're using AssetMapper):
$ npm install --force
$ npm run watch
+.. note::
+
+ Alternatively, the `@symfony/ux-autocomplete package`_ can be used to install the JavaScript assets without requiring PHP.
+
Usage in a Form (without Ajax)
------------------------------
@@ -288,7 +292,7 @@ Passing Extra Options to the Ajax-powered Autocomplete
Autocomplete field options are **not preserved** when the field is rendered
on an Ajax call. So, features like exclude some options based on the current
-form data are not possible by default.
+form data are not possible by default.
To partially avoid this limitation, the ``extra_options`` option was added.
@@ -299,7 +303,7 @@ To partially avoid this limitation, the ``extra_options`` option was added.
can be passed as extra options.
Considering the following example, when the form type is rendered for the first
-time, it will use the ``query_builder`` defined while adding a ``food`` field
+time, it will use the ``query_builder`` defined while adding a ``food`` field
to the ``FoodForm``. However, when the Ajax is used to fetch the results, on
the consequent renders, the default ``query_builder`` will be used::
@@ -324,8 +328,8 @@ the consequent renders, the default ``query_builder`` will be used::
}
}
-If some food can be consisted of other foods, we might want to exclude the
-"root" food from the list of available foods. To achieve this, we can remove
+If some food can be consisted of other foods, we might want to exclude the
+"root" food from the list of available foods. To achieve this, we can remove
the ``query_builder`` option from the above example and pass the ``excluded_foods``
extra option to the ``FoodAutocompleteField``::
@@ -600,13 +604,13 @@ Passing Extra Options to the Autocompleter
The ability to pass extra options was added in Autocomplete 2.14.
-If you need to pass extra options to the autocompleter, you can do so by
-implementing the ``\Symfony\UX\Autocomplete\OptionsAwareEntityAutocompleterInterface``
+If you need to pass extra options to the autocompleter, you can do so by
+implementing the ``\Symfony\UX\Autocomplete\OptionsAwareEntityAutocompleterInterface``
interface.
.. tip::
- If you want to know **why** you might need to use the ``extra_options``
+ If you want to know **why** you might need to use the ``extra_options``
feature, see :ref:`passing-extra-options-to-the-ajax-powered-autocomplete`.
.. code-block:: diff
@@ -757,3 +761,4 @@ the Symfony framework: https://symfony.com/doc/current/contributing/code/bc.html
.. _`Tom Select Render Templates`: https://tom-select.js.org/docs/#render-templates
.. _`Tom Select Option Group`: https://tom-select.js.org/examples/optgroups/
.. _`Symfony Form`: https://symfony.com/doc/current/forms.html
+.. _`@symfony/ux-autocomplete package`: https://www.npmjs.com/package/@symfony/ux-autocomplete
diff --git a/src/Chartjs/doc/index.rst b/src/Chartjs/doc/index.rst
index c4850741c86..5d9bc357806 100644
--- a/src/Chartjs/doc/index.rst
+++ b/src/Chartjs/doc/index.rst
@@ -22,6 +22,10 @@ needed if you're using AssetMapper):
$ npm install --force
$ npm run watch
+.. note::
+
+ Alternatively, the `@symfony/ux-chartjs package`_ can be used to install the JavaScript assets without requiring PHP.
+
Usage
-----
@@ -253,3 +257,4 @@ the Symfony framework: https://symfony.com/doc/current/contributing/code/bc.html
.. _`zoom plugin documentation`: https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/integration.html
.. _`register Chart.js plugins globally`: https://www.chartjs.org/docs/latest/developers/plugins.html
.. _`Tooltip positioner`: https://www.chartjs.org/docs/latest/samples/tooltip/position.html
+.. _`@symfony/ux-chartjs package`: https://www.npmjs.com/package/@symfony/ux-chartjs
diff --git a/src/Cropperjs/doc/index.rst b/src/Cropperjs/doc/index.rst
index 663948d8a01..38d495abff8 100644
--- a/src/Cropperjs/doc/index.rst
+++ b/src/Cropperjs/doc/index.rst
@@ -26,6 +26,10 @@ needed if you're using AssetMapper):
$ npm install --force
$ npm run watch
+.. note::
+
+ Alternatively, the `@symfony/ux-cropperjs package`_ can be used to install the JavaScript assets without requiring PHP.
+
Usage
-----
@@ -149,3 +153,4 @@ https://symfony.com/doc/current/contributing/code/bc.html
.. _`the Symfony UX initiative`: https://ux.symfony.com/
.. _`the Cropper.js options`: https://github.com/fengyuanchen/cropperjs/blob/main/README.md#options
.. _StimulusBundle configured in your app: https://symfony.com/bundles/StimulusBundle/current/index.html
+.. _`@symfony/ux-cropperjs package`: https://www.npmjs.com/package/@symfony/ux-cropperjs
diff --git a/src/Dropzone/doc/index.rst b/src/Dropzone/doc/index.rst
index c5af43dce0f..1bec7f049a4 100644
--- a/src/Dropzone/doc/index.rst
+++ b/src/Dropzone/doc/index.rst
@@ -28,6 +28,10 @@ needed if you're using AssetMapper):
$ npm install --force
$ npm run watch
+.. note::
+
+ Alternatively, the `@symfony/ux-dropzone package`_ can be used to install the JavaScript assets without requiring PHP.
+
Usage
-----
@@ -155,3 +159,4 @@ https://symfony.com/doc/current/contributing/code/bc.html
.. _`the Symfony UX initiative`: https://ux.symfony.com/
.. _StimulusBundle configured in your app: https://symfony.com/bundles/StimulusBundle/current/index.html
+.. _`@symfony/ux-dropzone package`: https://www.npmjs.com/package/@symfony/ux-dropzone
diff --git a/src/LazyImage/doc/index.rst b/src/LazyImage/doc/index.rst
index 2454ab9432b..04b8d7c4021 100644
--- a/src/LazyImage/doc/index.rst
+++ b/src/LazyImage/doc/index.rst
@@ -36,6 +36,10 @@ needed if you're using AssetMapper):
$ npm install --force
$ npm run watch
+.. note::
+
+ Alternatively, the `@symfony/ux-lazy-image package`_ can be used to install the JavaScript assets without requiring PHP.
+
Usage
-----
@@ -216,7 +220,7 @@ on the page and should be less than 2.5 seconds. It's part of the `Core Web Vita
and is used by Google to evaluate the user experience of a website, impacting
the Search ranking.
-Using the Symfony UX LazyImage for your LCP image can be a good idea at first,
+Using the Symfony UX LazyImage for your LCP image can be a good idea at first,
but in reality, it will lower the LCP score because:
- `The progressive loading (through blurhash) is not taken into account in the LCP calculation`_;
@@ -239,7 +243,7 @@ A solution is to not use the Stimulus controller for the LCP image but to use
width="200"
height="150"
/>
-
+
This way, the browser will display the BlurHash image as soon as possible, and
will load the high-definition image at the same time, without waiting for the
Stimulus controller to be loaded.
@@ -262,3 +266,4 @@ https://symfony.com/doc/current/contributing/code/bc.html
.. _`Core Web Vitals`: https://web.dev/vitals/
.. _`The progressive loading (through blurhash) is not taken into account in the LCP calculation`: https://github.com/w3c/largest-contentful-paint/issues/71_
.. _`didn't preload the image`: https://symfony.com/doc/current/web_link.html
+.. _`@symfony/ux-lazy-image package`: https://www.npmjs.com/package/@symfony/ux-lazy-image
diff --git a/src/LiveComponent/doc/index.rst b/src/LiveComponent/doc/index.rst
index 69bc0937653..2314c26da53 100644
--- a/src/LiveComponent/doc/index.rst
+++ b/src/LiveComponent/doc/index.rst
@@ -83,6 +83,10 @@ needed if you're using AssetMapper):
$ npm install --force
$ npm run watch
+.. note::
+
+ Alternatively, the `@symfony/ux-live-component package`_ can be used to install the JavaScript assets without requiring PHP.
+
If your project is localized in different languages (either via the `locale route parameter`_
or by `setting the locale in the request`_) add the ``{_locale}`` attribute to
the UX Live Components route definition to keep the locale between re-renders:
@@ -3790,7 +3794,7 @@ uses Symfony's test client to render and make requests to your components::
// authenticate a user ($user is instance of UserInterface)
$testComponent->actingAs($user);
- // set the '_locale' route parameter (if the component route is localized)
+ // set the '_locale' route parameter (if the component route is localized)
$testComponent->setRouteLocale('fr');
// customize the test client
@@ -3892,3 +3896,4 @@ promise. However, any internal implementation in the JavaScript files
.. _`locale route parameter`: https://symfony.com/doc/current/translation.html#the-locale-and-the-url
.. _`setting the locale in the request`: https://symfony.com/doc/current/translation.html#translation-locale
.. _`Stimulus action parameter`: https://stimulus.hotwired.dev/reference/actions#action-parameters
+.. _`@symfony/ux-live-component package`: https://www.npmjs.com/package/@symfony/ux-live-component
diff --git a/src/Map/doc/index.rst b/src/Map/doc/index.rst
index b97955f2cee..c36ea6109c9 100644
--- a/src/Map/doc/index.rst
+++ b/src/Map/doc/index.rst
@@ -16,14 +16,6 @@ Install the bundle using Composer and Symfony Flex:
$ composer require symfony/ux-map
-If you're using WebpackEncore, install your assets and restart Encore (not
-needed if you're using AssetMapper):
-
-.. code-block:: terminal
-
- $ npm install --force
- $ npm run watch
-
Configuration
-------------
@@ -140,25 +132,25 @@ Remove elements from Map
~~~~~~~~~~~~~~~~~~~~~~~~
It is possible to remove elements like ``Marker``, ``Polygon`` and ``Polyline`` instances by using ``Map::remove*()`` methods::
-
+
// Add elements
$map->addMarker($marker = new Marker(/* ... */));
$map->addPolygon($polygon = new Polygon(/* ... */));
$map->addPolyline($polyline = new Polyline(/* ... */));
-
+
// And later, remove those elements
$map->removeMarker($marker);
$map->removePolygon($polygon);
$map->removePolyline($polyline);
-
+
If unfortunately you were unable to store an element instance, you can still remove them by passing the identifier string::
-
+
$map = new Map(/* ... */);
// Add elements
$map->addMarker(new Marker(id: 'my-marker', /* ... */));
$map->addPolygon(new Polygon(id: 'my-polygon', /* ... */));
$map->addPolyline(new Polyline(id: 'my-marker', /* ... */));
-
+
// And later, remove those elements
$map->removeMarker('my-marker');
$map->removePolygon('my-polygon');
diff --git a/src/Map/src/Bridge/Google/README.md b/src/Map/src/Bridge/Google/README.md
index 94a6ae8fd1b..8c39d74c250 100644
--- a/src/Map/src/Bridge/Google/README.md
+++ b/src/Map/src/Bridge/Google/README.md
@@ -2,6 +2,25 @@
[Google Maps](https://developers.google.com/maps/documentation/javascript/overview) integration for Symfony UX Map.
+## Installation
+
+Install the bundle using Composer and Symfony Flex:
+
+```shell
+composer require symfony/ux-google-map
+```
+
+If you're using WebpackEncore, install your assets and restart Encore (not
+needed if you're using AssetMapper):
+
+```shell
+npm install --force
+npm run watch
+```
+
+> [!NOTE]
+> Alternatively, [@symfony/ux-google-map package](https://www.npmjs.com/package/@symfony/ux-google-map) can be used to install the JavaScript assets without requiring PHP.
+
## DSN example
```dotenv
diff --git a/src/Map/src/Bridge/Leaflet/README.md b/src/Map/src/Bridge/Leaflet/README.md
index b0513b9442f..76b57752006 100644
--- a/src/Map/src/Bridge/Leaflet/README.md
+++ b/src/Map/src/Bridge/Leaflet/README.md
@@ -2,6 +2,25 @@
[Leaflet](https://leafletjs.com/) integration for Symfony UX Map.
+## Installation
+
+Install the bundle using Composer and Symfony Flex:
+
+```shell
+composer require symfony/ux-leaflet-map
+```
+
+If you're using WebpackEncore, install your assets and restart Encore (not
+needed if you're using AssetMapper):
+
+```shell
+npm install --force
+npm run watch
+```
+
+> [!NOTE]
+> Alternatively, [@symfony/ux-leaflet-map package](https://www.npmjs.com/package/@symfony/ux-leaflet-map) can be used to install the JavaScript assets without requiring PHP.
+
## DSN example
```dotenv
diff --git a/src/Notify/doc/index.rst b/src/Notify/doc/index.rst
index f6c75eaf40c..28f7d7a19cd 100644
--- a/src/Notify/doc/index.rst
+++ b/src/Notify/doc/index.rst
@@ -25,6 +25,10 @@ needed if you're using AssetMapper):
$ npm install --force
$ npm run watch
+.. note::
+
+ Alternatively, the `@symfony/ux-notify package`_ can be used to install the JavaScript assets without requiring PHP.
+
Usage
-----
@@ -154,3 +158,4 @@ https://symfony.com/doc/current/contributing/code/bc.html
.. _`Mercure`: https://mercure.rocks
.. _`running Mercure server`: https://symfony.com/doc/current/mercure.html#running-a-mercure-hub
.. _`native notifications`: https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
+.. _`@symfony/ux-notify package`: https://www.npmjs.com/package/@symfony/ux-notify
diff --git a/src/React/doc/index.rst b/src/React/doc/index.rst
index 2261bf9cd8c..9210631534d 100644
--- a/src/React/doc/index.rst
+++ b/src/React/doc/index.rst
@@ -37,6 +37,10 @@ Next, install a package to help React:
$ npm install -D @babel/preset-react --force
$ npm run watch
+.. note::
+
+ Alternatively, the `@symfony/ux-react package`_ can be used to install the JavaScript assets without requiring PHP.
+
That's it! Any files inside ``assets/react/controllers/`` can now be rendered as
React components.
@@ -99,21 +103,21 @@ Permanent components
The ability to mark a component ``permanent`` was added in UX React 2.21.
The controller responsible to render the React components can be configured
-to keep the React component mounted when the root element is removed from
+to keep the React component mounted when the root element is removed from
the DOM, using the ``permanent`` option.
This is particularly useful when the root element of a component is moved around
-in the DOM or is removed and immediately re-added to the DOM (e.g. when using
+in the DOM or is removed and immediately re-added to the DOM (e.g. when using
`Turbo`_ and its `data-turbo-permanent` attribute).
.. code-block:: html+twig
{# templates/home.html.twig #}
{% extends 'base.html.twig' %}
-
+
{# The React component will stay mounted if the div is moved in the DOM #}
- Loading...
+ Loading...
.. _using-with-asset-mapper:
@@ -156,3 +160,4 @@ https://symfony.com/doc/current/contributing/code/bc.html
.. _`Symfony UX initiative`: https://ux.symfony.com/
.. _`Symfony UX React demo`: https://ux.symfony.com/react
.. _`Turbo`: https://turbo.hotwire.dev/
+.. _`@symfony/ux-react package`: https://www.npmjs.com/package/@symfony/ux-react
diff --git a/src/StimulusBundle/doc/index.rst b/src/StimulusBundle/doc/index.rst
index 88ede629614..6d07073c770 100644
--- a/src/StimulusBundle/doc/index.rst
+++ b/src/StimulusBundle/doc/index.rst
@@ -39,6 +39,10 @@ necessary files. If not, or you're curious, see :ref:`Manual Setup inside and the "defer" Attribute`: https://symfony.com/blog/moving-script-inside-head-and-the-defer-attribute
.. _`Expression Language`: https://symfony.com/doc/current/components/expression_language.html
+.. _`@symfony/ux-turbo package`: https://www.npmjs.com/package/@symfony/ux-turbo
diff --git a/src/TwigComponent/doc/index.rst b/src/TwigComponent/doc/index.rst
index efccbcc6d15..931dc0aa894 100644
--- a/src/TwigComponent/doc/index.rst
+++ b/src/TwigComponent/doc/index.rst
@@ -1175,7 +1175,7 @@ Component with Complex Variants (CVA)
.. deprecated:: 2.20
- The ``cva`` function was deprecated in TwigComponents 2.20, and will be
+ The ``cva`` function was deprecated in TwigComponents 2.20, and will be
removed in 3.0. The function is now provided by the ``twig/html-extra:^3.12``
package under the name `html_cva`_.
@@ -1216,18 +1216,18 @@ Then use the ``color`` and ``size`` variants to select the classes needed:
...
-
+
{# will render as: #}
-
+
...
-
+
CVA and Tailwind CSS
~~~~~~~~~~~~~~~~~~~~
CVA integrates seamlessly with Tailwind CSS, though class conflicts may occur.
-Use the ``tailwind_merge()`` function from `tales-from-a-dev/twig-tailwind-extra`_
+Use the ``tailwind_merge()`` function from `tales-from-a-dev/twig-tailwind-extra`_
to resolve conflicts:
.. code-block:: html+twig
@@ -1268,9 +1268,9 @@ Define compound variants for conditions involving multiple variants:
...
-
+
{# will render as: #}
-
+
...
@@ -1309,7 +1309,7 @@ If no variants match, you can define a default set of classes to apply:
...
-
+
Test Helpers
------------
diff --git a/src/Typed/doc/index.rst b/src/Typed/doc/index.rst
index f6423bbd699..8a7b74970ca 100644
--- a/src/Typed/doc/index.rst
+++ b/src/Typed/doc/index.rst
@@ -31,6 +31,10 @@ needed if you're using AssetMapper):
$ npm install --force
$ npm run watch
+.. note::
+
+ Alternatively, the `@symfony/ux-typed package`_ can be used to install the JavaScript assets without requiring PHP.
+
Usage
-----
@@ -151,3 +155,4 @@ https://symfony.com/doc/current/contributing/code/bc.html
.. _`the Symfony UX initiative`: https://ux.symfony.com/
.. _`typed library`: https://github.com/mattboldt/typed.js/blob/master/README.md
.. _StimulusBundle configured in your app: https://symfony.com/bundles/StimulusBundle/current/index.html
+.. _`@symfony/ux-typed package`: https://www.npmjs.com/package/@symfony/ux-typed
diff --git a/src/Vue/doc/index.rst b/src/Vue/doc/index.rst
index 3ab0ec8de06..6c58460e57d 100644
--- a/src/Vue/doc/index.rst
+++ b/src/Vue/doc/index.rst
@@ -35,6 +35,10 @@ Next, install a package to help Vue:
$ npm install -D vue-loader --force
$ npm run watch
+.. note::
+
+ Alternatively, the `@symfony/ux-vue package`_ can be used to install the JavaScript assets without requiring PHP.
+
That's it! Any files inside ``assets/vue/controllers/`` can now be rendered as
Vue components.
@@ -182,3 +186,4 @@ https://symfony.com/doc/current/contributing/code/bc.html
.. _`Vue.js`: https://vuejs.org/
.. _`the Symfony UX initiative`: https://ux.symfony.com/
.. _ `the related section of the documentation`: https://symfony.com/doc/current/frontend/encore/vuejs.html
+.. _`@symfony/ux-vue package`: https://www.npmjs.com/package/@symfony/ux-vue